smarthr-ui 99.3.0 → 99.3.2

package/lib/_virtual/index.cjs

@@ -4,7 +4,7 @@ var _commonjsHelpers = require('./_commonjsHelpers.cjs');
 var index = require('./../vendor/.pnpm/lodash.merge@4.6.2/vendor/lodash.merge/index.cjs');
 
 var lodash_mergeExports = index.__require();
-var _merge = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lodash_mergeExports);
+var merge = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lodash_mergeExports);
 
-module.exports = _merge;
+module.exports = merge;
 //# sourceMappingURL=index.cjs.map

package/lib/_virtual/index.js

@@ -2,7 +2,7 @@ import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
 import { __require as requireLodash_merge } from './../vendor/.pnpm/lodash.merge@4.6.2/vendor/lodash.merge/index.js';
 
 var lodash_mergeExports = requireLodash_merge();
-var _merge = /*@__PURE__*/getDefaultExportFromCjs(lodash_mergeExports);
+var merge = /*@__PURE__*/getDefaultExportFromCjs(lodash_mergeExports);
 
-export { _merge as default };
+export { merge as default };
 //# sourceMappingURL=index.js.map

package/lib/_virtual/index2.cjs

@@ -4,7 +4,7 @@ var _commonjsHelpers = require('./_commonjsHelpers.cjs');
 var index = require('./../vendor/.pnpm/lodash.range@3.2.0/vendor/lodash.range/index.cjs');
 
 var lodash_rangeExports = index.__require();
-var _range = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lodash_rangeExports);
+var range = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(lodash_rangeExports);
 
-module.exports = _range;
+module.exports = range;
 //# sourceMappingURL=index2.cjs.map

package/lib/_virtual/index2.js

@@ -2,7 +2,7 @@ import { getDefaultExportFromCjs } from './_commonjsHelpers.js';
 import { __require as requireLodash_range } from './../vendor/.pnpm/lodash.range@3.2.0/vendor/lodash.range/index.js';
 
 var lodash_rangeExports = requireLodash_range();
-var _range = /*@__PURE__*/getDefaultExportFromCjs(lodash_rangeExports);
+var range = /*@__PURE__*/getDefaultExportFromCjs(lodash_rangeExports);
 
-export { _range as default };
+export { range as default };
 //# sourceMappingURL=index2.js.map

package/lib/components/Checkbox/Checkbox.cjs

@@ -61,7 +61,7 @@ const Checkbox = React.forwardRef(({ checked, mixed, error, className, children,
     const inputRef = React.useRef(null);
     const defaultId = React.useId();
     const checkBoxId = id || defaultId;
-    React.useImperativeHandle(ref, () => inputRef.current);
+    React.useImperativeHandle(ref, () => inputRef.current, []);
     React.useEffect(() => {
         if (inputRef.current) {
             inputRef.current.indeterminate = !!(checked && mixed);

package/lib/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCheckIcon, FaMinusIcon } from '../Icon'\n\nexport type Props = PropsWithChildren<\n  ComponentPropsWithRef<'input'> & {\n    /** `true` のとき、チェック状態を `mixed` にする */\n    mixed?: boolean\n    /** チェックボックスにエラーがあるかどうか */\n    error?: boolean\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Checkbox shr-inline-flex shr-items-baseline',\n    box: [\n      'shr-border-shorthand shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-bg-white',\n      'contrast-more:shr-border-high-contrast',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',\n      'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',\n      'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',\n      'peer-focus-visible:shr-focus-indicator--outer',\n      'peer-hover:shr-shadow-input-hover',\n      'shr-border-default',\n      'peer-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-Checkbox-checkbox shr-peer shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0 disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n    icon: 'shr-fill-current',\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-left-1/2 shr-top-1/2 shr-inline-block shr-h-[theme(fontSize.2xs)] shr-w-[theme(fontSize.2xs)] -shr-translate-x-1/2 -shr-translate-y-1/2 shr-text-2xs',\n      'shr-text-transparent peer-checked:shr-text-white peer-indeterminate:shr-text-white',\n      'peer-disabled:peer-checked:shr-text-white-darken peer-disabled:peer-indeterminate:shr-text-white-darken',\n      'forced-colors:shr-hidden',\n    ],\n    innerWrapper:\n      'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    label: [\n      'smarthr-ui-Checkbox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',\n      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',\n    ],\n  },\n})\n\nexport const Checkbox = forwardRef<HTMLInputElement, Props>(\n  ({ checked, mixed, error, className, children, disabled, id, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        iconWrap: iconWrap(),\n        icon: icon(),\n        label: label(),\n      }\n    }, [className])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const defaultId = useId()\n    const checkBoxId = id || defaultId\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = !!(checked && mixed)\n      }\n    }, [checked, mixed])\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={inputRef}\n            type=\"checkbox\"\n            id={checkBoxId}\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n          <CheckIconArea mixed={mixed} classNames={classNames} />\n        </span>\n\n        {children && (\n          <label htmlFor={checkBoxId} className={classNames.label}>\n            {children}\n          </label>\n        )}\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst CheckIconArea = memo<\n  Pick<Props, 'mixed'> & { classNames: { iconWrap: string; icon: string } }\n>(({ mixed, classNames }) => {\n  const Icon = mixed ? FaMinusIcon : FaCheckIcon\n\n  return (\n    <span className={classNames.iconWrap}>\n      <Icon className={classNames.icon} />\n    </span>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;AA0BA;AACE;AACE;AACA;;;;;;;;;;;;;;AAcC;AACD;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;AAEA;;;AAGC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;;;AAQJ;AAEA;AAEA;AACA;;;AAQE;AACE;;AAEJ;;AA2BF;AAGF;AAIA;;AAKE;AAKF;;"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCheckIcon, FaMinusIcon } from '../Icon'\n\nexport type Props = PropsWithChildren<\n  ComponentPropsWithRef<'input'> & {\n    /** `true` のとき、チェック状態を `mixed` にする */\n    mixed?: boolean\n    /** チェックボックスにエラーがあるかどうか */\n    error?: boolean\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Checkbox shr-inline-flex shr-items-baseline',\n    box: [\n      'shr-border-shorthand shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-bg-white',\n      'contrast-more:shr-border-high-contrast',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',\n      'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',\n      'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',\n      'peer-focus-visible:shr-focus-indicator--outer',\n      'peer-hover:shr-shadow-input-hover',\n      'shr-border-default',\n      'peer-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-Checkbox-checkbox shr-peer shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0 disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n    icon: 'shr-fill-current',\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-left-1/2 shr-top-1/2 shr-inline-block shr-h-[theme(fontSize.2xs)] shr-w-[theme(fontSize.2xs)] -shr-translate-x-1/2 -shr-translate-y-1/2 shr-text-2xs',\n      'shr-text-transparent peer-checked:shr-text-white peer-indeterminate:shr-text-white',\n      'peer-disabled:peer-checked:shr-text-white-darken peer-disabled:peer-indeterminate:shr-text-white-darken',\n      'forced-colors:shr-hidden',\n    ],\n    innerWrapper:\n      'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    label: [\n      'smarthr-ui-Checkbox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',\n      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',\n    ],\n  },\n})\n\nexport const Checkbox = forwardRef<HTMLInputElement, Props>(\n  ({ checked, mixed, error, className, children, disabled, id, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        iconWrap: iconWrap(),\n        icon: icon(),\n        label: label(),\n      }\n    }, [className])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const defaultId = useId()\n    const checkBoxId = id || defaultId\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n      [],\n    )\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = !!(checked && mixed)\n      }\n    }, [checked, mixed])\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={inputRef}\n            type=\"checkbox\"\n            id={checkBoxId}\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n          <CheckIconArea mixed={mixed} classNames={classNames} />\n        </span>\n\n        {children && (\n          <label htmlFor={checkBoxId} className={classNames.label}>\n            {children}\n          </label>\n        )}\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst CheckIconArea = memo<\n  Pick<Props, 'mixed'> & { classNames: { iconWrap: string; icon: string } }\n>(({ mixed, classNames }) => {\n  const Icon = mixed ? FaMinusIcon : FaCheckIcon\n\n  return (\n    <span className={classNames.iconWrap}>\n      <Icon className={classNames.icon} />\n    </span>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;AA0BA;AACE;AACE;AACA;;;;;;;;;;;;;;AAcC;AACD;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;AAEA;;;AAGC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;;;AAQJ;AAEA;AAEA;AACA;AAEA;;AAOE;AACE;;AAEJ;;AA2BF;AAGF;AAIA;;AAKE;AAKF;;"}

package/lib/components/Checkbox/Checkbox.js

@@ -59,7 +59,7 @@ const Checkbox = forwardRef(({ checked, mixed, error, className, children, disab
     const inputRef = useRef(null);
     const defaultId = useId();
     const checkBoxId = id || defaultId;
-    useImperativeHandle(ref, () => inputRef.current);
+    useImperativeHandle(ref, () => inputRef.current, []);
     useEffect(() => {
         if (inputRef.current) {
             inputRef.current.indeterminate = !!(checked && mixed);

package/lib/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCheckIcon, FaMinusIcon } from '../Icon'\n\nexport type Props = PropsWithChildren<\n  ComponentPropsWithRef<'input'> & {\n    /** `true` のとき、チェック状態を `mixed` にする */\n    mixed?: boolean\n    /** チェックボックスにエラーがあるかどうか */\n    error?: boolean\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Checkbox shr-inline-flex shr-items-baseline',\n    box: [\n      'shr-border-shorthand shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-bg-white',\n      'contrast-more:shr-border-high-contrast',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',\n      'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',\n      'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',\n      'peer-focus-visible:shr-focus-indicator--outer',\n      'peer-hover:shr-shadow-input-hover',\n      'shr-border-default',\n      'peer-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-Checkbox-checkbox shr-peer shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0 disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n    icon: 'shr-fill-current',\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-left-1/2 shr-top-1/2 shr-inline-block shr-h-[theme(fontSize.2xs)] shr-w-[theme(fontSize.2xs)] -shr-translate-x-1/2 -shr-translate-y-1/2 shr-text-2xs',\n      'shr-text-transparent peer-checked:shr-text-white peer-indeterminate:shr-text-white',\n      'peer-disabled:peer-checked:shr-text-white-darken peer-disabled:peer-indeterminate:shr-text-white-darken',\n      'forced-colors:shr-hidden',\n    ],\n    innerWrapper:\n      'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    label: [\n      'smarthr-ui-Checkbox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',\n      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',\n    ],\n  },\n})\n\nexport const Checkbox = forwardRef<HTMLInputElement, Props>(\n  ({ checked, mixed, error, className, children, disabled, id, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        iconWrap: iconWrap(),\n        icon: icon(),\n        label: label(),\n      }\n    }, [className])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const defaultId = useId()\n    const checkBoxId = id || defaultId\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n    )\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = !!(checked && mixed)\n      }\n    }, [checked, mixed])\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={inputRef}\n            type=\"checkbox\"\n            id={checkBoxId}\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n          <CheckIconArea mixed={mixed} classNames={classNames} />\n        </span>\n\n        {children && (\n          <label htmlFor={checkBoxId} className={classNames.label}>\n            {children}\n          </label>\n        )}\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst CheckIconArea = memo<\n  Pick<Props, 'mixed'> & { classNames: { iconWrap: string; icon: string } }\n>(({ mixed, classNames }) => {\n  const Icon = mixed ? FaMinusIcon : FaCheckIcon\n\n  return (\n    <span className={classNames.iconWrap}>\n      <Icon className={classNames.icon} />\n    </span>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;AA0BA;AACE;AACE;AACA;;;;;;;;;;;;;;AAcC;AACD;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;AAEA;;;AAGC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;;;AAQJ;AAEA;AAEA;AACA;;;AAQE;AACE;;AAEJ;;AA2BF;AAGF;AAIA;;AAKE;AAKF;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ComponentPropsWithRef,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n} from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { FaCheckIcon, FaMinusIcon } from '../Icon'\n\nexport type Props = PropsWithChildren<\n  ComponentPropsWithRef<'input'> & {\n    /** `true` のとき、チェック状態を `mixed` にする */\n    mixed?: boolean\n    /** チェックボックスにエラーがあるかどうか */\n    error?: boolean\n  }\n>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: 'smarthr-ui-Checkbox shr-inline-flex shr-items-baseline',\n    box: [\n      'shr-border-shorthand shr-pointer-events-none shr-absolute shr-box-border shr-h-full shr-w-full shr-rounded-s shr-bg-white',\n      'contrast-more:shr-border-high-contrast',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-hidden',\n      'peer-checked:shr-border-main peer-checked:shr-bg-main contrast-more:peer-checked:shr-border-high-contrast',\n      'peer-indeterminate:shr-border-main peer-indeterminate:shr-bg-main contrast-more:peer-indeterminate:shr-border-high-contrast',\n      'peer-disabled:shr-border-disabled peer-disabled:shr-bg-white-darken',\n      'peer-disabled:peer-checked:shr-border-default peer-disabled:peer-checked:shr-bg-border',\n      'peer-disabled:peer-indeterminate:shr-border-default peer-disabled:peer-indeterminate:shr-bg-border',\n      'peer-focus-visible:shr-focus-indicator--outer',\n      'peer-hover:shr-shadow-input-hover',\n      'shr-border-default',\n      'peer-[[aria-invalid]]:shr-border-danger',\n    ],\n    input: [\n      'smarthr-ui-Checkbox-checkbox shr-peer shr-absolute shr-left-0 shr-top-0 shr-m-0 shr-h-full shr-w-full shr-cursor-pointer shr-opacity-0 disabled:shr-pointer-events-none',\n      /* 強制カラーモードのときは、ブラウザ標準のUIを表示する */\n      'forced-colors:shr-static forced-colors:shr-opacity-100',\n    ],\n    icon: 'shr-fill-current',\n    iconWrap: [\n      'shr-pointer-events-none shr-absolute shr-left-1/2 shr-top-1/2 shr-inline-block shr-h-[theme(fontSize.2xs)] shr-w-[theme(fontSize.2xs)] -shr-translate-x-1/2 -shr-translate-y-1/2 shr-text-2xs',\n      'shr-text-transparent peer-checked:shr-text-white peer-indeterminate:shr-text-white',\n      'peer-disabled:peer-checked:shr-text-white-darken peer-disabled:peer-indeterminate:shr-text-white-darken',\n      'forced-colors:shr-hidden',\n    ],\n    innerWrapper:\n      'shr-relative shr-box-border shr-inline-block shr-h-[theme(fontSize.base)] shr-w-[theme(fontSize.base)] shr-shrink-0 shr-translate-y-[0.125em] shr-leading-none',\n    label: [\n      'smarthr-ui-Checkbox-label shr-ms-0.5 shr-cursor-pointer shr-text-base shr-leading-tight',\n      '[[data-disabled=true]>&]:shr-pointer-events-none [[data-disabled=true]>&]:shr-cursor-not-allowed [[data-disabled=true]>&]:shr-text-disabled',\n    ],\n  },\n})\n\nexport const Checkbox = forwardRef<HTMLInputElement, Props>(\n  ({ checked, mixed, error, className, children, disabled, id, ...rest }, ref) => {\n    const classNames = useMemo(() => {\n      const { wrapper, innerWrapper, box, input, iconWrap, icon, label } = classNameGenerator()\n\n      return {\n        wrapper: wrapper({ className }),\n        innerWrapper: innerWrapper(),\n        box: box(),\n        input: input(),\n        iconWrap: iconWrap(),\n        icon: icon(),\n        label: label(),\n      }\n    }, [className])\n\n    const inputRef = useRef<HTMLInputElement>(null)\n\n    const defaultId = useId()\n    const checkBoxId = id || defaultId\n\n    useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n      ref,\n      () => inputRef.current,\n      [],\n    )\n\n    useEffect(() => {\n      if (inputRef.current) {\n        inputRef.current.indeterminate = !!(checked && mixed)\n      }\n    }, [checked, mixed])\n\n    return (\n      <span data-disabled={disabled} className={classNames.wrapper}>\n        <span className={classNames.innerWrapper}>\n          <input\n            {...rest}\n            ref={inputRef}\n            type=\"checkbox\"\n            id={checkBoxId}\n            checked={checked}\n            disabled={disabled}\n            aria-invalid={error || undefined}\n            className={classNames.input}\n            data-smarthr-ui-input=\"true\"\n          />\n          <AriaHiddenBox className={classNames.box} />\n          <CheckIconArea mixed={mixed} classNames={classNames} />\n        </span>\n\n        {children && (\n          <label htmlFor={checkBoxId} className={classNames.label}>\n            {children}\n          </label>\n        )}\n      </span>\n    )\n  },\n)\n\nconst AriaHiddenBox = memo<{ className: string }>(({ className }) => (\n  <span className={className} aria-hidden=\"true\" />\n))\n\nconst CheckIconArea = memo<\n  Pick<Props, 'mixed'> & { classNames: { iconWrap: string; icon: string } }\n>(({ mixed, classNames }) => {\n  const Icon = mixed ? FaMinusIcon : FaCheckIcon\n\n  return (\n    <span className={classNames.iconWrap}>\n      <Icon className={classNames.icon} />\n    </span>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;AA0BA;AACE;AACE;AACA;;;;;;;;;;;;;;AAcC;AACD;;;;AAIC;AACD;AACA;;;;;AAKC;AACD;AAEA;;;AAGC;AACF;AACF;AAEM;AAEH;AACE;;AAGE;;;;;;;;AAQJ;AAEA;AAEA;AACA;AAEA;;AAOE;AACE;;AAEJ;;AA2BF;AAGF;AAIA;;AAKE;AAKF;;"}

package/lib/components/Combobox/ItemButton.cjs

@@ -15,11 +15,20 @@ var components_Text_Text = require('../Text/Text.cjs');
 
 const classNameGenerator = index.tv({
     base: [
-        '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',
+        'shr-relative 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',
         'aria-selected:shr-text-white',
         'disabled:shr-cursor-not-allowed disabled:shr-text-disabled',
-        'data-[active=true]:shr-bg-white-darken data-[active=true]:aria-selected:shr-bg-main-darken',
+        'data-[active=true]:shr-focus-indicator data-[active=true]:aria-selected:shr-bg-main',
         'data-[active=false]:shr-bg-white data-[active=false]:aria-selected:shr-bg-main',
+        '[&[data-active=true]]:shr-z-1', // pseudoエレメントがliの::afterと衝突しないために子要素に適用しますが、次のエレメントに被られるからz-indexを一時的に変更します
+        // ::before: フォーカスリングと上のアイテムの下端の間の隙間を埋めるために、上端から1px外側に1pxの横線を描画する。
+        // 非選択かつ先頭以外のボタンにフォーカスが当たったときのみ表示する
+        'before:shr-absolute before:-shr-top-[1px] before:shr-left-0 before:shr-hidden before:shr-h-px before:shr-w-full before:shr-bg-border before:shr-content-[""]',
+        '[&[data-active=true]:not(:first-child):not([aria-selected=true])]:before:shr-block',
+        // ::after: フォーカスリングと下のアイテムの上端の間の隙間を埋めるために、下端から1px外側に1pxの横線を描画する。
+        // 非選択かつ末尾以外のボタンにフォーカスが当たったときのみ表示する
+        'after:shr-absolute after:-shr-bottom-[1px] after:shr-left-0 after:shr-hidden after:shr-h-px after:shr-w-full after:shr-bg-border after:shr-content-[""]',
+        '[&[data-active=true]:not(:last-child):not([aria-selected=true])]:after:shr-block',
     ],
     variants: {
         new: {

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

@@ -1 +1 @@
-{"version":3,"file":"ItemButton.cjs","sources":["../../../src/components/Combobox/ItemButton.tsx"],"sourcesContent":["import { type RefObject, memo } 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 = Omit<ComboboxOption<unknown>, 'item'> &\n  Omit<ComboboxOption<unknown>['item'], 'data' | 'value'> & {\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 CLASS_NAMES = {\n  new: classNameGenerator({ new: true }),\n  select: classNameGenerator({ new: false }),\n}\n\nexport const ItemButton = memo<Props>(({ id, label, disabled, selected, isNew, activeRef }) => (\n  <button\n    ref={activeRef}\n    type=\"button\"\n    role=\"option\"\n    id={id}\n    data-active={!!activeRef}\n    aria-selected={isNew ? false : selected}\n    disabled={isNew ? undefined : disabled}\n    className={isNew ? CLASS_NAMES.new : CLASS_NAMES.select}\n  >\n    {isNew ? (\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      label\n    )}\n  </button>\n))\n"],"names":["tv","memo","_jsx","Text","FaCirclePlusIcon","Localizer"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,kBAAkB,GAAGA,QAAE,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,WAAW,GAAG;IAClB,GAAG,EAAE,kBAAkB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;IACtC,MAAM,EAAE,kBAAkB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;CAC3C;AAEM,MAAM,UAAU,GAAGC,UAAI,CAAQ,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,MACxFC,cAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,EAAA,aAAA,EACO,CAAC,CAAC,SAAS,EAAA,eAAA,EACT,KAAK,GAAG,KAAK,GAAG,QAAQ,EACvC,QAAQ,EAAE,KAAK,GAAG,SAAS,GAAG,QAAQ,EACtC,SAAS,EAAE,KAAK,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,EAAA,QAAA,EAEtD,KAAK,IACJA,cAAA,CAACC,yBAAI,IAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAED,cAAA,CAACE,uCAAgB,IAAC,KAAK,EAAC,WAAW,EAAA,CAAG,EAAA,QAAA,EAClEF,cAAA,CAACG,wBAAS,EAAA,EACR,EAAE,EAAC,wCAAwC,EAC3C,WAAW,EAAC,sCAAa,EACzB,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAA,CACvB,EAAA,CACG,KAEP,KAAK,CACN,EAAA,CACM,CACV;;;;"}
+{"version":3,"file":"ItemButton.cjs","sources":["../../../src/components/Combobox/ItemButton.tsx"],"sourcesContent":["import { type RefObject, memo } 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 = Omit<ComboboxOption<unknown>, 'item'> &\n  Omit<ComboboxOption<unknown>['item'], 'data' | 'value'> & {\n    activeRef: RefObject<HTMLButtonElement> | undefined\n  }\n\nconst classNameGenerator = tv({\n  base: [\n    'shr-relative 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-focus-indicator data-[active=true]:aria-selected:shr-bg-main',\n    'data-[active=false]:shr-bg-white data-[active=false]:aria-selected:shr-bg-main',\n    '[&[data-active=true]]:shr-z-1', // pseudoエレメントがliの::afterと衝突しないために子要素に適用しますが、次のエレメントに被られるからz-indexを一時的に変更します\n\n    // ::before: フォーカスリングと上のアイテムの下端の間の隙間を埋めるために、上端から1px外側に1pxの横線を描画する。\n    // 非選択かつ先頭以外のボタンにフォーカスが当たったときのみ表示する\n    'before:shr-absolute before:-shr-top-[1px] before:shr-left-0 before:shr-hidden before:shr-h-px before:shr-w-full before:shr-bg-border before:shr-content-[\"\"]',\n    '[&[data-active=true]:not(:first-child):not([aria-selected=true])]:before:shr-block',\n\n    // ::after: フォーカスリングと下のアイテムの上端の間の隙間を埋めるために、下端から1px外側に1pxの横線を描画する。\n    // 非選択かつ末尾以外のボタンにフォーカスが当たったときのみ表示する\n    'after:shr-absolute after:-shr-bottom-[1px] after:shr-left-0 after:shr-hidden after:shr-h-px after:shr-w-full after:shr-bg-border after:shr-content-[\"\"]',\n    '[&[data-active=true]:not(:last-child):not([aria-selected=true])]:after:shr-block',\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 CLASS_NAMES = {\n  new: classNameGenerator({ new: true }),\n  select: classNameGenerator({ new: false }),\n}\n\nexport const ItemButton = memo<Props>(({ id, label, disabled, selected, isNew, activeRef }) => (\n  <button\n    ref={activeRef}\n    type=\"button\"\n    role=\"option\"\n    id={id}\n    data-active={!!activeRef}\n    aria-selected={isNew ? false : selected}\n    disabled={isNew ? undefined : disabled}\n    className={isNew ? CLASS_NAMES.new : CLASS_NAMES.select}\n  >\n    {isNew ? (\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      label\n    )}\n  </button>\n))\n"],"names":["tv","memo","_jsx","Text","FaCirclePlusIcon","Localizer"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,kBAAkB,GAAGA,QAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,4IAA4I;QAC5I,8BAA8B;QAC9B,4DAA4D;QAC5D,qFAAqF;QACrF,gFAAgF;AAChF,QAAA,+BAA+B;;;QAI/B,8JAA8J;QAC9J,oFAAoF;;;QAIpF,yJAAyJ;QACzJ,kFAAkF;AACnF,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,WAAW,GAAG;IAClB,GAAG,EAAE,kBAAkB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;IACtC,MAAM,EAAE,kBAAkB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;CAC3C;AAEM,MAAM,UAAU,GAAGC,UAAI,CAAQ,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,MACxFC,cAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,EAAA,aAAA,EACO,CAAC,CAAC,SAAS,EAAA,eAAA,EACT,KAAK,GAAG,KAAK,GAAG,QAAQ,EACvC,QAAQ,EAAE,KAAK,GAAG,SAAS,GAAG,QAAQ,EACtC,SAAS,EAAE,KAAK,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,EAAA,QAAA,EAEtD,KAAK,IACJA,cAAA,CAACC,yBAAI,IAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAED,cAAA,CAACE,uCAAgB,IAAC,KAAK,EAAC,WAAW,EAAA,CAAG,EAAA,QAAA,EAClEF,cAAA,CAACG,wBAAS,EAAA,EACR,EAAE,EAAC,wCAAwC,EAC3C,WAAW,EAAC,sCAAa,EACzB,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,EAAA,CACvB,EAAA,CACG,KAEP,KAAK,CACN,EAAA,CACM,CACV;;;;"}

package/lib/components/Combobox/ItemButton.js

@@ -13,11 +13,20 @@ import { Text } from '../Text/Text.js';
 
 const classNameGenerator = ce({
     base: [
-        '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',
+        'shr-relative 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',
         'aria-selected:shr-text-white',
         'disabled:shr-cursor-not-allowed disabled:shr-text-disabled',
-        'data-[active=true]:shr-bg-white-darken data-[active=true]:aria-selected:shr-bg-main-darken',
+        'data-[active=true]:shr-focus-indicator data-[active=true]:aria-selected:shr-bg-main',
         'data-[active=false]:shr-bg-white data-[active=false]:aria-selected:shr-bg-main',
+        '[&[data-active=true]]:shr-z-1', // pseudoエレメントがliの::afterと衝突しないために子要素に適用しますが、次のエレメントに被られるからz-indexを一時的に変更します
+        // ::before: フォーカスリングと上のアイテムの下端の間の隙間を埋めるために、上端から1px外側に1pxの横線を描画する。
+        // 非選択かつ先頭以外のボタンにフォーカスが当たったときのみ表示する
+        'before:shr-absolute before:-shr-top-[1px] before:shr-left-0 before:shr-hidden before:shr-h-px before:shr-w-full before:shr-bg-border before:shr-content-[""]',
+        '[&[data-active=true]:not(:first-child):not([aria-selected=true])]:before:shr-block',
+        // ::after: フォーカスリングと下のアイテムの上端の間の隙間を埋めるために、下端から1px外側に1pxの横線を描画する。
+        // 非選択かつ末尾以外のボタンにフォーカスが当たったときのみ表示する
+        'after:shr-absolute after:-shr-bottom-[1px] after:shr-left-0 after:shr-hidden after:shr-h-px after:shr-w-full after:shr-bg-border after:shr-content-[""]',
+        '[&[data-active=true]:not(:last-child):not([aria-selected=true])]:after:shr-block',
     ],
     variants: {
         new: {

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

@@ -1 +1 @@
-{"version":3,"file":"ItemButton.js","sources":["../../../src/components/Combobox/ItemButton.tsx"],"sourcesContent":["import { type RefObject, memo } 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 = Omit<ComboboxOption<unknown>, 'item'> &\n  Omit<ComboboxOption<unknown>['item'], 'data' | 'value'> & {\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 CLASS_NAMES = {\n  new: classNameGenerator({ new: true }),\n  select: classNameGenerator({ new: false }),\n}\n\nexport const ItemButton = memo<Props>(({ id, label, disabled, selected, isNew, activeRef }) => (\n  <button\n    ref={activeRef}\n    type=\"button\"\n    role=\"option\"\n    id={id}\n    data-active={!!activeRef}\n    aria-selected={isNew ? false : selected}\n    disabled={isNew ? undefined : disabled}\n    className={isNew ? CLASS_NAMES.new : CLASS_NAMES.select}\n  >\n    {isNew ? (\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      label\n    )}\n  </button>\n))\n"],"names":["tv","_jsx"],"mappings":";;;;;;;;;;;;;AAcA,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,WAAW,GAAG;IAClB,GAAG,EAAE,kBAAkB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;IACtC,MAAM,EAAE,kBAAkB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;CAC3C;AAEM,MAAM,UAAU,GAAG,IAAI,CAAQ,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,MACxFC,GAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,EAAA,aAAA,EACO,CAAC,CAAC,SAAS,EAAA,eAAA,EACT,KAAK,GAAG,KAAK,GAAG,QAAQ,EACvC,QAAQ,EAAE,KAAK,GAAG,SAAS,GAAG,QAAQ,EACtC,SAAS,EAAE,KAAK,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,EAAA,QAAA,EAEtD,KAAK,IACJA,GAAA,CAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAEA,GAAA,CAAC,gBAAgB,IAAC,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,KAEP,KAAK,CACN,EAAA,CACM,CACV;;;;"}
+{"version":3,"file":"ItemButton.js","sources":["../../../src/components/Combobox/ItemButton.tsx"],"sourcesContent":["import { type RefObject, memo } 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 = Omit<ComboboxOption<unknown>, 'item'> &\n  Omit<ComboboxOption<unknown>['item'], 'data' | 'value'> & {\n    activeRef: RefObject<HTMLButtonElement> | undefined\n  }\n\nconst classNameGenerator = tv({\n  base: [\n    'shr-relative 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-focus-indicator data-[active=true]:aria-selected:shr-bg-main',\n    'data-[active=false]:shr-bg-white data-[active=false]:aria-selected:shr-bg-main',\n    '[&[data-active=true]]:shr-z-1', // pseudoエレメントがliの::afterと衝突しないために子要素に適用しますが、次のエレメントに被られるからz-indexを一時的に変更します\n\n    // ::before: フォーカスリングと上のアイテムの下端の間の隙間を埋めるために、上端から1px外側に1pxの横線を描画する。\n    // 非選択かつ先頭以外のボタンにフォーカスが当たったときのみ表示する\n    'before:shr-absolute before:-shr-top-[1px] before:shr-left-0 before:shr-hidden before:shr-h-px before:shr-w-full before:shr-bg-border before:shr-content-[\"\"]',\n    '[&[data-active=true]:not(:first-child):not([aria-selected=true])]:before:shr-block',\n\n    // ::after: フォーカスリングと下のアイテムの上端の間の隙間を埋めるために、下端から1px外側に1pxの横線を描画する。\n    // 非選択かつ末尾以外のボタンにフォーカスが当たったときのみ表示する\n    'after:shr-absolute after:-shr-bottom-[1px] after:shr-left-0 after:shr-hidden after:shr-h-px after:shr-w-full after:shr-bg-border after:shr-content-[\"\"]',\n    '[&[data-active=true]:not(:last-child):not([aria-selected=true])]:after:shr-block',\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 CLASS_NAMES = {\n  new: classNameGenerator({ new: true }),\n  select: classNameGenerator({ new: false }),\n}\n\nexport const ItemButton = memo<Props>(({ id, label, disabled, selected, isNew, activeRef }) => (\n  <button\n    ref={activeRef}\n    type=\"button\"\n    role=\"option\"\n    id={id}\n    data-active={!!activeRef}\n    aria-selected={isNew ? false : selected}\n    disabled={isNew ? undefined : disabled}\n    className={isNew ? CLASS_NAMES.new : CLASS_NAMES.select}\n  >\n    {isNew ? (\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      label\n    )}\n  </button>\n))\n"],"names":["tv","_jsx"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,kBAAkB,GAAGA,EAAE,CAAC;AAC5B,IAAA,IAAI,EAAE;QACJ,4IAA4I;QAC5I,8BAA8B;QAC9B,4DAA4D;QAC5D,qFAAqF;QACrF,gFAAgF;AAChF,QAAA,+BAA+B;;;QAI/B,8JAA8J;QAC9J,oFAAoF;;;QAIpF,yJAAyJ;QACzJ,kFAAkF;AACnF,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,WAAW,GAAG;IAClB,GAAG,EAAE,kBAAkB,CAAC,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC;IACtC,MAAM,EAAE,kBAAkB,CAAC,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC;CAC3C;AAEM,MAAM,UAAU,GAAG,IAAI,CAAQ,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,MACxFC,GAAA,CAAA,QAAA,EAAA,EACE,GAAG,EAAE,SAAS,EACd,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,QAAQ,EACb,EAAE,EAAE,EAAE,EAAA,aAAA,EACO,CAAC,CAAC,SAAS,EAAA,eAAA,EACT,KAAK,GAAG,KAAK,GAAG,QAAQ,EACvC,QAAQ,EAAE,KAAK,GAAG,SAAS,GAAG,QAAQ,EACtC,SAAS,EAAE,KAAK,GAAG,WAAW,CAAC,GAAG,GAAG,WAAW,CAAC,MAAM,EAAA,QAAA,EAEtD,KAAK,IACJA,GAAA,CAAC,IAAI,IAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAEA,GAAA,CAAC,gBAAgB,IAAC,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,KAEP,KAAK,CACN,EAAA,CACM,CACV;;;;"}

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

@@ -297,8 +297,8 @@ const ActualMultiCombobox = ({ items, selectedItems, name, disabled = false, req
             },
         };
     }, [listBoxFunctions, latest]);
-    hooks_useOuterClick.useOuterClick(React.useMemo(() => [triggerRef, listBoxRef], [listBoxRef]), functions.blur);
-    React.useImperativeHandle(ref, () => inputRef.current);
+    hooks_useOuterClick.useOuterClick([triggerRef, listBoxRef], functions.blur);
+    React.useImperativeHandle(ref, () => inputRef.current, []);
     React.useEffect(() => {
         if (latest.highlighted) {
             setHighlighted(false);

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

@@ -1 +1 @@
-{"version":3,"file":"MultiCombobox.cjs","sources":["../../../../src/components/Combobox/MultiCombobox/MultiCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../../hooks/useLatest'\nimport { useOuterClick } from '../../../hooks/useOuterClick'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { useLocalize } from '../../../intl'\nimport { findDelegateTarget } from '../../../libs/delegate'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { FaCaretDownIcon } from '../../Icon'\nimport { Scroller } from '../../Scroller'\nimport { areItemsEqual } from '../helper'\nimport { ListBox, useListbox } from '../useListbox'\nimport { useMultiOptions } from '../useOptions'\n\nimport { DELETE_BUTTON_SELECTOR, MultiSelectedItem } from './MultiSelectedItem'\n\nimport type { ComboboxItem, BaseProps as ComboboxProps } from '../types'\n\ntype BaseProps<T> = ComboboxProps<T> & {\n  /**\n   * 選択されているアイテムのリスト\n   */\n  selectedItems: Array<ComboboxItem<T> & { deletable?: boolean }>\n  /**\n   * 選択されているアイテムのラベルを省略表示するかどうか\n   */\n  selectedItemEllipsis?: boolean\n  /**\n   * テキストボックスの `value` 属性の値。\n   * `onChangeInput` と併せて設定することで、テキストボックスの挙動が制御可能になる。\n   */\n  inputValue?: string\n  /**\n   * 選択されているアイテムの削除ボタンがクリックされた時に発火するコールバック関数\n   */\n  onDelete?: (item: ComboboxItem<T>) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItems: Array<ComboboxItem<T>>) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  /**\n   * アイテムが選択されたときに選択済みかどうかを判定するコールバック関数/\n   */\n  isItemSelected?: (targetItem: ComboboxItem<T>, selectedItems: Array<ComboboxItem<T>>) => boolean\n  /**\n   * 検索結果が0件の時に表示するコンテンツ\n   */\n  noResultText?: ReactNode\n}\ntype Props<T> = BaseProps<T> & Omit<ComponentPropsWithoutRef<'input'>, keyof BaseProps<unknown>>\n\nconst NOOP = () => undefined\n\nconst preventDefaultWithPressEnter = (e: KeyboardEvent<HTMLInputElement>) => {\n  if (e.key === 'Enter') {\n    e.preventDefault()\n  }\n}\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_LEFT_KEY_REGEX = /^(Arrow)?Left$/\nconst ARROW_RIGHT_KEY_REGEX = /^(Arrow)?Right/\nconst ARROW_UP_AND_DOWN_KEY_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst EMPTY_INPUT_CHANGE_EVENT = {\n  currentTarget: { value: '' },\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>\n\nconst DELETE_BUTTON_CLASSNAME = `.${DELETE_BUTTON_SELECTOR}`\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-MultiCombobox',\n      'shr-box-border shr-inline-flex shr-min-w-[15em] shr-rounded-m shr-border shr-border-solid shr-px-0.5 shr-py-0.25 shr-align-bottom',\n      'contrast-more:shr-border-high-contrast',\n      'has-[[role=combobox][aria-expanded=true]]:shr-focus-indicator',\n      'shr-cursor-text shr-border-default shr-bg-white',\n      'has-[[role=combobox]:disabled]:shr-cursor-not-allowed',\n      'has-[[role=combobox]:disabled]:shr-border-default/50',\n      'has-[[role=combobox]:disabled]:shr-bg-white-darken',\n      'has-[[role=combobox]:disabled]:shr-text-disabled',\n      // HINT: disabled と詳細度が同じ [0,2,0] のため、CSS ソース順でこちらを後に置くことで error 時の border 色を優先させる\n      'has-[[role=combobox][aria-invalid]]:shr-border-danger',\n    ],\n    inputArea: 'shr-flex shr-flex-1 shr-flex-wrap shr-gap-0.5',\n    selectedList:\n      'smarthr-ui-MultiCombobox-selectedList shr-contents shr-list-none [&_li]:shr-min-w-0',\n    inputWrapper: [\n      'shr-flex shr-flex-1 shr-items-center',\n      'has-[[role=combobox][aria-expanded=false]]:shr-pointer-events-none',\n      'has-[[role=combobox][aria-expanded=false]]:shr-absolute',\n      'has-[[role=combobox][aria-expanded=false]]:shr-opacity-0',\n    ],\n    input: [\n      'smarthr-ui-MultiCombobox-input',\n      'shr-w-full shr-min-w-[5em] shr-border-none shr-text-base shr-text-black shr-outline-none shr-outline-0',\n      'disabled:shr-hidden',\n    ],\n    placeholderEl: 'smarthr-ui-MultiCombobox-placeholder shr-my-0 shr-self-center',\n    suffixWrapper: [\n      'shr-relative -shr-me-0.5 shr-ms-0.5 shr-p-0.5',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    suffixIcon: 'shr-block',\n  },\n})\n\nconst ActualMultiCombobox = <T,>(\n  {\n    items,\n    selectedItems,\n    name,\n    disabled = false,\n    required = false,\n    error = false,\n    creatable = false,\n    placeholder = '',\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    selectedItemEllipsis,\n    width,\n    dropdownWidth = 'auto',\n    inputValue: controlledInputValue,\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onDelete,\n    onSelect,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    isItemSelected,\n    noResultText,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [highlighted, setHighlighted] = useState(false)\n  const [uncontrolledInputValue, setUncontrolledInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n\n  const selectedListId = useId()\n\n  const isInputControlled = controlledInputValue !== undefined\n  const inputValue = isInputControlled ? controlledInputValue : uncontrolledInputValue\n  const setInputValueIfUncontrolled = isInputControlled ? NOOP : setUncontrolledInputValue\n  const isInputEmpty = !inputValue\n\n  const { options } = useMultiOptions({\n    items,\n    selected: selectedItems,\n    creatable,\n    inputValue,\n    isItemSelected,\n  })\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // eslint-disable-next-line local-rules/best-practice-for-use-latest\n  const latestForListBox = useLatest({\n    onDelete,\n    onChangeSelected,\n    onSelect,\n    onChangeInput,\n    selectedItems,\n  })\n\n  const listBoxFunctions = useMemo(() => {\n    const handleDelete = (item: ComboboxItem<T>) => {\n      const handlers: Array<(deletingItem: ComboboxItem<T>) => void> = []\n\n      if (latestForListBox.onDelete) {\n        handlers.push((deletingItem: ComboboxItem<T>) => latestForListBox.onDelete!(deletingItem))\n      }\n      if (latestForListBox.onChangeSelected) {\n        handlers.push((deletingItem: ComboboxItem<T>) =>\n          latestForListBox.onChangeSelected!(\n            latestForListBox.selectedItems.filter(\n              (selected) => !areItemsEqual(selected, deletingItem),\n            ),\n          ),\n        )\n      }\n\n      if (handlers.length > 0) {\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          handlers.forEach((h) => h(item))\n        })\n      }\n    }\n\n    return {\n      handleDelete,\n      handleSelect: (selected: ComboboxItem<T>) => {\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          const matchedSelectedItem = latestForListBox.selectedItems.find((item) =>\n            areItemsEqual(item, selected),\n          )\n\n          if (matchedSelectedItem === undefined) {\n            latestForListBox.onSelect?.(selected)\n            latestForListBox.onChangeSelected?.(latestForListBox.selectedItems.concat(selected))\n\n            // 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n            latestForListBox.onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n          } else if (matchedSelectedItem.deletable !== false) {\n            handleDelete(selected)\n          }\n        })\n      },\n    }\n  }, [latestForListBox])\n\n  const { listBoxProps, activeOption, handleKeyDownListBox, listBoxId, listBoxRef } = useListbox({\n    options,\n    dropdownHelpMessage,\n    dropdownWidth,\n    onAdd,\n    onSelect: listBoxFunctions.handleSelect,\n    isExpanded,\n    isLoading,\n    triggerRef,\n    noResultText,\n  })\n\n  const latest = useLatest({\n    onChange,\n    onChangeInput,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    disabled,\n    isExpanded,\n    highlighted,\n    isComposing,\n    isInputEmpty,\n    selectedItems,\n    setInputValueIfUncontrolled,\n    handleKeyDownListBox,\n  })\n\n  const functions = useMemo(() => {\n    const handleDelete = listBoxFunctions.handleDelete\n\n    const getDeletionButtons = () => {\n      if (triggerRef.current) {\n        const buttons =\n          triggerRef.current.querySelectorAll<HTMLButtonElement>(DELETE_BUTTON_CLASSNAME)\n\n        if (buttons.length > 0) {\n          const actualButtons = Array.from(buttons)\n\n          return {\n            buttons: actualButtons,\n            currentIndex: actualButtons.indexOf(document.activeElement as HTMLButtonElement),\n          }\n        }\n      }\n\n      return null\n    }\n\n    const focusPrevDeletionButton = () => {\n      const result = getDeletionButtons()\n\n      if (!result) return\n\n      const { buttons, currentIndex } = result\n\n      if (currentIndex !== -1) {\n        buttons[Math.max(currentIndex - 1, 0)].focus()\n      } else if (inputRef.current?.selectionStart === 0) {\n        buttons[buttons.length - 1].focus()\n      }\n    }\n\n    const focusNextDeletionButton = () => {\n      const result = getDeletionButtons()\n\n      if (!result) return\n\n      const { buttons, currentIndex } = result\n\n      if (currentIndex === -1) return\n\n      const nextIndex = currentIndex + 1\n\n      if (nextIndex < buttons.length) {\n        buttons[nextIndex].focus()\n      } else {\n        // キー入力が input に影響しないようにフォーカスタイミングを遅らせる\n        setTimeout(() => {\n          inputRef.current?.focus()\n        })\n      }\n    }\n\n    const focus = () => {\n      latest.onFocus?.()\n      setIsExpanded(true)\n    }\n\n    const blur = () => {\n      if (latest.isExpanded) {\n        latest.onBlur?.()\n        setIsExpanded(false)\n      }\n    }\n\n    return {\n      handleDelete,\n      blur,\n      handleDelegateKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {\n        if (latest.isComposing) return\n\n        if (ESCAPE_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          blur()\n        } else if (e.key === 'Tab') {\n          if (latest.isExpanded) {\n            // フォーカスがコンポーネントを抜けるように先に input をフォーカスしておく\n            inputRef.current?.focus()\n          }\n\n          blur()\n        } else if (ARROW_LEFT_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          focusPrevDeletionButton()\n        } else if (ARROW_RIGHT_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          focusNextDeletionButton()\n        } else if (\n          e.key === 'Backspace' &&\n          latest.isInputEmpty &&\n          latest.selectedItems.length > 0 &&\n          latest.selectedItems[latest.selectedItems.length - 1].deletable !== false\n        ) {\n          e.preventDefault()\n          e.stopPropagation()\n\n          const lastItem = latest.selectedItems[latest.selectedItems.length - 1]\n\n          handleDelete(lastItem)\n          setHighlighted(true)\n          latest.setInputValueIfUncontrolled(innerText(lastItem.label))\n        } else {\n          e.stopPropagation()\n          inputRef.current?.focus()\n        }\n\n        latest.handleKeyDownListBox(e)\n      },\n      handleDelegateClick: (e: MouseEvent<HTMLElement>) => {\n        if (\n          !latest.disabled &&\n          !latest.isExpanded &&\n          !findDelegateTarget(e, DELETE_BUTTON_CLASSNAME)\n        ) {\n          focus()\n        }\n      },\n      handleChangeInput: (e: ChangeEvent<HTMLInputElement>) => {\n        const handlers = [latest.onChange, latest.onChangeInput].filter((h) => !!h)\n\n        handlers.forEach((h) => h(e))\n        latest.setInputValueIfUncontrolled(e.currentTarget.value)\n      },\n      handleFocusInput: () => {\n        if (!latest.isExpanded) {\n          focus()\n        }\n      },\n      handleCompositionStart: () => setIsComposing(true),\n      handleCompositionEnd: () => setIsComposing(false),\n      handleKeyDownInput: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (ARROW_UP_AND_DOWN_KEY_REGEX.test(e.key)) {\n          // 上下キー入力はリストボックスの activeDescendant の移動に用いるため、input 内では作用させない\n          e.preventDefault()\n        }\n      },\n      // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n      // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n      // submitイベントが発生し、formが送信される場合がある\n      handleDelegateKeyPress: (e: KeyboardEvent<HTMLInputElement>) => {\n        preventDefaultWithPressEnter(e)\n        latest.onKeyPress?.(e)\n      },\n    }\n  }, [listBoxFunctions, latest])\n\n  useOuterClick(\n    useMemo(() => [triggerRef, listBoxRef], [listBoxRef]),\n    functions.blur,\n  )\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => inputRef.current)\n\n  useEffect(() => {\n    if (latest.highlighted) {\n      setHighlighted(false)\n      inputRef.current?.select()\n    } else {\n      setInputValueIfUncontrolled('')\n    }\n  }, [selectedItems, setInputValueIfUncontrolled, inputRef, latest])\n\n  useEffect(() => {\n    if (isExpanded) {\n      inputRef.current?.focus()\n    }\n  }, [isExpanded, selectedItems, isInputControlled, inputRef])\n\n  const classNames = useMemo(() => {\n    const {\n      wrapper,\n      inputArea,\n      selectedList,\n      inputWrapper,\n      input,\n      placeholderEl,\n      suffixWrapper,\n      suffixIcon,\n    } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      inputArea: inputArea(),\n      selectedList: selectedList(),\n      inputWrapper: inputWrapper(),\n      input: input(),\n      placeholder: placeholderEl(),\n      suffixWrapper: suffixWrapper(),\n      suffixIcon: suffixIcon(),\n    }\n  }, [className])\n\n  const localized = useLocalize({\n    selectedListAriaLabel: {\n      id: 'smarthr-ui/MultiCombobox/selectedListAriaLabel',\n      defaultText: '選択済みアイテム',\n    },\n  })\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <div\n      ref={triggerRef}\n      role=\"group\"\n      onClick={functions.handleDelegateClick}\n      onKeyDown={functions.handleDelegateKeyDown}\n      onKeyPress={functions.handleDelegateKeyPress}\n      className={classNames.wrapper}\n      style={{\n        ...style,\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n    >\n      <Scroller className={classNames.inputArea}>\n        <ul\n          id={selectedListId}\n          aria-label={localized.selectedListAriaLabel}\n          className={classNames.selectedList}\n        >\n          {selectedItems.map((selectedItem) => (\n            <li key={`${selectedItem.label}-${innerText(selectedItem.value)}`}>\n              <MultiSelectedItem\n                item={selectedItem}\n                disabled={disabled}\n                handleDelete={functions.handleDelete}\n                enableEllipsis={selectedItemEllipsis}\n              />\n            </li>\n          ))}\n        </ul>\n\n        <div className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            data-smarthr-ui-input=\"true\"\n            type=\"text\"\n            name={name}\n            value={inputValue}\n            disabled={disabled}\n            required={required && selectedItems.length === 0}\n            ref={inputRef}\n            onChange={functions.handleChangeInput}\n            onFocus={functions.handleFocusInput}\n            onCompositionStart={functions.handleCompositionStart}\n            onCompositionEnd={functions.handleCompositionEnd}\n            onKeyDown={functions.handleKeyDownInput}\n            autoComplete={autoComplete ?? 'off'}\n            tabIndex={0}\n            role=\"combobox\"\n            aria-activedescendant={activeOption?.id}\n            aria-controls={`${listBoxId} ${selectedListId}`}\n            aria-haspopup=\"listbox\"\n            aria-expanded={isExpanded}\n            aria-invalid={error || undefined}\n            aria-disabled={disabled}\n            aria-autocomplete=\"list\"\n            className={classNames.input}\n          />\n        </div>\n\n        {selectedItems.length === 0 && placeholder && !isExpanded && (\n          <p className={classNames.placeholder}>{placeholder}</p>\n        )}\n      </Scroller>\n\n      <MemoizedCaretDown disabled={disabled} isExpanded={isExpanded} classNames={classNames} />\n\n      <ListBox {...listBoxProps} />\n    </div>\n  )\n}\n\nexport const MultiCombobox = genericsForwardRef(ActualMultiCombobox)\n\nconst MemoizedCaretDown = memo<{\n  disabled: boolean\n  isExpanded: boolean\n  classNames: {\n    suffixWrapper: string\n    suffixIcon: string\n  }\n}>(({ disabled, isExpanded, classNames }) => {\n  const theme = useTheme()\n  const caretIconColor = isExpanded\n    ? theme.textColor.black\n    : disabled\n      ? theme.textColor.disabled\n      : theme.textColor.grey\n\n  return (\n    <div className={classNames.suffixWrapper}>\n      <FaCaretDownIcon color={caretIconColor} className={classNames.suffixIcon} />\n    </div>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EA;AAEA;AACE;;;AAGF;AAEA;AACA;AACA;AACA;AAEA;AACE;AACA;;AAGF;AAEA;AACE;AACE;;;;;;;;;;;;AAYC;AACD;AACA;AAEA;;;;;AAKC;AACD;;;;AAIC;AACD;AACA;;;AAGC;AACD;AACD;AACF;AAED;AAkCE;;;;;AAMA;AAEA;;;AAGA;AAEA;;AAEE;;;;AAID;AACD;;;;;;;;AASC;AAED;AACE;;AAGE;AACE;;AAEF;AACE;;AASF;;;;AAII;AACF;;AAEJ;;;AAIE;;;;;AAQI;AACE;AACA;;AAGA;;AACK;;;AAGT;;;AAGN;AAEA;;;;;;;;;;AAUC;;;;;;;;;;;;;;;AAgBA;AAED;AACE;;AAGE;;AAIE;;;AAII;;;;;AAMN;AACF;;AAGE;AAEA;;AAEA;AAEA;AACE;;;;;AAIJ;;AAGE;AAEA;;AAEA;;;AAIA;AAEA;AACE;;;;;AAIE;AACF;;AAEJ;;AAGE;;AAEF;;AAGE;AACE;;;AAGJ;;;;AAKE;;;;;AAKI;;AACK;AACL;;AAEE;;AAGF;;;;AAGA;;;;AAGA;;AACK;AAEL;AACA;AACA;;;AAKA;;;;;;;AAOA;;AAGF;;AAEF;;;AAII;AAEA;;;AAGJ;;AAGE;;;;AAIA;AACE;;;AAGJ;AACA;AACA;;;;;;;;;AASA;;AAEE;;;AAGN;;;;AAUE;;AAEE;;;;;;;;AAQA;;;AAIJ;;;AAaI;;;;;;;;;AASJ;;AAGE;AACE;AACA;AACD;AACF;;;AAIC;AAQI;AACA;;AA4DR;;AAIA;AAQE;;AAEE;AACA;AACE;AACA;;AAON;;"}
+{"version":3,"file":"MultiCombobox.cjs","sources":["../../../../src/components/Combobox/MultiCombobox/MultiCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../../hooks/useLatest'\nimport { useOuterClick } from '../../../hooks/useOuterClick'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { useLocalize } from '../../../intl'\nimport { findDelegateTarget } from '../../../libs/delegate'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { FaCaretDownIcon } from '../../Icon'\nimport { Scroller } from '../../Scroller'\nimport { areItemsEqual } from '../helper'\nimport { ListBox, useListbox } from '../useListbox'\nimport { useMultiOptions } from '../useOptions'\n\nimport { DELETE_BUTTON_SELECTOR, MultiSelectedItem } from './MultiSelectedItem'\n\nimport type { ComboboxItem, BaseProps as ComboboxProps } from '../types'\n\ntype BaseProps<T> = ComboboxProps<T> & {\n  /**\n   * 選択されているアイテムのリスト\n   */\n  selectedItems: Array<ComboboxItem<T> & { deletable?: boolean }>\n  /**\n   * 選択されているアイテムのラベルを省略表示するかどうか\n   */\n  selectedItemEllipsis?: boolean\n  /**\n   * テキストボックスの `value` 属性の値。\n   * `onChangeInput` と併せて設定することで、テキストボックスの挙動が制御可能になる。\n   */\n  inputValue?: string\n  /**\n   * 選択されているアイテムの削除ボタンがクリックされた時に発火するコールバック関数\n   */\n  onDelete?: (item: ComboboxItem<T>) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItems: Array<ComboboxItem<T>>) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  /**\n   * アイテムが選択されたときに選択済みかどうかを判定するコールバック関数/\n   */\n  isItemSelected?: (targetItem: ComboboxItem<T>, selectedItems: Array<ComboboxItem<T>>) => boolean\n  /**\n   * 検索結果が0件の時に表示するコンテンツ\n   */\n  noResultText?: ReactNode\n}\ntype Props<T> = BaseProps<T> & Omit<ComponentPropsWithoutRef<'input'>, keyof BaseProps<unknown>>\n\nconst NOOP = () => undefined\n\nconst preventDefaultWithPressEnter = (e: KeyboardEvent<HTMLInputElement>) => {\n  if (e.key === 'Enter') {\n    e.preventDefault()\n  }\n}\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_LEFT_KEY_REGEX = /^(Arrow)?Left$/\nconst ARROW_RIGHT_KEY_REGEX = /^(Arrow)?Right/\nconst ARROW_UP_AND_DOWN_KEY_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst EMPTY_INPUT_CHANGE_EVENT = {\n  currentTarget: { value: '' },\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>\n\nconst DELETE_BUTTON_CLASSNAME = `.${DELETE_BUTTON_SELECTOR}`\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-MultiCombobox',\n      'shr-box-border shr-inline-flex shr-min-w-[15em] shr-rounded-m shr-border shr-border-solid shr-px-0.5 shr-py-0.25 shr-align-bottom',\n      'contrast-more:shr-border-high-contrast',\n      'has-[[role=combobox][aria-expanded=true]]:shr-focus-indicator',\n      'shr-cursor-text shr-border-default shr-bg-white',\n      'has-[[role=combobox]:disabled]:shr-cursor-not-allowed',\n      'has-[[role=combobox]:disabled]:shr-border-default/50',\n      'has-[[role=combobox]:disabled]:shr-bg-white-darken',\n      'has-[[role=combobox]:disabled]:shr-text-disabled',\n      // HINT: disabled と詳細度が同じ [0,2,0] のため、CSS ソース順でこちらを後に置くことで error 時の border 色を優先させる\n      'has-[[role=combobox][aria-invalid]]:shr-border-danger',\n    ],\n    inputArea: 'shr-flex shr-flex-1 shr-flex-wrap shr-gap-0.5',\n    selectedList:\n      'smarthr-ui-MultiCombobox-selectedList shr-contents shr-list-none [&_li]:shr-min-w-0',\n    inputWrapper: [\n      'shr-flex shr-flex-1 shr-items-center',\n      'has-[[role=combobox][aria-expanded=false]]:shr-pointer-events-none',\n      'has-[[role=combobox][aria-expanded=false]]:shr-absolute',\n      'has-[[role=combobox][aria-expanded=false]]:shr-opacity-0',\n    ],\n    input: [\n      'smarthr-ui-MultiCombobox-input',\n      'shr-w-full shr-min-w-[5em] shr-border-none shr-text-base shr-text-black shr-outline-none shr-outline-0',\n      'disabled:shr-hidden',\n    ],\n    placeholderEl: 'smarthr-ui-MultiCombobox-placeholder shr-my-0 shr-self-center',\n    suffixWrapper: [\n      'shr-relative -shr-me-0.5 shr-ms-0.5 shr-p-0.5',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    suffixIcon: 'shr-block',\n  },\n})\n\nconst ActualMultiCombobox = <T,>(\n  {\n    items,\n    selectedItems,\n    name,\n    disabled = false,\n    required = false,\n    error = false,\n    creatable = false,\n    placeholder = '',\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    selectedItemEllipsis,\n    width,\n    dropdownWidth = 'auto',\n    inputValue: controlledInputValue,\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onDelete,\n    onSelect,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    isItemSelected,\n    noResultText,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [highlighted, setHighlighted] = useState(false)\n  const [uncontrolledInputValue, setUncontrolledInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n\n  const selectedListId = useId()\n\n  const isInputControlled = controlledInputValue !== undefined\n  const inputValue = isInputControlled ? controlledInputValue : uncontrolledInputValue\n  const setInputValueIfUncontrolled = isInputControlled ? NOOP : setUncontrolledInputValue\n  const isInputEmpty = !inputValue\n\n  const { options } = useMultiOptions({\n    items,\n    selected: selectedItems,\n    creatable,\n    inputValue,\n    isItemSelected,\n  })\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // eslint-disable-next-line local-rules/best-practice-for-use-latest\n  const latestForListBox = useLatest({\n    onDelete,\n    onChangeSelected,\n    onSelect,\n    onChangeInput,\n    selectedItems,\n  })\n\n  const listBoxFunctions = useMemo(() => {\n    const handleDelete = (item: ComboboxItem<T>) => {\n      const handlers: Array<(deletingItem: ComboboxItem<T>) => void> = []\n\n      if (latestForListBox.onDelete) {\n        handlers.push((deletingItem: ComboboxItem<T>) => latestForListBox.onDelete!(deletingItem))\n      }\n      if (latestForListBox.onChangeSelected) {\n        handlers.push((deletingItem: ComboboxItem<T>) =>\n          latestForListBox.onChangeSelected!(\n            latestForListBox.selectedItems.filter(\n              (selected) => !areItemsEqual(selected, deletingItem),\n            ),\n          ),\n        )\n      }\n\n      if (handlers.length > 0) {\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          handlers.forEach((h) => h(item))\n        })\n      }\n    }\n\n    return {\n      handleDelete,\n      handleSelect: (selected: ComboboxItem<T>) => {\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          const matchedSelectedItem = latestForListBox.selectedItems.find((item) =>\n            areItemsEqual(item, selected),\n          )\n\n          if (matchedSelectedItem === undefined) {\n            latestForListBox.onSelect?.(selected)\n            latestForListBox.onChangeSelected?.(latestForListBox.selectedItems.concat(selected))\n\n            // 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n            latestForListBox.onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n          } else if (matchedSelectedItem.deletable !== false) {\n            handleDelete(selected)\n          }\n        })\n      },\n    }\n  }, [latestForListBox])\n\n  const { listBoxProps, activeOption, handleKeyDownListBox, listBoxId, listBoxRef } = useListbox({\n    options,\n    dropdownHelpMessage,\n    dropdownWidth,\n    onAdd,\n    onSelect: listBoxFunctions.handleSelect,\n    isExpanded,\n    isLoading,\n    triggerRef,\n    noResultText,\n  })\n\n  const latest = useLatest({\n    onChange,\n    onChangeInput,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    disabled,\n    isExpanded,\n    highlighted,\n    isComposing,\n    isInputEmpty,\n    selectedItems,\n    setInputValueIfUncontrolled,\n    handleKeyDownListBox,\n  })\n\n  const functions = useMemo(() => {\n    const handleDelete = listBoxFunctions.handleDelete\n\n    const getDeletionButtons = () => {\n      if (triggerRef.current) {\n        const buttons =\n          triggerRef.current.querySelectorAll<HTMLButtonElement>(DELETE_BUTTON_CLASSNAME)\n\n        if (buttons.length > 0) {\n          const actualButtons = Array.from(buttons)\n\n          return {\n            buttons: actualButtons,\n            currentIndex: actualButtons.indexOf(document.activeElement as HTMLButtonElement),\n          }\n        }\n      }\n\n      return null\n    }\n\n    const focusPrevDeletionButton = () => {\n      const result = getDeletionButtons()\n\n      if (!result) return\n\n      const { buttons, currentIndex } = result\n\n      if (currentIndex !== -1) {\n        buttons[Math.max(currentIndex - 1, 0)].focus()\n      } else if (inputRef.current?.selectionStart === 0) {\n        buttons[buttons.length - 1].focus()\n      }\n    }\n\n    const focusNextDeletionButton = () => {\n      const result = getDeletionButtons()\n\n      if (!result) return\n\n      const { buttons, currentIndex } = result\n\n      if (currentIndex === -1) return\n\n      const nextIndex = currentIndex + 1\n\n      if (nextIndex < buttons.length) {\n        buttons[nextIndex].focus()\n      } else {\n        // キー入力が input に影響しないようにフォーカスタイミングを遅らせる\n        setTimeout(() => {\n          inputRef.current?.focus()\n        })\n      }\n    }\n\n    const focus = () => {\n      latest.onFocus?.()\n      setIsExpanded(true)\n    }\n\n    const blur = () => {\n      if (latest.isExpanded) {\n        latest.onBlur?.()\n        setIsExpanded(false)\n      }\n    }\n\n    return {\n      handleDelete,\n      blur,\n      handleDelegateKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {\n        if (latest.isComposing) return\n\n        if (ESCAPE_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          blur()\n        } else if (e.key === 'Tab') {\n          if (latest.isExpanded) {\n            // フォーカスがコンポーネントを抜けるように先に input をフォーカスしておく\n            inputRef.current?.focus()\n          }\n\n          blur()\n        } else if (ARROW_LEFT_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          focusPrevDeletionButton()\n        } else if (ARROW_RIGHT_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          focusNextDeletionButton()\n        } else if (\n          e.key === 'Backspace' &&\n          latest.isInputEmpty &&\n          latest.selectedItems.length > 0 &&\n          latest.selectedItems[latest.selectedItems.length - 1].deletable !== false\n        ) {\n          e.preventDefault()\n          e.stopPropagation()\n\n          const lastItem = latest.selectedItems[latest.selectedItems.length - 1]\n\n          handleDelete(lastItem)\n          setHighlighted(true)\n          latest.setInputValueIfUncontrolled(innerText(lastItem.label))\n        } else {\n          e.stopPropagation()\n          inputRef.current?.focus()\n        }\n\n        latest.handleKeyDownListBox(e)\n      },\n      handleDelegateClick: (e: MouseEvent<HTMLElement>) => {\n        if (\n          !latest.disabled &&\n          !latest.isExpanded &&\n          !findDelegateTarget(e, DELETE_BUTTON_CLASSNAME)\n        ) {\n          focus()\n        }\n      },\n      handleChangeInput: (e: ChangeEvent<HTMLInputElement>) => {\n        const handlers = [latest.onChange, latest.onChangeInput].filter((h) => !!h)\n\n        handlers.forEach((h) => h(e))\n        latest.setInputValueIfUncontrolled(e.currentTarget.value)\n      },\n      handleFocusInput: () => {\n        if (!latest.isExpanded) {\n          focus()\n        }\n      },\n      handleCompositionStart: () => setIsComposing(true),\n      handleCompositionEnd: () => setIsComposing(false),\n      handleKeyDownInput: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (ARROW_UP_AND_DOWN_KEY_REGEX.test(e.key)) {\n          // 上下キー入力はリストボックスの activeDescendant の移動に用いるため、input 内では作用させない\n          e.preventDefault()\n        }\n      },\n      // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n      // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n      // submitイベントが発生し、formが送信される場合がある\n      handleDelegateKeyPress: (e: KeyboardEvent<HTMLInputElement>) => {\n        preventDefaultWithPressEnter(e)\n        latest.onKeyPress?.(e)\n      },\n    }\n  }, [listBoxFunctions, latest])\n\n  useOuterClick([triggerRef, listBoxRef], functions.blur)\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n    ref,\n    () => inputRef.current,\n    [],\n  )\n\n  useEffect(() => {\n    if (latest.highlighted) {\n      setHighlighted(false)\n      inputRef.current?.select()\n    } else {\n      setInputValueIfUncontrolled('')\n    }\n  }, [selectedItems, setInputValueIfUncontrolled, inputRef, latest])\n\n  useEffect(() => {\n    if (isExpanded) {\n      inputRef.current?.focus()\n    }\n  }, [isExpanded, selectedItems, isInputControlled, inputRef])\n\n  const classNames = useMemo(() => {\n    const {\n      wrapper,\n      inputArea,\n      selectedList,\n      inputWrapper,\n      input,\n      placeholderEl,\n      suffixWrapper,\n      suffixIcon,\n    } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      inputArea: inputArea(),\n      selectedList: selectedList(),\n      inputWrapper: inputWrapper(),\n      input: input(),\n      placeholder: placeholderEl(),\n      suffixWrapper: suffixWrapper(),\n      suffixIcon: suffixIcon(),\n    }\n  }, [className])\n\n  const localized = useLocalize({\n    selectedListAriaLabel: {\n      id: 'smarthr-ui/MultiCombobox/selectedListAriaLabel',\n      defaultText: '選択済みアイテム',\n    },\n  })\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <div\n      ref={triggerRef}\n      role=\"group\"\n      onClick={functions.handleDelegateClick}\n      onKeyDown={functions.handleDelegateKeyDown}\n      onKeyPress={functions.handleDelegateKeyPress}\n      className={classNames.wrapper}\n      style={{\n        ...style,\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n    >\n      <Scroller className={classNames.inputArea}>\n        <ul\n          id={selectedListId}\n          aria-label={localized.selectedListAriaLabel}\n          className={classNames.selectedList}\n        >\n          {selectedItems.map((selectedItem) => (\n            <li key={`${selectedItem.label}-${innerText(selectedItem.value)}`}>\n              <MultiSelectedItem\n                item={selectedItem}\n                disabled={disabled}\n                handleDelete={functions.handleDelete}\n                enableEllipsis={selectedItemEllipsis}\n              />\n            </li>\n          ))}\n        </ul>\n\n        <div className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            data-smarthr-ui-input=\"true\"\n            type=\"text\"\n            name={name}\n            value={inputValue}\n            disabled={disabled}\n            required={required && selectedItems.length === 0}\n            ref={inputRef}\n            onChange={functions.handleChangeInput}\n            onFocus={functions.handleFocusInput}\n            onCompositionStart={functions.handleCompositionStart}\n            onCompositionEnd={functions.handleCompositionEnd}\n            onKeyDown={functions.handleKeyDownInput}\n            autoComplete={autoComplete ?? 'off'}\n            tabIndex={0}\n            role=\"combobox\"\n            aria-activedescendant={activeOption?.id}\n            aria-controls={`${listBoxId} ${selectedListId}`}\n            aria-haspopup=\"listbox\"\n            aria-expanded={isExpanded}\n            aria-invalid={error || undefined}\n            aria-disabled={disabled}\n            aria-autocomplete=\"list\"\n            className={classNames.input}\n          />\n        </div>\n\n        {selectedItems.length === 0 && placeholder && !isExpanded && (\n          <p className={classNames.placeholder}>{placeholder}</p>\n        )}\n      </Scroller>\n\n      <MemoizedCaretDown disabled={disabled} isExpanded={isExpanded} classNames={classNames} />\n\n      <ListBox {...listBoxProps} />\n    </div>\n  )\n}\n\nexport const MultiCombobox = genericsForwardRef(ActualMultiCombobox)\n\nconst MemoizedCaretDown = memo<{\n  disabled: boolean\n  isExpanded: boolean\n  classNames: {\n    suffixWrapper: string\n    suffixIcon: string\n  }\n}>(({ disabled, isExpanded, classNames }) => {\n  const theme = useTheme()\n  const caretIconColor = isExpanded\n    ? theme.textColor.black\n    : disabled\n      ? theme.textColor.disabled\n      : theme.textColor.grey\n\n  return (\n    <div className={classNames.suffixWrapper}>\n      <FaCaretDownIcon color={caretIconColor} className={classNames.suffixIcon} />\n    </div>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6EA;AAEA;AACE;;;AAGF;AAEA;AACA;AACA;AACA;AAEA;AACE;AACA;;AAGF;AAEA;AACE;AACE;;;;;;;;;;;;AAYC;AACD;AACA;AAEA;;;;;AAKC;AACD;;;;AAIC;AACD;AACA;;;AAGC;AACD;AACD;AACF;AAED;AAkCE;;;;;AAMA;AAEA;;;AAGA;AAEA;;AAEE;;;;AAID;AACD;;;;;;;;AASC;AAED;AACE;;AAGE;AACE;;AAEF;AACE;;AASF;;;;AAII;AACF;;AAEJ;;;AAIE;;;;;AAQI;AACE;AACA;;AAGA;;AACK;;;AAGT;;;AAGN;AAEA;;;;;;;;;;AAUC;;;;;;;;;;;;;;;AAgBA;AAED;AACE;;AAGE;;AAIE;;;AAII;;;;;AAMN;AACF;;AAGE;AAEA;;AAEA;AAEA;AACE;;;;;AAIJ;;AAGE;AAEA;;AAEA;;;AAIA;AAEA;AACE;;;;;AAIE;AACF;;AAEJ;;AAGE;;AAEF;;AAGE;AACE;;;AAGJ;;;;AAKE;;;;;AAKI;;AACK;AACL;;AAEE;;AAGF;;;;AAGA;;;;AAGA;;AACK;AAEL;AACA;AACA;;;AAKA;;;;;;;AAOA;;AAGF;;AAEF;;;AAII;AAEA;;;AAGJ;;AAGE;;;;AAIA;AACE;;;AAGJ;AACA;AACA;;;;;;;;;AASA;;AAEE;;;AAGN;;AAIA;;AAOE;;AAEE;;;;;;;;AAQA;;;AAIJ;;;AAaI;;;;;;;;;AASJ;;AAGE;AACE;AACA;AACD;AACF;;;AAIC;AAQI;AACA;;AA4DR;;AAIA;AAQE;;AAEE;AACA;AACE;AACA;;AAON;;"}

package/lib/components/Combobox/MultiCombobox/MultiCombobox.js

@@ -295,8 +295,8 @@ const ActualMultiCombobox = ({ items, selectedItems, name, disabled = false, req
             },
         };
     }, [listBoxFunctions, latest]);
-    useOuterClick(useMemo(() => [triggerRef, listBoxRef], [listBoxRef]), functions.blur);
-    useImperativeHandle(ref, () => inputRef.current);
+    useOuterClick([triggerRef, listBoxRef], functions.blur);
+    useImperativeHandle(ref, () => inputRef.current, []);
     useEffect(() => {
         if (latest.highlighted) {
             setHighlighted(false);

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

@@ -1 +1 @@
-{"version":3,"file":"MultiCombobox.js","sources":["../../../../src/components/Combobox/MultiCombobox/MultiCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../../hooks/useLatest'\nimport { useOuterClick } from '../../../hooks/useOuterClick'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { useLocalize } from '../../../intl'\nimport { findDelegateTarget } from '../../../libs/delegate'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { FaCaretDownIcon } from '../../Icon'\nimport { Scroller } from '../../Scroller'\nimport { areItemsEqual } from '../helper'\nimport { ListBox, useListbox } from '../useListbox'\nimport { useMultiOptions } from '../useOptions'\n\nimport { DELETE_BUTTON_SELECTOR, MultiSelectedItem } from './MultiSelectedItem'\n\nimport type { ComboboxItem, BaseProps as ComboboxProps } from '../types'\n\ntype BaseProps<T> = ComboboxProps<T> & {\n  /**\n   * 選択されているアイテムのリスト\n   */\n  selectedItems: Array<ComboboxItem<T> & { deletable?: boolean }>\n  /**\n   * 選択されているアイテムのラベルを省略表示するかどうか\n   */\n  selectedItemEllipsis?: boolean\n  /**\n   * テキストボックスの `value` 属性の値。\n   * `onChangeInput` と併せて設定することで、テキストボックスの挙動が制御可能になる。\n   */\n  inputValue?: string\n  /**\n   * 選択されているアイテムの削除ボタンがクリックされた時に発火するコールバック関数\n   */\n  onDelete?: (item: ComboboxItem<T>) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItems: Array<ComboboxItem<T>>) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  /**\n   * アイテムが選択されたときに選択済みかどうかを判定するコールバック関数/\n   */\n  isItemSelected?: (targetItem: ComboboxItem<T>, selectedItems: Array<ComboboxItem<T>>) => boolean\n  /**\n   * 検索結果が0件の時に表示するコンテンツ\n   */\n  noResultText?: ReactNode\n}\ntype Props<T> = BaseProps<T> & Omit<ComponentPropsWithoutRef<'input'>, keyof BaseProps<unknown>>\n\nconst NOOP = () => undefined\n\nconst preventDefaultWithPressEnter = (e: KeyboardEvent<HTMLInputElement>) => {\n  if (e.key === 'Enter') {\n    e.preventDefault()\n  }\n}\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_LEFT_KEY_REGEX = /^(Arrow)?Left$/\nconst ARROW_RIGHT_KEY_REGEX = /^(Arrow)?Right/\nconst ARROW_UP_AND_DOWN_KEY_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst EMPTY_INPUT_CHANGE_EVENT = {\n  currentTarget: { value: '' },\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>\n\nconst DELETE_BUTTON_CLASSNAME = `.${DELETE_BUTTON_SELECTOR}`\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-MultiCombobox',\n      'shr-box-border shr-inline-flex shr-min-w-[15em] shr-rounded-m shr-border shr-border-solid shr-px-0.5 shr-py-0.25 shr-align-bottom',\n      'contrast-more:shr-border-high-contrast',\n      'has-[[role=combobox][aria-expanded=true]]:shr-focus-indicator',\n      'shr-cursor-text shr-border-default shr-bg-white',\n      'has-[[role=combobox]:disabled]:shr-cursor-not-allowed',\n      'has-[[role=combobox]:disabled]:shr-border-default/50',\n      'has-[[role=combobox]:disabled]:shr-bg-white-darken',\n      'has-[[role=combobox]:disabled]:shr-text-disabled',\n      // HINT: disabled と詳細度が同じ [0,2,0] のため、CSS ソース順でこちらを後に置くことで error 時の border 色を優先させる\n      'has-[[role=combobox][aria-invalid]]:shr-border-danger',\n    ],\n    inputArea: 'shr-flex shr-flex-1 shr-flex-wrap shr-gap-0.5',\n    selectedList:\n      'smarthr-ui-MultiCombobox-selectedList shr-contents shr-list-none [&_li]:shr-min-w-0',\n    inputWrapper: [\n      'shr-flex shr-flex-1 shr-items-center',\n      'has-[[role=combobox][aria-expanded=false]]:shr-pointer-events-none',\n      'has-[[role=combobox][aria-expanded=false]]:shr-absolute',\n      'has-[[role=combobox][aria-expanded=false]]:shr-opacity-0',\n    ],\n    input: [\n      'smarthr-ui-MultiCombobox-input',\n      'shr-w-full shr-min-w-[5em] shr-border-none shr-text-base shr-text-black shr-outline-none shr-outline-0',\n      'disabled:shr-hidden',\n    ],\n    placeholderEl: 'smarthr-ui-MultiCombobox-placeholder shr-my-0 shr-self-center',\n    suffixWrapper: [\n      'shr-relative -shr-me-0.5 shr-ms-0.5 shr-p-0.5',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    suffixIcon: 'shr-block',\n  },\n})\n\nconst ActualMultiCombobox = <T,>(\n  {\n    items,\n    selectedItems,\n    name,\n    disabled = false,\n    required = false,\n    error = false,\n    creatable = false,\n    placeholder = '',\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    selectedItemEllipsis,\n    width,\n    dropdownWidth = 'auto',\n    inputValue: controlledInputValue,\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onDelete,\n    onSelect,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    isItemSelected,\n    noResultText,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [highlighted, setHighlighted] = useState(false)\n  const [uncontrolledInputValue, setUncontrolledInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n\n  const selectedListId = useId()\n\n  const isInputControlled = controlledInputValue !== undefined\n  const inputValue = isInputControlled ? controlledInputValue : uncontrolledInputValue\n  const setInputValueIfUncontrolled = isInputControlled ? NOOP : setUncontrolledInputValue\n  const isInputEmpty = !inputValue\n\n  const { options } = useMultiOptions({\n    items,\n    selected: selectedItems,\n    creatable,\n    inputValue,\n    isItemSelected,\n  })\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // eslint-disable-next-line local-rules/best-practice-for-use-latest\n  const latestForListBox = useLatest({\n    onDelete,\n    onChangeSelected,\n    onSelect,\n    onChangeInput,\n    selectedItems,\n  })\n\n  const listBoxFunctions = useMemo(() => {\n    const handleDelete = (item: ComboboxItem<T>) => {\n      const handlers: Array<(deletingItem: ComboboxItem<T>) => void> = []\n\n      if (latestForListBox.onDelete) {\n        handlers.push((deletingItem: ComboboxItem<T>) => latestForListBox.onDelete!(deletingItem))\n      }\n      if (latestForListBox.onChangeSelected) {\n        handlers.push((deletingItem: ComboboxItem<T>) =>\n          latestForListBox.onChangeSelected!(\n            latestForListBox.selectedItems.filter(\n              (selected) => !areItemsEqual(selected, deletingItem),\n            ),\n          ),\n        )\n      }\n\n      if (handlers.length > 0) {\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          handlers.forEach((h) => h(item))\n        })\n      }\n    }\n\n    return {\n      handleDelete,\n      handleSelect: (selected: ComboboxItem<T>) => {\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          const matchedSelectedItem = latestForListBox.selectedItems.find((item) =>\n            areItemsEqual(item, selected),\n          )\n\n          if (matchedSelectedItem === undefined) {\n            latestForListBox.onSelect?.(selected)\n            latestForListBox.onChangeSelected?.(latestForListBox.selectedItems.concat(selected))\n\n            // 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n            latestForListBox.onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n          } else if (matchedSelectedItem.deletable !== false) {\n            handleDelete(selected)\n          }\n        })\n      },\n    }\n  }, [latestForListBox])\n\n  const { listBoxProps, activeOption, handleKeyDownListBox, listBoxId, listBoxRef } = useListbox({\n    options,\n    dropdownHelpMessage,\n    dropdownWidth,\n    onAdd,\n    onSelect: listBoxFunctions.handleSelect,\n    isExpanded,\n    isLoading,\n    triggerRef,\n    noResultText,\n  })\n\n  const latest = useLatest({\n    onChange,\n    onChangeInput,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    disabled,\n    isExpanded,\n    highlighted,\n    isComposing,\n    isInputEmpty,\n    selectedItems,\n    setInputValueIfUncontrolled,\n    handleKeyDownListBox,\n  })\n\n  const functions = useMemo(() => {\n    const handleDelete = listBoxFunctions.handleDelete\n\n    const getDeletionButtons = () => {\n      if (triggerRef.current) {\n        const buttons =\n          triggerRef.current.querySelectorAll<HTMLButtonElement>(DELETE_BUTTON_CLASSNAME)\n\n        if (buttons.length > 0) {\n          const actualButtons = Array.from(buttons)\n\n          return {\n            buttons: actualButtons,\n            currentIndex: actualButtons.indexOf(document.activeElement as HTMLButtonElement),\n          }\n        }\n      }\n\n      return null\n    }\n\n    const focusPrevDeletionButton = () => {\n      const result = getDeletionButtons()\n\n      if (!result) return\n\n      const { buttons, currentIndex } = result\n\n      if (currentIndex !== -1) {\n        buttons[Math.max(currentIndex - 1, 0)].focus()\n      } else if (inputRef.current?.selectionStart === 0) {\n        buttons[buttons.length - 1].focus()\n      }\n    }\n\n    const focusNextDeletionButton = () => {\n      const result = getDeletionButtons()\n\n      if (!result) return\n\n      const { buttons, currentIndex } = result\n\n      if (currentIndex === -1) return\n\n      const nextIndex = currentIndex + 1\n\n      if (nextIndex < buttons.length) {\n        buttons[nextIndex].focus()\n      } else {\n        // キー入力が input に影響しないようにフォーカスタイミングを遅らせる\n        setTimeout(() => {\n          inputRef.current?.focus()\n        })\n      }\n    }\n\n    const focus = () => {\n      latest.onFocus?.()\n      setIsExpanded(true)\n    }\n\n    const blur = () => {\n      if (latest.isExpanded) {\n        latest.onBlur?.()\n        setIsExpanded(false)\n      }\n    }\n\n    return {\n      handleDelete,\n      blur,\n      handleDelegateKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {\n        if (latest.isComposing) return\n\n        if (ESCAPE_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          blur()\n        } else if (e.key === 'Tab') {\n          if (latest.isExpanded) {\n            // フォーカスがコンポーネントを抜けるように先に input をフォーカスしておく\n            inputRef.current?.focus()\n          }\n\n          blur()\n        } else if (ARROW_LEFT_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          focusPrevDeletionButton()\n        } else if (ARROW_RIGHT_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          focusNextDeletionButton()\n        } else if (\n          e.key === 'Backspace' &&\n          latest.isInputEmpty &&\n          latest.selectedItems.length > 0 &&\n          latest.selectedItems[latest.selectedItems.length - 1].deletable !== false\n        ) {\n          e.preventDefault()\n          e.stopPropagation()\n\n          const lastItem = latest.selectedItems[latest.selectedItems.length - 1]\n\n          handleDelete(lastItem)\n          setHighlighted(true)\n          latest.setInputValueIfUncontrolled(innerText(lastItem.label))\n        } else {\n          e.stopPropagation()\n          inputRef.current?.focus()\n        }\n\n        latest.handleKeyDownListBox(e)\n      },\n      handleDelegateClick: (e: MouseEvent<HTMLElement>) => {\n        if (\n          !latest.disabled &&\n          !latest.isExpanded &&\n          !findDelegateTarget(e, DELETE_BUTTON_CLASSNAME)\n        ) {\n          focus()\n        }\n      },\n      handleChangeInput: (e: ChangeEvent<HTMLInputElement>) => {\n        const handlers = [latest.onChange, latest.onChangeInput].filter((h) => !!h)\n\n        handlers.forEach((h) => h(e))\n        latest.setInputValueIfUncontrolled(e.currentTarget.value)\n      },\n      handleFocusInput: () => {\n        if (!latest.isExpanded) {\n          focus()\n        }\n      },\n      handleCompositionStart: () => setIsComposing(true),\n      handleCompositionEnd: () => setIsComposing(false),\n      handleKeyDownInput: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (ARROW_UP_AND_DOWN_KEY_REGEX.test(e.key)) {\n          // 上下キー入力はリストボックスの activeDescendant の移動に用いるため、input 内では作用させない\n          e.preventDefault()\n        }\n      },\n      // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n      // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n      // submitイベントが発生し、formが送信される場合がある\n      handleDelegateKeyPress: (e: KeyboardEvent<HTMLInputElement>) => {\n        preventDefaultWithPressEnter(e)\n        latest.onKeyPress?.(e)\n      },\n    }\n  }, [listBoxFunctions, latest])\n\n  useOuterClick(\n    useMemo(() => [triggerRef, listBoxRef], [listBoxRef]),\n    functions.blur,\n  )\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => inputRef.current)\n\n  useEffect(() => {\n    if (latest.highlighted) {\n      setHighlighted(false)\n      inputRef.current?.select()\n    } else {\n      setInputValueIfUncontrolled('')\n    }\n  }, [selectedItems, setInputValueIfUncontrolled, inputRef, latest])\n\n  useEffect(() => {\n    if (isExpanded) {\n      inputRef.current?.focus()\n    }\n  }, [isExpanded, selectedItems, isInputControlled, inputRef])\n\n  const classNames = useMemo(() => {\n    const {\n      wrapper,\n      inputArea,\n      selectedList,\n      inputWrapper,\n      input,\n      placeholderEl,\n      suffixWrapper,\n      suffixIcon,\n    } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      inputArea: inputArea(),\n      selectedList: selectedList(),\n      inputWrapper: inputWrapper(),\n      input: input(),\n      placeholder: placeholderEl(),\n      suffixWrapper: suffixWrapper(),\n      suffixIcon: suffixIcon(),\n    }\n  }, [className])\n\n  const localized = useLocalize({\n    selectedListAriaLabel: {\n      id: 'smarthr-ui/MultiCombobox/selectedListAriaLabel',\n      defaultText: '選択済みアイテム',\n    },\n  })\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <div\n      ref={triggerRef}\n      role=\"group\"\n      onClick={functions.handleDelegateClick}\n      onKeyDown={functions.handleDelegateKeyDown}\n      onKeyPress={functions.handleDelegateKeyPress}\n      className={classNames.wrapper}\n      style={{\n        ...style,\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n    >\n      <Scroller className={classNames.inputArea}>\n        <ul\n          id={selectedListId}\n          aria-label={localized.selectedListAriaLabel}\n          className={classNames.selectedList}\n        >\n          {selectedItems.map((selectedItem) => (\n            <li key={`${selectedItem.label}-${innerText(selectedItem.value)}`}>\n              <MultiSelectedItem\n                item={selectedItem}\n                disabled={disabled}\n                handleDelete={functions.handleDelete}\n                enableEllipsis={selectedItemEllipsis}\n              />\n            </li>\n          ))}\n        </ul>\n\n        <div className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            data-smarthr-ui-input=\"true\"\n            type=\"text\"\n            name={name}\n            value={inputValue}\n            disabled={disabled}\n            required={required && selectedItems.length === 0}\n            ref={inputRef}\n            onChange={functions.handleChangeInput}\n            onFocus={functions.handleFocusInput}\n            onCompositionStart={functions.handleCompositionStart}\n            onCompositionEnd={functions.handleCompositionEnd}\n            onKeyDown={functions.handleKeyDownInput}\n            autoComplete={autoComplete ?? 'off'}\n            tabIndex={0}\n            role=\"combobox\"\n            aria-activedescendant={activeOption?.id}\n            aria-controls={`${listBoxId} ${selectedListId}`}\n            aria-haspopup=\"listbox\"\n            aria-expanded={isExpanded}\n            aria-invalid={error || undefined}\n            aria-disabled={disabled}\n            aria-autocomplete=\"list\"\n            className={classNames.input}\n          />\n        </div>\n\n        {selectedItems.length === 0 && placeholder && !isExpanded && (\n          <p className={classNames.placeholder}>{placeholder}</p>\n        )}\n      </Scroller>\n\n      <MemoizedCaretDown disabled={disabled} isExpanded={isExpanded} classNames={classNames} />\n\n      <ListBox {...listBoxProps} />\n    </div>\n  )\n}\n\nexport const MultiCombobox = genericsForwardRef(ActualMultiCombobox)\n\nconst MemoizedCaretDown = memo<{\n  disabled: boolean\n  isExpanded: boolean\n  classNames: {\n    suffixWrapper: string\n    suffixIcon: string\n  }\n}>(({ disabled, isExpanded, classNames }) => {\n  const theme = useTheme()\n  const caretIconColor = isExpanded\n    ? theme.textColor.black\n    : disabled\n      ? theme.textColor.disabled\n      : theme.textColor.grey\n\n  return (\n    <div className={classNames.suffixWrapper}>\n      <FaCaretDownIcon color={caretIconColor} className={classNames.suffixIcon} />\n    </div>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6EA;AAEA;AACE;;;AAGF;AAEA;AACA;AACA;AACA;AAEA;AACE;AACA;;AAGF;AAEA;AACE;AACE;;;;;;;;;;;;AAYC;AACD;AACA;AAEA;;;;;AAKC;AACD;;;;AAIC;AACD;AACA;;;AAGC;AACD;AACD;AACF;AAED;AAkCE;;;;;AAMA;AAEA;;;AAGA;AAEA;;AAEE;;;;AAID;AACD;;;;;;;;AASC;AAED;AACE;;AAGE;AACE;;AAEF;AACE;;AASF;;;;AAII;AACF;;AAEJ;;;AAIE;;;;;AAQI;AACE;AACA;;AAGA;;AACK;;;AAGT;;;AAGN;AAEA;;;;;;;;;;AAUC;;;;;;;;;;;;;;;AAgBA;AAED;AACE;;AAGE;;AAIE;;;AAII;;;;;AAMN;AACF;;AAGE;AAEA;;AAEA;AAEA;AACE;;;;;AAIJ;;AAGE;AAEA;;AAEA;;;AAIA;AAEA;AACE;;;;;AAIE;AACF;;AAEJ;;AAGE;;AAEF;;AAGE;AACE;;;AAGJ;;;;AAKE;;;;;AAKI;;AACK;AACL;;AAEE;;AAGF;;;;AAGA;;;;AAGA;;AACK;AAEL;AACA;AACA;;;AAKA;;;;;;;AAOA;;AAGF;;AAEF;;;AAII;AAEA;;;AAGJ;;AAGE;;;;AAIA;AACE;;;AAGJ;AACA;AACA;;;;;;;;;AASA;;AAEE;;;AAGN;;;;AAUE;;AAEE;;;;;;;;AAQA;;;AAIJ;;;AAaI;;;;;;;;;AASJ;;AAGE;AACE;AACA;AACD;AACF;;;AAIC;AAQI;AACA;;AA4DR;;AAIA;AAQE;;AAEE;AACA;AACE;AACA;;AAON;;"}
+{"version":3,"file":"MultiCombobox.js","sources":["../../../../src/components/Combobox/MultiCombobox/MultiCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  memo,\n  useEffect,\n  useId,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useLatest } from '../../../hooks/useLatest'\nimport { useOuterClick } from '../../../hooks/useOuterClick'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { useLocalize } from '../../../intl'\nimport { findDelegateTarget } from '../../../libs/delegate'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { FaCaretDownIcon } from '../../Icon'\nimport { Scroller } from '../../Scroller'\nimport { areItemsEqual } from '../helper'\nimport { ListBox, useListbox } from '../useListbox'\nimport { useMultiOptions } from '../useOptions'\n\nimport { DELETE_BUTTON_SELECTOR, MultiSelectedItem } from './MultiSelectedItem'\n\nimport type { ComboboxItem, BaseProps as ComboboxProps } from '../types'\n\ntype BaseProps<T> = ComboboxProps<T> & {\n  /**\n   * 選択されているアイテムのリスト\n   */\n  selectedItems: Array<ComboboxItem<T> & { deletable?: boolean }>\n  /**\n   * 選択されているアイテムのラベルを省略表示するかどうか\n   */\n  selectedItemEllipsis?: boolean\n  /**\n   * テキストボックスの `value` 属性の値。\n   * `onChangeInput` と併せて設定することで、テキストボックスの挙動が制御可能になる。\n   */\n  inputValue?: string\n  /**\n   * 選択されているアイテムの削除ボタンがクリックされた時に発火するコールバック関数\n   */\n  onDelete?: (item: ComboboxItem<T>) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItems: Array<ComboboxItem<T>>) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  /**\n   * アイテムが選択されたときに選択済みかどうかを判定するコールバック関数/\n   */\n  isItemSelected?: (targetItem: ComboboxItem<T>, selectedItems: Array<ComboboxItem<T>>) => boolean\n  /**\n   * 検索結果が0件の時に表示するコンテンツ\n   */\n  noResultText?: ReactNode\n}\ntype Props<T> = BaseProps<T> & Omit<ComponentPropsWithoutRef<'input'>, keyof BaseProps<unknown>>\n\nconst NOOP = () => undefined\n\nconst preventDefaultWithPressEnter = (e: KeyboardEvent<HTMLInputElement>) => {\n  if (e.key === 'Enter') {\n    e.preventDefault()\n  }\n}\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_LEFT_KEY_REGEX = /^(Arrow)?Left$/\nconst ARROW_RIGHT_KEY_REGEX = /^(Arrow)?Right/\nconst ARROW_UP_AND_DOWN_KEY_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst EMPTY_INPUT_CHANGE_EVENT = {\n  currentTarget: { value: '' },\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>\n\nconst DELETE_BUTTON_CLASSNAME = `.${DELETE_BUTTON_SELECTOR}`\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper: [\n      'smarthr-ui-MultiCombobox',\n      'shr-box-border shr-inline-flex shr-min-w-[15em] shr-rounded-m shr-border shr-border-solid shr-px-0.5 shr-py-0.25 shr-align-bottom',\n      'contrast-more:shr-border-high-contrast',\n      'has-[[role=combobox][aria-expanded=true]]:shr-focus-indicator',\n      'shr-cursor-text shr-border-default shr-bg-white',\n      'has-[[role=combobox]:disabled]:shr-cursor-not-allowed',\n      'has-[[role=combobox]:disabled]:shr-border-default/50',\n      'has-[[role=combobox]:disabled]:shr-bg-white-darken',\n      'has-[[role=combobox]:disabled]:shr-text-disabled',\n      // HINT: disabled と詳細度が同じ [0,2,0] のため、CSS ソース順でこちらを後に置くことで error 時の border 色を優先させる\n      'has-[[role=combobox][aria-invalid]]:shr-border-danger',\n    ],\n    inputArea: 'shr-flex shr-flex-1 shr-flex-wrap shr-gap-0.5',\n    selectedList:\n      'smarthr-ui-MultiCombobox-selectedList shr-contents shr-list-none [&_li]:shr-min-w-0',\n    inputWrapper: [\n      'shr-flex shr-flex-1 shr-items-center',\n      'has-[[role=combobox][aria-expanded=false]]:shr-pointer-events-none',\n      'has-[[role=combobox][aria-expanded=false]]:shr-absolute',\n      'has-[[role=combobox][aria-expanded=false]]:shr-opacity-0',\n    ],\n    input: [\n      'smarthr-ui-MultiCombobox-input',\n      'shr-w-full shr-min-w-[5em] shr-border-none shr-text-base shr-text-black shr-outline-none shr-outline-0',\n      'disabled:shr-hidden',\n    ],\n    placeholderEl: 'smarthr-ui-MultiCombobox-placeholder shr-my-0 shr-self-center',\n    suffixWrapper: [\n      'shr-relative -shr-me-0.5 shr-ms-0.5 shr-p-0.5',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    suffixIcon: 'shr-block',\n  },\n})\n\nconst ActualMultiCombobox = <T,>(\n  {\n    items,\n    selectedItems,\n    name,\n    disabled = false,\n    required = false,\n    error = false,\n    creatable = false,\n    placeholder = '',\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    selectedItemEllipsis,\n    width,\n    dropdownWidth = 'auto',\n    inputValue: controlledInputValue,\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onDelete,\n    onSelect,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    isItemSelected,\n    noResultText,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [highlighted, setHighlighted] = useState(false)\n  const [uncontrolledInputValue, setUncontrolledInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n\n  const selectedListId = useId()\n\n  const isInputControlled = controlledInputValue !== undefined\n  const inputValue = isInputControlled ? controlledInputValue : uncontrolledInputValue\n  const setInputValueIfUncontrolled = isInputControlled ? NOOP : setUncontrolledInputValue\n  const isInputEmpty = !inputValue\n\n  const { options } = useMultiOptions({\n    items,\n    selected: selectedItems,\n    creatable,\n    inputValue,\n    isItemSelected,\n  })\n  const inputRef = useRef<HTMLInputElement>(null)\n\n  // eslint-disable-next-line local-rules/best-practice-for-use-latest\n  const latestForListBox = useLatest({\n    onDelete,\n    onChangeSelected,\n    onSelect,\n    onChangeInput,\n    selectedItems,\n  })\n\n  const listBoxFunctions = useMemo(() => {\n    const handleDelete = (item: ComboboxItem<T>) => {\n      const handlers: Array<(deletingItem: ComboboxItem<T>) => void> = []\n\n      if (latestForListBox.onDelete) {\n        handlers.push((deletingItem: ComboboxItem<T>) => latestForListBox.onDelete!(deletingItem))\n      }\n      if (latestForListBox.onChangeSelected) {\n        handlers.push((deletingItem: ComboboxItem<T>) =>\n          latestForListBox.onChangeSelected!(\n            latestForListBox.selectedItems.filter(\n              (selected) => !areItemsEqual(selected, deletingItem),\n            ),\n          ),\n        )\n      }\n\n      if (handlers.length > 0) {\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          handlers.forEach((h) => h(item))\n        })\n      }\n    }\n\n    return {\n      handleDelete,\n      handleSelect: (selected: ComboboxItem<T>) => {\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          const matchedSelectedItem = latestForListBox.selectedItems.find((item) =>\n            areItemsEqual(item, selected),\n          )\n\n          if (matchedSelectedItem === undefined) {\n            latestForListBox.onSelect?.(selected)\n            latestForListBox.onChangeSelected?.(latestForListBox.selectedItems.concat(selected))\n\n            // 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n            latestForListBox.onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n          } else if (matchedSelectedItem.deletable !== false) {\n            handleDelete(selected)\n          }\n        })\n      },\n    }\n  }, [latestForListBox])\n\n  const { listBoxProps, activeOption, handleKeyDownListBox, listBoxId, listBoxRef } = useListbox({\n    options,\n    dropdownHelpMessage,\n    dropdownWidth,\n    onAdd,\n    onSelect: listBoxFunctions.handleSelect,\n    isExpanded,\n    isLoading,\n    triggerRef,\n    noResultText,\n  })\n\n  const latest = useLatest({\n    onChange,\n    onChangeInput,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    disabled,\n    isExpanded,\n    highlighted,\n    isComposing,\n    isInputEmpty,\n    selectedItems,\n    setInputValueIfUncontrolled,\n    handleKeyDownListBox,\n  })\n\n  const functions = useMemo(() => {\n    const handleDelete = listBoxFunctions.handleDelete\n\n    const getDeletionButtons = () => {\n      if (triggerRef.current) {\n        const buttons =\n          triggerRef.current.querySelectorAll<HTMLButtonElement>(DELETE_BUTTON_CLASSNAME)\n\n        if (buttons.length > 0) {\n          const actualButtons = Array.from(buttons)\n\n          return {\n            buttons: actualButtons,\n            currentIndex: actualButtons.indexOf(document.activeElement as HTMLButtonElement),\n          }\n        }\n      }\n\n      return null\n    }\n\n    const focusPrevDeletionButton = () => {\n      const result = getDeletionButtons()\n\n      if (!result) return\n\n      const { buttons, currentIndex } = result\n\n      if (currentIndex !== -1) {\n        buttons[Math.max(currentIndex - 1, 0)].focus()\n      } else if (inputRef.current?.selectionStart === 0) {\n        buttons[buttons.length - 1].focus()\n      }\n    }\n\n    const focusNextDeletionButton = () => {\n      const result = getDeletionButtons()\n\n      if (!result) return\n\n      const { buttons, currentIndex } = result\n\n      if (currentIndex === -1) return\n\n      const nextIndex = currentIndex + 1\n\n      if (nextIndex < buttons.length) {\n        buttons[nextIndex].focus()\n      } else {\n        // キー入力が input に影響しないようにフォーカスタイミングを遅らせる\n        setTimeout(() => {\n          inputRef.current?.focus()\n        })\n      }\n    }\n\n    const focus = () => {\n      latest.onFocus?.()\n      setIsExpanded(true)\n    }\n\n    const blur = () => {\n      if (latest.isExpanded) {\n        latest.onBlur?.()\n        setIsExpanded(false)\n      }\n    }\n\n    return {\n      handleDelete,\n      blur,\n      handleDelegateKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {\n        if (latest.isComposing) return\n\n        if (ESCAPE_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          blur()\n        } else if (e.key === 'Tab') {\n          if (latest.isExpanded) {\n            // フォーカスがコンポーネントを抜けるように先に input をフォーカスしておく\n            inputRef.current?.focus()\n          }\n\n          blur()\n        } else if (ARROW_LEFT_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          focusPrevDeletionButton()\n        } else if (ARROW_RIGHT_KEY_REGEX.test(e.key)) {\n          e.stopPropagation()\n          focusNextDeletionButton()\n        } else if (\n          e.key === 'Backspace' &&\n          latest.isInputEmpty &&\n          latest.selectedItems.length > 0 &&\n          latest.selectedItems[latest.selectedItems.length - 1].deletable !== false\n        ) {\n          e.preventDefault()\n          e.stopPropagation()\n\n          const lastItem = latest.selectedItems[latest.selectedItems.length - 1]\n\n          handleDelete(lastItem)\n          setHighlighted(true)\n          latest.setInputValueIfUncontrolled(innerText(lastItem.label))\n        } else {\n          e.stopPropagation()\n          inputRef.current?.focus()\n        }\n\n        latest.handleKeyDownListBox(e)\n      },\n      handleDelegateClick: (e: MouseEvent<HTMLElement>) => {\n        if (\n          !latest.disabled &&\n          !latest.isExpanded &&\n          !findDelegateTarget(e, DELETE_BUTTON_CLASSNAME)\n        ) {\n          focus()\n        }\n      },\n      handleChangeInput: (e: ChangeEvent<HTMLInputElement>) => {\n        const handlers = [latest.onChange, latest.onChangeInput].filter((h) => !!h)\n\n        handlers.forEach((h) => h(e))\n        latest.setInputValueIfUncontrolled(e.currentTarget.value)\n      },\n      handleFocusInput: () => {\n        if (!latest.isExpanded) {\n          focus()\n        }\n      },\n      handleCompositionStart: () => setIsComposing(true),\n      handleCompositionEnd: () => setIsComposing(false),\n      handleKeyDownInput: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (ARROW_UP_AND_DOWN_KEY_REGEX.test(e.key)) {\n          // 上下キー入力はリストボックスの activeDescendant の移動に用いるため、input 内では作用させない\n          e.preventDefault()\n        }\n      },\n      // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n      // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n      // submitイベントが発生し、formが送信される場合がある\n      handleDelegateKeyPress: (e: KeyboardEvent<HTMLInputElement>) => {\n        preventDefaultWithPressEnter(e)\n        latest.onKeyPress?.(e)\n      },\n    }\n  }, [listBoxFunctions, latest])\n\n  useOuterClick([triggerRef, listBoxRef], functions.blur)\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n    ref,\n    () => inputRef.current,\n    [],\n  )\n\n  useEffect(() => {\n    if (latest.highlighted) {\n      setHighlighted(false)\n      inputRef.current?.select()\n    } else {\n      setInputValueIfUncontrolled('')\n    }\n  }, [selectedItems, setInputValueIfUncontrolled, inputRef, latest])\n\n  useEffect(() => {\n    if (isExpanded) {\n      inputRef.current?.focus()\n    }\n  }, [isExpanded, selectedItems, isInputControlled, inputRef])\n\n  const classNames = useMemo(() => {\n    const {\n      wrapper,\n      inputArea,\n      selectedList,\n      inputWrapper,\n      input,\n      placeholderEl,\n      suffixWrapper,\n      suffixIcon,\n    } = classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      inputArea: inputArea(),\n      selectedList: selectedList(),\n      inputWrapper: inputWrapper(),\n      input: input(),\n      placeholder: placeholderEl(),\n      suffixWrapper: suffixWrapper(),\n      suffixIcon: suffixIcon(),\n    }\n  }, [className])\n\n  const localized = useLocalize({\n    selectedListAriaLabel: {\n      id: 'smarthr-ui/MultiCombobox/selectedListAriaLabel',\n      defaultText: '選択済みアイテム',\n    },\n  })\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <div\n      ref={triggerRef}\n      role=\"group\"\n      onClick={functions.handleDelegateClick}\n      onKeyDown={functions.handleDelegateKeyDown}\n      onKeyPress={functions.handleDelegateKeyPress}\n      className={classNames.wrapper}\n      style={{\n        ...style,\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n    >\n      <Scroller className={classNames.inputArea}>\n        <ul\n          id={selectedListId}\n          aria-label={localized.selectedListAriaLabel}\n          className={classNames.selectedList}\n        >\n          {selectedItems.map((selectedItem) => (\n            <li key={`${selectedItem.label}-${innerText(selectedItem.value)}`}>\n              <MultiSelectedItem\n                item={selectedItem}\n                disabled={disabled}\n                handleDelete={functions.handleDelete}\n                enableEllipsis={selectedItemEllipsis}\n              />\n            </li>\n          ))}\n        </ul>\n\n        <div className={classNames.inputWrapper}>\n          <input\n            {...rest}\n            data-smarthr-ui-input=\"true\"\n            type=\"text\"\n            name={name}\n            value={inputValue}\n            disabled={disabled}\n            required={required && selectedItems.length === 0}\n            ref={inputRef}\n            onChange={functions.handleChangeInput}\n            onFocus={functions.handleFocusInput}\n            onCompositionStart={functions.handleCompositionStart}\n            onCompositionEnd={functions.handleCompositionEnd}\n            onKeyDown={functions.handleKeyDownInput}\n            autoComplete={autoComplete ?? 'off'}\n            tabIndex={0}\n            role=\"combobox\"\n            aria-activedescendant={activeOption?.id}\n            aria-controls={`${listBoxId} ${selectedListId}`}\n            aria-haspopup=\"listbox\"\n            aria-expanded={isExpanded}\n            aria-invalid={error || undefined}\n            aria-disabled={disabled}\n            aria-autocomplete=\"list\"\n            className={classNames.input}\n          />\n        </div>\n\n        {selectedItems.length === 0 && placeholder && !isExpanded && (\n          <p className={classNames.placeholder}>{placeholder}</p>\n        )}\n      </Scroller>\n\n      <MemoizedCaretDown disabled={disabled} isExpanded={isExpanded} classNames={classNames} />\n\n      <ListBox {...listBoxProps} />\n    </div>\n  )\n}\n\nexport const MultiCombobox = genericsForwardRef(ActualMultiCombobox)\n\nconst MemoizedCaretDown = memo<{\n  disabled: boolean\n  isExpanded: boolean\n  classNames: {\n    suffixWrapper: string\n    suffixIcon: string\n  }\n}>(({ disabled, isExpanded, classNames }) => {\n  const theme = useTheme()\n  const caretIconColor = isExpanded\n    ? theme.textColor.black\n    : disabled\n      ? theme.textColor.disabled\n      : theme.textColor.grey\n\n  return (\n    <div className={classNames.suffixWrapper}>\n      <FaCaretDownIcon color={caretIconColor} className={classNames.suffixIcon} />\n    </div>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA6EA;AAEA;AACE;;;AAGF;AAEA;AACA;AACA;AACA;AAEA;AACE;AACA;;AAGF;AAEA;AACE;AACE;;;;;;;;;;;;AAYC;AACD;AACA;AAEA;;;;;AAKC;AACD;;;;AAIC;AACD;AACA;;;AAGC;AACD;AACD;AACF;AAED;AAkCE;;;;;AAMA;AAEA;;;AAGA;AAEA;;AAEE;;;;AAID;AACD;;;;;;;;AASC;AAED;AACE;;AAGE;AACE;;AAEF;AACE;;AASF;;;;AAII;AACF;;AAEJ;;;AAIE;;;;;AAQI;AACE;AACA;;AAGA;;AACK;;;AAGT;;;AAGN;AAEA;;;;;;;;;;AAUC;;;;;;;;;;;;;;;AAgBA;AAED;AACE;;AAGE;;AAIE;;;AAII;;;;;AAMN;AACF;;AAGE;AAEA;;AAEA;AAEA;AACE;;;;;AAIJ;;AAGE;AAEA;;AAEA;;;AAIA;AAEA;AACE;;;;;AAIE;AACF;;AAEJ;;AAGE;;AAEF;;AAGE;AACE;;;AAGJ;;;;AAKE;;;;;AAKI;;AACK;AACL;;AAEE;;AAGF;;;;AAGA;;;;AAGA;;AACK;AAEL;AACA;AACA;;;AAKA;;;;;;;AAOA;;AAGF;;AAEF;;;AAII;AAEA;;;AAGJ;;AAGE;;;;AAIA;AACE;;;AAGJ;AACA;AACA;;;;;;;;;AASA;;AAEE;;;AAGN;;AAIA;;AAOE;;AAEE;;;;;;;;AAQA;;;AAIJ;;;AAaI;;;;;;;;;AASJ;;AAGE;AACE;AACA;AACD;AACF;;;AAIC;AAQI;AACA;;AA4DR;;AAIA;AAQE;;AAEE;AACA;AACE;AACA;;AAON;;"}

package/lib/components/Combobox/SingleCombobox/SingleCombobox.cjs

@@ -67,7 +67,7 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
     const [inputValue, setInputValue] = React.useState('');
     const [isComposing, setIsComposing] = React.useState(false);
     const [isEditing, setIsEditing] = React.useState(false);
-    React.useImperativeHandle(ref, () => inputRef.current);
+    React.useImperativeHandle(ref, () => inputRef.current, []);
     const { options } = components_Combobox_useOptions.useSingleOptions({
         items,
         selected: selectedItem,
@@ -235,7 +235,7 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
         : disabled || readOnly
             ? theme.textColor.disabled
             : theme.textColor.grey;
-    hooks_useClick.useClick(React.useMemo(() => [triggerRef, listBoxRef, clearButtonRef], [listBoxRef]), isFocused || selectedItem ? NOOP : functions.selectDefaultItem, functions.unfocus);
+    hooks_useClick.useClick([triggerRef, listBoxRef, clearButtonRef], isFocused || selectedItem ? NOOP : functions.selectDefaultItem, functions.unfocus);
     // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。
     const selectedItemLabelText = index$1(selectedItem?.label);
     React.useEffect(() => {

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

@@ -1 +1 @@
-{"version":3,"file":"SingleCombobox.cjs","sources":["../../../../src/components/Combobox/SingleCombobox/SingleCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useClick } from '../../../hooks/useClick'\nimport { useLatest } from '../../../hooks/useLatest'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { Localizer } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { UnstyledButton } from '../../Button'\nimport { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon'\nimport { Input } from '../../Input'\nimport { ListBox, useListbox } from '../useListbox'\nimport { useSingleOptions } from '../useOptions'\n\nimport type { ComboboxItem, BaseProps as ComboboxProps } from '../types'\n\ntype BaseProps<T> = ComboboxProps<T> & {\n  /**\n   * 選択されているアイテム\n   */\n  selectedItem: ComboboxItem<T> | null\n  /**\n   * デフォルトで選択されるアイテム\n   */\n  defaultItem?: ComboboxItem<T>\n  /**\n   * コンポーネント内の先頭に表示する内容\n   */\n  prefix?: ReactNode\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   */\n  onClear?: () => void\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   * 指定している場合、クリア時にonClickを実行せずにonClearClickのみ実行する\n   */\n  onClearClick?: (e: MouseEvent) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItem: ComboboxItem<T> | null) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  /**\n   * 検索結果が0件の時に表示するコンテンツ\n   */\n  noResultText?: ReactNode\n}\ntype Props<T> = BaseProps<T> & Omit<ComponentPropsWithoutRef<'input'>, keyof BaseProps<unknown>>\n\nconst NOOP = () => undefined\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_UP_DOWN_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst EMPTY_INPUT_CHANGE_EVENT = {\n  currentTarget: { value: '' },\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper:\n      'smarthr-ui-SingleCombobox shr-inline-block [&:has(.smarthr-ui-Input-input:disabled)]:shr-cursor-not-allowed',\n    input: 'smarthr-ui-SingleCombobox-input shr-w-full',\n    caretDownLayout: [\n      'shr-relative -shr-me-0.5 shr-p-0.5',\n      'before:shr-border-0',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    caretDownIcon: 'shr-block',\n    clearButton: [\n      'smarthr-ui-SingleCombobox-clearButton',\n      'shr-group/clearButton',\n      'shr-me-0.5',\n      'focus-visible:shr-shadow-none',\n      '[[data-clear-button-hidden=true]_&]:shr-hidden',\n    ],\n    clearButtonIcon: [\n      'shr-block',\n      'group-focus-visible/clearButton:shr-focus-indicator group-focus-visible/clearButton:shr-rounded-full',\n    ],\n  },\n})\n\ntype SuffixButtonsProps = {\n  clearButtonRef: RefObject<HTMLButtonElement>\n  caretIconColor: string\n  handleClickClear: (e: MouseEvent) => void\n  handleClickIcon: (e: MouseEvent) => void\n  classNames: {\n    clearButton: string\n    clearButtonIcon: string\n    caretDownLayout: string\n    caretDownIcon: string\n  }\n}\n\nconst SuffixButtons = memo<SuffixButtonsProps>(\n  ({\n    clearButtonRef,\n    caretIconColor,\n    handleClickClear,\n    handleClickIcon: handleDelegateClickIcon,\n    classNames,\n  }) => (\n    <>\n      <UnstyledButton\n        onClick={handleClickClear}\n        ref={clearButtonRef}\n        className={classNames.clearButton}\n      >\n        <FaCircleXmarkIcon\n          color=\"TEXT_BLACK\"\n          alt={\n            <Localizer id=\"smarthr-ui/SingleCombobox/destroyButtonIconAlt\" defaultText=\"クリア\" />\n          }\n          className={classNames.clearButtonIcon}\n        />\n      </UnstyledButton>\n      <span\n        role=\"presentation\"\n        onClick={handleDelegateClickIcon}\n        className={classNames.caretDownLayout}\n      >\n        <FaCaretDownIcon color={caretIconColor} className={classNames.caretDownIcon} />\n      </span>\n    </>\n  ),\n)\n\nconst ActualSingleCombobox = <T,>(\n  {\n    items,\n    selectedItem,\n    defaultItem,\n    name,\n    disabled,\n    readOnly,\n    required,\n    prefix,\n    error,\n    creatable,\n    placeholder,\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    width,\n    dropdownWidth = 'auto',\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    noResultText,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const theme = useTheme()\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const clearButtonRef = useRef<HTMLButtonElement>(null)\n  const [isFocused, setIsFocused] = useState(false)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [inputValue, setInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n  const [isEditing, setIsEditing] = useState(false)\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => inputRef.current)\n\n  const { options } = useSingleOptions({\n    items,\n    selected: selectedItem,\n    creatable,\n    inputValue,\n    isFilteringDisabled: !isEditing,\n  })\n\n  const { listBoxProps, activeOption, handleKeyDownListBox, listBoxId, listBoxRef } = useListbox<T>(\n    {\n      options,\n      dropdownHelpMessage,\n      dropdownWidth,\n      onAdd,\n      // HINT: memo化していないが、内部でuseLatestでstableにしているため最適化としてそのまま渡している\n      onSelect: (selected: ComboboxItem<T>) => {\n        onSelect?.(selected)\n        onChangeSelected?.(selected)\n\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          setIsExpanded(false)\n          // HINT:\n          // - 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n          // - 対応するdropdownを閉じて以降にonChangeInputを発火する必要がある\n          //   - 先にclearしてしまうと意図せずこの要素のドロップダウンを閉じる前に他要素の再レンダリングを引き起こす可能性がある\n          //   - 例えばFilterDropdownなどで当comboboxを使っている場合、レイアウト上comboboxのdropdown以下の要素がクリックされた扱いになってしまい\n          //     FilterDropdownを意図せず閉じてしまうなどの挙動のバグを引き起こす可能性がある\n          onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n        })\n\n        setIsEditing(false)\n      },\n      isExpanded,\n      isLoading,\n      triggerRef,\n      noResultText,\n    },\n  )\n\n  const latest = useLatest({\n    onChange,\n    onChangeInput,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    handleKeyDownListBox,\n    defaultItem,\n    selectedItem,\n    isFocused,\n    isExpanded,\n    isComposing,\n    isEditing,\n    disabled,\n    readOnly,\n  })\n\n  const functions = useMemo(() => {\n    const selectDefaultItem = () => {\n      if (latest.onSelect && latest.defaultItem) {\n        latest.onSelect(latest.defaultItem)\n      }\n    }\n    const unfocus = () => {\n      if (!latest.isFocused) return\n\n      latest.onBlur?.()\n\n      setIsFocused(false)\n      setIsExpanded(false)\n      setIsEditing(false)\n\n      if (latest.selectedItem) {\n        setInputValue(innerText(latest.selectedItem.label))\n      } else {\n        selectDefaultItem()\n      }\n    }\n\n    return {\n      selectDefaultItem,\n      unfocus,\n      handleFocus: () => {\n        latest.onFocus?.()\n        inputRef.current?.focus()\n        setIsFocused(true)\n\n        if (!latest.isFocused) {\n          setIsExpanded(true)\n        }\n      },\n      handleClickClear: (e: MouseEvent) => {\n        e.stopPropagation()\n\n        let isExecutedPreventDefault = false\n\n        latest.onClearClick?.({\n          ...e,\n          preventDefault: () => {\n            e.preventDefault()\n            isExecutedPreventDefault = true\n          },\n        })\n\n        if (!isExecutedPreventDefault) {\n          latest.onClear?.()\n          latest.onChangeSelected?.(null)\n\n          inputRef.current?.focus()\n\n          setIsFocused(true)\n          setIsExpanded(true)\n        }\n      },\n      handleClickInput: (e: MouseEvent) => {\n        if (latest.disabled || latest.readOnly) {\n          e.stopPropagation()\n\n          return\n        }\n\n        inputRef.current?.focus()\n\n        if (!latest.isExpanded) {\n          setIsExpanded(true)\n        }\n      },\n      handleChangeInput: (e: ChangeEvent<HTMLInputElement>) => {\n        latest.onChange?.(e)\n        latest.onChangeInput?.(e)\n\n        if (!latest.isEditing) setIsEditing(true)\n\n        const { value } = e.currentTarget\n\n        setInputValue(value)\n\n        if (value === '') {\n          latest.onClear?.()\n          latest.onChangeSelected?.(null)\n        }\n      },\n      handleCompositionStart: () => setIsComposing(true),\n      handleCompositionEnd: () => setIsComposing(false),\n      // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n      // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n      // submitイベントが発生し、formが送信される場合がある\n      handleKeyPress: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter') e.preventDefault()\n\n        latest.onKeyPress?.(e)\n      },\n      handleKeyDownInput: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (latest.isComposing) {\n          return\n        }\n\n        if (ESCAPE_KEY_REGEX.test(e.key)) {\n          if (latest.isExpanded) {\n            e.stopPropagation()\n            setIsExpanded(false)\n          }\n        } else if (e.key === 'Tab') {\n          unfocus()\n        } else {\n          if (ARROW_UP_DOWN_REGEX.test(e.key)) {\n            e.preventDefault()\n          }\n\n          inputRef.current?.focus()\n\n          if (!latest.isExpanded) {\n            setIsExpanded(true)\n          }\n        }\n\n        latest.handleKeyDownListBox(e)\n      },\n    }\n  }, [latest])\n\n  const caretIconColor = isFocused\n    ? theme.textColor.black\n    : disabled || readOnly\n      ? theme.textColor.disabled\n      : theme.textColor.grey\n\n  useClick(\n    useMemo(() => [triggerRef, listBoxRef, clearButtonRef], [listBoxRef]),\n    isFocused || selectedItem ? NOOP : functions.selectDefaultItem,\n    functions.unfocus,\n  )\n\n  // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。\n  const selectedItemLabelText = innerText(selectedItem?.label)\n  useEffect(() => {\n    setInputValue(selectedItemLabelText)\n  }, [selectedItemLabelText])\n\n  const classNames = useMemo(() => {\n    const { wrapper, input, caretDownLayout, caretDownIcon, clearButton, clearButtonIcon } =\n      classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      input: input(),\n      caretDownLayout: caretDownLayout(),\n      caretDownIcon: caretDownIcon(),\n      clearButton: clearButton(),\n      clearButtonIcon: clearButtonIcon(),\n    }\n  }, [className])\n\n  return (\n    <div\n      ref={triggerRef}\n      role=\"group\"\n      className={classNames.wrapper}\n      style={{\n        ...style,\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n      data-clear-button-hidden={(selectedItem === null || disabled || readOnly || false).toString()}\n    >\n      <Input\n        {...rest}\n        ref={inputRef}\n        type=\"text\"\n        role=\"combobox\"\n        name={name}\n        value={inputValue}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        autoComplete={autoComplete ?? 'off'}\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-expanded={isFocused}\n        aria-activedescendant={activeOption?.id}\n        aria-autocomplete=\"list\"\n        /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */\n        placeholder={placeholder}\n        onClick={functions.handleClickInput}\n        onChange={functions.handleChangeInput}\n        onFocus={isFocused ? undefined : functions.handleFocus}\n        onCompositionStart={functions.handleCompositionStart}\n        onCompositionEnd={functions.handleCompositionEnd}\n        onKeyDown={functions.handleKeyDownInput}\n        onKeyPress={functions.handleKeyPress}\n        error={error}\n        prefix={prefix}\n        suffix={\n          <SuffixButtons\n            clearButtonRef={clearButtonRef}\n            caretIconColor={caretIconColor}\n            handleClickClear={functions.handleClickClear}\n            handleClickIcon={functions.handleClickInput}\n            classNames={classNames}\n          />\n        }\n        className={classNames.input}\n        data-smarthr-ui-input=\"true\"\n      />\n      {!readOnly && <ListBox {...listBoxProps} />}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA;AAEA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;AAEA;AACA;;;;AAIC;AACD;AACA;;;;;;AAMC;AACD;;;AAGC;AACF;AACF;AAeD;AAiCA;AAmCE;AACA;AACA;AACA;;;;;;;AASA;;AAEE;;;;AAID;AAED;;;;;;AAOI;AACE;AACA;;;;;;;;;;;AAYE;AACF;;;;;;;AAQH;;;;;;;;;;;;;;;;;;;;AAsBF;AAED;;;AAGM;;AAEJ;;;;AAIE;;;;AAMA;;;;AAGE;;AAEJ;;;;;AAMI;AACA;;AAGA;;;;AAIF;;;;AAMI;;;;;AAKD;;AAGC;AACA;AAEA;;;;;AAMJ;;;;;AAOE;AAEA;;;;AAIF;AACE;AACA;;;AAIA;;AAIA;AACE;AACA;;;AAGJ;AACA;;;;AAIA;AACE;;AAEA;;AAEF;AACE;;;;AAKE;;;;;AAIK;AACL;;;;;;AAMA;AAEA;;;;AAKF;;;AAGN;;AAGE;;AAEE;AACA;AAEJ;;;;;AAUA;AAEA;AACE;;AAIE;;;;;;;AAOJ;AAEA;AAMM;AACA;AACD;;;AA6CP;;;"}
+{"version":3,"file":"SingleCombobox.cjs","sources":["../../../../src/components/Combobox/SingleCombobox/SingleCombobox.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n  memo,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useClick } from '../../../hooks/useClick'\nimport { useLatest } from '../../../hooks/useLatest'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { Localizer } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { UnstyledButton } from '../../Button'\nimport { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon'\nimport { Input } from '../../Input'\nimport { ListBox, useListbox } from '../useListbox'\nimport { useSingleOptions } from '../useOptions'\n\nimport type { ComboboxItem, BaseProps as ComboboxProps } from '../types'\n\ntype BaseProps<T> = ComboboxProps<T> & {\n  /**\n   * 選択されているアイテム\n   */\n  selectedItem: ComboboxItem<T> | null\n  /**\n   * デフォルトで選択されるアイテム\n   */\n  defaultItem?: ComboboxItem<T>\n  /**\n   * コンポーネント内の先頭に表示する内容\n   */\n  prefix?: ReactNode\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   */\n  onClear?: () => void\n  /**\n   * 選択されているアイテムがクリアされた時に発火するコールバック関数\n   * 指定している場合、クリア時にonClickを実行せずにonClearClickのみ実行する\n   */\n  onClearClick?: (e: MouseEvent) => void\n  /**\n   * 選択されているアイテムのリストが変わった時に発火するコールバック関数\n   */\n  onChangeSelected?: (selectedItem: ComboboxItem<T> | null) => void\n  /**\n   * コンポーネントがフォーカスされたときに発火するコールバック関数\n   */\n  onFocus?: () => void\n  /**\n   * コンポーネントからフォーカスが外れた時に発火するコールバック関数\n   */\n  onBlur?: () => void\n  /**\n   * 検索結果が0件の時に表示するコンテンツ\n   */\n  noResultText?: ReactNode\n}\ntype Props<T> = BaseProps<T> & Omit<ComponentPropsWithoutRef<'input'>, keyof BaseProps<unknown>>\n\nconst NOOP = () => undefined\n\nconst ESCAPE_KEY_REGEX = /^Esc(ape)?$/\nconst ARROW_UP_DOWN_REGEX = /^(Arrow)?(Up|Down)$/\n\nconst EMPTY_INPUT_CHANGE_EVENT = {\n  currentTarget: { value: '' },\n  target: { value: '' },\n} as ChangeEvent<HTMLInputElement>\n\nconst classNameGenerator = tv({\n  slots: {\n    wrapper:\n      'smarthr-ui-SingleCombobox shr-inline-block [&:has(.smarthr-ui-Input-input:disabled)]:shr-cursor-not-allowed',\n    input: 'smarthr-ui-SingleCombobox-input shr-w-full',\n    caretDownLayout: [\n      'shr-relative -shr-me-0.5 shr-p-0.5',\n      'before:shr-border-0',\n      'before:shr-absolute before:shr-inset-x-0 before:shr-inset-y-0.25 before:shr-w-0 before:shr-border-l before:shr-border-solid before:shr-border-default before:shr-content-[\"\"]',\n    ],\n    caretDownIcon: 'shr-block',\n    clearButton: [\n      'smarthr-ui-SingleCombobox-clearButton',\n      'shr-group/clearButton',\n      'shr-me-0.5',\n      'focus-visible:shr-shadow-none',\n      '[[data-clear-button-hidden=true]_&]:shr-hidden',\n    ],\n    clearButtonIcon: [\n      'shr-block',\n      'group-focus-visible/clearButton:shr-focus-indicator group-focus-visible/clearButton:shr-rounded-full',\n    ],\n  },\n})\n\ntype SuffixButtonsProps = {\n  clearButtonRef: RefObject<HTMLButtonElement>\n  caretIconColor: string\n  handleClickClear: (e: MouseEvent) => void\n  handleClickIcon: (e: MouseEvent) => void\n  classNames: {\n    clearButton: string\n    clearButtonIcon: string\n    caretDownLayout: string\n    caretDownIcon: string\n  }\n}\n\nconst SuffixButtons = memo<SuffixButtonsProps>(\n  ({\n    clearButtonRef,\n    caretIconColor,\n    handleClickClear,\n    handleClickIcon: handleDelegateClickIcon,\n    classNames,\n  }) => (\n    <>\n      <UnstyledButton\n        onClick={handleClickClear}\n        ref={clearButtonRef}\n        className={classNames.clearButton}\n      >\n        <FaCircleXmarkIcon\n          color=\"TEXT_BLACK\"\n          alt={\n            <Localizer id=\"smarthr-ui/SingleCombobox/destroyButtonIconAlt\" defaultText=\"クリア\" />\n          }\n          className={classNames.clearButtonIcon}\n        />\n      </UnstyledButton>\n      <span\n        role=\"presentation\"\n        onClick={handleDelegateClickIcon}\n        className={classNames.caretDownLayout}\n      >\n        <FaCaretDownIcon color={caretIconColor} className={classNames.caretDownIcon} />\n      </span>\n    </>\n  ),\n)\n\nconst ActualSingleCombobox = <T,>(\n  {\n    items,\n    selectedItem,\n    defaultItem,\n    name,\n    disabled,\n    readOnly,\n    required,\n    prefix,\n    error,\n    creatable,\n    placeholder,\n    autoComplete,\n    dropdownHelpMessage,\n    isLoading,\n    width,\n    dropdownWidth = 'auto',\n    className,\n    onChange,\n    onChangeInput,\n    onAdd,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    noResultText,\n    style,\n    ...rest\n  }: Props<T>,\n  ref: Ref<HTMLInputElement>,\n) => {\n  const theme = useTheme()\n  const triggerRef = useRef<HTMLDivElement>(null)\n  const inputRef = useRef<HTMLInputElement>(null)\n  const clearButtonRef = useRef<HTMLButtonElement>(null)\n  const [isFocused, setIsFocused] = useState(false)\n  const [isExpanded, setIsExpanded] = useState(false)\n  const [inputValue, setInputValue] = useState('')\n  const [isComposing, setIsComposing] = useState(false)\n  const [isEditing, setIsEditing] = useState(false)\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(\n    ref,\n    () => inputRef.current,\n    [],\n  )\n\n  const { options } = useSingleOptions({\n    items,\n    selected: selectedItem,\n    creatable,\n    inputValue,\n    isFilteringDisabled: !isEditing,\n  })\n\n  const { listBoxProps, activeOption, handleKeyDownListBox, listBoxId, listBoxRef } = useListbox<T>(\n    {\n      options,\n      dropdownHelpMessage,\n      dropdownWidth,\n      onAdd,\n      // HINT: memo化していないが、内部でuseLatestでstableにしているため最適化としてそのまま渡している\n      onSelect: (selected: ComboboxItem<T>) => {\n        onSelect?.(selected)\n        onChangeSelected?.(selected)\n\n        // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n        // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n        requestAnimationFrame(() => {\n          setIsExpanded(false)\n          // HINT:\n          // - 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n          // - 対応するdropdownを閉じて以降にonChangeInputを発火する必要がある\n          //   - 先にclearしてしまうと意図せずこの要素のドロップダウンを閉じる前に他要素の再レンダリングを引き起こす可能性がある\n          //   - 例えばFilterDropdownなどで当comboboxを使っている場合、レイアウト上comboboxのdropdown以下の要素がクリックされた扱いになってしまい\n          //     FilterDropdownを意図せず閉じてしまうなどの挙動のバグを引き起こす可能性がある\n          onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n        })\n\n        setIsEditing(false)\n      },\n      isExpanded,\n      isLoading,\n      triggerRef,\n      noResultText,\n    },\n  )\n\n  const latest = useLatest({\n    onChange,\n    onChangeInput,\n    onSelect,\n    onClear,\n    onClearClick,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    handleKeyDownListBox,\n    defaultItem,\n    selectedItem,\n    isFocused,\n    isExpanded,\n    isComposing,\n    isEditing,\n    disabled,\n    readOnly,\n  })\n\n  const functions = useMemo(() => {\n    const selectDefaultItem = () => {\n      if (latest.onSelect && latest.defaultItem) {\n        latest.onSelect(latest.defaultItem)\n      }\n    }\n    const unfocus = () => {\n      if (!latest.isFocused) return\n\n      latest.onBlur?.()\n\n      setIsFocused(false)\n      setIsExpanded(false)\n      setIsEditing(false)\n\n      if (latest.selectedItem) {\n        setInputValue(innerText(latest.selectedItem.label))\n      } else {\n        selectDefaultItem()\n      }\n    }\n\n    return {\n      selectDefaultItem,\n      unfocus,\n      handleFocus: () => {\n        latest.onFocus?.()\n        inputRef.current?.focus()\n        setIsFocused(true)\n\n        if (!latest.isFocused) {\n          setIsExpanded(true)\n        }\n      },\n      handleClickClear: (e: MouseEvent) => {\n        e.stopPropagation()\n\n        let isExecutedPreventDefault = false\n\n        latest.onClearClick?.({\n          ...e,\n          preventDefault: () => {\n            e.preventDefault()\n            isExecutedPreventDefault = true\n          },\n        })\n\n        if (!isExecutedPreventDefault) {\n          latest.onClear?.()\n          latest.onChangeSelected?.(null)\n\n          inputRef.current?.focus()\n\n          setIsFocused(true)\n          setIsExpanded(true)\n        }\n      },\n      handleClickInput: (e: MouseEvent) => {\n        if (latest.disabled || latest.readOnly) {\n          e.stopPropagation()\n\n          return\n        }\n\n        inputRef.current?.focus()\n\n        if (!latest.isExpanded) {\n          setIsExpanded(true)\n        }\n      },\n      handleChangeInput: (e: ChangeEvent<HTMLInputElement>) => {\n        latest.onChange?.(e)\n        latest.onChangeInput?.(e)\n\n        if (!latest.isEditing) setIsEditing(true)\n\n        const { value } = e.currentTarget\n\n        setInputValue(value)\n\n        if (value === '') {\n          latest.onClear?.()\n          latest.onChangeSelected?.(null)\n        }\n      },\n      handleCompositionStart: () => setIsComposing(true),\n      handleCompositionEnd: () => setIsComposing(false),\n      // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n      // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n      // submitイベントが発生し、formが送信される場合がある\n      handleKeyPress: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (e.key === 'Enter') e.preventDefault()\n\n        latest.onKeyPress?.(e)\n      },\n      handleKeyDownInput: (e: KeyboardEvent<HTMLInputElement>) => {\n        if (latest.isComposing) {\n          return\n        }\n\n        if (ESCAPE_KEY_REGEX.test(e.key)) {\n          if (latest.isExpanded) {\n            e.stopPropagation()\n            setIsExpanded(false)\n          }\n        } else if (e.key === 'Tab') {\n          unfocus()\n        } else {\n          if (ARROW_UP_DOWN_REGEX.test(e.key)) {\n            e.preventDefault()\n          }\n\n          inputRef.current?.focus()\n\n          if (!latest.isExpanded) {\n            setIsExpanded(true)\n          }\n        }\n\n        latest.handleKeyDownListBox(e)\n      },\n    }\n  }, [latest])\n\n  const caretIconColor = isFocused\n    ? theme.textColor.black\n    : disabled || readOnly\n      ? theme.textColor.disabled\n      : theme.textColor.grey\n\n  useClick(\n    [triggerRef, listBoxRef, clearButtonRef],\n    isFocused || selectedItem ? NOOP : functions.selectDefaultItem,\n    functions.unfocus,\n  )\n\n  // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。\n  const selectedItemLabelText = innerText(selectedItem?.label)\n  useEffect(() => {\n    setInputValue(selectedItemLabelText)\n  }, [selectedItemLabelText])\n\n  const classNames = useMemo(() => {\n    const { wrapper, input, caretDownLayout, caretDownIcon, clearButton, clearButtonIcon } =\n      classNameGenerator()\n\n    return {\n      wrapper: wrapper({ className }),\n      input: input(),\n      caretDownLayout: caretDownLayout(),\n      caretDownIcon: caretDownIcon(),\n      clearButton: clearButton(),\n      clearButtonIcon: clearButtonIcon(),\n    }\n  }, [className])\n\n  return (\n    <div\n      ref={triggerRef}\n      role=\"group\"\n      className={classNames.wrapper}\n      style={{\n        ...style,\n        width: typeof width === 'number' ? `${width}px` : width,\n      }}\n      data-clear-button-hidden={(selectedItem === null || disabled || readOnly || false).toString()}\n    >\n      <Input\n        {...rest}\n        ref={inputRef}\n        type=\"text\"\n        role=\"combobox\"\n        name={name}\n        value={inputValue}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        autoComplete={autoComplete ?? 'off'}\n        aria-haspopup=\"listbox\"\n        aria-controls={listBoxId}\n        aria-expanded={isFocused}\n        aria-activedescendant={activeOption?.id}\n        aria-autocomplete=\"list\"\n        /* eslint-disable-next-line smarthr/a11y-prohibit-input-placeholder */\n        placeholder={placeholder}\n        onClick={functions.handleClickInput}\n        onChange={functions.handleChangeInput}\n        onFocus={isFocused ? undefined : functions.handleFocus}\n        onCompositionStart={functions.handleCompositionStart}\n        onCompositionEnd={functions.handleCompositionEnd}\n        onKeyDown={functions.handleKeyDownInput}\n        onKeyPress={functions.handleKeyPress}\n        error={error}\n        prefix={prefix}\n        suffix={\n          <SuffixButtons\n            clearButtonRef={clearButtonRef}\n            caretIconColor={caretIconColor}\n            handleClickClear={functions.handleClickClear}\n            handleClickIcon={functions.handleClickInput}\n            classNames={classNames}\n          />\n        }\n        className={classNames.input}\n        data-smarthr-ui-input=\"true\"\n      />\n      {!readOnly && <ListBox {...listBoxProps} />}\n    </div>\n  )\n}\n\nexport const SingleCombobox = genericsForwardRef(ActualSingleCombobox)\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA;AAEA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;AAEA;AACA;;;;AAIC;AACD;AACA;;;;;;AAMC;AACD;;;AAGC;AACF;AACF;AAeD;AAiCA;AAmCE;AACA;AACA;AACA;;;;;;AAOA;AAMA;;AAEE;;;;AAID;AAED;;;;;;AAOI;AACE;AACA;;;;;;;;;;;AAYE;AACF;;;;;;;AAQH;;;;;;;;;;;;;;;;;;;;AAsBF;AAED;;;AAGM;;AAEJ;;;;AAIE;;;;AAMA;;;;AAGE;;AAEJ;;;;;AAMI;AACA;;AAGA;;;;AAIF;;;;AAMI;;;;;AAKD;;AAGC;AACA;AAEA;;;;;AAMJ;;;;;AAOE;AAEA;;;;AAIF;AACE;AACA;;;AAIA;;AAIA;AACE;AACA;;;AAGJ;AACA;;;;AAIA;AACE;;AAEA;;AAEF;AACE;;;;AAKE;;;;;AAIK;AACL;;;;;;AAMA;AAEA;;;;AAKF;;;AAGN;;AAGE;;AAEE;AACA;;;;;;AAYJ;AAEA;AACE;;AAIE;;;;;;;AAOJ;AAEA;AAMM;AACA;AACD;;;AA6CP;;;"}

package/lib/components/Combobox/SingleCombobox/SingleCombobox.js

@@ -65,7 +65,7 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
     const [inputValue, setInputValue] = useState('');
     const [isComposing, setIsComposing] = useState(false);
     const [isEditing, setIsEditing] = useState(false);
-    useImperativeHandle(ref, () => inputRef.current);
+    useImperativeHandle(ref, () => inputRef.current, []);
     const { options } = useSingleOptions({
         items,
         selected: selectedItem,
@@ -233,7 +233,7 @@ const ActualSingleCombobox = ({ items, selectedItem, defaultItem, name, disabled
         : disabled || readOnly
             ? theme.textColor.disabled
             : theme.textColor.grey;
-    useClick(useMemo(() => [triggerRef, listBoxRef, clearButtonRef], [listBoxRef]), isFocused || selectedItem ? NOOP : functions.selectDefaultItem, functions.unfocus);
+    useClick([triggerRef, listBoxRef, clearButtonRef], isFocused || selectedItem ? NOOP : functions.selectDefaultItem, functions.unfocus);
     // selectedItem.label はプリミティブ値でないデータ型の可能性があり、そのまま useEffect の依存配列に入れると意図せぬエフェクトの実行を引き起こしてしまう可能性があるので、プリミティブ値である string 型に変換したものを依存配列に入れています。
     const selectedItemLabelText = innerText(selectedItem?.label);
     useEffect(() => {