@moneyforward/mfui-components 2.48.1

package/dist/esm/src/MultipleSelectBox/MultipleSelectBox.types.d.ts

@@ -0,0 +1,341 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type VirtualizerOptions } from '@tanstack/react-virtual';
+import { type SearchBoxProps } from '../SearchBox';
+import { type MultipleSelectBoxTriggerProps, type PassedProps } from './MultipleSelectBoxTrigger/MultipleSelectBoxTrigger.types';
+import { type PopoverProps } from '../Popover';
+export type AllowedValueTypes = string | number | undefined;
+export type VirtualOptionTypes = Pick<VirtualizerOptions<HTMLElement, Element>, 'estimateSize' | 'overscan'>;
+export type MultipleSelectBoxOption<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>> = ({
+    /**
+     * The label to be displayed in the list.
+     *
+     * This would be the group label of the nested list when options prop is provided.
+     */
+    label: string;
+    /**
+     * This is not used when the options prop is provided.
+     */
+    value?: never;
+    /**
+     * The options to be nested inside the group label.
+     */
+    options?: MultipleSelectBoxOption<T, AdditionalProps>[];
+    /**
+     * Whether this option is disabled.
+     */
+    disabled?: boolean;
+} & AdditionalProps) | ({
+    /**
+     * The label to be displayed in the list.
+     */
+    label: string;
+    /**
+     * The value to be returned when the option is selected.
+     *
+     * This must be unique for each option since it's used to identify the option in the list.
+     */
+    value?: T;
+    /**
+     * This is not used when the value prop is provided.
+     */
+    options?: never;
+    /**
+     * Whether this option is disabled.
+     */
+    disabled?: boolean;
+} & AdditionalProps);
+/**
+ * A flattened option type representing an individual selectable option (not a group).
+ * Used for keyboard navigation and virtualization.
+ */
+export type FlatMultipleSelectBoxOption<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>> = Extract<MultipleSelectBoxOption<T, AdditionalProps>, {
+    value?: T;
+}>;
+/**
+ * Properties for the "Select All" button
+ */
+export type SelectAllButtonProps = {
+    /**
+     * Label for the "Select All Button"
+     *
+     * @default "すべて選択"
+     */
+    label?: string;
+};
+/**
+ * Properties for the "Clear All Button"
+ */
+export type ClearAllButtonProps = {
+    /**
+     * Label for the "Clear All Button"
+     *
+     * @default "すべて解除"
+     */
+    label?: string;
+};
+/**
+ * Properties for the Selected Count text
+ */
+export type SelectedCountProps = {
+    /**
+     * Function to render the selected count text.
+     * Receives the number of selected items as an argument.
+     *
+     * @param count - The number of selected items
+     *
+     * @returns The text to display
+     *
+     * @default (count) => `${count}件選択中`
+     */
+    render?: (count: number) => React.ReactNode;
+};
+/**
+ * Properties for the "Cancel" button
+ */
+export type CancelButtonProps = {
+    /**
+     * Label for the "Cancel Button"
+     *
+     * @default "キャンセル"
+     */
+    label?: string;
+};
+/**
+ * Properties for the "Apply" button
+ */
+export type ApplyButtonProps = {
+    /**
+     * Label for the "Apply Button"
+     *
+     * @default "適用"
+     */
+    label?: string;
+};
+export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>> = {
+    /**
+     * The selectable options for the list
+     *
+     * It should be an array of objects with `label` and `value` properties.
+     *
+     * **Tip**: Use `satisfies` for automatic type inference when using additional properties:
+     * ```tsx
+     * const options = [...] satisfies MultipleSelectBoxOption<string, YourType>[];
+     * <MultipleSelectBox options={options} /> // Type inference works automatically!
+     * ```
+     */
+    options?: MultipleSelectBoxOption<T, AdditionalProps>[];
+    /**
+     * Pass the initial selected option values.
+     * Use this prop when you want an uncontrolled component.
+     *
+     * Can be either:
+     * - An array of primitive values (string/number) that match options' values
+     * - An array of MultipleSelectBoxOption objects with both label and value (useful for async scenarios)
+     */
+    defaultValue?: MultipleSelectBoxOption<T, AdditionalProps>['value'][] | MultipleSelectBoxOption<T, AdditionalProps>[];
+    /**
+     * Pass the currently selected option values.
+     * Use this prop when you want a controlled component.
+     * Should use this prop with "onChange" prop to control the selected options.
+     *
+     * Can be either:
+     * - An array of primitive values (string/number) that match options' values
+     * - An array of MultipleSelectBoxOption objects with both label and value (useful for async scenarios)
+     */
+    value?: MultipleSelectBoxOption<T, AdditionalProps>['value'][] | MultipleSelectBoxOption<T, AdditionalProps>[];
+    /**
+     * The message to be displayed in the listbox when the options are empty.
+     */
+    emptyMessage?: string;
+    /**
+     * The DOM node where the dropdown menu should be rendered.
+     *
+     * If provided, the menu is rendered inside this node. Otherwise, a suitable DOM
+     * node is chosen automatically.
+     */
+    targetDOMNode?: HTMLElement | null;
+    /**
+     * The callback function that is called when the selected option is changed.
+     *
+     * @param values - The array of selected values
+     *
+     * @param options - The array of full option objects that were selected
+     *
+     * @example
+     * ```tsx
+     * <MultipleSelectBox
+     *   onChange={(values, options) => {
+     *     console.log('Selected values:', values);
+     *     console.log('Full options:', options); // Access labels and additional properties
+     *   }}
+     * />
+     * ```
+     */
+    onChange?: (values: MultipleSelectBoxOption<T, AdditionalProps>['value'][], options: MultipleSelectBoxOption<T, AdditionalProps>[]) => void;
+    /**
+     * Whether to enable the all options controls including "Select All" and "Clear All" buttons.
+     *
+     * @default false
+     */
+    enableAllOptionsControls?: boolean;
+    /**
+     * Whether to enable the apply controls in the option panel.
+     * Apply controls include a number of selected options and Cancel and Apply buttons.
+     * When enabled, selection changes will not be applied immediately but only after clicking the Apply button.
+     *
+     * @default false
+     */
+    enableApplyControls?: boolean;
+    /**
+     * Properties for the "Select All Button"
+     */
+    selectAllButtonProps?: SelectAllButtonProps;
+    /**
+     * Properties for the "Clear All Button"
+     */
+    clearAllButtonProps?: ClearAllButtonProps;
+    /**
+     * Properties for the Selected Count text
+     */
+    selectedCountProps?: SelectedCountProps;
+    /**
+     * Properties for the "Cancel" button
+     */
+    cancelButtonProps?: CancelButtonProps;
+    /**
+     * Properties for the "Apply" button
+     */
+    applyButtonProps?: ApplyButtonProps;
+    /**
+     * Custom render function for each option in the list.
+     * This allows you to customize how each option is displayed.
+     *
+     * @param option - The option object being rendered (includes additional properties if defined)
+     *
+     * @param isSelected - Whether the option is currently selected
+     *
+     * @returns A React node representing the custom option display
+     *
+     * @example
+     * ```tsx
+     * // Access additional properties in renderOption
+     * const options = [
+     *   { label: 'A', value: '1', customProp: 'foo' }
+     * ] satisfies MultipleSelectBoxOption<string, { customProp: string }>[];
+     *
+     * <MultipleSelectBox
+     *   options={options}
+     *   renderOption={(option, isSelected) => (
+     *     <div>{option.label} - {option.customProp}</div>
+     *   )}
+     * />
+     * ```
+     */
+    renderOption?: (option: MultipleSelectBoxOption<T, AdditionalProps>, isSelected: boolean) => React.ReactNode;
+    /**
+     * Whether to enable search options functionality
+     */
+    enableSearchOptions?: boolean;
+    /**
+     * The message to be displayed when the options are not found.
+     */
+    notFoundMessage?: string;
+    /**
+     * The properties for the SearchBox component.
+     */
+    searchBoxProps?: Pick<SearchBoxProps, 'clearButtonProps' | 'placeholder'>;
+    /**
+     * The properties for the option panel element.
+     *
+     * @property className - The class name of the option panel element.
+     *
+     * @property minWidth - The minimum width of the option panel element.
+     *
+     * @property allowedPlacements - Allowed placements for the popover relative to the trigger element.
+     */
+    optionPanelProps?: Pick<ComponentPropsWithoutRef<'div'>, 'className'> & {
+        minWidth?: PopoverProps['minWidth'];
+        allowedPlacements?: PopoverProps['allowedPlacements'];
+    };
+    /**
+     * Flag to indicate loading state of the options.
+     * When true, the MultipleSelectBox will display skeleton placeholders
+     * in the options list.
+     */
+    loading?: boolean;
+    /**
+     * Handler executed when text is entered in the search box.
+     * The handler is debounced by 300ms.
+     *
+     * When this prop is provided, client-side filtering is disabled as it's
+     * assumed that filtering will be handled by the prop.
+     */
+    onSearchOptions?: (text: string) => void;
+    /**
+     * Callback fired when the open state of the MultipleSelectBox changes.
+     *
+     * @param open - The new open state of the MultipleSelectBox.
+     */
+    onOpenStateChanged?: (open: boolean) => void;
+    /**
+     * The callback function that is called when the MultipleSelectBox loses focus.
+     * This will only fire when the user truly leaves the component (not when the popover opens).
+     *
+     * @param event - The blur event from the trigger element
+     *
+     * @example
+     * ```tsx
+     * <MultipleSelectBox
+     *   onBlur={(event) => {
+     *     console.log('MultipleSelectBox lost focus');
+     *     // Perform validation or other actions
+     *   }}
+     * />
+     * ```
+     */
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+    /**
+     * Enable auto unmounting of the popover content when it's not displayed.
+     * When true, the popover content will return null instead of hiding via CSS.
+     *
+     * @default true
+     */
+    enableAutoUnmount?: boolean;
+    /**
+     * Flag to show a divider between group options in the list.
+     * When true, a divider is shown between group options except the first one.
+     *
+     * @default false
+     */
+    showGroupOptionDivider?: boolean;
+    /**
+     * Enable virtualization for large option lists.
+     * When enabled, only visible options are rendered to improve performance.
+     *
+     * Recommended for lists with 100+ options.
+     *
+     * @default false
+     *
+     * @example
+     * ```tsx
+     * <MultipleSelectBox options={largeList} enableVirtualization />
+     * ```
+     */
+    enableVirtualization?: boolean;
+    /**
+     * Configuration for virtualization behavior.
+     * Only applies when `enableVirtualization` is true.
+     *
+     * @example
+     * ```tsx
+     * <MultipleSelectBox
+     *   enableVirtualization
+     *   virtualizationOptions={{
+     *     estimateSize: (index) => 48, // Function returning size in pixels
+     *     overscan: 10                 // Number of items outside visible area
+     *   }}
+     * />
+     * ```
+     */
+    virtualizationOptions?: VirtualOptionTypes;
+} & Pick<MultipleSelectBoxTriggerProps<T, AdditionalProps>, keyof PassedProps<T, AdditionalProps>>;

package/dist/esm/src/MultipleSelectBox/MultipleSelectBox.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/MultipleSelectBox/MultipleSelectBoxTrigger/MultipleSelectBoxTrigger.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type MultipleSelectBoxTriggerProps } from './MultipleSelectBoxTrigger.types';
+import { type AllowedValueTypes } from '../MultipleSelectBox.types';
+export declare const MultipleSelectBoxTrigger: <T extends AllowedValueTypes = string, AdditionalProps extends Record<string, any> = Record<string, never>>(props: MultipleSelectBoxTriggerProps<T, AdditionalProps> & {
+    ref?: React.ForwardedRef<HTMLButtonElement>;
+}) => React.ReactElement;

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

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef } from 'react';
+import { Dropdown as DropdownIcon } from '@moneyforward/mfui-icons-react';
+import { multipleSelectBoxTriggerRecipe } from '../../../styled-system/recipes';
+import { ClearButton } from '../../shared/ClearButton';
+import { FocusIndicator } from '../../FocusIndicator';
+import { Typography } from '../../Typography';
+import { Tag } from '../../Tag';
+import { mergeRefs } from '../../utilities/dom/mergeRefs';
+import { cx } from '../../../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 = multipleSelectBoxTriggerRecipe({ size });
+    const triggerRef = 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 (_jsx(Typography, { variant: textVariant, className: cx(classes.placeholder, 'mfui-MultipleSelectBoxTrigger__placeholder'), "data-mfui-content": "multiple-select-box-trigger-placeholder", children: placeholder }));
+        }
+        if (showDisplayValueAsTag) {
+            return (_jsx("div", { className: cx(classes.tagList, 'mfui-MultipleSelectBoxTrigger__tagList'), "data-mfui-content": "multiple-select-box-trigger-selected-options", children: selectedOptions.map((option, index) => (_jsx(Tag, { className: cx(classes.tagItem, 'mfui-MultipleSelectBoxTrigger__tagItem'), label: option.label, onClose: (event) => {
+                        event.stopPropagation();
+                        onDeselectTag(option.value);
+                    } }, option.value ?? `tag-${option.label}-${String(index)}`))) }));
+        }
+        return (_jsx(Typography, { variant: textVariant, as: "div", className: cx(classes.label, 'mfui-MultipleSelectBoxTrigger__label'), "data-mfui-content": "multiple-select-box-trigger-selected-options", children: selectedOptions.map((option, index) => (_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
+    _jsx(FocusIndicator, { children: _jsxs("div", { ref: wrapperRef, className: cx(classes.wrapper, 'mfui-MultipleSelectBoxTrigger__wrapper', triggerWrapperProps?.className), children: [_jsx("button", { ref: 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: cx(classes.trigger, 'mfui-MultipleSelectBoxTrigger__trigger', triggerProps?.className) }), _jsx("input", { type: "hidden", name: name, value: selectedValues }), _jsx("div", { className: cx(classes.displayValues, 'mfui-MultipleSelectBoxTrigger__displayValues'), "data-mfui-content": "multiple-select-box-trigger-display-values", children: renderer() }), selectedOptions.length > 0 && !disabled && !disableClearButton ? (_jsx("div", { className: cx(classes.clearButtonContainer, 'mfui-MultipleSelectBoxTrigger__clearButtonContainer'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', className: cx(classes.clearButton, 'mfui-MultipleSelectBoxTrigger__clearButton'), "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "multiple-select-box-clear-button", onClick: handleClearValue }) })) : null, _jsx("div", { className: cx(classes.dropdownIconContainer, 'mfui-MultipleSelectBoxTrigger__dropdownIconContainer'), children: _jsx(DropdownIcon, { className: cx(classes.dropdownIcon, 'mfui-MultipleSelectBoxTrigger__dropdownIcon') }) })] }) }));
+}
+export const MultipleSelectBoxTrigger = forwardRef(MultipleSelectBoxTriggerInner);

package/dist/esm/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/esm/src/MultipleSelectBox/MultipleSelectBoxTrigger/MultipleSelectBoxTrigger.types.js

@@ -0,0 +1 @@
+export {};

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

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

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

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

package/dist/esm/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/esm/src/MultipleSelectBox/hooks/useApplyControls.js

@@ -0,0 +1,34 @@
+import { useState, useCallback } from 'react';
+/**
+ * Hook to manage the apply controls functionality
+ * Manages temporary selection state and notifies parent component when confirmed
+ */
+export function useApplyControls({ onValuesChange, closeOptionPanel }) {
+    // Temporary selection state
+    const [temporaryValues, setTemporaryValues] = useState(new Set());
+    // Update temporary selection state
+    const updateTemporaryValues = useCallback((values) => {
+        setTemporaryValues(new Set(values));
+    }, []);
+    // Initialize temporary selection state
+    const initializeTemporaryValues = useCallback(() => {
+        setTemporaryValues(new Set());
+    }, []);
+    // Handle cancel button click
+    const handleCancelButtonClick = useCallback(() => {
+        initializeTemporaryValues();
+        closeOptionPanel();
+    }, [closeOptionPanel, initializeTemporaryValues]);
+    // Handle apply button click
+    const handleApplyButtonClick = useCallback(() => {
+        onValuesChange([...temporaryValues]);
+        closeOptionPanel();
+    }, [onValuesChange, temporaryValues, closeOptionPanel]);
+    return {
+        temporaryValues,
+        updateTemporaryValues,
+        initializeTemporaryValues,
+        handleCancelButtonClick,
+        handleApplyButtonClick,
+    };
+}

package/dist/esm/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 {};