smarthr-ui 97.0.0 → 98.1.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":"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"}

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":"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"}
+{"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/ItemButton.cjs

@@ -29,43 +29,44 @@ const classNameGenerator = index.tv({
     },
 });
 const ItemButton = ({ option, onAdd, onSelect, onMouseOver, activeRef }) => {
+    const unstableRef = React.useRef({ onAdd, onSelect, onMouseOver, option });
+    unstableRef.current = { onAdd, onSelect, onMouseOver, option };
     const handleMouseOver = React.useCallback(() => {
-        onMouseOver(option);
-    }, [onMouseOver, option]);
-    const commonProps = {
-        option,
-        onMouseOver: handleMouseOver,
+        unstableRef.current.onMouseOver(unstableRef.current.option);
+    }, []);
+    const handleAddClick = React.useCallback(() => {
+        unstableRef.current.onAdd?.(unstableRef.current.option);
+    }, []);
+    const handleSelectClick = React.useCallback(() => {
+        unstableRef.current.onSelect(unstableRef.current.option);
+    }, []);
+    const commonAttrs = {
+        id: option.id,
+        label: option.item.label,
         activeRef,
+        onMouseOver: handleMouseOver,
     };
-    return option.isNew ? (jsxRuntime.jsx(AddButton, { ...commonProps, onAdd: onAdd })) : (jsxRuntime.jsx(SelectButton, { ...commonProps, onSelect: onSelect }));
+    return option.isNew ? (jsxRuntime.jsx(AddButton, { ...commonAttrs, onClick: handleAddClick })) : (jsxRuntime.jsx(SelectButton, { ...commonAttrs, disabled: option.item.disabled, selected: option.selected, onClick: handleSelectClick }));
 };
 const typedMemo = React.memo;
 const Memoized = typedMemo(ItemButton);
-const AddButton = ({ activeRef, option, onAdd, onMouseOver, }) => {
-    const className = React.useMemo(() => classNameGenerator({
+const AddButton = React.memo(({ id, label, activeRef, onClick, onMouseOver }) => {
+    const className = classNameGenerator({
         new: true,
-    }), []);
-    const onClick = React.useMemo(() => onAdd
-        ? () => {
-            onAdd(option);
-        }
-        : undefined, [option, onAdd]);
-    return (jsxRuntime.jsx("button", { ref: activeRef, type: "button", role: "option", "aria-selected": false, id: option.id, "data-active": !!activeRef, onClick: onClick, 
+    });
+    return (jsxRuntime.jsx("button", { ref: activeRef, type: "button", role: "option", "aria-selected": false, id: id, "data-active": !!activeRef, onClick: onClick, 
         // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-        onMouseOver: onMouseOver, className: className, children: jsxRuntime.jsx(MemoizedNewIconWithText, { label: option.item.label }) }));
-};
+        onMouseOver: onMouseOver, className: className, children: jsxRuntime.jsx(MemoizedNewIconWithText, { label: label }) }));
+});
 const MemoizedNewIconWithText = React.memo(({ label }) => (jsxRuntime.jsx(components_Text_Text.Text, { color: "TEXT_LINK", icon: jsxRuntime.jsx(components_Icon_FaIcon.FaCirclePlusIcon, { color: "TEXT_LINK" }), children: jsxRuntime.jsx(intl_Localizer.Localizer, { id: "smarthr-ui/Combobox/addItemButtonLabel", defaultText: "\u300C{name}\u300D\u3092\u8FFD\u52A0", values: { name: label } }) })));
-const SelectButton = ({ activeRef, option, onSelect, onMouseOver, }) => {
-    const className = React.useMemo(() => classNameGenerator({
+const SelectButton = React.memo(({ id, label, disabled, selected, activeRef, onClick, onMouseOver }) => {
+    const className = classNameGenerator({
         new: false,
-    }), []);
-    const handleSelect = React.useCallback(() => {
-        onSelect(option);
-    }, [onSelect, option]);
-    return (jsxRuntime.jsx("button", { ref: activeRef, type: "button", role: "option", id: option.id, disabled: option.item.disabled, "aria-selected": option.selected, "data-active": !!activeRef, onClick: handleSelect, 
+    });
+    return (jsxRuntime.jsx("button", { ref: activeRef, type: "button", role: "option", id: id, disabled: disabled, "aria-selected": selected, "data-active": !!activeRef, onClick: onClick, 
         // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-        onMouseOver: onMouseOver, className: className, children: option.item.label }));
-};
+        onMouseOver: onMouseOver, className: className, children: label }));
+});
 
 exports.ItemButton = Memoized;
 //# sourceMappingURL=ItemButton.cjs.map

package/lib/components/Combobox/ItemButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ItemButton.cjs","sources":["../../../src/components/Combobox/ItemButton.tsx"],"sourcesContent":["import { type ReactNode, type RefObject, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../intl'\nimport { FaCirclePlusIcon } from '../Icon'\nimport { Text } from '../Text'\n\nimport type { ComboboxOption } from './types'\n\ntype Props<T> = {\n  option: ComboboxOption<T>\n  onAdd?: (option: ComboboxOption<T>) => void\n  onSelect: (option: ComboboxOption<T>) => void\n  onMouseOver: (option: ComboboxOption<T>) => void\n  activeRef: RefObject<HTMLButtonElement> | undefined\n}\n\nconst classNameGenerator = tv({\n  base: [\n    'shr-block shr-min-w-full shr-cursor-pointer shr-border-none shr-px-1 shr-py-0.5 shr-text-left shr-text-base shr-leading-tight',\n    'aria-selected:shr-text-white',\n    'disabled:shr-cursor-not-allowed disabled:shr-text-disabled',\n    'data-[active=true]:shr-bg-white-darken data-[active=true]:aria-selected:shr-bg-main-darken',\n    'data-[active=false]:shr-bg-white data-[active=false]:aria-selected:shr-bg-main',\n  ],\n  variants: {\n    new: {\n      true: 'smarthr-ui-Combobox-addButton shr-flex shr-items-center',\n      false: 'smarthr-ui-Combobox-selectButton',\n    },\n  },\n})\n\nconst ItemButton = <T,>({ option, onAdd, onSelect, onMouseOver, activeRef }: Props<T>) => {\n  const handleMouseOver = useCallback(() => {\n    onMouseOver(option)\n  }, [onMouseOver, option])\n\n  const commonProps = {\n    option,\n    onMouseOver: handleMouseOver,\n    activeRef,\n  }\n\n  return option.isNew ? (\n    <AddButton {...commonProps} onAdd={onAdd} />\n  ) : (\n    <SelectButton {...commonProps} onSelect={onSelect} />\n  )\n}\nconst typedMemo: <T>(c: T) => T = memo\nconst Memoized = typedMemo(ItemButton)\nexport { Memoized as ItemButton }\n\ntype ButtonType<T> = Pick<Props<T>, 'option' | 'activeRef'> & {\n  onMouseOver: () => void\n}\n\nconst AddButton = <T,>({\n  activeRef,\n  option,\n  onAdd,\n  onMouseOver,\n}: ButtonType<T> & Pick<Props<T>, 'onAdd'>) => {\n  const className = useMemo(\n    () =>\n      classNameGenerator({\n        new: true,\n      }),\n    [],\n  )\n\n  const onClick = useMemo(\n    () =>\n      onAdd\n        ? () => {\n            onAdd(option)\n          }\n        : undefined,\n    [option, onAdd],\n  )\n\n  return (\n    <button\n      ref={activeRef}\n      type=\"button\"\n      role=\"option\"\n      aria-selected={false}\n      id={option.id}\n      data-active={!!activeRef}\n      onClick={onClick}\n      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events\n      onMouseOver={onMouseOver}\n      className={className}\n    >\n      <MemoizedNewIconWithText label={option.item.label} />\n    </button>\n  )\n}\n\nconst MemoizedNewIconWithText = memo<{ label: ReactNode }>(({ label }) => (\n  <Text color=\"TEXT_LINK\" icon={<FaCirclePlusIcon color=\"TEXT_LINK\" />}>\n    <Localizer\n      id=\"smarthr-ui/Combobox/addItemButtonLabel\"\n      defaultText=\"「{name}」を追加\"\n      values={{ name: label }}\n    />\n  </Text>\n))\n\nconst SelectButton = <T,>({\n  activeRef,\n  option,\n  onSelect,\n  onMouseOver,\n}: ButtonType<T> & Pick<Props<T>, 'onSelect'>) => {\n  const className = useMemo(\n    () =>\n      classNameGenerator({\n        new: false,\n      }),\n    [],\n  )\n\n  const handleSelect = useCallback(() => {\n    onSelect(option)\n  }, [onSelect, option])\n\n  return (\n    <button\n      ref={activeRef}\n      type=\"button\"\n      role=\"option\"\n      id={option.id}\n      disabled={option.item.disabled}\n      aria-selected={option.selected}\n      data-active={!!activeRef}\n      onClick={handleSelect}\n      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events\n      onMouseOver={onMouseOver}\n      className={className}\n    >\n      {option.item.label}\n    </button>\n  )\n}\n"],"names":["tv","useCallback","_jsx","memo","useMemo","Text","FaCirclePlusIcon","Localizer"],"mappings":"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"}
+{"version":3,"file":"ItemButton.cjs","sources":["../../../src/components/Combobox/ItemButton.tsx"],"sourcesContent":["import { type ReactNode, type RefObject, memo, useCallback, useRef } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../intl'\nimport { FaCirclePlusIcon } from '../Icon'\nimport { Text } from '../Text'\n\nimport type { ComboboxOption } from './types'\n\ntype Props<T> = {\n  option: ComboboxOption<T>\n  onAdd?: (option: ComboboxOption<T>) => void\n  onSelect: (option: ComboboxOption<T>) => void\n  onMouseOver: (option: ComboboxOption<T>) => void\n  activeRef: RefObject<HTMLButtonElement> | undefined\n}\n\nconst classNameGenerator = tv({\n  base: [\n    'shr-block shr-min-w-full shr-cursor-pointer shr-border-none shr-px-1 shr-py-0.5 shr-text-left shr-text-base shr-leading-tight',\n    'aria-selected:shr-text-white',\n    'disabled:shr-cursor-not-allowed disabled:shr-text-disabled',\n    'data-[active=true]:shr-bg-white-darken data-[active=true]:aria-selected:shr-bg-main-darken',\n    'data-[active=false]:shr-bg-white data-[active=false]:aria-selected:shr-bg-main',\n  ],\n  variants: {\n    new: {\n      true: 'smarthr-ui-Combobox-addButton shr-flex shr-items-center',\n      false: 'smarthr-ui-Combobox-selectButton',\n    },\n  },\n})\n\nconst ItemButton = <T,>({ option, onAdd, onSelect, onMouseOver, activeRef }: Props<T>) => {\n  const unstableRef = useRef({ onAdd, onSelect, onMouseOver, option })\n  unstableRef.current = { onAdd, onSelect, onMouseOver, option }\n\n  const handleMouseOver = useCallback(() => {\n    unstableRef.current.onMouseOver(unstableRef.current.option)\n  }, [])\n\n  const handleAddClick = useCallback(() => {\n    unstableRef.current.onAdd?.(unstableRef.current.option)\n  }, [])\n\n  const handleSelectClick = useCallback(() => {\n    unstableRef.current.onSelect(unstableRef.current.option)\n  }, [])\n\n  const commonAttrs = {\n    id: option.id,\n    label: option.item.label,\n    activeRef,\n    onMouseOver: handleMouseOver,\n  }\n\n  return option.isNew ? (\n    <AddButton {...commonAttrs} onClick={handleAddClick} />\n  ) : (\n    <SelectButton\n      {...commonAttrs}\n      disabled={option.item.disabled}\n      selected={option.selected}\n      onClick={handleSelectClick}\n    />\n  )\n}\nconst typedMemo: <T>(c: T) => T = memo\nconst Memoized = typedMemo(ItemButton)\nexport { Memoized as ItemButton }\n\nconst AddButton = memo<{\n  id: string\n  label: ReactNode\n  activeRef: RefObject<HTMLButtonElement> | undefined\n  onClick?: () => void\n  onMouseOver: () => void\n}>(({ id, label, activeRef, onClick, onMouseOver }) => {\n  const className = classNameGenerator({\n    new: true,\n  })\n\n  return (\n    <button\n      ref={activeRef}\n      type=\"button\"\n      role=\"option\"\n      aria-selected={false}\n      id={id}\n      data-active={!!activeRef}\n      onClick={onClick}\n      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events\n      onMouseOver={onMouseOver}\n      className={className}\n    >\n      <MemoizedNewIconWithText label={label} />\n    </button>\n  )\n})\n\nconst MemoizedNewIconWithText = memo<{ label: ReactNode }>(({ label }) => (\n  <Text color=\"TEXT_LINK\" icon={<FaCirclePlusIcon color=\"TEXT_LINK\" />}>\n    <Localizer\n      id=\"smarthr-ui/Combobox/addItemButtonLabel\"\n      defaultText=\"「{name}」を追加\"\n      values={{ name: label }}\n    />\n  </Text>\n))\n\nconst SelectButton = memo<{\n  id: string\n  label: ReactNode\n  disabled?: boolean\n  selected: boolean\n  activeRef: RefObject<HTMLButtonElement> | undefined\n  onClick: () => void\n  onMouseOver: () => void\n}>(({ id, label, disabled, selected, activeRef, onClick, onMouseOver }) => {\n  const className = classNameGenerator({\n    new: false,\n  })\n\n  return (\n    <button\n      ref={activeRef}\n      type=\"button\"\n      role=\"option\"\n      id={id}\n      disabled={disabled}\n      aria-selected={selected}\n      data-active={!!activeRef}\n      onClick={onClick}\n      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events\n      onMouseOver={onMouseOver}\n      className={className}\n    >\n      {label}\n    </button>\n  )\n})\n"],"names":["tv","useRef","useCallback","_jsx","memo","Text","FaCirclePlusIcon","Localizer"],"mappings":"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"}

package/lib/components/Combobox/ItemButton.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { memo, useCallback, useMemo } from 'react';
+import { memo, 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 '../../intl/IntlProvider.js';
 import 'react-intl';
@@ -27,43 +27,44 @@ const classNameGenerator = ce({
     },
 });
 const ItemButton = ({ option, onAdd, onSelect, onMouseOver, activeRef }) => {
+    const unstableRef = useRef({ onAdd, onSelect, onMouseOver, option });
+    unstableRef.current = { onAdd, onSelect, onMouseOver, option };
     const handleMouseOver = useCallback(() => {
-        onMouseOver(option);
-    }, [onMouseOver, option]);
-    const commonProps = {
-        option,
-        onMouseOver: handleMouseOver,
+        unstableRef.current.onMouseOver(unstableRef.current.option);
+    }, []);
+    const handleAddClick = useCallback(() => {
+        unstableRef.current.onAdd?.(unstableRef.current.option);
+    }, []);
+    const handleSelectClick = useCallback(() => {
+        unstableRef.current.onSelect(unstableRef.current.option);
+    }, []);
+    const commonAttrs = {
+        id: option.id,
+        label: option.item.label,
         activeRef,
+        onMouseOver: handleMouseOver,
     };
-    return option.isNew ? (jsx(AddButton, { ...commonProps, onAdd: onAdd })) : (jsx(SelectButton, { ...commonProps, onSelect: onSelect }));
+    return option.isNew ? (jsx(AddButton, { ...commonAttrs, onClick: handleAddClick })) : (jsx(SelectButton, { ...commonAttrs, disabled: option.item.disabled, selected: option.selected, onClick: handleSelectClick }));
 };
 const typedMemo = memo;
 const Memoized = typedMemo(ItemButton);
-const AddButton = ({ activeRef, option, onAdd, onMouseOver, }) => {
-    const className = useMemo(() => classNameGenerator({
+const AddButton = memo(({ id, label, activeRef, onClick, onMouseOver }) => {
+    const className = classNameGenerator({
         new: true,
-    }), []);
-    const onClick = useMemo(() => onAdd
-        ? () => {
-            onAdd(option);
-        }
-        : undefined, [option, onAdd]);
-    return (jsx("button", { ref: activeRef, type: "button", role: "option", "aria-selected": false, id: option.id, "data-active": !!activeRef, onClick: onClick, 
+    });
+    return (jsx("button", { ref: activeRef, type: "button", role: "option", "aria-selected": false, id: id, "data-active": !!activeRef, onClick: onClick, 
         // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-        onMouseOver: onMouseOver, className: className, children: jsx(MemoizedNewIconWithText, { label: option.item.label }) }));
-};
+        onMouseOver: onMouseOver, className: className, children: jsx(MemoizedNewIconWithText, { label: label }) }));
+});
 const MemoizedNewIconWithText = memo(({ label }) => (jsx(Text, { color: "TEXT_LINK", icon: jsx(FaCirclePlusIcon, { color: "TEXT_LINK" }), children: jsx(Localizer, { id: "smarthr-ui/Combobox/addItemButtonLabel", defaultText: "\u300C{name}\u300D\u3092\u8FFD\u52A0", values: { name: label } }) })));
-const SelectButton = ({ activeRef, option, onSelect, onMouseOver, }) => {
-    const className = useMemo(() => classNameGenerator({
+const SelectButton = memo(({ id, label, disabled, selected, activeRef, onClick, onMouseOver }) => {
+    const className = classNameGenerator({
         new: false,
-    }), []);
-    const handleSelect = useCallback(() => {
-        onSelect(option);
-    }, [onSelect, option]);
-    return (jsx("button", { ref: activeRef, type: "button", role: "option", id: option.id, disabled: option.item.disabled, "aria-selected": option.selected, "data-active": !!activeRef, onClick: handleSelect, 
+    });
+    return (jsx("button", { ref: activeRef, type: "button", role: "option", id: id, disabled: disabled, "aria-selected": selected, "data-active": !!activeRef, onClick: onClick, 
         // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
-        onMouseOver: onMouseOver, className: className, children: option.item.label }));
-};
+        onMouseOver: onMouseOver, className: className, children: label }));
+});
 
 export { Memoized as ItemButton };
 //# sourceMappingURL=ItemButton.js.map

package/lib/components/Combobox/ItemButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ItemButton.js","sources":["../../../src/components/Combobox/ItemButton.tsx"],"sourcesContent":["import { type ReactNode, type RefObject, memo, useCallback, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../intl'\nimport { FaCirclePlusIcon } from '../Icon'\nimport { Text } from '../Text'\n\nimport type { ComboboxOption } from './types'\n\ntype Props<T> = {\n  option: ComboboxOption<T>\n  onAdd?: (option: ComboboxOption<T>) => void\n  onSelect: (option: ComboboxOption<T>) => void\n  onMouseOver: (option: ComboboxOption<T>) => void\n  activeRef: RefObject<HTMLButtonElement> | undefined\n}\n\nconst classNameGenerator = tv({\n  base: [\n    'shr-block shr-min-w-full shr-cursor-pointer shr-border-none shr-px-1 shr-py-0.5 shr-text-left shr-text-base shr-leading-tight',\n    'aria-selected:shr-text-white',\n    'disabled:shr-cursor-not-allowed disabled:shr-text-disabled',\n    'data-[active=true]:shr-bg-white-darken data-[active=true]:aria-selected:shr-bg-main-darken',\n    'data-[active=false]:shr-bg-white data-[active=false]:aria-selected:shr-bg-main',\n  ],\n  variants: {\n    new: {\n      true: 'smarthr-ui-Combobox-addButton shr-flex shr-items-center',\n      false: 'smarthr-ui-Combobox-selectButton',\n    },\n  },\n})\n\nconst ItemButton = <T,>({ option, onAdd, onSelect, onMouseOver, activeRef }: Props<T>) => {\n  const handleMouseOver = useCallback(() => {\n    onMouseOver(option)\n  }, [onMouseOver, option])\n\n  const commonProps = {\n    option,\n    onMouseOver: handleMouseOver,\n    activeRef,\n  }\n\n  return option.isNew ? (\n    <AddButton {...commonProps} onAdd={onAdd} />\n  ) : (\n    <SelectButton {...commonProps} onSelect={onSelect} />\n  )\n}\nconst typedMemo: <T>(c: T) => T = memo\nconst Memoized = typedMemo(ItemButton)\nexport { Memoized as ItemButton }\n\ntype ButtonType<T> = Pick<Props<T>, 'option' | 'activeRef'> & {\n  onMouseOver: () => void\n}\n\nconst AddButton = <T,>({\n  activeRef,\n  option,\n  onAdd,\n  onMouseOver,\n}: ButtonType<T> & Pick<Props<T>, 'onAdd'>) => {\n  const className = useMemo(\n    () =>\n      classNameGenerator({\n        new: true,\n      }),\n    [],\n  )\n\n  const onClick = useMemo(\n    () =>\n      onAdd\n        ? () => {\n            onAdd(option)\n          }\n        : undefined,\n    [option, onAdd],\n  )\n\n  return (\n    <button\n      ref={activeRef}\n      type=\"button\"\n      role=\"option\"\n      aria-selected={false}\n      id={option.id}\n      data-active={!!activeRef}\n      onClick={onClick}\n      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events\n      onMouseOver={onMouseOver}\n      className={className}\n    >\n      <MemoizedNewIconWithText label={option.item.label} />\n    </button>\n  )\n}\n\nconst MemoizedNewIconWithText = memo<{ label: ReactNode }>(({ label }) => (\n  <Text color=\"TEXT_LINK\" icon={<FaCirclePlusIcon color=\"TEXT_LINK\" />}>\n    <Localizer\n      id=\"smarthr-ui/Combobox/addItemButtonLabel\"\n      defaultText=\"「{name}」を追加\"\n      values={{ name: label }}\n    />\n  </Text>\n))\n\nconst SelectButton = <T,>({\n  activeRef,\n  option,\n  onSelect,\n  onMouseOver,\n}: ButtonType<T> & Pick<Props<T>, 'onSelect'>) => {\n  const className = useMemo(\n    () =>\n      classNameGenerator({\n        new: false,\n      }),\n    [],\n  )\n\n  const handleSelect = useCallback(() => {\n    onSelect(option)\n  }, [onSelect, option])\n\n  return (\n    <button\n      ref={activeRef}\n      type=\"button\"\n      role=\"option\"\n      id={option.id}\n      disabled={option.item.disabled}\n      aria-selected={option.selected}\n      data-active={!!activeRef}\n      onClick={handleSelect}\n      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events\n      onMouseOver={onMouseOver}\n      className={className}\n    >\n      {option.item.label}\n    </button>\n  )\n}\n"],"names":["tv","_jsx"],"mappings":"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"}
+{"version":3,"file":"ItemButton.js","sources":["../../../src/components/Combobox/ItemButton.tsx"],"sourcesContent":["import { type ReactNode, type RefObject, memo, useCallback, useRef } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { Localizer } from '../../intl'\nimport { FaCirclePlusIcon } from '../Icon'\nimport { Text } from '../Text'\n\nimport type { ComboboxOption } from './types'\n\ntype Props<T> = {\n  option: ComboboxOption<T>\n  onAdd?: (option: ComboboxOption<T>) => void\n  onSelect: (option: ComboboxOption<T>) => void\n  onMouseOver: (option: ComboboxOption<T>) => void\n  activeRef: RefObject<HTMLButtonElement> | undefined\n}\n\nconst classNameGenerator = tv({\n  base: [\n    'shr-block shr-min-w-full shr-cursor-pointer shr-border-none shr-px-1 shr-py-0.5 shr-text-left shr-text-base shr-leading-tight',\n    'aria-selected:shr-text-white',\n    'disabled:shr-cursor-not-allowed disabled:shr-text-disabled',\n    'data-[active=true]:shr-bg-white-darken data-[active=true]:aria-selected:shr-bg-main-darken',\n    'data-[active=false]:shr-bg-white data-[active=false]:aria-selected:shr-bg-main',\n  ],\n  variants: {\n    new: {\n      true: 'smarthr-ui-Combobox-addButton shr-flex shr-items-center',\n      false: 'smarthr-ui-Combobox-selectButton',\n    },\n  },\n})\n\nconst ItemButton = <T,>({ option, onAdd, onSelect, onMouseOver, activeRef }: Props<T>) => {\n  const unstableRef = useRef({ onAdd, onSelect, onMouseOver, option })\n  unstableRef.current = { onAdd, onSelect, onMouseOver, option }\n\n  const handleMouseOver = useCallback(() => {\n    unstableRef.current.onMouseOver(unstableRef.current.option)\n  }, [])\n\n  const handleAddClick = useCallback(() => {\n    unstableRef.current.onAdd?.(unstableRef.current.option)\n  }, [])\n\n  const handleSelectClick = useCallback(() => {\n    unstableRef.current.onSelect(unstableRef.current.option)\n  }, [])\n\n  const commonAttrs = {\n    id: option.id,\n    label: option.item.label,\n    activeRef,\n    onMouseOver: handleMouseOver,\n  }\n\n  return option.isNew ? (\n    <AddButton {...commonAttrs} onClick={handleAddClick} />\n  ) : (\n    <SelectButton\n      {...commonAttrs}\n      disabled={option.item.disabled}\n      selected={option.selected}\n      onClick={handleSelectClick}\n    />\n  )\n}\nconst typedMemo: <T>(c: T) => T = memo\nconst Memoized = typedMemo(ItemButton)\nexport { Memoized as ItemButton }\n\nconst AddButton = memo<{\n  id: string\n  label: ReactNode\n  activeRef: RefObject<HTMLButtonElement> | undefined\n  onClick?: () => void\n  onMouseOver: () => void\n}>(({ id, label, activeRef, onClick, onMouseOver }) => {\n  const className = classNameGenerator({\n    new: true,\n  })\n\n  return (\n    <button\n      ref={activeRef}\n      type=\"button\"\n      role=\"option\"\n      aria-selected={false}\n      id={id}\n      data-active={!!activeRef}\n      onClick={onClick}\n      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events\n      onMouseOver={onMouseOver}\n      className={className}\n    >\n      <MemoizedNewIconWithText label={label} />\n    </button>\n  )\n})\n\nconst MemoizedNewIconWithText = memo<{ label: ReactNode }>(({ label }) => (\n  <Text color=\"TEXT_LINK\" icon={<FaCirclePlusIcon color=\"TEXT_LINK\" />}>\n    <Localizer\n      id=\"smarthr-ui/Combobox/addItemButtonLabel\"\n      defaultText=\"「{name}」を追加\"\n      values={{ name: label }}\n    />\n  </Text>\n))\n\nconst SelectButton = memo<{\n  id: string\n  label: ReactNode\n  disabled?: boolean\n  selected: boolean\n  activeRef: RefObject<HTMLButtonElement> | undefined\n  onClick: () => void\n  onMouseOver: () => void\n}>(({ id, label, disabled, selected, activeRef, onClick, onMouseOver }) => {\n  const className = classNameGenerator({\n    new: false,\n  })\n\n  return (\n    <button\n      ref={activeRef}\n      type=\"button\"\n      role=\"option\"\n      id={id}\n      disabled={disabled}\n      aria-selected={selected}\n      data-active={!!activeRef}\n      onClick={onClick}\n      // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events\n      onMouseOver={onMouseOver}\n      className={className}\n    >\n      {label}\n    </button>\n  )\n})\n"],"names":["tv","_jsx"],"mappings":";;;;;;;;;;;;;AAiBA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,+HAA+H;QAC/H,8BAA8B;QAC9B,4DAA4D;QAC5D,4FAA4F;QAC5F,gFAAgF;AACjF,KAAA;AACD,IAAA,QAAQ,EAAE;AACR,QAAA,GAAG,EAAE;AACH,YAAA,IAAI,EAAE,yDAAyD;AAC/D,YAAA,KAAK,EAAE,kCAAkC;AAC1C,SAAA;AACF,KAAA;AACF,CAAA,CAAC;AAEF,MAAM,UAAU,GAAG,CAAK,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAY,KAAI;AACvF,IAAA,MAAM,WAAW,GAAG,MAAM,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC;AACpE,IAAA,WAAW,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,EAAE;AAE9D,IAAA,MAAM,eAAe,GAAG,WAAW,CAAC,MAAK;QACvC,WAAW,CAAC,OAAO,CAAC,WAAW,CAAC,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC;IAC7D,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,MAAK;AACtC,QAAA,WAAW,CAAC,OAAO,CAAC,KAAK,GAAG,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC;IACzD,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,iBAAiB,GAAG,WAAW,CAAC,MAAK;QACzC,WAAW,CAAC,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAC,OAAO,CAAC,MAAM,CAAC;IAC1D,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,WAAW,GAAG;QAClB,EAAE,EAAE,MAAM,CAAC,EAAE;AACb,QAAA,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,KAAK;QACxB,SAAS;AACT,QAAA,WAAW,EAAE,eAAe;KAC7B;IAED,OAAO,MAAM,CAAC,KAAK,IACjBC,IAAC,SAAS,EAAA,EAAA,GAAK,WAAW,EAAE,OAAO,EAAE,cAAc,EAAA,CAAI,KAEvDA,GAAA,CAAC,YAAY,EAAA,EAAA,GACP,WAAW,EACf,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,EAC9B,QAAQ,EAAE,MAAM,CAAC,QAAQ,EACzB,OAAO,EAAE,iBAAiB,EAAA,CAC1B,CACH;AACH,CAAC;AACD,MAAM,SAAS,GAAmB,IAAI;AACtC,MAAM,QAAQ,GAAG,SAAS,CAAC,UAAU;AAGrC,MAAM,SAAS,GAAG,IAAI,CAMnB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,KAAI;IACpD,MAAM,SAAS,GAAG,kBAAkB,CAAC;AACnC,QAAA,GAAG,EAAE,IAAI;AACV,KAAA,CAAC;IAEF,QACEA,GAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,mBACE,KAAK,EACpB,EAAE,EAAE,EAAE,EAAA,aAAA,EACO,CAAC,CAAC,SAAS,EACxB,OAAO,EAAE,OAAO;;AAEhB,QAAA,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EAAA,QAAA,EAEpBA,GAAA,CAAC,uBAAuB,EAAA,EAAC,KAAK,EAAE,KAAK,EAAA,CAAI,EAAA,CAClC;AAEb,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,IAAI,CAAuB,CAAC,EAAE,KAAK,EAAE,MACnEA,GAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAEA,GAAA,CAAC,gBAAgB,EAAA,EAAC,KAAK,EAAC,WAAW,EAAA,CAAG,EAAA,QAAA,EAClEA,GAAA,CAAC,SAAS,EAAA,EACR,EAAE,EAAC,wCAAwC,EAC3C,WAAW,EAAC,sCAAa,EACzB,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAA,CACvB,EAAA,CACG,CACR,CAAC;AAEF,MAAM,YAAY,GAAG,IAAI,CAQtB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,EAAE,KAAI;IACxE,MAAM,SAAS,GAAG,kBAAkB,CAAC;AACnC,QAAA,GAAG,EAAE,KAAK;AACX,KAAA,CAAC;AAEF,IAAA,QACEA,GAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,EACN,QAAQ,EAAE,QAAQ,EAAA,eAAA,EACH,QAAQ,EAAA,aAAA,EACV,CAAC,CAAC,SAAS,EACxB,OAAO,EAAE,OAAO;;QAEhB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EAAA,QAAA,EAEnB,KAAK,EAAA,CACC;AAEb,CAAC,CAAC;;;;"}