smarthr-ui 97.0.0 → 98.1.0

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

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

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  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { useId } from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useOuterClick } from '../../../hooks/useOuterClick'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { useIntl } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { FaCaretDownIcon } from '../../Icon'\nimport { Scroller } from '../../Scroller'\nimport { areItemsEqual } from '../helper'\nimport { useFocusControl } from '../useFocusControl'\nimport { useListbox } from '../useListbox'\nimport { useMultiOptions } from '../useOptions'\n\nimport { MultiSelectedItem } from './MultiSelectedItem'\n\nimport type { ComboboxItem, AbstractProps as ComboboxProps } from '../types'\n\ntype AbstractProps<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> = AbstractProps<T> &\n  Omit<ComponentPropsWithoutRef<'input'>, keyof AbstractProps<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 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-[[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: 'shr-flex shr-flex-1 shr-items-center',\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  variants: {\n    focused: {\n      true: {\n        wrapper: 'shr-focus-indicator',\n      },\n    },\n    disabled: {\n      true: {\n        wrapper:\n          'shr-cursor-not-allowed shr-border-default/50 shr-bg-white-darken shr-text-disabled',\n      },\n      false: {\n        wrapper: 'shr-cursor-text shr-bg-white',\n      },\n    },\n    hidden: {\n      true: {\n        inputWrapper: 'shr-pointer-events-none shr-absolute shr-opacity-0',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      disabled: false,\n      className: {\n        wrapper: 'shr-border-default',\n      },\n    },\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 { localize } = useIntl()\n  const outerRef = useRef<HTMLDivElement>(null)\n  const [isFocused, setIsFocused] = useState(false)\n  const [highlighted, setHighlighted] = useState(false)\n  const isInputControlled = controlledInputValue !== undefined\n  const [uncontrolledInputValue, setUncontrolledInputValue] = useState('')\n  const inputValue = isInputControlled ? controlledInputValue : uncontrolledInputValue\n  const [isComposing, setIsComposing] = useState(false)\n  const { options } = useMultiOptions({\n    items,\n    selected: selectedItems,\n    creatable,\n    inputValue,\n    isItemSelected,\n  })\n  const setInputValueIfUncontrolled = isInputControlled ? NOOP : setUncontrolledInputValue\n  const actualOnDelete = useMemo(() => {\n    const handlers: Array<(item: ComboboxItem<T>) => void> = []\n\n    if (onDelete) {\n      handlers.push((item: ComboboxItem<T>) => onDelete(item))\n    }\n    if (onChangeSelected) {\n      handlers.push((item: ComboboxItem<T>) =>\n        onChangeSelected(selectedItems.filter((selected) => !areItemsEqual(selected, item))),\n      )\n    }\n\n    if (handlers.length === 0) {\n      return NOOP\n    }\n\n    return (item: ComboboxItem<T>) => {\n      // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n      // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n      requestAnimationFrame(() => {\n        handlers.forEach((h) => h(item))\n      })\n    }\n  }, [selectedItems, onChangeSelected, onDelete])\n  const actualOnSelect = useCallback(\n    (selected: ComboboxItem<T>) => {\n      // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n      // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n      requestAnimationFrame(() => {\n        const matchedSelectedItem = selectedItems.find((item) => areItemsEqual(item, selected))\n\n        if (matchedSelectedItem === undefined) {\n          onSelect?.(selected)\n          onChangeSelected?.(selectedItems.concat(selected))\n\n          // 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n          onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n        } else if (matchedSelectedItem.deletable !== false) {\n          actualOnDelete(selected)\n        }\n      })\n    },\n    [selectedItems, actualOnDelete, onChangeSelected, onSelect, onChangeInput],\n  )\n\n  const { renderListBox, activeOption, onKeyDownListBox, listBoxId, listBoxRef } = useListbox({\n    options,\n    dropdownHelpMessage,\n    dropdownWidth,\n    onAdd,\n    onSelect: actualOnSelect,\n    isExpanded: isFocused,\n    isLoading,\n    triggerRef: outerRef,\n    noResultText,\n  })\n\n  const {\n    deletionButtonRefs,\n    inputRef,\n    focusPrevDeletionButton,\n    focusNextDeletionButton,\n    resetDeletionButtonFocus,\n  } = useFocusControl(selectedItems.length)\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => inputRef.current)\n\n  const focus = useMemo(() => {\n    const baseAction = () => {\n      setIsFocused(true)\n    }\n\n    if (onFocus) {\n      return () => {\n        onFocus()\n        baseAction()\n      }\n    }\n\n    return baseAction\n  }, [onFocus])\n  const blur = useMemo(() => {\n    if (!isFocused) {\n      return NOOP\n    }\n\n    const baseAction = () => {\n      setIsFocused(false)\n      resetDeletionButtonFocus()\n    }\n\n    if (onBlur) {\n      return () => {\n        onBlur()\n        baseAction()\n      }\n    }\n\n    return baseAction\n  }, [isFocused, onBlur, resetDeletionButtonFocus])\n\n  const outerClickRef = useMemo(() => [outerRef, listBoxRef], [outerRef, listBoxRef])\n  useOuterClick(outerClickRef, blur)\n\n  const highlightedRef = useRef(highlighted)\n\n  useEffect(() => {\n    highlightedRef.current = highlighted\n  }, [highlighted])\n\n  useEffect(() => {\n    if (highlightedRef.current) {\n      setHighlighted(false)\n      inputRef.current?.select()\n    } else {\n      setInputValueIfUncontrolled('')\n    }\n  }, [selectedItems, inputRef, setInputValueIfUncontrolled])\n\n  useEffect(() => {\n    if (isFocused) {\n      inputRef.current?.focus()\n    }\n  }, [inputRef, isFocused, setInputValueIfUncontrolled, selectedItems])\n\n  const onDelegateKeyDown = useMemo(\n    () =>\n      isComposing\n        ? undefined\n        : (e: KeyboardEvent<HTMLDivElement>) => {\n            if (ESCAPE_KEY_REGEX.test(e.key)) {\n              e.stopPropagation()\n              blur()\n            } else if (e.key === 'Tab') {\n              if (isFocused) {\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              !inputValue &&\n              selectedItems.length > 0 &&\n              selectedItems[selectedItems.length - 1].deletable !== false\n            ) {\n              e.preventDefault()\n              e.stopPropagation()\n\n              const lastItem = selectedItems[selectedItems.length - 1]\n\n              actualOnDelete(lastItem)\n              setHighlighted(true)\n              setInputValueIfUncontrolled(innerText(lastItem.label))\n            } else {\n              e.stopPropagation()\n              inputRef.current?.focus()\n              resetDeletionButtonFocus()\n            }\n\n            onKeyDownListBox(e)\n          },\n    [\n      blur,\n      focusNextDeletionButton,\n      focusPrevDeletionButton,\n      onKeyDownListBox,\n      inputRef,\n      isComposing,\n      isFocused,\n      resetDeletionButtonFocus,\n      actualOnDelete,\n      inputValue,\n      selectedItems,\n      setInputValueIfUncontrolled,\n    ],\n  )\n\n  const onDelegateClick = useMemo(\n    () =>\n      disabled || isFocused\n        ? undefined\n        : (e: MouseEvent<HTMLElement>) => {\n            if (!(e.target as HTMLElement).closest('.smarthr-ui-MultiCombobox-deleteButton')) {\n              focus()\n            }\n          },\n    [isFocused, disabled, focus],\n  )\n  const actualOnChangeInput = useMemo(() => {\n    const handlers = [onChange, onChangeInput].filter((h) => !!h)\n    const onSetValue = (e: ChangeEvent<HTMLInputElement>) => {\n      setInputValueIfUncontrolled(e.currentTarget.value)\n    }\n\n    if (handlers.length === 0) {\n      return onSetValue\n    }\n\n    return (e: ChangeEvent<HTMLInputElement>) => {\n      handlers.forEach((h) => h(e))\n      onSetValue(e)\n    }\n  }, [onChange, onChangeInput, setInputValueIfUncontrolled])\n  const onFocusInput = useMemo(\n    () =>\n      isFocused\n        ? resetDeletionButtonFocus\n        : () => {\n            resetDeletionButtonFocus()\n            focus()\n          },\n    [isFocused, focus, resetDeletionButtonFocus],\n  )\n  const onCompositionStartInput = useCallback(() => setIsComposing(true), [])\n  const onCompositionEndInput = useCallback(() => setIsComposing(false), [])\n  const onKeyDownInput = useCallback((e: KeyboardEvent<HTMLInputElement>) => {\n    if (ARROW_UP_AND_DOWN_KEY_REGEX.test(e.key)) {\n      // 上下キー入力はリストボックスの activeDescendant の移動に用いるため、input 内では作用させない\n      e.preventDefault()\n    }\n  }, [])\n\n  // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n  // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n  // submitイベントが発生し、formが送信される場合がある\n  const onDelegateKeyPress = useMemo(\n    () =>\n      onKeyPress\n        ? (e: KeyboardEvent<HTMLInputElement>) => {\n            preventDefaultWithPressEnter(e)\n            onKeyPress(e)\n          }\n        : preventDefaultWithPressEnter,\n    [onKeyPress],\n  )\n\n  const selectedListId = useId()\n\n  const wrapperStyle = useMemo(\n    () => ({\n      ...style,\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [style, width],\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({ focused: isFocused, disabled, className }),\n      inputArea: inputArea(),\n      selectedList: selectedList(),\n      inputWrapper: inputWrapper({ hidden: !isFocused }),\n      input: input(),\n      placeholder: placeholderEl(),\n      suffixWrapper: suffixWrapper({ disabled }),\n      suffixIcon: suffixIcon(),\n    }\n  }, [isFocused, disabled, className])\n\n  const selectedListAriaLabel = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/MultiCombobox/selectedListAriaLabel',\n        defaultText: '選択済みアイテム',\n      }),\n    [localize],\n  )\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <div\n      ref={outerRef}\n      role=\"group\"\n      onClick={onDelegateClick}\n      onKeyDown={onDelegateKeyDown}\n      onKeyPress={onDelegateKeyPress}\n      className={classNames.wrapper}\n      style={wrapperStyle}\n    >\n      <Scroller className={classNames.inputArea}>\n        <ul\n          id={selectedListId}\n          aria-label={selectedListAriaLabel}\n          className={classNames.selectedList}\n        >\n          {selectedItems.map((selectedItem, i) => (\n            <li key={`${selectedItem.label}-${innerText(selectedItem.value)}`}>\n              <MultiSelectedItem\n                item={selectedItem}\n                disabled={disabled}\n                onDelete={actualOnDelete}\n                enableEllipsis={selectedItemEllipsis}\n                buttonRef={deletionButtonRefs[i]}\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={actualOnChangeInput}\n            onFocus={onFocusInput}\n            onCompositionStart={onCompositionStartInput}\n            onCompositionEnd={onCompositionEndInput}\n            onKeyDown={onKeyDownInput}\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={isFocused}\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 && !isFocused && (\n          <p className={classNames.placeholder}>{placeholder}</p>\n        )}\n      </Scroller>\n\n      <MemoizedCaretDown\n        disabled={disabled}\n        isFocused={isFocused}\n        className={classNames.suffixWrapper}\n        iconStyle={classNames.suffixIcon}\n      />\n\n      {renderListBox()}\n    </div>\n  )\n}\n\nexport const MultiCombobox = genericsForwardRef(ActualMultiCombobox)\n\nconst MemoizedCaretDown = memo<{\n  className: string\n  iconStyle: string\n  disabled: boolean\n  isFocused: boolean\n}>(({ className, iconStyle, disabled, isFocused }) => {\n  const theme = useTheme()\n  const caretIconColor = useMemo(() => {\n    if (isFocused) return theme.textColor.black\n    if (disabled) return theme.textColor.disabled\n\n    return theme.textColor.grey\n  }, [disabled, isFocused, theme.textColor])\n\n  return (\n    <div className={className}>\n      <FaCaretDownIcon color={caretIconColor} className={iconStyle} />\n    </div>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA8EA;AAEA;AACE;;;AAGF;AAEA;AACA;AACA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;;;;;AAKC;AACD;AACA;AAEA;AACA;;;;AAIC;AACD;AACA;;;AAGC;AACD;AACD;AACD;AACE;AACE;AACE;AACD;AACF;AACD;AACE;AACE;AAED;AACD;AACE;AACD;AACF;AACD;AACE;AACE;AACD;AACF;AACF;AACD;AACE;AACE;AACA;AACE;AACD;AACF;AACF;AACF;AAED;AAkCE;AACA;;;AAGA;;;;AAIA;;AAEE;;;;AAID;;AAED;;;AAII;;;AAGA;;AAKF;AACE;;;;;;AAOE;AACF;AACF;;AAEF;;;;AAKM;AAEA;AACE;;;AAIA;;AACK;;;AAGT;AACF;AAIF;;;;;AAKE;AACA;;AAEA;;AAED;AAED;;AAUA;;;AAGE;;AAGE;AACE;AACA;AACF;;AAGF;AACF;AACA;;AAEI;;;;AAKA;AACF;;AAGE;AACE;AACA;AACF;;AAGF;;AAGF;AACA;AAEA;;AAGE;AACF;;AAGE;;AAEE;;;;;;;;AAQA;;;AAIJ;AAGM;AACA;;;AAGM;;AACK;;;AAGH;;AAGF;;;;AAGA;;;;AAGA;;AACK;AAEL;;AAEA;;;;;;;;;;AAYA;AACA;;;AAIJ;;;;;;;;;;;;;AAcL;;AAMG;AACA;;AAEM;;;AAKZ;AACE;AACA;AACE;AACF;AAEA;AACE;;;AAIA;;AAEF;;AAEF;AAGM;;AAEI;AACA;;AAIV;AACA;AACA;;;;;;;;;AAUA;AAGM;;;;AAIA;AAIN;AAEA;AAEI;AACA;AACD;AAGH;;;AAaI;;;;;;AAMA;;;;;AAQE;AACA;AACD;;;AAMH;AAwEJ;;AAIA;AAME;AACA;AACE;AAAe;AACf;AAAc;AAEd;;AAGF;AAKF;;"}
+{"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  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport { useId } from 'react'\nimport innerText from 'react-innertext'\nimport { tv } from 'tailwind-variants'\n\nimport { useOuterClick } from '../../../hooks/useOuterClick'\nimport { useTheme } from '../../../hooks/useTheme'\nimport { useIntl } from '../../../intl'\nimport { genericsForwardRef } from '../../../libs/util'\nimport { FaCaretDownIcon } from '../../Icon'\nimport { Scroller } from '../../Scroller'\nimport { areItemsEqual } from '../helper'\nimport { useFocusControl } from '../useFocusControl'\nimport { useListbox } from '../useListbox'\nimport { useMultiOptions } from '../useOptions'\n\nimport { MultiSelectedItem } from './MultiSelectedItem'\n\nimport type { ComboboxItem, AbstractProps as ComboboxProps } from '../types'\n\ntype AbstractProps<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> = AbstractProps<T> &\n  Omit<ComponentPropsWithoutRef<'input'>, keyof AbstractProps<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 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-[[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: 'shr-flex shr-flex-1 shr-items-center',\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  variants: {\n    focused: {\n      true: {\n        wrapper: 'shr-focus-indicator',\n      },\n    },\n    disabled: {\n      true: {\n        wrapper:\n          'shr-cursor-not-allowed shr-border-default/50 shr-bg-white-darken shr-text-disabled',\n      },\n      false: {\n        wrapper: 'shr-cursor-text shr-bg-white',\n      },\n    },\n    hidden: {\n      true: {\n        inputWrapper: 'shr-pointer-events-none shr-absolute shr-opacity-0',\n      },\n    },\n  },\n  compoundVariants: [\n    {\n      disabled: false,\n      className: {\n        wrapper: 'shr-border-default',\n      },\n    },\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 { localize } = useIntl()\n  const outerRef = useRef<HTMLDivElement>(null)\n  const [isFocused, setIsFocused] = useState(false)\n  const [highlighted, setHighlighted] = useState(false)\n  const isInputControlled = controlledInputValue !== undefined\n  const [uncontrolledInputValue, setUncontrolledInputValue] = useState('')\n  const inputValue = isInputControlled ? controlledInputValue : uncontrolledInputValue\n  const [isComposing, setIsComposing] = useState(false)\n\n  const unstableRef = useRef({\n    onChange,\n    onChangeInput,\n    onAdd,\n    onSelect,\n    onDelete,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    isItemSelected,\n    selectedItems,\n    isFocused,\n    highlighted,\n    isComposing,\n  })\n  unstableRef.current = {\n    onChange,\n    onChangeInput,\n    onAdd,\n    onSelect,\n    onDelete,\n    onChangeSelected,\n    onFocus,\n    onBlur,\n    onKeyPress,\n    isItemSelected,\n    selectedItems,\n    isFocused,\n    highlighted,\n    isComposing,\n  }\n  const { options } = useMultiOptions({\n    items,\n    selected: selectedItems,\n    creatable,\n    inputValue,\n    isItemSelected,\n  })\n  const setInputValueIfUncontrolled = isInputControlled ? NOOP : setUncontrolledInputValue\n  const actualOnDelete = useCallback((item: ComboboxItem<T>) => {\n    const handlers: Array<(deletingItem: ComboboxItem<T>) => void> = []\n\n    if (unstableRef.current.onDelete) {\n      handlers.push((deletingItem: ComboboxItem<T>) => unstableRef.current.onDelete!(deletingItem))\n    }\n    if (unstableRef.current.onChangeSelected) {\n      handlers.push((deletingItem: ComboboxItem<T>) =>\n        unstableRef.current.onChangeSelected!(\n          unstableRef.current.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  const actualOnSelect = useCallback(\n    (selected: ComboboxItem<T>) => {\n      // HINT: Dropdown系コンポーネント内でComboboxを使うと、選択肢がportalで表現されている関係上Dropdownが閉じてしまう\n      // requestAnimationFrameを追加、処理を遅延させることで正常に閉じる/閉じないの判定を行えるようにする\n      requestAnimationFrame(() => {\n        const matchedSelectedItem = unstableRef.current.selectedItems.find((item) =>\n          areItemsEqual(item, selected),\n        )\n\n        if (matchedSelectedItem === undefined) {\n          unstableRef.current.onSelect?.(selected)\n          unstableRef.current.onChangeSelected?.(unstableRef.current.selectedItems.concat(selected))\n\n          // 制御コンポーネントの場合に親側でinputValueを更新できるように、選択時にonChangeInputを空文字で発火する\n          unstableRef.current.onChangeInput?.(EMPTY_INPUT_CHANGE_EVENT)\n        } else if (matchedSelectedItem.deletable !== false) {\n          actualOnDelete(selected)\n        }\n      })\n    },\n    [actualOnDelete],\n  )\n\n  const { renderListBox, activeOption, onKeyDownListBox, listBoxId, listBoxRef } = useListbox({\n    options,\n    dropdownHelpMessage,\n    dropdownWidth,\n    onAdd,\n    onSelect: actualOnSelect,\n    isExpanded: isFocused,\n    isLoading,\n    triggerRef: outerRef,\n    noResultText,\n  })\n\n  const {\n    deletionButtonRefs,\n    inputRef,\n    focusPrevDeletionButton,\n    focusNextDeletionButton,\n    resetDeletionButtonFocus,\n  } = useFocusControl(selectedItems.length)\n\n  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(ref, () => inputRef.current)\n\n  const focus = useCallback(() => {\n    unstableRef.current.onFocus?.()\n    setIsFocused(true)\n  }, [])\n\n  const blur = useCallback(() => {\n    if (unstableRef.current.isFocused) {\n      unstableRef.current.onBlur?.()\n      setIsFocused(false)\n      resetDeletionButtonFocus()\n    }\n  }, [resetDeletionButtonFocus])\n\n  const outerClickRef = useMemo(() => [outerRef, listBoxRef], [listBoxRef])\n  useOuterClick(outerClickRef, blur)\n\n  useEffect(() => {\n    if (unstableRef.current.highlighted) {\n      setHighlighted(false)\n      inputRef.current?.select()\n    } else {\n      setInputValueIfUncontrolled('')\n    }\n  }, [selectedItems, setInputValueIfUncontrolled, inputRef])\n\n  useEffect(() => {\n    if (isFocused) {\n      inputRef.current?.focus()\n    }\n  }, [isFocused, setInputValueIfUncontrolled, selectedItems, inputRef])\n\n  const isInputEmpty = !inputValue\n\n  const onDelegateKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {\n    if (unstableRef.current.isComposing) return\n\n    if (ESCAPE_KEY_REGEX.test(e.key)) {\n      e.stopPropagation()\n      blur()\n    } else if (e.key === 'Tab') {\n      if (unstableRef.current.isFocused) {\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      isInputEmpty &&\n      unstableRef.current.selectedItems.length > 0 &&\n      unstableRef.current.selectedItems[unstableRef.current.selectedItems.length - 1].deletable !==\n        false\n    ) {\n      e.preventDefault()\n      e.stopPropagation()\n\n      const lastItem =\n        unstableRef.current.selectedItems[unstableRef.current.selectedItems.length - 1]\n\n      actualOnDelete(lastItem)\n      setHighlighted(true)\n      setInputValueIfUncontrolled(innerText(lastItem.label))\n    } else {\n      e.stopPropagation()\n      inputRef.current?.focus()\n      resetDeletionButtonFocus()\n    }\n\n    onKeyDownListBox(e)\n  }\n\n  const onDelegateClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      if (!disabled && !unstableRef.current.isFocused) {\n        if (!(e.target as HTMLElement).closest('.smarthr-ui-MultiCombobox-deleteButton')) {\n          focus()\n        }\n      }\n    },\n    [disabled, focus],\n  )\n  const actualOnChangeInput = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      const handlers = [unstableRef.current.onChange, unstableRef.current.onChangeInput].filter(\n        (h) => !!h,\n      )\n\n      handlers.forEach((h) => h(e))\n      setInputValueIfUncontrolled(e.currentTarget.value)\n    },\n    [setInputValueIfUncontrolled],\n  )\n  const onFocusInput = useCallback(() => {\n    if (unstableRef.current.isFocused) {\n      resetDeletionButtonFocus()\n    } else {\n      resetDeletionButtonFocus()\n      focus()\n    }\n  }, [resetDeletionButtonFocus, focus])\n  const onCompositionStartInput = useCallback(() => setIsComposing(true), [])\n  const onCompositionEndInput = useCallback(() => setIsComposing(false), [])\n  const onKeyDownInput = useCallback((e: KeyboardEvent<HTMLInputElement>) => {\n    if (ARROW_UP_AND_DOWN_KEY_REGEX.test(e.key)) {\n      // 上下キー入力はリストボックスの activeDescendant の移動に用いるため、input 内では作用させない\n      e.preventDefault()\n    }\n  }, [])\n\n  // HINT: form内にcomboboxを設置 & 検索inputにfocusした状態で\n  // アイテムをキーボードで選択し、Enterを押すとinput上でEnterを押したことになるため、\n  // submitイベントが発生し、formが送信される場合がある\n  const onDelegateKeyPress = useCallback((e: KeyboardEvent<HTMLInputElement>) => {\n    preventDefaultWithPressEnter(e)\n    unstableRef.current.onKeyPress?.(e)\n  }, [])\n\n  const selectedListId = useId()\n\n  const wrapperStyle = useMemo(\n    () => ({\n      ...style,\n      width: typeof width === 'number' ? `${width}px` : width,\n    }),\n    [style, width],\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({ focused: isFocused, disabled, className }),\n      inputArea: inputArea(),\n      selectedList: selectedList(),\n      inputWrapper: inputWrapper({ hidden: !isFocused }),\n      input: input(),\n      placeholder: placeholderEl(),\n      suffixWrapper: suffixWrapper({ disabled }),\n      suffixIcon: suffixIcon(),\n    }\n  }, [isFocused, disabled, className])\n\n  const selectedListAriaLabel = useMemo(\n    () =>\n      localize({\n        id: 'smarthr-ui/MultiCombobox/selectedListAriaLabel',\n        defaultText: '選択済みアイテム',\n      }),\n    [localize],\n  )\n\n  return (\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <div\n      ref={outerRef}\n      role=\"group\"\n      onClick={onDelegateClick}\n      onKeyDown={onDelegateKeyDown}\n      onKeyPress={onDelegateKeyPress}\n      className={classNames.wrapper}\n      style={wrapperStyle}\n    >\n      <Scroller className={classNames.inputArea}>\n        <ul\n          id={selectedListId}\n          aria-label={selectedListAriaLabel}\n          className={classNames.selectedList}\n        >\n          {selectedItems.map((selectedItem, i) => (\n            <li key={`${selectedItem.label}-${innerText(selectedItem.value)}`}>\n              <MultiSelectedItem\n                item={selectedItem}\n                disabled={disabled}\n                onDelete={actualOnDelete}\n                enableEllipsis={selectedItemEllipsis}\n                buttonRef={deletionButtonRefs[i]}\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={actualOnChangeInput}\n            onFocus={onFocusInput}\n            onCompositionStart={onCompositionStartInput}\n            onCompositionEnd={onCompositionEndInput}\n            onKeyDown={onKeyDownInput}\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={isFocused}\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 && !isFocused && (\n          <p className={classNames.placeholder}>{placeholder}</p>\n        )}\n      </Scroller>\n\n      <MemoizedCaretDown\n        disabled={disabled}\n        isFocused={isFocused}\n        className={classNames.suffixWrapper}\n        iconStyle={classNames.suffixIcon}\n      />\n\n      {renderListBox()}\n    </div>\n  )\n}\n\nexport const MultiCombobox = genericsForwardRef(ActualMultiCombobox)\n\nconst MemoizedCaretDown = memo<{\n  className: string\n  iconStyle: string\n  disabled: boolean\n  isFocused: boolean\n}>(({ className, iconStyle, disabled, isFocused }) => {\n  const theme = useTheme()\n  const caretIconColor = isFocused\n    ? theme.textColor.black\n    : disabled\n      ? theme.textColor.disabled\n      : theme.textColor.grey\n\n  return (\n    <div className={className}>\n      <FaCaretDownIcon color={caretIconColor} className={iconStyle} />\n    </div>\n  )\n})\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA8EA;AAEA;AACE;;;AAGF;AAEA;AACA;AACA;AACA;AAEA;AACE;AACA;;AAGF;AACE;AACE;;;;;AAKC;AACD;AACA;AAEA;AACA;;;;AAIC;AACD;AACA;;;AAGC;AACD;AACD;AACD;AACE;AACE;AACE;AACD;AACF;AACD;AACE;AACE;AAED;AACD;AACE;AACD;AACF;AACD;AACE;AACE;AACD;AACF;AACF;AACD;AACE;AACE;AACA;AACE;AACD;AACF;AACF;AACF;AAED;AAkCE;AACA;;;AAGA;;;;;;;;;;;;;;;;;;;AAoBC;;;;;;;;;;;;;;;;;AAiBD;;AAEE;;;;AAID;;AAED;;AAGE;AACE;;AAEF;AACE;;AASF;;;;AAII;AACF;;;AAGJ;;;;;AASM;;AAEE;;;;AAIK;;;AAGT;AACF;AAIF;;;;;AAKE;AACA;;AAEA;;AAED;AAED;;AAUA;AACE;;;AAIF;AACE;AACE;;AAEA;;AAEJ;AAEA;AACA;;AAGE;;AAEE;;;;;;;;AAQA;;;AAIJ;AAEA;AACE;;;;AAIE;;AACK;AACL;;AAEE;;AAGF;;;;AAGA;;;;AAGA;;AACK;;AAGL;AACA;AACE;;;AAKF;;;;;;;AAQA;AACA;;;AAIJ;AAEA;;;AAIQ;;;AAGN;AAGF;;AAMI;AACA;AACF;AAGF;AACE;AACE;;;AAEA;AACA;;AAEJ;AACA;AACA;AACA;;;;;;;;;AAUA;;;;AAKA;AAEA;AAEI;AACA;AACD;AAGH;;;AAaI;;;;;;AAMA;;;;;AAQE;AACA;AACD;;;AAMH;AAwEJ;;AAIA;AAME;;AAEE;AACA;AACE;AACA;AAEJ;AAKF;;"}