@moneyforward/mfui-components 2.48.1

package/dist/cjs/src/MultipleSelectBox/MultipleSelectBoxTrigger/MultipleSelectBoxTrigger.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipleSelectBoxTrigger = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
+const recipes_1 = require("../../../styled-system/recipes");
+const ClearButton_1 = require("../../shared/ClearButton");
+const FocusIndicator_1 = require("../../FocusIndicator");
+const Typography_1 = require("../../Typography");
+const Tag_1 = require("../../Tag");
+const mergeRefs_1 = require("../../utilities/dom/mergeRefs");
+const css_1 = require("../../../styled-system/css");
+/**
+ * The internal trigger component for the MultipleSelectBox in multiple mode.
+ * Do not use this component outside of the MultipleSelectBox component.
+ *
+ * @param ref - The forwarded ref to the trigger button element
+ */
+function MultipleSelectBoxTriggerInner({ wrapperRef, triggerProps, triggerWrapperProps, size, selectedOptions, listBoxId, isOptionPanelOpen, invalid, showDisplayValueAsTag, placeholder, renderDisplayValue, updateSelectedValues, clearButtonProps, disableClearButton, onKeyDown, onBlur, name, disabled, ...rest }, ref) {
+    const classes = (0, recipes_1.multipleSelectBoxTriggerRecipe)({ size });
+    const triggerRef = (0, react_1.useRef)(null);
+    const textVariant = size === 'small' ? 'condensedInput' : 'controlLabel';
+    const onDeselectTag = (valueToRemove) => {
+        const newSelectedOptions = selectedOptions.filter((option) => option.value !== valueToRemove);
+        // TypeScript cannot infer that (T | undefined)[] matches the complex conditional type
+        updateSelectedValues(newSelectedOptions.map((option) => option.value));
+    };
+    const renderer = () => {
+        if (renderDisplayValue) {
+            return renderDisplayValue(selectedOptions);
+        }
+        if (selectedOptions.length === 0) {
+            return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: textVariant, className: (0, css_1.cx)(classes.placeholder, 'mfui-MultipleSelectBoxTrigger__placeholder'), "data-mfui-content": "multiple-select-box-trigger-placeholder", children: placeholder }));
+        }
+        if (showDisplayValueAsTag) {
+            return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.tagList, 'mfui-MultipleSelectBoxTrigger__tagList'), "data-mfui-content": "multiple-select-box-trigger-selected-options", children: selectedOptions.map((option, index) => ((0, jsx_runtime_1.jsx)(Tag_1.Tag, { className: (0, css_1.cx)(classes.tagItem, 'mfui-MultipleSelectBoxTrigger__tagItem'), label: option.label, onClose: (event) => {
+                        event.stopPropagation();
+                        onDeselectTag(option.value);
+                    } }, option.value ?? `tag-${option.label}-${String(index)}`))) }));
+        }
+        return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: textVariant, as: "div", className: (0, css_1.cx)(classes.label, 'mfui-MultipleSelectBoxTrigger__label'), "data-mfui-content": "multiple-select-box-trigger-selected-options", children: selectedOptions.map((option, index) => ((0, jsx_runtime_1.jsx)("span", { children: option.label }, option.value ?? `option-${option.label}-${String(index)}`))) }));
+    };
+    const handleClearValue = () => {
+        updateSelectedValues([]);
+        triggerRef.current?.focus();
+    };
+    const selectedValues = selectedOptions
+        .map((option) => option.value)
+        .filter((v) => v != null)
+        .map(String);
+    return (
+    // use div element instead of button element to prevent the nested button element when the selected options are rendered as tag list
+    (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsxs)("div", { ref: wrapperRef, className: (0, css_1.cx)(classes.wrapper, 'mfui-MultipleSelectBoxTrigger__wrapper', triggerWrapperProps?.className), children: [(0, jsx_runtime_1.jsx)("button", { ref: (0, mergeRefs_1.mergeRefs)(ref, triggerRef), type: "button", role: "combobox", "aria-controls": listBoxId, "aria-expanded": isOptionPanelOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, value: selectedValues, disabled: disabled, onKeyDown: onKeyDown, onBlur: onBlur, ...rest, ...triggerProps, className: (0, css_1.cx)(classes.trigger, 'mfui-MultipleSelectBoxTrigger__trigger', triggerProps?.className) }), (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: name, value: selectedValues }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.displayValues, 'mfui-MultipleSelectBoxTrigger__displayValues'), "data-mfui-content": "multiple-select-box-trigger-display-values", children: renderer() }), selectedOptions.length > 0 && !disabled && !disableClearButton ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.clearButtonContainer, 'mfui-MultipleSelectBoxTrigger__clearButtonContainer'), children: (0, jsx_runtime_1.jsx)(ClearButton_1.ClearButton, { size: size === 'small' ? 'small' : 'default', className: (0, css_1.cx)(classes.clearButton, 'mfui-MultipleSelectBoxTrigger__clearButton'), "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "multiple-select-box-clear-button", onClick: handleClearValue }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.dropdownIconContainer, 'mfui-MultipleSelectBoxTrigger__dropdownIconContainer'), children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Dropdown, { className: (0, css_1.cx)(classes.dropdownIcon, 'mfui-MultipleSelectBoxTrigger__dropdownIcon') }) })] }) }));
+}
+exports.MultipleSelectBoxTrigger = (0, react_1.forwardRef)(MultipleSelectBoxTriggerInner);

package/dist/cjs/src/MultipleSelectBox/MultipleSelectBoxTrigger/MultipleSelectBoxTrigger.types.d.ts

@@ -0,0 +1,142 @@
+import type React from 'react';
+import { type ComponentPropsWithoutRef, type ComponentPropsWithRef } from 'react';
+import { type MultipleSelectBoxOption, type AllowedValueTypes } from '../MultipleSelectBox.types';
+import { type MultipleSelectBoxTriggerRecipeVariant } from '../../../styled-system/recipes';
+/**
+ * The props that are passed to the trigger component from the parent component.
+ * These props should be exposed through the MultipleSelectBox component.
+ */
+export type PassedProps<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>> = {
+    /**
+     * The id of the trigger element.
+     * This prop is used to relate the component to the corresponding label.
+     *
+     * @default undefined
+     *
+     * @example
+     * ```tsx
+     * <label htmlFor="select-box-label">Label</label>
+     * <MultipleSelectBox id="select-box-label" />
+     * ```
+     */
+    id?: string;
+    /**
+     * The name of the trigger element.
+     * It's used to identify the input element in the form.
+     *
+     * @default undefined
+     */
+    name?: string;
+    /**
+     * Whether the trigger element is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the trigger element shows an invalid state.
+     *
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * The properties for the trigger element.
+     *
+     * @property aria-label - The alternative text for the trigger element. It is overridden by associated label using labelId prop.
+     *
+     * @property className - The class name for the trigger element.
+     *
+     * @default undefined
+     */
+    triggerProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label' | 'className'>;
+    /**
+     * The properties for the wrapper element of the trigger element.
+     *
+     * @property className - The class name for the wrapper element.
+     *
+     * @default undefined
+     */
+    triggerWrapperProps?: Pick<ComponentPropsWithoutRef<'div'>, 'className'>;
+    /**
+     * Text to be displayed when options are not selected.
+     * If you want to show placeholder even if using `renderDisplayValue`, please render placeholder in `renderDisplayValue` function.
+     *
+     * @default undefined
+     */
+    placeholder?: string;
+    /**
+     * The size of the trigger element.
+     *
+     * @default 'medium'
+     */
+    size?: MultipleSelectBoxTriggerRecipeVariant['size'];
+    /**
+     * Whether to render the selected option as a tag.
+     *
+     * @default false
+     */
+    showDisplayValueAsTag?: boolean;
+    /**
+     * The function to render the selected options in the trigger.
+     *
+     * By default, it will render the selected options as a list of tags.
+     *
+     * @param value - The selected option values.
+     *
+     * @returns The rendered selected options.
+     */
+    renderDisplayValue?: (options: MultipleSelectBoxOption<T, AdditionalProps>[]) => React.ReactNode;
+    /**
+     * The properties for the clear button.
+     * If this prop is not passed, the default values for each property will be applied.
+     *
+     * @property aria-label - The alternative text for the clear button. Default is '値をクリアする'.
+     *
+     * @default undefined
+     */
+    clearButtonProps?: Pick<ComponentPropsWithoutRef<'button'>, 'aria-label'>;
+    /**
+     * Whether to disable the clear button.
+     * The clear button is displayed by default when values are selected.
+     *
+     * @default false
+     */
+    disableClearButton?: boolean;
+};
+/**
+ * The props for the MultipleSelectBoxTrigger component.
+ */
+export type MultipleSelectBoxTriggerProps<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>> = {
+    /**
+     * The selected options.
+     */
+    selectedOptions: MultipleSelectBoxOption<T, AdditionalProps>[];
+    /**
+     * The ID of the list box.
+     */
+    listBoxId: string;
+    /**
+     * Whether the option panel is open.
+     */
+    isOptionPanelOpen: boolean;
+    /**
+     * The ref of the wrapper element.
+     */
+    wrapperRef?: ComponentPropsWithRef<'div'>['ref'];
+    /**
+     * The callback function that is called when the trigger is clicked.
+     */
+    onClick: ComponentPropsWithoutRef<'button'>['onClick'];
+    /**
+     * The callback function that is called when a key is pressed.
+     */
+    onKeyDown: ComponentPropsWithoutRef<'button'>['onKeyDown'];
+    /**
+     * The callback function that is called when the trigger loses focus.
+     */
+    onBlur?: ComponentPropsWithoutRef<'button'>['onBlur'];
+    /**
+     * Function to update the selected values.
+     */
+    updateSelectedValues: (values: MultipleSelectBoxOption<T, AdditionalProps>['value'][]) => void;
+} & PassedProps<T, AdditionalProps>;

package/dist/cjs/src/MultipleSelectBox/MultipleSelectBoxTrigger/MultipleSelectBoxTrigger.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/MultipleSelectBox/MultipleSelectBoxTrigger/index.d.ts

@@ -0,0 +1 @@
+export { MultipleSelectBoxTrigger } from './MultipleSelectBoxTrigger';

package/dist/cjs/src/MultipleSelectBox/MultipleSelectBoxTrigger/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultipleSelectBoxTrigger = void 0;
+var MultipleSelectBoxTrigger_1 = require("./MultipleSelectBoxTrigger");
+Object.defineProperty(exports, "MultipleSelectBoxTrigger", { enumerable: true, get: function () { return MultipleSelectBoxTrigger_1.MultipleSelectBoxTrigger; } });

package/dist/cjs/src/MultipleSelectBox/hooks/useApplyControls.d.ts

@@ -0,0 +1,23 @@
+import { type MultipleSelectBoxOption, type AllowedValueTypes } from '../MultipleSelectBox.types';
+type UseApplyControlsProps<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>> = {
+    /**
+     * Callback function called when values are changed
+     */
+    onValuesChange: (values: MultipleSelectBoxOption<T, AdditionalProps>['value'][]) => void;
+    /**
+     * Handler function to close the option panel
+     */
+    closeOptionPanel: () => void;
+};
+/**
+ * Hook to manage the apply controls functionality
+ * Manages temporary selection state and notifies parent component when confirmed
+ */
+export declare function useApplyControls<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ onValuesChange, closeOptionPanel }: UseApplyControlsProps<T, AdditionalProps>): {
+    temporaryValues: Set<MultipleSelectBoxOption<T, AdditionalProps>["value"]>;
+    updateTemporaryValues: (values: MultipleSelectBoxOption<T, AdditionalProps>["value"][]) => void;
+    initializeTemporaryValues: () => void;
+    handleCancelButtonClick: () => void;
+    handleApplyButtonClick: () => void;
+};
+export {};

package/dist/cjs/src/MultipleSelectBox/hooks/useApplyControls.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useApplyControls = useApplyControls;
+const react_1 = require("react");
+/**
+ * Hook to manage the apply controls functionality
+ * Manages temporary selection state and notifies parent component when confirmed
+ */
+function useApplyControls({ onValuesChange, closeOptionPanel }) {
+    // Temporary selection state
+    const [temporaryValues, setTemporaryValues] = (0, react_1.useState)(new Set());
+    // Update temporary selection state
+    const updateTemporaryValues = (0, react_1.useCallback)((values) => {
+        setTemporaryValues(new Set(values));
+    }, []);
+    // Initialize temporary selection state
+    const initializeTemporaryValues = (0, react_1.useCallback)(() => {
+        setTemporaryValues(new Set());
+    }, []);
+    // Handle cancel button click
+    const handleCancelButtonClick = (0, react_1.useCallback)(() => {
+        initializeTemporaryValues();
+        closeOptionPanel();
+    }, [closeOptionPanel, initializeTemporaryValues]);
+    // Handle apply button click
+    const handleApplyButtonClick = (0, react_1.useCallback)(() => {
+        onValuesChange([...temporaryValues]);
+        closeOptionPanel();
+    }, [onValuesChange, temporaryValues, closeOptionPanel]);
+    return {
+        temporaryValues,
+        updateTemporaryValues,
+        initializeTemporaryValues,
+        handleCancelButtonClick,
+        handleApplyButtonClick,
+    };
+}

package/dist/cjs/src/MultipleSelectBox/hooks/useInitialFocusOnOptionPanelOpen.d.ts

@@ -0,0 +1,45 @@
+import { type RefObject } from 'react';
+import { type MultipleSelectBoxOption, type AllowedValueTypes } from '../MultipleSelectBox.types';
+type UseInitialFocusOnOptionPanelOpenProps<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>> = {
+    /**
+     * Whether the option panel is open.
+     */
+    isOptionPanelOpen: boolean;
+    /**
+     * The ref of the select all button.
+     */
+    selectAllButtonRef: RefObject<HTMLButtonElement | null>;
+    /**
+     * The ref of the clear all button.
+     */
+    clearAllButtonRef: RefObject<HTMLButtonElement | null>;
+    /**
+     * Whether the select is searchable.
+     */
+    enableSearchOptions: boolean;
+    /**
+     * The ref of the search input.
+     */
+    searchInputRef: RefObject<HTMLInputElement | null>;
+    /**
+     * The set of local selected values.
+     */
+    localSelectedValuesSet: Set<MultipleSelectBoxOption<T, AdditionalProps>['value']>;
+    /**
+     * The ref of the option panel.
+     */
+    optionPanelRef: RefObject<HTMLDivElement | null>;
+    /**
+     * The filtered options.
+     */
+    filteredOptions: MultipleSelectBoxOption<T, AdditionalProps>[];
+    /**
+     * Whether the options are loading.
+     */
+    loading: boolean;
+};
+/**
+ * Control the focus when the option panel is opened.
+ */
+export declare const useInitialFocusOnOptionPanelOpen: <T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ isOptionPanelOpen, selectAllButtonRef, clearAllButtonRef, enableSearchOptions, searchInputRef, localSelectedValuesSet, optionPanelRef, filteredOptions, loading, }: UseInitialFocusOnOptionPanelOpenProps<T, AdditionalProps>) => void;
+export {};

package/dist/cjs/src/MultipleSelectBox/hooks/useInitialFocusOnOptionPanelOpen.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInitialFocusOnOptionPanelOpen = void 0;
+const react_1 = require("react");
+const isSelectableOption_1 = require("../utils/isSelectableOption");
+/**
+ * Control the focus when the option panel is opened.
+ */
+const useInitialFocusOnOptionPanelOpen = ({ isOptionPanelOpen, selectAllButtonRef, clearAllButtonRef, enableSearchOptions, searchInputRef, localSelectedValuesSet, optionPanelRef, filteredOptions, loading, }) => {
+    // Focus the option when the option panel is opened.
+    (0, react_1.useEffect)(() => {
+        if (!isOptionPanelOpen)
+            return;
+        // Check if the active element is one of the all options control buttons
+        const { activeElement } = document;
+        // If an all options control button is focused, don't change focus
+        if (activeElement === selectAllButtonRef.current || activeElement === clearAllButtonRef.current) {
+            return;
+        }
+        // Focus the search input when the select is searchable and the value is empty.
+        if (enableSearchOptions) {
+            // If it is already focused, return.
+            if (searchInputRef.current === document.activeElement)
+                return;
+            // Otherwise, focus the search input
+            if (localSelectedValuesSet.size === 0) {
+                searchInputRef.current?.focus({ preventScroll: true });
+                return;
+            }
+        }
+        /**
+         * If the focused element is an option element, do not change the focus position
+         */
+        if (activeElement?.getAttribute('role') === 'option') {
+            return;
+        }
+        /**
+         * When loading, focus on the option panel root div to enable ESC key functionality
+         */
+        if (loading) {
+            optionPanelRef.current?.focus({ preventScroll: true });
+            return;
+        }
+        /**
+         * In other cases, when the list box is open, focus on the option item.
+         * If there is a selected option, focus on the first selected option.
+         * If there is no selected option, focus on the first option.
+         */
+        const firstValue = [...localSelectedValuesSet].find((value) => filteredOptions.some((option) => (0, isSelectableOption_1.isSelectableOption)(option) && option.value === value && option.value != null && !option.disabled));
+        // Build an array of indexes of focusable options (selectable and not disabled)
+        const focusableIndexes = filteredOptions
+            .map((option, index) => ((0, isSelectableOption_1.isSelectableOption)(option) && option.value != null && !option.disabled ? index : -1))
+            .filter((index) => index !== -1);
+        let focusIndexInOptions = 0;
+        if (firstValue !== undefined) {
+            // Find the index of the first selected, enabled option in filteredOptions
+            const logicalIndex = filteredOptions.findIndex((option) => (0, isSelectableOption_1.isSelectableOption)(option) && option.value === firstValue && !option.disabled);
+            // Map to the Nth focusable option
+            focusIndexInOptions = focusableIndexes.indexOf(logicalIndex);
+            if (focusIndexInOptions === -1)
+                focusIndexInOptions = 0;
+        }
+        else {
+            // Default to the first focusable option
+            focusIndexInOptions = 0;
+        }
+        const optionNode = optionPanelRef.current?.querySelectorAll('[role="option"][data-focusable="true"]');
+        if (optionNode && optionNode.length > 0) {
+            optionNode[focusIndexInOptions]?.focus({ preventScroll: true });
+        }
+    }, [
+        isOptionPanelOpen,
+        localSelectedValuesSet,
+        filteredOptions,
+        enableSearchOptions,
+        selectAllButtonRef,
+        clearAllButtonRef,
+        optionPanelRef,
+        searchInputRef,
+        loading,
+    ]);
+};
+exports.useInitialFocusOnOptionPanelOpen = useInitialFocusOnOptionPanelOpen;

package/dist/cjs/src/MultipleSelectBox/hooks/useOptionKeyboardNavigation.d.ts

@@ -0,0 +1,38 @@
+import { type KeyboardEventHandler } from 'react';
+import { type MultipleSelectBoxOption, type AllowedValueTypes } from '../MultipleSelectBox.types';
+type UseOptionKeyboardNavigationProps<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>> = {
+    /**
+     * Filtered options (after search and other filters).
+     */
+    filteredOptions: MultipleSelectBoxOption<T, AdditionalProps>[];
+    /**
+     * Currently selected values.
+     */
+    selectedValues: Set<MultipleSelectBoxOption<T, AdditionalProps>['value']>;
+    /**
+     * Callback when an option is selected.
+     */
+    onSelectOption: (option: MultipleSelectBoxOption<T, AdditionalProps>) => void;
+    /**
+     * Callback to close the option panel.
+     */
+    onClosePanel: () => void;
+};
+/**
+ * Hook to manage keyboard navigation and interaction for options in MultipleSelectBox
+ *
+ * This hook handles:
+ * - Tracking which option should be tabbable
+ * - Arrow key navigation between options
+ * - Enter/Space key selection
+ * - Escape key to close panel
+ * - Focus management
+ *
+ * @returns Object with handlers and state for option keyboard navigation
+ */
+export declare function useOptionKeyboardNavigation<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ filteredOptions, selectedValues, onSelectOption, onClosePanel, }: UseOptionKeyboardNavigationProps<T, AdditionalProps>): {
+    tabbableOptionIndex: number;
+    handleOptionFocus: (optionIndex: number) => void;
+    createKeyDownHandler: (option: MultipleSelectBoxOption<T, AdditionalProps>) => KeyboardEventHandler<HTMLLIElement>;
+};
+export {};

package/dist/cjs/src/MultipleSelectBox/hooks/useOptionKeyboardNavigation.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOptionKeyboardNavigation = useOptionKeyboardNavigation;
+const react_1 = require("react");
+const findSiblingElements_1 = require("../../utilities/dom/findSiblingElements");
+const isSelectableOption_1 = require("../utils/isSelectableOption");
+/**
+ * Hook to manage keyboard navigation and interaction for options in MultipleSelectBox
+ *
+ * This hook handles:
+ * - Tracking which option should be tabbable
+ * - Arrow key navigation between options
+ * - Enter/Space key selection
+ * - Escape key to close panel
+ * - Focus management
+ *
+ * @returns Object with handlers and state for option keyboard navigation
+ */
+function useOptionKeyboardNavigation({ filteredOptions, selectedValues, onSelectOption, onClosePanel, }) {
+    // Determine initial tabbable option (first selected option or first option)
+    const getDefaultTabbableIndex = (0, react_1.useCallback)(() => {
+        if (filteredOptions.length === 0)
+            return 0;
+        const firstSelectedValue = [...selectedValues].find((value) => filteredOptions.some((option) => (0, isSelectableOption_1.isSelectableOption)(option) && option.value === value && option.value != null && !(0, isSelectableOption_1.isOptionDisabled)(option)));
+        const tabbableIndex = firstSelectedValue
+            ? filteredOptions.findIndex((option) => (0, isSelectableOption_1.isSelectableOption)(option) && option.value === firstSelectedValue && !(0, isSelectableOption_1.isOptionDisabled)(option))
+            : filteredOptions.findIndex((option) => (0, isSelectableOption_1.isSelectableOption)(option) && option.value != null && !(0, isSelectableOption_1.isOptionDisabled)(option));
+        // Fallback to 0 if no enabled option is found
+        return Math.max(tabbableIndex, 0);
+    }, [filteredOptions, selectedValues]);
+    // State to track which option should be tabbable
+    const [tabbableOptionIndex, setTabbableOptionIndex] = (0, react_1.useState)(getDefaultTabbableIndex());
+    // Update tabbable index when filtered options or selected values change
+    (0, react_1.useEffect)(() => {
+        setTabbableOptionIndex(getDefaultTabbableIndex());
+    }, [getDefaultTabbableIndex]);
+    // Update tabbable index when selected values change
+    const resetTabbableIndex = (0, react_1.useCallback)(() => {
+        setTabbableOptionIndex(getDefaultTabbableIndex());
+    }, [getDefaultTabbableIndex]);
+    // Handler for when an option receives focus
+    const handleOptionFocus = (0, react_1.useCallback)((optionIndex) => {
+        setTabbableOptionIndex(optionIndex);
+    }, []);
+    // Create keyboard event handler for an option
+    const createKeyDownHandler = (0, react_1.useCallback)((option) => (event) => {
+        const siblingElements = (0, findSiblingElements_1.findSiblingElements)(event.currentTarget, '[role="option"]:not([aria-disabled="true"])');
+        const currentIndex = siblingElements.indexOf(event.currentTarget);
+        const nextIndex = currentIndex === siblingElements.length - 1 ? 0 : currentIndex + 1;
+        const previousIndex = currentIndex === 0 ? siblingElements.length - 1 : currentIndex - 1;
+        switch (event.key) {
+            case 'Tab':
+                // Don't prevent default Tab key behavior
+                resetTabbableIndex();
+                break;
+            case 'ArrowDown':
+                event.preventDefault();
+                siblingElements[nextIndex]?.focus();
+                break;
+            case 'ArrowUp':
+                event.preventDefault();
+                siblingElements[previousIndex]?.focus();
+                break;
+            case 'Escape':
+                event.preventDefault();
+                onClosePanel();
+                resetTabbableIndex();
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                if ((0, isSelectableOption_1.isSelectableOption)(option) && !(0, isSelectableOption_1.isOptionDisabled)(option)) {
+                    onSelectOption(option);
+                }
+                break;
+        }
+    }, [onSelectOption, onClosePanel, resetTabbableIndex]);
+    return {
+        tabbableOptionIndex,
+        handleOptionFocus,
+        createKeyDownHandler,
+    };
+}

package/dist/cjs/src/MultipleSelectBox/hooks/useOptionSelectionManagement.d.ts

@@ -0,0 +1,24 @@
+import { type MultipleSelectBoxOption, type AllowedValueTypes } from '../MultipleSelectBox.types';
+type UseOptionSelectionManagementProps<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>> = {
+    /**
+     * The options to be selected.
+     */
+    options: MultipleSelectBoxOption<T, AdditionalProps>[];
+    /**
+     * The selected values.
+     */
+    selectedValues: Set<MultipleSelectBoxOption<T, AdditionalProps>['value']>;
+    /**
+     * The function to update the selected values.
+     */
+    updateSelectedValues: (values: MultipleSelectBoxOption<T, AdditionalProps>['value'][]) => void;
+};
+/**
+ * Hook to manage the selection of options.
+ */
+export declare function useOptionSelectionManagement<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ options, selectedValues, updateSelectedValues }: UseOptionSelectionManagementProps<T, AdditionalProps>): {
+    handleSelectOption: (option: MultipleSelectBoxOption<T, AdditionalProps>) => void;
+    handleSelectAllOptions: (targetOptions?: MultipleSelectBoxOption<T, AdditionalProps>[]) => void;
+    handleClearAllOptions: (targetOptions?: MultipleSelectBoxOption<T, AdditionalProps>[]) => void;
+};
+export {};

package/dist/cjs/src/MultipleSelectBox/hooks/useOptionSelectionManagement.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOptionSelectionManagement = useOptionSelectionManagement;
+const react_1 = require("react");
+const insertOptionValueInSortedOrder_1 = require("../utils/insertOptionValueInSortedOrder");
+const isSelectableOption_1 = require("../utils/isSelectableOption");
+/**
+ * Hook to manage the selection of options.
+ */
+function useOptionSelectionManagement({ options, selectedValues, updateSelectedValues }) {
+    // Toggle selection of a single option
+    const handleSelectOption = (0, react_1.useCallback)((option) => {
+        if (option.value == null || (0, isSelectableOption_1.isOptionDisabled)(option))
+            return;
+        // Since we removed undefined from AllowedValueTypes, we can safely use option.value directly
+        const optionValue = option.value;
+        if (selectedValues.has(optionValue)) {
+            // Deselecting: remove from set
+            const newSelectedValuesArray = [...selectedValues].filter((value) => value !== optionValue);
+            updateSelectedValues(newSelectedValuesArray);
+        }
+        else {
+            // Selecting: add in sorted order
+            const newSelectedValues = (0, insertOptionValueInSortedOrder_1.insertOptionValueInSortedOrder)([...selectedValues], optionValue, options);
+            updateSelectedValues(newSelectedValues);
+        }
+    }, [options, selectedValues, updateSelectedValues]);
+    // Select all options
+    const handleSelectAllOptions = (0, react_1.useCallback)((targetOptions = options) => {
+        const targetNonDisabledValues = targetOptions
+            .filter((option) => option.value != null && !(0, isSelectableOption_1.isOptionDisabled)(option))
+            .map((option) => option.value);
+        // Preserve all currently selected disabled options
+        const currentSelectedDisabledValues = [...selectedValues].filter((value) => {
+            const originalOption = options.find((option) => option.value === value);
+            if (!originalOption)
+                return false;
+            return originalOption.value != null && (0, isSelectableOption_1.isOptionDisabled)(originalOption);
+        });
+        // Combine without duplicates
+        const newSelectedValuesSet = new Set([...currentSelectedDisabledValues, ...targetNonDisabledValues]);
+        updateSelectedValues([...newSelectedValuesSet]);
+    }, [options, selectedValues, updateSelectedValues]);
+    // Clear all options
+    const handleClearAllOptions = (0, react_1.useCallback)((targetOptions = options) => {
+        const targetValuesSet = new Set(targetOptions.filter((o) => o.value != null && !(0, isSelectableOption_1.isOptionDisabled)(o)).map((option) => option.value));
+        const newSelectedValues = [...selectedValues].filter((value) => !targetValuesSet.has(value));
+        updateSelectedValues(newSelectedValues);
+    }, [options, selectedValues, updateSelectedValues]);
+    return {
+        handleSelectOption,
+        handleSelectAllOptions,
+        handleClearAllOptions,
+    };
+}

package/dist/cjs/src/MultipleSelectBox/hooks/useSearchBox.d.ts

@@ -0,0 +1,19 @@
+import { type MultipleSelectBoxOption, type AllowedValueTypes } from '../MultipleSelectBox.types';
+/**
+ * Custom hook to handle search functionality within a SelectBox component.
+ *
+ * @param options - Array of SelectBox options.
+ *
+ * @param enableSearchOptions - Indicates if the SelectBox component is searchable.
+ *
+ * @param onSearchOptions - Handler executed when the search text changes. When
+ * provided, client-side filtering is disabled as it's assumed that the caller
+ * will handle the filtering.
+ *
+ * @returns - Object containing the filtered options and a function to update the search text.
+ */
+export declare const useSearchBox: <T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>(options: MultipleSelectBoxOption<T, AdditionalProps>[], enableSearchOptions: boolean, onSearchOptions?: (text: string) => void) => {
+    onSearchTextChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    filteredOptions: MultipleSelectBoxOption<T, AdditionalProps>[];
+    searchText: string;
+};