{"version":3,"file":"Browser.cjs","sources":["../../../src/components/Browser/Browser.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  type ComponentProps,\n  type FC,\n  type KeyboardEventHandler,\n  useCallback,\n  useMemo,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { BrowserColumn } from './BrowserColumn'\nimport { ItemNode, type ItemNodeLike, RootNode } from './models'\nimport { getElementIdFromNode } from './utils'\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: ['smarthr-ui-Browser', 'shr-flex'],\n    column: ['shr-min-w-[13em] shr-list-none', '[&_+_&]:shr-border-l-shorthand'],\n  },\n  variants: {\n    maxColumn: {\n      1: {\n        column: 'shr-max-w-[theme(width.1/3)]',\n      },\n      2: {},\n      3: {},\n    },\n  },\n  compoundVariants: [\n    {\n      maxColumn: [2, 3],\n      className: {\n        column: 'last:shr-grow',\n      },\n    },\n  ],\n})\n\ntype AbstractProps = {\n  /** 表示する item の配列 */\n  items: ItemNodeLike[]\n  /** 選択中の item の値 */\n  value?: string\n  /** 選択された際に呼び出されるコールバック。第一引数に item の value を取る。 */\n  onSelectItem?: (value: string) => void\n}\ntype Props = AbstractProps & Omit<ComponentProps<'div'>, keyof AbstractProps>\n\nexport const Browser: FC<Props> = ({ value, items, onSelectItem, className, ...rest }) => {\n  const rootNode = useMemo(() => RootNode.from({ children: items }), [items])\n  const columns = useMemo(() => rootNode.toViewData(value), [rootNode, value])\n\n  const classNames = useMemo(() => {\n    const { wrapper, column } = classNameGenerator({ className })\n    return {\n      wrapper: wrapper(),\n      column: column({\n        maxColumn: columns.length as 1 | 2 | 3,\n      }),\n    }\n  }, [className, columns.length])\n\n  const selectedPath = useMemo(() => {\n    if (!value) return []\n    const node = rootNode.findByValue(value)\n    if (!node) return []\n    return [...node.getAncestors().map((n) => n.value), node.value]\n  }, [rootNode, value])\n\n  const selectedNode = useMemo(\n    () => (value ? rootNode.findByValue(value) : undefined),\n    [value, rootNode],\n  )\n\n  // FIXME: focusメソッドのfocusVisibleが主要ブラウザでサポートされたら使うようにしたい(現状ではマウスクリックでもfocusのoutlineが出てしまう)\n  // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/focus\n  const onDelegateKeyDown: KeyboardEventHandler = useCallback(\n    (e) => {\n      if (!selectedNode) {\n        return\n      }\n\n      let target: ItemNode | undefined = undefined\n\n      switch (e.key) {\n        case 'ArrowUp': {\n          target = selectedNode.getPrev() ?? selectedNode.parent?.getLastChild()\n\n          break\n        }\n        case 'ArrowDown': {\n          target = selectedNode.getNext() ?? selectedNode.parent?.getFirstChild()\n\n          break\n        }\n        case 'ArrowLeft': {\n          const node = selectedNode.parent\n\n          if (node instanceof ItemNode) {\n            target = node\n          }\n\n          break\n        }\n        case 'ArrowRight':\n        case 'Enter':\n        case ' ': {\n          target = selectedNode.getFirstChild()\n\n          break\n        }\n      }\n\n      if (target) {\n        e.preventDefault()\n        onSelectItem?.(target.value)\n        document.getElementById(getElementIdFromNode(target.value))?.focus()\n      }\n    },\n    [selectedNode, onSelectItem],\n  )\n\n  const onChangeInput = useMemo(\n    () =>\n      onSelectItem\n        ? (e: ChangeEvent<HTMLInputElement>) => onSelectItem(e.currentTarget.value)\n        : undefined,\n    [onSelectItem],\n  )\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <div {...rest} role=\"application\" onKeyDown={onDelegateKeyDown} className={classNames.wrapper}>\n      {columns.map((colItems, index) => (\n        <BrowserColumn\n          key={index}\n          items={colItems}\n          index={index}\n          value={selectedPath[index]}\n          onChangeInput={onChangeInput}\n          className={classNames.column}\n        />\n      ))}\n    </div>\n  )\n}\n"],"names":["tv","useMemo","RootNode","useCallback","ItemNode","getElementIdFromNode","_jsx","BrowserColumn"],"mappings":"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"}