@moneyforward/mfui-components 2.48.2 → 3.1.0

package/dist/cjs/src/RadioButtonCard/RadioButtonCard.js

@@ -1,41 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioButtonCard = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const css_1 = require("../../styled-system/css");
-const FocusIndicator_1 = require("../FocusIndicator");
-const recipes_1 = require("../../styled-system/recipes");
-const RadioButton_1 = require("../RadioButton");
-const Typography_1 = require("../Typography");
-const responsive_1 = require("../utilities/responsive");
-/**
- * A component that transforms radio buttons into card-style selectable elements.
- * This component turns on/off the label depends on the prop: label, detail and layout.
- *
- * Also extends the props of `<input type="radio">` element.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio
- */
-exports.RadioButtonCard = (0, react_1.forwardRef)(({ label, layout = 'vertical', renderDetailsSlot, disableResponsive = false, className, ...props }, ref) => {
-    const radioButtonState = (0, react_1.useMemo)(() => ({
-        checked: props.checked,
-        disabled: props.disabled,
-    }), [props.checked, props.disabled]);
-    // Convert renderDetailsSlot to ResponsiveSlot format for consistent handling
-    const responsiveSlot = (0, responsive_1.isResponsiveSlot)(renderDetailsSlot)
-        ? renderDetailsSlot
-        : { base: renderDetailsSlot, narrowViewport: undefined };
-    const classes = (0, recipes_1.radioButtonCardSlotRecipe)({
-        layout: !renderDetailsSlot ? 'vertical' : layout,
-        disableResponsive,
-        isResponsive: Boolean(responsiveSlot.narrowViewport),
-    });
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.root, 'mfui-RadioButtonCard__root', className), children: [(0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { disableNestedFocus: true, children: (0, jsx_runtime_1.jsxs)(Typography_1.Typography, { variant: "label", className: (0, css_1.cx)(classes.inputWrapper, 'mfui-RadioButtonCard__inputWrapper'), as: "label", htmlFor: props.id, children: [(0, jsx_runtime_1.jsx)(RadioButton_1.RadioButton, { ref: ref, ...props, className: (0, css_1.cx)(classes.input, 'mfui-RadioButtonCard__input') }), (0, jsx_runtime_1.jsx)("span", { className: (0, css_1.cx)(classes.label, 'mfui-RadioButtonCard__label'), children: label })] }) }), responsiveSlot.narrowViewport && disableResponsive ? (
-            /* When responsive is disabled, render single element but with both contents using CSS for switching */
-            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "details", className: (0, css_1.cx)(classes.details, classes.detailsWide, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) }), (0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "details", className: (0, css_1.cx)(classes.details, classes.detailsNarrow, 'mfui-RadioButtonCard__details'), children: responsiveSlot.narrowViewport(radioButtonState) })] })) : responsiveSlot.narrowViewport ? (
-            /* When responsive is enabled, render separate wide/narrow elements */
-            (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "details", className: (0, css_1.cx)(classes.details, classes.detailsWide, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) }), (0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "details", className: (0, css_1.cx)(classes.details, classes.detailsNarrow, 'mfui-RadioButtonCard__details'), children: responsiveSlot.narrowViewport(radioButtonState) })] })) : responsiveSlot.base ? (
-            /* For function-based renderDetailsSlot or ResponsiveSlot with only base, use single details element */
-            (0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "details", className: (0, css_1.cx)(classes.details, 'mfui-RadioButtonCard__details'), children: responsiveSlot.base(radioButtonState) })) : null] }));
-});

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

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

package/dist/cjs/src/RadioButtonCard/index.js

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

package/dist/cjs/src/RadioGroup/RadioGroup.js

@@ -1,39 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioGroup = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const RadioGroupContext_1 = require("./RadioGroupContext");
-const css_1 = require("../../styled-system/css");
-const recipes_1 = require("../../styled-system/recipes");
-/**
- * The general-purpose RadioGroup component.
- *
- * The RadioGroup component is designed to ensure that only one radio button can be selected at a time within the
- * group, simplifying the state management and data handling for forms.
- *
- * This component will wrap all radio buttons in a group and control their check state.
- *
- * Also extends the props of `<div>` element.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
- */
-exports.RadioGroup = (0, react_1.forwardRef)(({ className, defaultValue, value, disabled, name, onChange, children, ...props }, ref) => {
-    const classes = (0, recipes_1.radioGroupSlotRecipe)();
-    const [localValue, setLocalValue] = (0, react_1.useState)(defaultValue);
-    const handleOnChange = (0, react_1.useCallback)((event) => {
-        const newValue = event.target.value;
-        if (value === undefined) {
-            setLocalValue(newValue);
-        }
-        onChange?.(event);
-    }, [onChange, value]);
-    const contextValue = (0, react_1.useMemo)(() => ({
-        disabled,
-        name,
-        value: value ?? localValue,
-        onChange: handleOnChange,
-    }), [disabled, handleOnChange, localValue, name, value]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, ...props, className: (0, css_1.cx)(classes.root, 'mfui-RadioGroup__root', className), role: "radiogroup", children: (0, jsx_runtime_1.jsx)(RadioGroupContext_1.RadioGroupContext.Provider, { value: contextValue, children: children }) }));
-});

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

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

package/dist/cjs/src/RadioGroup/RadioGroupContext.js

@@ -1,6 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.RadioGroupContext = void 0;
-const react_1 = require("react");
-exports.RadioGroupContext = (0, react_1.createContext)({});

package/dist/cjs/src/RadioGroup/index.js

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

package/dist/cjs/src/SearchBox/SearchBox.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SearchBox = 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 TextBox_1 = require("../TextBox");
-const css_1 = require("../../styled-system/css");
-/**
- * The component wrapped the TextBox component with Search icon.
- * Some props in the TextBox component are not supported.
- */
-exports.SearchBox = (0, react_1.forwardRef)(({ className, ...rest }, ref) => ((0, jsx_runtime_1.jsx)(TextBox_1.TextBox, { ref: ref, prefixSlot: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Search, {}), className: (0, css_1.cx)('mfui-SearchBox__root', className), ...rest })));

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

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

package/dist/cjs/src/SearchBox/index.js

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

package/dist/cjs/src/SectionMessage/SectionMessage.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SectionMessage = 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 css_1 = require("../../styled-system/css");
-const recipes_1 = require("../../styled-system/recipes");
-const IconButton_1 = require("../IconButton");
-const Typography_1 = require("../Typography");
-/**
- * The SectionMessage component is used to display an inline message inside a page or some container.
- * Note: We changed the name of the component from `InlineMessage` to `SectionMessage`.
- *
- * This component switches the variants of looks depends on the props `messageType` and `region`.
- *
- * Also extends the props of `<div>` element (the wrapper).
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
- */
-exports.SectionMessage = (0, react_1.forwardRef)(({ messageType = 'neutral', region = 'inline', className, actionSlot, onClose, children, statusIconProps, closeButtonProps, disableResponsive = false, ...props }, ref) => {
-    const classes = (0, recipes_1.sectionMessageSlotRecipe)({
-        messageType,
-        region,
-        disableResponsive,
-    });
-    const StatusIcon = {
-        neutral: null,
-        success: ((0, jsx_runtime_1.jsx)(mfui_icons_react_1.Approval, { "aria-label": statusIconProps?.['aria-label'] ?? '完了', className: (0, css_1.cx)(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
-        error: ((0, jsx_runtime_1.jsx)(mfui_icons_react_1.Error, { "aria-label": statusIconProps?.['aria-label'] ?? 'エラー', className: (0, css_1.cx)(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
-        caution: ((0, jsx_runtime_1.jsx)(mfui_icons_react_1.Caution, { "aria-label": statusIconProps?.['aria-label'] ?? '注意', className: (0, css_1.cx)(classes.statusIcon, 'mfui-SectionMessage__statusIcon') })),
-    }[messageType];
-    const contentIsString = typeof children === 'string';
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, className: (0, css_1.cx)(classes.root, 'mfui-SectionMessage__root', className), ...props, role: "alert", children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.topSection, 'mfui-SectionMessage__topSection'), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.content, 'mfui-SectionMessage__content'), children: [StatusIcon, contentIsString ? (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body", children: children }) : children] }), (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.rightSection, 'mfui-SectionMessage__rightSection'), children: [(0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.actionSlot, classes.desktopActionSlot, 'mfui-SectionMessage__actionSlot'), "data-mfui-content": "SectionMessage-action-slot-desktop", children: actionSlot }), onClose ? ((0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: onClose, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Close, { "aria-hidden": true, className: (0, css_1.cx)(classes.closeIcon, 'mfui-SectionMessage__closeIcon') }) })) : null] })] }), actionSlot && !disableResponsive ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.actionSlot, classes.mobileActionSlot, 'mfui-SectionMessage__actionSlot'), "data-mfui-content": "SectionMessage-action-slot-mobile", children: actionSlot })) : null] }));
-});

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

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

package/dist/cjs/src/SectionMessage/index.js

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

package/dist/cjs/src/SelectBox/SelectBox.js

@@ -1,343 +0,0 @@
-"use strict";
-'use client';
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectBox = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importStar(require("react"));
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const ClearButton_1 = require("../shared/ClearButton");
-const FocusIndicator_1 = require("../FocusIndicator");
-const recipes_1 = require("../../styled-system/recipes");
-const Typography_1 = require("../Typography");
-const SearchBox_1 = require("../SearchBox");
-const useSearchBox_1 = require("./hooks/useSearchBox");
-const Skeleton_1 = require("../Skeleton");
-const useFocusTrap_1 = require("../utilities/dom/useFocusTrap");
-const Popover_1 = require("../Popover");
-const useDisclosure_1 = require("../utilities/state/useDisclosure");
-const css_1 = require("../../styled-system/css");
-const useUpdateEffect_1 = require("../utilities/effect/useUpdateEffect");
-const useTypeAhead_1 = require("./hooks/useTypeAhead");
-const getFlatOptions_1 = require("./utils/getFlatOptions");
-const findFlatOptionIndexByValue_1 = require("./utils/findFlatOptionIndexByValue");
-const findOptionByValue_1 = require("./utils/findOptionByValue");
-const useKeyboardNavigation_1 = require("./hooks/useKeyboardNavigation");
-const SelectBoxOption_1 = require("./SelectBoxOption");
-const SelectBoxOptionGroup_1 = require("./SelectBoxOptionGroup");
-const isSelectableOption_1 = require("./utils/isSelectableOption");
-const useVirtualizedOptions_1 = require("./hooks/useVirtualizedOptions");
-const DEFAULT_SCROLL_OPTIONS = {
-    behavior: 'auto',
-    block: 'center',
-};
-// How many skeleton items to render while the component is loading.
-const SKELETON_ITEM_COUNT = 4;
-/**
- * The general-purpose SelectBox component.
- * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
- */
-exports.SelectBox = (0, react_1.forwardRef)((props, ref) => {
-    const { id, triggerProps, clearButtonProps, enableClearButton = false, size, options = [], defaultValue, placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, onBlur, value, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, renderDisplayValue, renderOption, renderPopoverContent, enableAutoScrollToSelectedOption, popoverContentProps, popoverWrapperProps, onOpenStateChanged, showGroupOptionDivider, triggerWrapperProps, enableAutoUnmount = true, enableConstrainedPopoverWidth = false, enableVirtualization = false, virtualizationOptions, } = props;
-    const classes = (0, recipes_1.selectBoxSlotRecipe)({ size, showGroupOptionDivider });
-    const triggerRef = (0, react_1.useRef)(null);
-    const listBoxId = (0, react_1.useId)();
-    const optionPanelRef = (0, react_1.useRef)(null);
-    const scrollWrapperRef = (0, react_1.useRef)(null);
-    const searchInputRef = (0, react_1.useRef)(null);
-    const [localSelectedOption, setLocalSelectedOption] = (0, react_1.useState)(() => {
-        if (defaultValue === undefined)
-            return null;
-        if (typeof defaultValue === 'string' || typeof defaultValue === 'number') {
-            return (0, findOptionByValue_1.findOptionByValue)(options, defaultValue);
-        }
-        return defaultValue;
-    });
-    const { isOpen: isOptionPanelOpen, toggle: toggleOptionPanel, close: closeOptionPanel, } = (0, useDisclosure_1.useDisclosure)({
-        value: false,
-        onToggle: onOpenStateChanged,
-        onClose: () => {
-            triggerRef.current?.focus();
-        },
-    });
-    const { searchText, onSearchTextChange, filteredOptions } = (0, useSearchBox_1.useSearchBox)(options, enableSearchOptions, onSearchOptions);
-    const selectedOption = (0, react_1.useMemo)(() => {
-        if (value === undefined)
-            return null;
-        if (typeof value === 'string' || typeof value === 'number') {
-            return (0, findOptionByValue_1.findOptionByValue)(options, value);
-        }
-        return value;
-    }, [options, value]);
-    (0, react_1.useEffect)(() => {
-        // Only update when value prop is explicitly provided (controlled mode)
-        if (value !== undefined) {
-            setLocalSelectedOption(selectedOption);
-        }
-    }, [selectedOption, value]);
-    (0, useUpdateEffect_1.useUpdateEffect)(() => {
-        if (value === undefined) {
-            setLocalSelectedOption(null);
-        }
-    }, [value]);
-    const flatOptions = (0, react_1.useMemo)(() => (0, getFlatOptions_1.getFlatOptions)(filteredOptions), [filteredOptions]);
-    // Build value-to-index map for O(1) lookups
-    const valueToIndexMap = (0, react_1.useMemo)(() => (0, findFlatOptionIndexByValue_1.buildValueToIndexMap)(flatOptions), [flatOptions]);
-    // Determine if virtualization should be enabled
-    const shouldVirtualize = enableVirtualization && !loading && flatOptions.length > 0;
-    // 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 (!option)
-                return;
-            if ('options' in option && Array.isArray(option.options)) {
-                // Add group header
-                items.push({
-                    type: 'group',
-                    option,
-                });
-                // Add group options
-                option.options.forEach((nestedOption) => {
-                    const flatOptionIndex = (0, findFlatOptionIndexByValue_1.findFlatOptionIndexByValue)(valueToIndexMap, nestedOption);
-                    items.push({
-                        type: 'option',
-                        option: nestedOption,
-                        originalIndex: flatOptionIndex,
-                    });
-                });
-            }
-            else {
-                // Regular option
-                const flatOptionIndex = (0, findFlatOptionIndexByValue_1.findFlatOptionIndexByValue)(valueToIndexMap, option);
-                items.push({
-                    type: 'option',
-                    option,
-                    originalIndex: flatOptionIndex,
-                });
-            }
-        });
-        return items;
-    }, [filteredOptions, shouldVirtualize, valueToIndexMap]);
-    const virtualizedItems = (0, react_1.useMemo)(() => createVirtualizedItems(), [createVirtualizedItems]);
-    // Initialize virtualization
-    const { virtualizer, virtualItems, totalSize, scrollToIndex, isVirtualized } = (0, useVirtualizedOptions_1.useVirtualizedOptions)({
-        enabled: shouldVirtualize,
-        parentRef: scrollWrapperRef,
-        flatOptions,
-        estimateSize: virtualizationOptions?.estimateSize,
-        overscan: virtualizationOptions?.overscan,
-    });
-    const handleSelectOption = (0, react_1.useCallback)((option) => {
-        if ((0, isSelectableOption_1.isOptionDisabled)(option))
-            return;
-        setLocalSelectedOption(option);
-        onChange?.(option.value, option);
-        closeOptionPanel();
-    }, [onChange, closeOptionPanel]);
-    const { handleTypeAhead, cleanup } = (0, useTypeAhead_1.useTypeAhead)({
-        options: flatOptions,
-        scrollToIndex,
-        isVirtualized,
-        onSelectOption: (selectedOption) => {
-            if (selectedOption.value !== undefined) {
-                const selector = `[role="option"][data-value="${(0, getFlatOptions_1.escapeAttributeSelector)(selectedOption.value)}"]`;
-                const targetOption = scrollWrapperRef.current?.querySelector(selector);
-                if (isOptionPanelOpen && flatOptions.length > 0 && targetOption) {
-                    // Focus the target option for keyboard navigation
-                    targetOption.focus({ preventScroll: true });
-                    // Don't handle scrolling here when enableAutoScrollToSelectedOption is active
-                    // The scrolling should be handled by the keyboard navigation or click handlers
-                    // This prevents TypeAhead from interfering with click selection
-                    if (!enableAutoScrollToSelectedOption) {
-                        // Only do TypeAhead scrolling when auto-scroll is disabled
-                        setTimeout(() => {
-                            if (typeof targetOption.scrollIntoView === 'function') {
-                                targetOption.scrollIntoView(DEFAULT_SCROLL_OPTIONS);
-                            }
-                        }, 0);
-                    }
-                    // Don't return early - let the selection logic below handle it
-                    // This was the key issue: early return prevented selection when panel was open
-                }
-            }
-            // Handle selection only when panel is closed (original behavior)
-            // When panel is open, clicks should handle selection, not TypeAhead
-            if (!isOptionPanelOpen) {
-                handleSelectOption(selectedOption);
-            }
-        },
-    });
-    // Cleanup timeout on unmount
-    (0, react_1.useEffect)(() => cleanup, [cleanup]);
-    const { tabbableOptionIndex, handleOptionFocus, createKeyDownHandler } = (0, useKeyboardNavigation_1.useKeyboardNavigation)({
-        isOptionPanelOpen,
-        loading,
-        enableSearchOptions,
-        localSelectedOption,
-        flatOptions,
-        filteredOptions,
-        enableAutoScrollToSelectedOption,
-        onSelectOption: handleSelectOption,
-        onCloseOptionPanel: closeOptionPanel,
-        optionPanelRef,
-        searchInputRef,
-        scrollToIndex,
-        isVirtualized,
-    });
-    const { handleOnKeyDown: handleKeyDownMenu } = (0, useFocusTrap_1.useFocusTrap)({
-        onKeyDown: (event) => {
-            if (event.key === 'Escape') {
-                closeOptionPanel();
-            }
-        },
-    });
-    // Decide what displays on the trigger element.
-    const renderTriggerLabel = () => {
-        if (renderDisplayValue) {
-            return renderDisplayValue(localSelectedOption);
-        }
-        if (placeholder && !localSelectedOption) {
-            return (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: placeholder });
-        }
-        return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "controlLabel", children: localSelectedOption ? localSelectedOption.label : placeholder }));
-    };
-    const searchNode = enableSearchOptions ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.menuHeader, 'mfui-SelectBox__menuHeader'), children: (0, jsx_runtime_1.jsx)(SearchBox_1.SearchBox, { ref: searchInputRef, enableClearButton: true, value: searchText, textBoxSize: "small", autoComplete: "off", onChange: onSearchTextChange, ...searchBoxProps }) })) : null;
-    // Render virtualized items - extracted for better maintainability
-    const renderVirtualizedItems = (0, react_1.useCallback)(() => virtualItems.map((virtualItem) => {
-        const virtualizedItem = virtualizedItems[virtualItem.index];
-        if (!virtualizedItem)
-            return null;
-        const { type, option, originalIndex } = 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-SelectBox__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));
-        }
-        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)(SelectBoxOption_1.SelectBoxOptionComponent, { option: option, isSelected: localSelectedOption?.value === option.value, tabbableOptionIndex: tabbableOptionIndex, optionIndex: originalIndex ?? virtualItem.index, classes: classes, renderOption: renderOption, onFocus: handleOptionFocus, onClick: handleSelectOption, onKeyDown: (event) => {
-                    handleTypeAhead(event.nativeEvent);
-                    createKeyDownHandler(option)(event);
-                } }) }, virtualItem.key));
-    }), [
-        virtualItems,
-        virtualizedItems,
-        localSelectedOption,
-        tabbableOptionIndex,
-        classes,
-        renderOption,
-        handleOptionFocus,
-        handleSelectOption,
-        handleTypeAhead,
-        createKeyDownHandler,
-        virtualizer,
-    ]);
-    // Render non-virtualized items - extracted for better maintainability
-    const renderNonVirtualizedItems = (0, react_1.useCallback)(() => filteredOptions.map((option, optionIndex) => {
-        if (!option)
-            return null;
-        if ('options' in option && Array.isArray(option.options)) {
-            return ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(SelectBoxOptionGroup_1.SelectBoxOptionGroup, { groupOption: option, selectedOption: localSelectedOption, valueToIndexMap: valueToIndexMap, tabbableOptionIndex: tabbableOptionIndex, classes: classes, renderOption: renderOption, findFlatOptionIndexByValue: (_, option) => (0, findFlatOptionIndexByValue_1.findFlatOptionIndexByValue)(valueToIndexMap, option), onOptionFocus: handleOptionFocus, onOptionClick: handleSelectOption, onOptionKeyDown: (option) => (event) => {
-                        handleTypeAhead(event.nativeEvent);
-                        createKeyDownHandler(option)(event);
-                    } }) }, `group-label-${option.label}-${String(optionIndex)}`));
-        }
-        if (!('options' in option)) {
-            const flatOptionIndex = (0, findFlatOptionIndexByValue_1.findFlatOptionIndexByValue)(valueToIndexMap, option);
-            return ((0, jsx_runtime_1.jsx)(SelectBoxOption_1.SelectBoxOptionComponent, { option: option, isSelected: localSelectedOption?.value === option.value, tabbableOptionIndex: tabbableOptionIndex, optionIndex: flatOptionIndex, classes: classes, renderOption: renderOption, onFocus: handleOptionFocus, onClick: handleSelectOption, onKeyDown: (event) => {
-                    handleTypeAhead(event.nativeEvent);
-                    createKeyDownHandler(option)(event);
-                } }, option.value ?? `option-${option.label}-${String(optionIndex)}`));
-        }
-        return null;
-    }), [
-        filteredOptions,
-        localSelectedOption,
-        valueToIndexMap,
-        tabbableOptionIndex,
-        classes,
-        renderOption,
-        handleOptionFocus,
-        handleSelectOption,
-        handleTypeAhead,
-        createKeyDownHandler,
-    ]);
-    // Render empty message - extracted for better maintainability
-    const renderEmptyMessage = (0, react_1.useCallback)(() => ((0, jsx_runtime_1.jsx)("li", { className: (0, css_1.cx)(classes.emptyMessage, 'mfui-SelectBox__emptyMessage'), children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body", children: enableSearchOptions && searchText && notFoundMessage
-                ? notFoundMessage
-                : options.length > 0
-                    ? notFoundMessage
-                    : emptyMessage }) })), [classes.emptyMessage, enableSearchOptions, searchText, notFoundMessage, options.length, emptyMessage]);
-    const optionsNode = ((0, jsx_runtime_1.jsx)("div", { ref: scrollWrapperRef, className: (0, css_1.cx)(classes.scrollWrapper, 'mfui-SelectBox__scrollWrapper'), children: (0, jsx_runtime_1.jsx)("ul", { role: "listbox", id: listBoxId, className: (0, css_1.cx)(classes.listBox, 'mfui-SelectBox__listBox'), tabIndex: -1, style: isVirtualized
-                ? {
-                    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-SelectBox__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()
-                        : renderEmptyMessage() }) }));
-    const handleClearValue = () => {
-        setLocalSelectedOption(null);
-        onChange?.(undefined, null);
-        closeOptionPanel();
-    };
-    const hasSelectedValue = value !== undefined ? value !== '' : localSelectedOption !== null;
-    const showClearButton = enableClearButton && hasSelectedValue;
-    // Use Popover's centralized blur handling instead of custom logic
-    return ((0, jsx_runtime_1.jsx)(Popover_1.Popover, { open: isOptionPanelOpen, targetDOMNode: targetDOMNode, minWidth: popoverContentProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: popoverContentProps?.allowedPlacements, enableConstrainedContentWidth: enableConstrainedPopoverWidth, renderContent: () => ((0, jsx_runtime_1.jsx)("div", { ref: optionPanelRef, id: listBoxId, className: (0, css_1.cx)(classes.optionPanel, 'mfui-SelectBox__optionPanel', popoverContentProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: renderPopoverContent ? (renderPopoverContent({ searchNode, optionsNode })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [searchNode, optionsNode] })) })), renderTrigger: ({ setTriggerRef, togglePopover, isPopoverOpen, handleTriggerKeyDown, handleTriggerBlur }) => ((0, jsx_runtime_1.jsxs)("div", { ref: setTriggerRef, ...triggerWrapperProps, className: (0, css_1.cx)(classes.triggerWrapper, 'mfui-SelectBox__triggerWrapper', triggerWrapperProps?.className), children: [(0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { children: (0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, id: id, type: "button", role: "combobox", disabled: disabled, "aria-label": triggerProps?.['aria-label'], "aria-controls": listBoxId, "aria-expanded": isPopoverOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, className: (0, css_1.cx)(classes.trigger, 'mfui-SelectBox__trigger', triggerProps?.className), "data-placeholder": !!placeholder && !localSelectedOption, "data-selected": !!localSelectedOption, "data-mfui-has-clear-button": showClearButton, onClick: togglePopover, onKeyDown: (event) => {
-                            handleTypeAhead(event.nativeEvent);
-                            handleTriggerKeyDown(event);
-                        }, onBlur: handleTriggerBlur, children: [(0, jsx_runtime_1.jsx)("span", { "data-mfui-content": "select-box-trigger-display-value", children: renderTriggerLabel() }), (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Dropdown, {}), (0, jsx_runtime_1.jsx)("input", { ref: ref, type: "hidden", value: localSelectedOption?.value ?? '', name: name, disabled: disabled })] }) }), showClearButton ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.clearButtonWrapper, 'mfui-SelectBox__clearButtonWrapper'), children: (0, jsx_runtime_1.jsx)(ClearButton_1.ClearButton, { size: size === 'small' ? 'small' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "select-box-clear-button", onClick: (event) => {
-                            event.stopPropagation();
-                            handleClearValue();
-                        } }) })) : null] })), contentProps: { className: classes.popover }, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: toggleOptionPanel, onBlur: onBlur }));
-});
-exports.SelectBox.displayName = 'SelectBox';

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

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

package/dist/cjs/src/SelectBox/SelectBoxOption.js

@@ -1,35 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectBoxOptionComponent = 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 FocusIndicator_1 = require("../FocusIndicator");
-const Typography_1 = require("../Typography");
-const css_1 = require("../../styled-system/css");
-const isSelectableOption_1 = require("./utils/isSelectableOption");
-/**
- * Individual option component for SelectBox.
- * Memoized to prevent unnecessary re-renders when other options change.
- */
-function SelectBoxOptionComponentInner({ option, isSelected, tabbableOptionIndex, optionIndex, classes, renderOption, onFocus, onClick, onKeyDown, }) {
-    const isDisabled = (0, isSelectableOption_1.isOptionDisabled)(option);
-    const tabIndex = (0, react_1.useMemo)(() => (isDisabled ? -1 : optionIndex === tabbableOptionIndex ? 0 : -1), [optionIndex, tabbableOptionIndex, isDisabled]);
-    const handleFocus = (0, react_1.useCallback)(() => {
-        if (!isDisabled) {
-            onFocus(optionIndex);
-        }
-    }, [onFocus, optionIndex, isDisabled]);
-    const handleClick = (0, react_1.useCallback)(() => {
-        if (!isDisabled) {
-            onClick(option);
-        }
-    }, [onClick, option, isDisabled]);
-    // Type-safe property access to satisfy eslint rules
-    const optionValue = 'value' in option && option.value !== undefined ? String(option.value) : undefined;
-    const optionLabel = option.label;
-    return ((0, jsx_runtime_1.jsx)(FocusIndicator_1.FocusIndicator, { position: "inside", children: (0, jsx_runtime_1.jsx)("li", { role: "option", "data-value": optionValue, className: (0, css_1.cx)(classes.listItem, 'mfui-SelectBox__listItem'), "aria-selected": isSelected, "aria-disabled": isDisabled, tabIndex: tabIndex, onFocus: handleFocus, onKeyDown: onKeyDown, onClick: handleClick, children: renderOption ? (renderOption(option, isSelected)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(mfui_icons_react_1.Current, { "aria-hidden": true }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "body", children: optionLabel })] })) }) }));
-}
-exports.SelectBoxOptionComponent = (0, react_1.memo)(SelectBoxOptionComponentInner);
-exports.SelectBoxOptionComponent.displayName = 'SelectBoxOptionComponent';

package/dist/cjs/src/SelectBox/SelectBoxOptionGroup.js

@@ -1,30 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectBoxOptionGroup = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const Typography_1 = require("../Typography");
-const SelectBoxOption_1 = require("./SelectBoxOption");
-/**
- * Option group component for SelectBox.
- * Renders a group label followed by its nested options.
- * Memoized to prevent unnecessary re-renders.
- */
-function SelectBoxOptionGroupInner({ groupOption, selectedOption, valueToIndexMap, tabbableOptionIndex, classes, renderOption, onOptionFocus, onOptionClick, onOptionKeyDown, findFlatOptionIndexByValue, }) {
-    // Type-safe property access to satisfy eslint rules
-    const groupLabel = groupOption.label;
-    const nestedOptions = groupOption.options;
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(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: groupLabel }) }), nestedOptions.map((nestedOption, index) => {
-                if (!nestedOption)
-                    return null;
-                const flatOptionIndex = findFlatOptionIndexByValue(valueToIndexMap, nestedOption);
-                const optionValue = 'value' in nestedOption && nestedOption.value !== undefined ? nestedOption.value : undefined;
-                const optionLabel = nestedOption.label;
-                const keyValue = optionValue !== undefined ? String(optionValue) : `${optionLabel}-${String(index)}`;
-                const isSelected = selectedOption && 'value' in selectedOption ? selectedOption.value === optionValue : false;
-                return ((0, jsx_runtime_1.jsx)(SelectBoxOption_1.SelectBoxOptionComponent, { option: nestedOption, isSelected: isSelected, tabbableOptionIndex: tabbableOptionIndex, optionIndex: flatOptionIndex, classes: classes, renderOption: renderOption, onFocus: onOptionFocus, onClick: onOptionClick, onKeyDown: onOptionKeyDown(nestedOption) }, keyValue));
-            })] }));
-}
-exports.SelectBoxOptionGroup = (0, react_1.memo)(SelectBoxOptionGroupInner);
-exports.SelectBoxOptionGroup.displayName = 'SelectBoxOptionGroup';