smarthr-ui 97.0.0 → 98.0.0

package/lib/components/Browser/Browser.cjs.map

@@ -1 +1 @@
-{"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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"}
+{"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  useRef,\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 unstableRef = useRef({ onSelectItem, value, rootNode })\n  unstableRef.current = { onSelectItem, value, rootNode }\n\n  // FIXME: focusメソッドのfocusVisibleが主要ブラウザでサポートされたら使うようにしたい(現状ではマウスクリックでもfocusのoutlineが出てしまう)\n  // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/focus\n  const onDelegateKeyDown: KeyboardEventHandler = useCallback((e) => {\n    const selectedNode = unstableRef.current.value\n      ? unstableRef.current.rootNode.findByValue(unstableRef.current.value)\n      : undefined\n\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      unstableRef.current.onSelectItem?.(target.value)\n      document.getElementById(getElementIdFromNode(target.value))?.focus()\n    }\n  }, [])\n\n  const onChangeInput = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n    unstableRef.current.onSelectItem?.(e.currentTarget.value)\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={onSelectItem ? onChangeInput : undefined}\n          className={classNames.column}\n        />\n      ))}\n    </div>\n  )\n}\n"],"names":["tv","useMemo","RootNode","useRef","useCallback","ItemNode","getElementIdFromNode","_jsx","BrowserColumn"],"mappings":";;;;;;;;;;AAeA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC;AAC3C,QAAA,MAAM,EAAE,CAAC,gCAAgC,EAAE,gCAAgC,CAAC;AAC7E,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,SAAS,EAAE;AACT,YAAA,CAAC,EAAE;AACD,gBAAA,MAAM,EAAE,8BAA8B;AACvC,aAAA;AACD,YAAA,CAAC,EAAE,EAAE;AACL,YAAA,CAAC,EAAE,EAAE;AACN,SAAA;AACF,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA;AACE,YAAA,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACjB,YAAA,SAAS,EAAE;AACT,gBAAA,MAAM,EAAE,eAAe;AACxB,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAYK,MAAM,OAAO,GAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;IACvF,MAAM,QAAQ,GAAGC,aAAO,CAAC,MAAMC,2CAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAC3E,MAAM,OAAO,GAAGD,aAAO,CAAC,MAAM,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;AAE5E,IAAA,MAAM,UAAU,GAAGA,aAAO,CAAC,MAAK;AAC9B,QAAA,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;QAC7D,OAAO;YACL,OAAO,EAAE,OAAO,EAAE;YAClB,MAAM,EAAE,MAAM,CAAC;gBACb,SAAS,EAAE,OAAO,CAAC,MAAmB;aACvC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;AAE/B,IAAA,MAAM,YAAY,GAAGA,aAAO,CAAC,MAAK;AAChC,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;QACrB,MAAM,IAAI,GAAG,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC;AACxC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,EAAE;QACpB,OAAO,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC;AACjE,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;AAErB,IAAA,MAAM,WAAW,GAAGE,YAAM,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC;IAC7D,WAAW,CAAC,OAAO,GAAG,EAAE,YAAY,EAAE,KAAK,EAAE,QAAQ,EAAE;;;AAIvD,IAAA,MAAM,iBAAiB,GAAyBC,iBAAW,CAAC,CAAC,CAAC,KAAI;AAChE,QAAA,MAAM,YAAY,GAAG,WAAW,CAAC,OAAO,CAAC;AACvC,cAAE,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,KAAK;cAClE,SAAS;QAEb,IAAI,CAAC,YAAY,EAAE;YACjB;QACF;QAEA,IAAI,MAAM,GAAyB,SAAS;AAE5C,QAAA,QAAQ,CAAC,CAAC,GAAG;YACX,KAAK,SAAS,EAAE;AACd,gBAAA,MAAM,GAAG,YAAY,CAAC,OAAO,EAAE,IAAI,YAAY,CAAC,MAAM,EAAE,YAAY,EAAE;gBAEtE;YACF;YACA,KAAK,WAAW,EAAE;AAChB,gBAAA,MAAM,GAAG,YAAY,CAAC,OAAO,EAAE,IAAI,YAAY,CAAC,MAAM,EAAE,aAAa,EAAE;gBAEvE;YACF;YACA,KAAK,WAAW,EAAE;AAChB,gBAAA,MAAM,IAAI,GAAG,YAAY,CAAC,MAAM;AAEhC,gBAAA,IAAI,IAAI,YAAYC,2CAAQ,EAAE;oBAC5B,MAAM,GAAG,IAAI;gBACf;gBAEA;YACF;AACA,YAAA,KAAK,YAAY;AACjB,YAAA,KAAK,OAAO;YACZ,KAAK,GAAG,EAAE;AACR,gBAAA,MAAM,GAAG,YAAY,CAAC,aAAa,EAAE;gBAErC;YACF;;QAGF,IAAI,MAAM,EAAE;YACV,CAAC,CAAC,cAAc,EAAE;YAClB,WAAW,CAAC,OAAO,CAAC,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC;AAChD,YAAA,QAAQ,CAAC,cAAc,CAACC,6CAAoB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE;QACtE;IACF,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,aAAa,GAAGF,iBAAW,CAAC,CAAC,CAAgC,KAAI;AACrE,QAAA,WAAW,CAAC,OAAO,CAAC,YAAY,GAAG,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;IAC3D,CAAC,EAAE,EAAE,CAAC;IAEN;;AAEE,IAAAG,cAAA,CAAA,KAAA,EAAA,EAAA,GAAS,IAAI,EAAE,IAAI,EAAC,aAAa,EAAC,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,QAAA,EAC1F,OAAO,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,MAC3BA,cAAA,CAACC,8CAAa,EAAA,EAEZ,KAAK,EAAE,QAAQ,EACf,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,EAC1B,aAAa,EAAE,YAAY,GAAG,aAAa,GAAG,SAAS,EACvD,SAAS,EAAE,UAAU,CAAC,MAAM,EAAA,EALvB,KAAK,CAMV,CACH,CAAC,EAAA,CACE;AAEV;;;;"}

package/lib/components/Browser/Browser.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { useMemo, useCallback } from 'react';
+import { useMemo, useRef, useCallback } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import { BrowserColumn } from './BrowserColumn.js';
 import { ItemNode } from './models/ItemNode.js';
@@ -49,10 +49,14 @@ const Browser = ({ value, items, onSelectItem, className, ...rest }) => {
             return [];
         return [...node.getAncestors().map((n) => n.value), node.value];
     }, [rootNode, value]);
-    const selectedNode = useMemo(() => (value ? rootNode.findByValue(value) : undefined), [value, rootNode]);
+    const unstableRef = useRef({ onSelectItem, value, rootNode });
+    unstableRef.current = { onSelectItem, value, rootNode };
     // FIXME: focusメソッドのfocusVisibleが主要ブラウザでサポートされたら使うようにしたい(現状ではマウスクリックでもfocusのoutlineが出てしまう)
     // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/focus
     const onDelegateKeyDown = useCallback((e) => {
+        const selectedNode = unstableRef.current.value
+            ? unstableRef.current.rootNode.findByValue(unstableRef.current.value)
+            : undefined;
         if (!selectedNode) {
             return;
         }
@@ -82,16 +86,16 @@ const Browser = ({ value, items, onSelectItem, className, ...rest }) => {
         }
         if (target) {
             e.preventDefault();
-            onSelectItem?.(target.value);
+            unstableRef.current.onSelectItem?.(target.value);
             document.getElementById(getElementIdFromNode(target.value))?.focus();
         }
-    }, [selectedNode, onSelectItem]);
-    const onChangeInput = useMemo(() => onSelectItem
-        ? (e) => onSelectItem(e.currentTarget.value)
-        : undefined, [onSelectItem]);
+    }, []);
+    const onChangeInput = useCallback((e) => {
+        unstableRef.current.onSelectItem?.(e.currentTarget.value);
+    }, []);
     return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    jsx("div", { ...rest, role: "application", onKeyDown: onDelegateKeyDown, className: classNames.wrapper, children: columns.map((colItems, index) => (jsx(BrowserColumn, { items: colItems, index: index, value: selectedPath[index], onChangeInput: onChangeInput, className: classNames.column }, index))) }));
+    jsx("div", { ...rest, role: "application", onKeyDown: onDelegateKeyDown, className: classNames.wrapper, children: columns.map((colItems, index) => (jsx(BrowserColumn, { items: colItems, index: index, value: selectedPath[index], onChangeInput: onSelectItem ? onChangeInput : undefined, className: classNames.column }, index))) }));
 };
 
 export { Browser };

package/lib/components/Browser/Browser.js.map

@@ -1 +1 @@
-{"version":3,"file":"Browser.js","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","_jsx"],"mappings":";;;;;;;;AAcA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,KAAK,EAAE;AACL,QAAA,OAAO,EAAE,CAAC,oBAAoB,EAAE,UAAU,CAAC;AAC3C,QAAA,MAAM,EAAE,CAAC,gCAAgC,EAAE,gCAAgC,CAAC;AAC7E,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,SAAS,EAAE;AACT,YAAA,CAAC,EAAE;AACD,gBAAA,MAAM,EAAE,8BAA8B;AACvC,aAAA;AACD,YAAA,CAAC,EAAE,EAAE;AACL,YAAA,CAAC,EAAE,EAAE;AACN,SAAA;AACF,KAAA;AACD,IAAA,gBAAgB,EAAE;AAChB,QAAA;AACE,YAAA,SAAS,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AACjB,YAAA,SAAS,EAAE;AACT,gBAAA,MAAM,EAAE,eAAe;AACxB,aAAA;AACF,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAYK,MAAM,OAAO,GAAc,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,KAAI;IACvF,MAAM,QAAQ,GAAG,OAAO,CAAC,MAAM,QAAQ,CAAC,IAAI,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAC3E,MAAM,OAAO,GAAG,OAAO,CAAC,MAAM,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;AAE5E,IAAA,MAAM,UAAU,GAAG,OAAO,CAAC,MAAK;AAC9B,QAAA,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;QAC7D,OAAO;YACL,OAAO,EAAE,OAAO,EAAE;YAClB,MAAM,EAAE,MAAM,CAAC;gBACb,SAAS,EAAE,OAAO,CAAC,MAAmB;aACvC,CAAC;SACH;IACH,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;AAE/B,IAAA,MAAM,YAAY,GAAG,OAAO,CAAC,MAAK;AAChC,QAAA,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;QACrB,MAAM,IAAI,GAAG,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC;AACxC,QAAA,IAAI,CAAC,IAAI;AAAE,YAAA,OAAO,EAAE;QACpB,OAAO,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC;AACjE,IAAA,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;AAErB,IAAA,MAAM,YAAY,GAAG,OAAO,CAC1B,OAAO,KAAK,GAAG,QAAQ,CAAC,WAAW,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,EACvD,CAAC,KAAK,EAAE,QAAQ,CAAC,CAClB;;;AAID,IAAA,MAAM,iBAAiB,GAAyB,WAAW,CACzD,CAAC,CAAC,KAAI;QACJ,IAAI,CAAC,YAAY,EAAE;YACjB;QACF;QAEA,IAAI,MAAM,GAAyB,SAAS;AAE5C,QAAA,QAAQ,CAAC,CAAC,GAAG;YACX,KAAK,SAAS,EAAE;AACd,gBAAA,MAAM,GAAG,YAAY,CAAC,OAAO,EAAE,IAAI,YAAY,CAAC,MAAM,EAAE,YAAY,EAAE;gBAEtE;YACF;YACA,KAAK,WAAW,EAAE;AAChB,gBAAA,MAAM,GAAG,YAAY,CAAC,OAAO,EAAE,IAAI,YAAY,CAAC,MAAM,EAAE,aAAa,EAAE;gBAEvE;YACF;YACA,KAAK,WAAW,EAAE;AAChB,gBAAA,MAAM,IAAI,GAAG,YAAY,CAAC,MAAM;AAEhC,gBAAA,IAAI,IAAI,YAAY,QAAQ,EAAE;oBAC5B,MAAM,GAAG,IAAI;gBACf;gBAEA;YACF;AACA,YAAA,KAAK,YAAY;AACjB,YAAA,KAAK,OAAO;YACZ,KAAK,GAAG,EAAE;AACR,gBAAA,MAAM,GAAG,YAAY,CAAC,aAAa,EAAE;gBAErC;YACF;;QAGF,IAAI,MAAM,EAAE;YACV,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC;AAC5B,YAAA,QAAQ,CAAC,cAAc,CAAC,oBAAoB,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE;QACtE;AACF,IAAA,CAAC,EACD,CAAC,YAAY,EAAE,YAAY,CAAC,CAC7B;AAED,IAAA,MAAM,aAAa,GAAG,OAAO,CAC3B,MACE;AACE,UAAE,CAAC,CAAgC,KAAK,YAAY,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK;AAC1E,UAAE,SAAS,EACf,CAAC,YAAY,CAAC,CACf;IAED;;AAEE,IAAAC,GAAA,CAAA,KAAA,EAAA,EAAA,GAAS,IAAI,EAAE,IAAI,EAAC,aAAa,EAAC,SAAS,EAAE,iBAAiB,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAA,QAAA,EAC1F,OAAO,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,KAAK,MAC3BA,IAAC,aAAa,EAAA,EAEZ,KAAK,EAAE,QAAQ,EACf,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,YAAY,CAAC,KAAK,CAAC,EAC1B,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,UAAU,CAAC,MAAM,EAAA,EALvB,KAAK,CAMV,CACH,CAAC,EAAA,CACE;AAEV;;;;"}
+{"version":3,"file":"Browser.js","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  useRef,\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 unstableRef = useRef({ onSelectItem, value, rootNode })\n  unstableRef.current = { onSelectItem, value, rootNode }\n\n  // FIXME: focusメソッドのfocusVisibleが主要ブラウザでサポートされたら使うようにしたい(現状ではマウスクリックでもfocusのoutlineが出てしまう)\n  // https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/focus\n  const onDelegateKeyDown: KeyboardEventHandler = useCallback((e) => {\n    const selectedNode = unstableRef.current.value\n      ? unstableRef.current.rootNode.findByValue(unstableRef.current.value)\n      : undefined\n\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      unstableRef.current.onSelectItem?.(target.value)\n      document.getElementById(getElementIdFromNode(target.value))?.focus()\n    }\n  }, [])\n\n  const onChangeInput = useCallback((e: ChangeEvent<HTMLInputElement>) => {\n    unstableRef.current.onSelectItem?.(e.currentTarget.value)\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={onSelectItem ? onChangeInput : undefined}\n          className={classNames.column}\n        />\n      ))}\n    </div>\n  )\n}\n"],"names":["tv","_jsx"],"mappings":"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"}

package/lib/components/Calendar/Calendar.cjs

@@ -7,7 +7,7 @@ var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../intl/TimeFormatter.cjs');
 var components_Button_Button = require('../Button/Button.cjs');
 require('../Button/AnchorButton.cjs');

package/lib/components/Calendar/Calendar.js

@@ -5,7 +5,7 @@ import { forwardRef, useMemo, useState, useId, useEffect, useCallback, memo } fr
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../intl/TimeFormatter.js';
 import { Button } from '../Button/Button.js';
 import '../Button/AnchorButton.js';

package/lib/components/Calendar/CalendarTable.cjs

@@ -6,7 +6,7 @@ var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../intl/TimeFormatter.cjs');
 require('../Button/Button.cjs');
 require('../Button/AnchorButton.cjs');

package/lib/components/Calendar/CalendarTable.js

@@ -4,7 +4,7 @@ import { memo, useMemo, useCallback } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../intl/TimeFormatter.js';
 import '../Button/Button.js';
 import '../Button/AnchorButton.js';

package/lib/components/Calendar/YearPicker.cjs

@@ -5,7 +5,7 @@ var React = require('react');
 var index = require('./../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.cjs');
 require('../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../intl/useIntl.cjs');
-require('react-intl');
+require('../../intl/Localizer.cjs');
 require('../../_virtual/dayjs.min.cjs');
 require('../../intl/TimeFormatter.cjs');
 require('../Button/Button.cjs');

package/lib/components/Calendar/YearPicker.js

@@ -3,7 +3,7 @@ import { memo, useMemo, useRef, useEffect } from 'react';
 import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
 import '../../intl/IntlProvider.js';
 import { useIntl } from '../../intl/useIntl.js';
-import 'react-intl';
+import '../../intl/Localizer.js';
 import '../../_virtual/dayjs.min.js';
 import '../../intl/TimeFormatter.js';
 import '../Button/Button.js';

package/lib/components/Combobox/MultiCombobox/MultiCombobox.cjs

@@ -9,7 +9,7 @@ var hooks_useOuterClick = require('../../../hooks/useOuterClick.cjs');
 var hooks_useTheme = require('../../../hooks/useTheme.cjs');
 require('../../../intl/IntlProvider.cjs');
 var intl_useIntl = require('../../../intl/useIntl.cjs');
-require('react-intl');
+require('../../../intl/Localizer.cjs');
 require('../../../_virtual/dayjs.min.cjs');
 require('../../../intl/TimeFormatter.cjs');
 var libs_util = require('../../../libs/util.cjs');
@@ -98,6 +98,38 @@ const ActualMultiCombobox = ({ items, selectedItems, name, disabled = false, req
     const [uncontrolledInputValue, setUncontrolledInputValue] = React.useState('');
     const inputValue = isInputControlled ? controlledInputValue : uncontrolledInputValue;
     const [isComposing, setIsComposing] = React.useState(false);
+    const unstableRef = React.useRef({
+        onChange,
+        onChangeInput,
+        onAdd,
+        onSelect,
+        onDelete,
+        onChangeSelected,
+        onFocus,
+        onBlur,
+        onKeyPress,
+        isItemSelected,
+        selectedItems,
+        isFocused,
+        highlighted,
+        isComposing,
+    });
+    unstableRef.current = {
+        onChange,
+        onChangeInput,
+        onAdd,
+        onSelect,
+        onDelete,
+        onChangeSelected,
+        onFocus,
+        onBlur,
+        onKeyPress,
+        isItemSelected,
+        selectedItems,
+        isFocused,
+        highlighted,
+        isComposing,
+    };
     const { options } = components_Combobox_useOptions.useMultiOptions({
         items,
         selected: selectedItems,
@@ -106,41 +138,38 @@ const ActualMultiCombobox = ({ items, selectedItems, name, disabled = false, req
         isItemSelected,
     });
     const setInputValueIfUncontrolled = isInputControlled ? NOOP : setUncontrolledInputValue;
-    const actualOnDelete = React.useMemo(() => {
+    const actualOnDelete = React.useCallback((item) => {
         const handlers = [];
-        if (onDelete) {
-            handlers.push((item) => onDelete(item));
-        }
-        if (onChangeSelected) {
-            handlers.push((item) => onChangeSelected(selectedItems.filter((selected) => !components_Combobox_helper.areItemsEqual(selected, item))));
+        if (unstableRef.current.onDelete) {
+            handlers.push((deletingItem) => unstableRef.current.onDelete(deletingItem));
         }
-        if (handlers.length === 0) {
-            return NOOP;
+        if (unstableRef.current.onChangeSelected) {
+            handlers.push((deletingItem) => unstableRef.current.onChangeSelected(unstableRef.current.selectedItems.filter((selected) => !components_Combobox_helper.areItemsEqual(selected, deletingItem))));
         }
-        return (item) => {
+        if (handlers.length > 0) {
             // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう
             // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
             requestAnimationFrame(() => {
                 handlers.forEach((h) => h(item));
             });
-        };
-    }, [selectedItems, onChangeSelected, onDelete]);
+        }
+    }, []);
     const actualOnSelect = React.useCallback((selected) => {
         // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう
         // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする
         requestAnimationFrame(() => {
-            const matchedSelectedItem = selectedItems.find((item) => components_Combobox_helper.areItemsEqual(item, selected));
+            const matchedSelectedItem = unstableRef.current.selectedItems.find((item) => components_Combobox_helper.areItemsEqual(item, selected));
             if (matchedSelectedItem === undefined) {
-                onSelect?.(selected);
-                onChangeSelected?.(selectedItems.concat(selected));
+                unstableRef.current.onSelect?.(selected);
+                unstableRef.current.onChangeSelected?.(unstableRef.current.selectedItems.concat(selected));
                 // 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する
-                onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT);
+                unstableRef.current.onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT);
             }
             else if (matchedSelectedItem.deletable !== false) {
                 actualOnDelete(selected);
             }
         });
-    }, [selectedItems, actualOnDelete, onChangeSelected, onSelect, onChangeInput]);
+    }, [actualOnDelete]);
     const { renderListBox, activeOption, onKeyDownListBox, listBoxId, listBoxRef } = components_Combobox_useListbox.useListbox({
         options,
         dropdownHelpMessage,
@@ -154,133 +183,96 @@ const ActualMultiCombobox = ({ items, selectedItems, name, disabled = false, req
     });
     const { deletionButtonRefs, inputRef, focusPrevDeletionButton, focusNextDeletionButton, resetDeletionButtonFocus, } = components_Combobox_useFocusControl.useFocusControl(selectedItems.length);
     React.useImperativeHandle(ref, () => inputRef.current);
-    const focus = React.useMemo(() => {
-        const baseAction = () => {
-            setIsFocused(true);
-        };
-        if (onFocus) {
-            return () => {
-                onFocus();
-                baseAction();
-            };
-        }
-        return baseAction;
-    }, [onFocus]);
-    const blur = React.useMemo(() => {
-        if (!isFocused) {
-            return NOOP;
-        }
-        const baseAction = () => {
+    const focus = React.useCallback(() => {
+        unstableRef.current.onFocus?.();
+        setIsFocused(true);
+    }, []);
+    const blur = React.useCallback(() => {
+        if (unstableRef.current.isFocused) {
+            unstableRef.current.onBlur?.();
             setIsFocused(false);
             resetDeletionButtonFocus();
-        };
-        if (onBlur) {
-            return () => {
-                onBlur();
-                baseAction();
-            };
         }
-        return baseAction;
-    }, [isFocused, onBlur, resetDeletionButtonFocus]);
-    const outerClickRef = React.useMemo(() => [outerRef, listBoxRef], [outerRef, listBoxRef]);
+    }, [resetDeletionButtonFocus]);
+    const outerClickRef = React.useMemo(() => [outerRef, listBoxRef], [listBoxRef]);
     hooks_useOuterClick.useOuterClick(outerClickRef, blur);
-    const highlightedRef = React.useRef(highlighted);
-    React.useEffect(() => {
-        highlightedRef.current = highlighted;
-    }, [highlighted]);
     React.useEffect(() => {
-        if (highlightedRef.current) {
+        if (unstableRef.current.highlighted) {
             setHighlighted(false);
             inputRef.current?.select();
         }
         else {
             setInputValueIfUncontrolled('');
         }
-    }, [selectedItems, inputRef, setInputValueIfUncontrolled]);
+    }, [selectedItems, setInputValueIfUncontrolled, inputRef]);
     React.useEffect(() => {
         if (isFocused) {
             inputRef.current?.focus();
         }
-    }, [inputRef, isFocused, setInputValueIfUncontrolled, selectedItems]);
-    const onDelegateKeyDown = React.useMemo(() => isComposing
-        ? undefined
-        : (e) => {
-            if (ESCAPE_KEY_REGEX.test(e.key)) {
-                e.stopPropagation();
-                blur();
-            }
-            else if (e.key === 'Tab') {
-                if (isFocused) {
-                    // フォーカスがコンポーネントを抜けるように先に input をフォーカスしておく
-                    inputRef.current?.focus();
-                }
-                blur();
-            }
-            else if (ARROW_LEFT_KEY_REGEX.test(e.key)) {
-                e.stopPropagation();
-                focusPrevDeletionButton();
-            }
-            else if (ARROW_RIGHT_KEY_REGEX.test(e.key)) {
-                e.stopPropagation();
-                focusNextDeletionButton();
-            }
-            else if (e.key === 'Backspace' &&
-                !inputValue &&
-                selectedItems.length > 0 &&
-                selectedItems[selectedItems.length - 1].deletable !== false) {
-                e.preventDefault();
-                e.stopPropagation();
-                const lastItem = selectedItems[selectedItems.length - 1];
-                actualOnDelete(lastItem);
-                setHighlighted(true);
-                setInputValueIfUncontrolled(index$1(lastItem.label));
-            }
-            else {
-                e.stopPropagation();
+    }, [isFocused, setInputValueIfUncontrolled, selectedItems, inputRef]);
+    const isInputEmpty = !inputValue;
+    const onDelegateKeyDown = (e) => {
+        if (unstableRef.current.isComposing)
+            return;
+        if (ESCAPE_KEY_REGEX.test(e.key)) {
+            e.stopPropagation();
+            blur();
+        }
+        else if (e.key === 'Tab') {
+            if (unstableRef.current.isFocused) {
+                // フォーカスがコンポーネントを抜けるように先に input をフォーカスしておく
                 inputRef.current?.focus();
-                resetDeletionButtonFocus();
             }
-            onKeyDownListBox(e);
-        }, [
-        blur,
-        focusNextDeletionButton,
-        focusPrevDeletionButton,
-        onKeyDownListBox,
-        inputRef,
-        isComposing,
-        isFocused,
-        resetDeletionButtonFocus,
-        actualOnDelete,
-        inputValue,
-        selectedItems,
-        setInputValueIfUncontrolled,
-    ]);
-    const onDelegateClick = React.useMemo(() => disabled || isFocused
-        ? undefined
-        : (e) => {
+            blur();
+        }
+        else if (ARROW_LEFT_KEY_REGEX.test(e.key)) {
+            e.stopPropagation();
+            focusPrevDeletionButton();
+        }
+        else if (ARROW_RIGHT_KEY_REGEX.test(e.key)) {
+            e.stopPropagation();
+            focusNextDeletionButton();
+        }
+        else if (e.key === 'Backspace' &&
+            isInputEmpty &&
+            unstableRef.current.selectedItems.length > 0 &&
+            unstableRef.current.selectedItems[unstableRef.current.selectedItems.length - 1].deletable !==
+                false) {
+            e.preventDefault();
+            e.stopPropagation();
+            const lastItem = unstableRef.current.selectedItems[unstableRef.current.selectedItems.length - 1];
+            actualOnDelete(lastItem);
+            setHighlighted(true);
+            setInputValueIfUncontrolled(index$1(lastItem.label));
+        }
+        else {
+            e.stopPropagation();
+            inputRef.current?.focus();
+            resetDeletionButtonFocus();
+        }
+        onKeyDownListBox(e);
+    };
+    const onDelegateClick = React.useCallback((e) => {
+        if (!disabled && !unstableRef.current.isFocused) {
             if (!e.target.closest('.smarthr-ui-MultiCombobox-deleteButton')) {
                 focus();
             }
-        }, [isFocused, disabled, focus]);
-    const actualOnChangeInput = React.useMemo(() => {
-        const handlers = [onChange, onChangeInput].filter((h) => !!h);
-        const onSetValue = (e) => {
-            setInputValueIfUncontrolled(e.currentTarget.value);
-        };
-        if (handlers.length === 0) {
-            return onSetValue;
         }
-        return (e) => {
-            handlers.forEach((h) => h(e));
-            onSetValue(e);
-        };
-    }, [onChange, onChangeInput, setInputValueIfUncontrolled]);
-    const onFocusInput = React.useMemo(() => isFocused
-        ? resetDeletionButtonFocus
-        : () => {
+    }, [disabled, focus]);
+    const actualOnChangeInput = React.useCallback((e) => {
+        const handlers = [unstableRef.current.onChange, unstableRef.current.onChangeInput].filter((h) => !!h);
+        handlers.forEach((h) => h(e));
+        setInputValueIfUncontrolled(e.currentTarget.value);
+    }, [setInputValueIfUncontrolled]);
+    const onFocusInput = React.useCallback(() => {
+        if (unstableRef.current.isFocused) {
+            resetDeletionButtonFocus();
+        }
+        else {
             resetDeletionButtonFocus();
             focus();
-        }, [isFocused, focus, resetDeletionButtonFocus]);
+        }
+    }, [resetDeletionButtonFocus, focus]);
     const onCompositionStartInput = React.useCallback(() => setIsComposing(true), []);
     const onCompositionEndInput = React.useCallback(() => setIsComposing(false), []);
     const onKeyDownInput = React.useCallback((e) => {
@@ -292,12 +284,10 @@ const ActualMultiCombobox = ({ items, selectedItems, name, disabled = false, req
     // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で
     // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、
     // submitイベントが発生し、formが送信される場合がある
-    const onDelegateKeyPress = React.useMemo(() => onKeyPress
-        ? (e) => {
-            preventDefaultWithPressEnter(e);
-            onKeyPress(e);
-        }
-        : preventDefaultWithPressEnter, [onKeyPress]);
+    const onDelegateKeyPress = React.useCallback((e) => {
+        preventDefaultWithPressEnter(e);
+        unstableRef.current.onKeyPress?.(e);
+    }, []);
     const selectedListId = React.useId();
     const wrapperStyle = React.useMemo(() => ({
         ...style,
@@ -327,13 +317,11 @@ const ActualMultiCombobox = ({ items, selectedItems, name, disabled = false, req
 const MultiCombobox = libs_util.genericsForwardRef(ActualMultiCombobox);
 const MemoizedCaretDown = React.memo(({ className, iconStyle, disabled, isFocused }) => {
     const theme = hooks_useTheme.useTheme();
-    const caretIconColor = React.useMemo(() => {
-        if (isFocused)
-            return theme.textColor.black;
-        if (disabled)
-            return theme.textColor.disabled;
-        return theme.textColor.grey;
-    }, [disabled, isFocused, theme.textColor]);
+    const caretIconColor = isFocused
+        ? theme.textColor.black
+        : disabled
+            ? theme.textColor.disabled
+            : theme.textColor.grey;
     return (jsxRuntime.jsx("div", { className: className, children: jsxRuntime.jsx(components_Icon_FaIcon.FaCaretDownIcon, { color: caretIconColor, className: iconStyle }) }));
 });