@moneyforward/mfui-components 2.48.2 → 3.0.0

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

@@ -1,278 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultipleSelectBox = MultipleSelectBox;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const FocusIndicator_1 = require("../FocusIndicator");
-const Typography_1 = require("../Typography");
-const useFocusTrap_1 = require("../utilities/dom/useFocusTrap");
-const recipes_1 = require("../../styled-system/recipes");
-const useDisclosure_1 = require("../utilities/state/useDisclosure");
-const MultipleSelectBoxTrigger_1 = require("./MultipleSelectBoxTrigger");
-const useSearchBox_1 = require("./hooks/useSearchBox");
-const SearchBox_1 = require("../SearchBox");
-const Button_1 = require("../Button");
-const Stack_1 = require("../Stack");
-const Skeleton_1 = require("../Skeleton");
-const useInitialFocusOnOptionPanelOpen_1 = require("./hooks/useInitialFocusOnOptionPanelOpen");
-const useSelectedValues_1 = require("./hooks/useSelectedValues");
-const useOptionKeyboardNavigation_1 = require("./hooks/useOptionKeyboardNavigation");
-const useOptionSelectionManagement_1 = require("./hooks/useOptionSelectionManagement");
-const Popover_1 = require("../Popover");
-const useApplyControls_1 = require("./hooks/useApplyControls");
-const css_1 = require("../../styled-system/css");
-const flattenOptions_1 = require("./utils/flattenOptions");
-const isSelectableOption_1 = require("./utils/isSelectableOption");
-const useVirtualizedMultipleSelectBoxOptions_1 = require("./hooks/useVirtualizedMultipleSelectBoxOptions");
-// How many skeleton items to render while the component is loading.
-const SKELETON_ITEM_COUNT = 4;
-/**
- * The MultipleSelectBox component.
- * This component is separated from the SelectBox component because it has a different behavior.
- * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
- */
-function MultipleSelectBox({ id, triggerProps, triggerWrapperProps, size, options = [], defaultValue, placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, clearButtonProps, disableClearButton = false, optionPanelProps, enableAllOptionsControls = false, enableApplyControls = false, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, onOpenStateChanged, enableAutoUnmount = true, onBlur, showGroupOptionDivider, enableVirtualization = false, virtualizationOptions, }) {
-    const classes = (0, recipes_1.multipleSelectBoxSlotRecipe)({ showGroupOptionDivider });
-    const triggerRef = (0, react_1.useRef)(null);
-    const listBoxId = (0, react_1.useId)();
-    const optionPanelRef = (0, react_1.useRef)(null);
-    const listBoxRef = (0, react_1.useRef)(null);
-    const searchInputRef = (0, react_1.useRef)(null);
-    const selectAllButtonRef = (0, react_1.useRef)(null);
-    const clearAllButtonRef = (0, react_1.useRef)(null);
-    const cancelButtonRef = (0, react_1.useRef)(null);
-    const applyButtonRef = (0, react_1.useRef)(null);
-    const flattenedOptions = (0, react_1.useMemo)(() => (0, flattenOptions_1.flattenOptions)(options), [options]);
-    const { localSelectedValuesSet, localSelectedOptions, updateSelectedValues } = (0, useSelectedValues_1.useSelectedValues)({
-        options: flattenedOptions,
-        defaultValue,
-        value,
-        onChange,
-    });
-    const { isOpen: isOptionPanelOpen, toggle: toggleOptionPanel, close: closeOptionPanel, } = (0, useDisclosure_1.useDisclosure)({
-        onToggle: (nextValue) => {
-            onOpenStateChanged?.(nextValue);
-            if (nextValue && enableApplyControls) {
-                updateTemporaryValues([...localSelectedValuesSet]);
-            }
-        },
-        onClose: () => {
-            onOpenStateChanged?.(false);
-            if (enableApplyControls) {
-                initializeTemporaryValues();
-            }
-            triggerRef.current?.focus();
-        },
-    });
-    const { searchText, filteredOptions, onSearchTextChange } = (0, useSearchBox_1.useSearchBox)(flattenedOptions, enableSearchOptions, onSearchOptions);
-    // Determine if virtualization should be enabled
-    const shouldVirtualize = enableVirtualization && !loading && flattenedOptions.length > 0;
-    // Initialize virtualization
-    const { virtualizer, virtualItems, totalSize, isVirtualized } = (0, useVirtualizedMultipleSelectBoxOptions_1.useVirtualizedMultipleSelectBoxOptions)({
-        enabled: shouldVirtualize,
-        parentRef: listBoxRef,
-        flatOptions: filteredOptions.filter((option) => 'value' in option),
-        estimateSize: virtualizationOptions?.estimateSize,
-        overscan: virtualizationOptions?.overscan,
-    });
-    const { temporaryValues, updateTemporaryValues, initializeTemporaryValues, handleCancelButtonClick, handleApplyButtonClick, } = (0, useApplyControls_1.useApplyControls)({
-        onValuesChange: updateSelectedValues,
-        closeOptionPanel,
-    });
-    // Control the focus when the option panel is opened.
-    (0, useInitialFocusOnOptionPanelOpen_1.useInitialFocusOnOptionPanelOpen)({
-        isOptionPanelOpen,
-        selectAllButtonRef,
-        clearAllButtonRef,
-        enableSearchOptions,
-        searchInputRef,
-        localSelectedValuesSet,
-        optionPanelRef,
-        filteredOptions,
-        loading,
-    });
-    // Manage the selection of options
-    const { handleSelectOption, handleSelectAllOptions, handleClearAllOptions } = (0, useOptionSelectionManagement_1.useOptionSelectionManagement)({
-        options: flattenedOptions,
-        selectedValues: enableApplyControls ? temporaryValues : localSelectedValuesSet,
-        updateSelectedValues: enableApplyControls ? updateTemporaryValues : updateSelectedValues,
-    });
-    const handleSelectAll = () => {
-        handleSelectAllOptions(filteredOptions);
-    };
-    const handleClearAll = () => {
-        handleClearAllOptions(filteredOptions);
-    };
-    const { handleOnKeyDown: handleKeyDownMenu } = (0, useFocusTrap_1.useFocusTrap)({
-        onKeyDown: (event) => {
-            if (event.key === 'Escape') {
-                closeOptionPanel();
-            }
-        },
-    });
-    // Create an array of focusable (selectable and not disabled) options from filteredOptions
-    const focusableOptions = (0, react_1.useMemo)(() => filteredOptions.filter((option) => (0, isSelectableOption_1.isSelectableOption)(option) && option.value != null && !(0, isSelectableOption_1.isOptionDisabled)(option)), [filteredOptions]);
-    // Manage the keyboard navigation of options
-    const { handleOptionFocus, createKeyDownHandler, tabbableOptionIndex } = (0, useOptionKeyboardNavigation_1.useOptionKeyboardNavigation)({
-        filteredOptions: focusableOptions,
-        selectedValues: enableApplyControls ? temporaryValues : localSelectedValuesSet,
-        onSelectOption: handleSelectOption,
-        onClosePanel: closeOptionPanel,
-    });
-    // Create a flat structure for virtualization that includes both group headers and options
-    const createVirtualizedItems = (0, react_1.useCallback)(() => {
-        if (!shouldVirtualize)
-            return [];
-        const items = [];
-        filteredOptions.forEach((option) => {
-            if ('options' in option && Array.isArray(option.options)) {
-                // Add group header
-                items.push({
-                    type: 'group',
-                    option,
-                });
-                // Add group options
-                option.options.forEach((nestedOption) => {
-                    items.push({
-                        type: 'option',
-                        option: nestedOption,
-                    });
-                });
-            }
-            else {
-                // Regular option
-                items.push({
-                    type: 'option',
-                    option,
-                });
-            }
-        });
-        return items;
-    }, [filteredOptions, shouldVirtualize]);
-    const virtualizedItems = (0, react_1.useMemo)(() => createVirtualizedItems(), [createVirtualizedItems]);
-    // Render virtualized items - extracted for better maintainability
-    const renderVirtualizedItems = (0, react_1.useCallback)(() => {
-        let focusableIndex = 0;
-        return virtualItems.map((virtualItem) => {
-            const virtualizedItem = virtualizedItems[virtualItem.index];
-            if (!virtualizedItem)
-                return null;
-            const { type, option } = virtualizedItem;
-            if (type === 'group') {
-                return ((0, jsx_runtime_1.jsx)("div", { ref: virtualizer?.measureElement, "data-index": virtualItem.index, style: {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width: '100%',
-                        transform: `translateY(${String(virtualItem.start)}px)`,
-                    }, children: (0, jsx_runtime_1.jsx)("li", { className: (0, css_1.cx)(classes.listItem, 'mfui-MultipleSelectBox__listItem'), "data-mfui-group-label": "true", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "label", children: option.label }) }) }, virtualItem.key));
-            }
-            if ((0, isSelectableOption_1.isSelectableOption)(option) && option.value != null) {
-                const { value, label } = option;
-                const isDisabled = (0, isSelectableOption_1.isOptionDisabled)(option);
-                const selectedSet = enableApplyControls ? temporaryValues : localSelectedValuesSet;
-                const isSelected = (0, isSelectableOption_1.isOptionSelected)(option, selectedSet);
-                // For virtualized items, we need to find the correct focusable index
-                // based on the current filtered and focusable options, not the original flat options
-                let currentFocusableIndex = -1;
-                if (!isDisabled) {
-                    // Find this option's index in the focusableOptions array
-                    const focusableOptionIndex = focusableOptions.findIndex((focusableOpt) => focusableOpt.value === option.value);
-                    currentFocusableIndex = focusableOptionIndex !== -1 ? focusableOptionIndex : focusableIndex;
-                    focusableIndex += 1;
-                }
-                return ((0, jsx_runtime_1.jsx)("div", { ref: virtualizer?.measureElement, "data-index": virtualItem.index, style: {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width: '100%',
-                        transform: `translateY(${String(virtualItem.start)}px)`,
-                    }, children: (0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)("li", { role: "option", "data-focusable": !isDisabled, "data-value": value, className: (0, css_1.cx)(classes.listItem, 'mfui-MultipleSelectBox__listItem'), "aria-selected": isSelected, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : currentFocusableIndex === tabbableOptionIndex ? 0 : -1, onFocus: () => {
-                                if (!isDisabled)
-                                    handleOptionFocus(currentFocusableIndex);
-                            }, onKeyDown: createKeyDownHandler(option), onClick: () => {
-                                if (isDisabled) {
-                                    return;
-                                }
-                                handleSelectOption(option);
-                            }, children: renderOption ? (renderOption(option, isSelected)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isSelected ? (0, jsx_runtime_1.jsx)(mfui_icons_react_1.CheckboxChecked, { "aria-hidden": "true" }) : (0, jsx_runtime_1.jsx)(mfui_icons_react_1.CheckboxUnchecked, { "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body", children: label })] })) }) }) }, virtualItem.key));
-            }
-            return null;
-        });
-    }, [
-        virtualItems,
-        virtualizedItems,
-        enableApplyControls,
-        temporaryValues,
-        localSelectedValuesSet,
-        classes,
-        handleSelectOption,
-        renderOption,
-        createKeyDownHandler,
-        handleOptionFocus,
-        tabbableOptionIndex,
-        focusableOptions,
-        virtualizer,
-    ]);
-    // Render non-virtualized items - extracted for better maintainability
-    const renderNonVirtualizedItems = (0, react_1.useCallback)(() => {
-        // Map from filteredOptions index to focusableOptions index
-        let focusableIndex = 0;
-        return filteredOptions.map((option, optionIndex) => {
-            if ((0, isSelectableOption_1.isSelectableOption)(option)) {
-                // If selectable but value is null/undefined, skip rendering
-                if (option.value == null) {
-                    return null;
-                }
-                // Only reaches here if isSelectableOption(option) is true and value is not null/undefined
-                const { value, label } = option;
-                const isDisabled = (0, isSelectableOption_1.isOptionDisabled)(option);
-                const selectedSet = enableApplyControls ? temporaryValues : localSelectedValuesSet;
-                const isSelected = (0, isSelectableOption_1.isOptionSelected)(option, selectedSet);
-                // Only increment focusableIndex for selectable and not disabled options
-                let currentFocusableIndex = -1;
-                if (!isDisabled) {
-                    currentFocusableIndex = focusableIndex;
-                    focusableIndex += 1;
-                }
-                return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)("li", { role: "option", "data-focusable": !isDisabled, className: (0, css_1.cx)(classes.listItem, 'mfui-MultipleSelectBox__listItem'), "aria-selected": isSelected, "aria-disabled": isDisabled, tabIndex: isDisabled ? -1 : currentFocusableIndex === tabbableOptionIndex ? 0 : -1, onFocus: () => {
-                            if (!isDisabled)
-                                handleOptionFocus(currentFocusableIndex);
-                        }, onKeyDown: createKeyDownHandler(option), onClick: () => {
-                            if (isDisabled) {
-                                return;
-                            }
-                            handleSelectOption(option);
-                        }, children: renderOption ? (renderOption(option, isSelected)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isSelected ? (0, jsx_runtime_1.jsx)(mfui_icons_react_1.CheckboxChecked, { "aria-hidden": "true" }) : (0, jsx_runtime_1.jsx)(mfui_icons_react_1.CheckboxUnchecked, { "aria-hidden": "true" }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body", children: label })] })) }) }, String(value)));
-            }
-            // Only render group label if truly a group label (no value property at all)
-            const { label } = option;
-            return ((0, jsx_runtime_1.jsx)("li", { className: classes.listItem, "data-mfui-group-label": "true", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "label", children: label }) }, `group-label-${String(optionIndex)}`));
-        });
-    }, [
-        filteredOptions,
-        enableApplyControls,
-        temporaryValues,
-        localSelectedValuesSet,
-        classes,
-        handleSelectOption,
-        renderOption,
-        createKeyDownHandler,
-        handleOptionFocus,
-        tabbableOptionIndex,
-    ]);
-    return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => ((0, jsx_runtime_1.jsx)(MultipleSelectBoxTrigger_1.MultipleSelectBoxTrigger, { ref: triggerRef, wrapperRef: setTriggerRef, selectedOptions: localSelectedOptions, id: id, disabled: disabled, triggerProps: triggerProps, triggerWrapperProps: triggerWrapperProps, name: name, placeholder: placeholder, size: size, listBoxId: listBoxId, isOptionPanelOpen: isOptionPanelOpen, invalid: invalid, showDisplayValueAsTag: showDisplayValueAsTag, renderDisplayValue: renderDisplayValue, clearButtonProps: clearButtonProps, disableClearButton: disableClearButton, updateSelectedValues: updateSelectedValues, onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur })), contentProps: { className: classes.popover }, minWidth: optionPanelProps?.minWidth, allowedPlacements: optionPanelProps?.allowedPlacements, renderContent: () => ((0, jsx_runtime_1.jsxs)("div", { ref: optionPanelRef, className: (0, css_1.cx)(classes.optionPanel, 'mfui-MultipleSelectBox__optionPanel', optionPanelProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: [enableSearchOptions || enableAllOptionsControls ? ((0, jsx_runtime_1.jsxs)(Stack_1.VStack, { className: (0, css_1.cx)(classes.menuHeader, 'mfui-MultipleSelectBox__menuHeader'), gap: "8px", children: [enableSearchOptions ? ((0, jsx_runtime_1.jsx)(SearchBox_1.SearchBox, { ref: searchInputRef, enableClearButton: true, value: searchText, textBoxSize: "small", autoComplete: "off", onChange: onSearchTextChange, ...searchBoxProps })) : null, enableAllOptionsControls ? ((0, jsx_runtime_1.jsxs)(Stack_1.HStack, { justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { ref: selectAllButtonRef, size: "small", onClick: handleSelectAll, children: selectAllButtonProps?.label ?? 'すべて選択' }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ref: clearAllButtonRef, size: "small", onClick: handleClearAll, children: clearAllButtonProps?.label ?? 'すべて解除' })] })) : null] })) : null, (0, jsx_runtime_1.jsx)("ul", { ref: listBoxRef, role: "listbox", id: listBoxId, className: (0, css_1.cx)(classes.listBox, 'mfui-MultipleSelectBox__listBox'), tabIndex: -1, style: isVirtualized && totalSize > 0
-                        ? {
-                            height: `${String(totalSize)}px`,
-                            position: 'relative',
-                        }
-                        : undefined, children: loading ? (Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => ((0, jsx_runtime_1.jsx)("li", { className: (0, css_1.cx)(classes.skeletonItem, 'mfui-MultipleSelectBox__skeletonItem'), children: (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, {}) }, index)))) : isVirtualized && virtualItems.length > 0 ? (
-                    // Virtualized rendering with group support
-                    renderVirtualizedItems()) : filteredOptions.length > 0 ? (renderNonVirtualizedItems()) : ((0, jsx_runtime_1.jsx)("li", { className: (0, css_1.cx)(classes.emptyMessage, 'mfui-MultipleSelectBox__emptyMessage'), children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body", children: enableSearchOptions && searchText && notFoundMessage
-                                ? notFoundMessage
-                                : options.length > 0
-                                    ? notFoundMessage
-                                    : emptyMessage }) })) }), enableApplyControls ? ((0, jsx_runtime_1.jsxs)(Stack_1.HStack, { className: (0, css_1.cx)(classes.menuFooter, 'mfui-MultipleSelectBox__menuFooter'), justifyContent: "space-between", alignItems: "center", children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body", color: "neutral.600", children: selectedCountProps?.render?.(temporaryValues.size) ?? `${String(temporaryValues.size)}件選択中` }), (0, jsx_runtime_1.jsxs)(Stack_1.HStack, { gap: "inline.horizontal", children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { ref: cancelButtonRef, size: "small", priority: "secondary", onClick: handleCancelButtonClick, children: cancelButtonProps?.label ?? 'キャンセル' }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ref: applyButtonRef, size: "small", priority: "primary", onClick: handleApplyButtonClick, children: applyButtonProps?.label ?? '適用' })] })] })) : null] })), open: isOptionPanelOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: toggleOptionPanel, onBlur: onBlur }));
-}

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

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

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

@@ -1,56 +0,0 @@
-"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

@@ -1,142 +0,0 @@
-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

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

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

@@ -1,5 +0,0 @@
-"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.js

@@ -1,37 +0,0 @@
-"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.js

@@ -1,83 +0,0 @@
-"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;