{"version":3,"file":"BrowserColumn.cjs","sources":["../../../src/components/Browser/BrowserColumn.tsx"],"sourcesContent":["import { type ChangeEvent, type ComponentProps, type FC, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { BrowserItem } from './BrowserItem'\n\nimport type { ItemNode } from './models'\n\nconst getColumnId = (column: number) => `column-${column}`\n\ntype AbstractProps = {\n  value?: string\n  items: ItemNode[]\n  index: number\n  onChangeInput?: (e: ChangeEvent<HTMLInputElement>) => void\n}\ntype Props = AbstractProps & Omit<ComponentProps<'ul'>, keyof AbstractProps>\n\nconst classNameGenerator = tv({\n  base: 'shr-px-0.25 shr-py-0.5',\n})\n\nexport const BrowserColumn: FC<Props> = ({\n  items,\n  index: columnIndex,\n  value,\n  onChangeInput,\n  className,\n  ...rest\n}) => {\n  const actualClassName = useMemo(() => classNameGenerator({ className }), [className])\n\n  return (\n    <ul {...rest} className={actualClassName} id={getColumnId(columnIndex)}>\n      {items.map((item, rowIndex) => (\n        <ListItem\n          key={rowIndex}\n          itemValue={item.value}\n          itemLabel={item.label}\n          itemHasChildren={item.children.length > 0}\n          value={value}\n          columnIndex={columnIndex}\n          rowIndex={rowIndex}\n          onChangeInput={onChangeInput}\n        />\n      ))}\n    </ul>\n  )\n}\n\ntype ListItemProps = Pick<Props, 'value' | 'onChangeInput'> & {\n  itemValue: ItemNode['value']\n  itemLabel: ItemNode['label']\n  itemHasChildren: boolean\n  columnIndex: Props['index']\n  rowIndex: number\n}\n\nconst ListItem = memo<ListItemProps>(\n  ({ itemValue, itemLabel, itemHasChildren, value, columnIndex, rowIndex, onChangeInput }) => {\n    const selected = itemValue === value\n    const ariaOwns = selected && itemHasChildren ? getColumnId(columnIndex + 1) : undefined\n    const tabIndex = selected || (!value && columnIndex === 0 && rowIndex === 0) ? 0 : -1\n\n    return (\n      <li key={rowIndex} aria-owns={ariaOwns}>\n        <BrowserItem\n          selected={selected}\n          itemValue={itemValue}\n          itemLabel={itemLabel}\n          itemHasChildren={itemHasChildren}\n          columnIndex={columnIndex}\n          tabIndex={tabIndex}\n          onChangeInput={onChangeInput}\n        />\n      </li>\n    )\n  },\n)\n"],"names":["tv","useMemo","_jsx","memo","BrowserItem"],"mappings":";;;;;;;AAOA,MAAM,WAAW,GAAG,CAAC,MAAc,KAAK,CAAA,OAAA,EAAU,MAAM,CAAA,CAAE;AAU1D,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE,wBAAwB;AAC/B,CAAA,CAAC;MAEW,aAAa,GAAc,CAAC,EACvC,KAAK,EACL,KAAK,EAAE,WAAW,EAClB,KAAK,EACL,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,eAAe,GAAGC,aAAO,CAAC,MAAM,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC;AAErF,IAAA,QACEC,cAAA,CAAA,IAAA,EAAA,EAAA,GAAQ,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,EAAE,EAAE,WAAW,CAAC,WAAW,CAAC,YACnE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,QAAQ,MACxBA,cAAA,CAAC,QAAQ,IAEP,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,eAAe,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EACzC,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAAA,EAPvB,QAAQ,CAQb,CACH,CAAC,EAAA,CACC;AAET;AAUA,MAAM,QAAQ,GAAGC,UAAI,CACnB,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAI;AACzF,IAAA,MAAM,QAAQ,GAAG,SAAS,KAAK,KAAK;AACpC,IAAA,MAAM,QAAQ,GAAG,QAAQ,IAAI,eAAe,GAAG,WAAW,CAAC,WAAW,GAAG,CAAC,CAAC,GAAG,SAAS;IACvF,MAAM,QAAQ,GAAG,QAAQ,KAAK,CAAC,KAAK,IAAI,WAAW,KAAK,CAAC,IAAI,QAAQ,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,EAAE;AAErF,IAAA,QACED,cAAA,CAAA,IAAA,EAAA,EAAA,WAAA,EAA8B,QAAQ,EAAA,QAAA,EACpCA,cAAA,CAACE,0CAAW,EAAA,EACV,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,aAAa,EAAA,CAC5B,IATK,QAAQ,CAUZ;AAET,CAAC,CACF;;;;"}