@moneyforward/mfui-components 2.48.2 → 3.1.0

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

@@ -1,221 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useKeyboardNavigation = useKeyboardNavigation;
-/* eslint-disable @typescript-eslint/no-unnecessary-condition */
-const react_1 = require("react");
-const findSiblingElements_1 = require("../../utilities/dom/findSiblingElements");
-const getFlatOptions_1 = require("../utils/getFlatOptions");
-const isSelectableOption_1 = require("../utils/isSelectableOption");
-const DEFAULT_SCROLL_OPTIONS = {
-    behavior: 'auto',
-    block: 'center',
-};
-/**
- * Hook to manage keyboard navigation and interaction for options in SelectBox
- *
- * This hook handles:
- * - Tracking which option should be tabbable
- * - Arrow key navigation between options
- * - Enter/Space key selection
- * - Escape key to close panel
- * - Focus management and auto-scrolling
- *
- * @returns Object with handlers and state for option keyboard navigation
- */
-function useKeyboardNavigation({ isOptionPanelOpen, loading, enableSearchOptions, localSelectedOption, flatOptions, filteredOptions, enableAutoScrollToSelectedOption, onSelectOption, onCloseOptionPanel, optionPanelRef, searchInputRef, scrollToIndex, isVirtualized = false, }) {
-    const getDefaultTabbableIndex = (0, react_1.useCallback)(() => {
-        if (!flatOptions || flatOptions.length === 0)
-            return 0;
-        const selectedIndex = localSelectedOption
-            ? flatOptions.findIndex((option) => option.value === localSelectedOption.value)
-            : -1;
-        return selectedIndex !== -1 ? selectedIndex : 0;
-    }, [flatOptions, localSelectedOption]);
-    const [tabbableOptionIndex, setTabbableOptionIndex] = (0, react_1.useState)(getDefaultTabbableIndex());
-    (0, react_1.useEffect)(() => {
-        setTabbableOptionIndex(getDefaultTabbableIndex());
-    }, [getDefaultTabbableIndex]);
-    const resetTabbableIndex = (0, react_1.useCallback)(() => {
-        setTabbableOptionIndex(getDefaultTabbableIndex());
-    }, [getDefaultTabbableIndex]);
-    const handleOptionFocus = (0, react_1.useCallback)((optionIndex) => {
-        setTabbableOptionIndex(optionIndex);
-        // Don't do auto-scroll on focus change - let selection handle its own scrolling
-        // This prevents interference between focus events (from clicks) and selection logic
-        // Auto-scroll should only happen when an option is actually selected, not just focused
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (!isOptionPanelOpen)
-            return;
-        // When loading, focus on the option panel root div to enable ESC key functionality
-        if (loading) {
-            optionPanelRef.current?.focus({ preventScroll: true });
-            return;
-        }
-        // When search is enabled, focus the search input regardless of the selected option
-        if (enableSearchOptions) {
-            searchInputRef.current?.focus({ preventScroll: true });
-        }
-        // Handle auto-scroll independently of search input focus
-        // This allows both features to work together
-        if (filteredOptions.length > 0 && optionPanelRef.current && flatOptions && flatOptions.length > 0) {
-            const focusIndex = localSelectedOption
-                ? flatOptions.findIndex((option) => option.value === localSelectedOption.value)
-                : 0;
-            // Ensure target index is within bounds
-            const targetIndex = Math.min(focusIndex === -1 ? 0 : focusIndex, flatOptions.length - 1);
-            // For virtualized lists, scroll to the target index first
-            if (isVirtualized && scrollToIndex) {
-                // Double-check index is valid before scrolling
-                if (targetIndex >= 0 && targetIndex < flatOptions.length) {
-                    scrollToIndex(targetIndex, { align: 'center', behavior: 'auto' });
-                    // Wait for virtualizer to render the option, then focus/scroll
-                    requestAnimationFrame(() => {
-                        const targetValue = flatOptions[targetIndex]?.value;
-                        const valueString = targetValue !== undefined ? String(targetValue) : '';
-                        const targetOption = optionPanelRef.current?.querySelector(`[role="option"][data-value="${(0, getFlatOptions_1.escapeAttributeSelector)(valueString)}"]`);
-                        if (targetOption && targetOption.getAttribute('aria-disabled') !== 'true' && !enableSearchOptions) {
-                            targetOption.focus({ preventScroll: true });
-                            handleOptionFocus(targetIndex);
-                        }
-                    });
-                }
-            }
-            else {
-                // Non-virtualized: use existing DOM-based logic
-                const optionNodes = optionPanelRef.current?.querySelectorAll('[role="option"]');
-                if (optionNodes && optionNodes.length > 0) {
-                    // Ensure we don't exceed the bounds of available options
-                    const finalTargetIndex = Math.min(targetIndex, optionNodes.length - 1);
-                    // Only focus if the option is not disabled
-                    const targetOption = optionNodes[finalTargetIndex];
-                    if (targetOption && targetOption.getAttribute('aria-disabled') !== 'true') {
-                        // Only focus the option element if search is not enabled
-                        // This prevents conflicting focus management
-                        if (!enableSearchOptions) {
-                            targetOption.focus({ preventScroll: true });
-                            handleOptionFocus(finalTargetIndex);
-                        }
-                        // Auto-scroll to the selected option if enabled
-                        // This works independently of focus, allowing it to work with search
-                        if (enableAutoScrollToSelectedOption && typeof targetOption.scrollIntoView === 'function') {
-                            const scrollOptions = enableAutoScrollToSelectedOption === true ? DEFAULT_SCROLL_OPTIONS : enableAutoScrollToSelectedOption;
-                            setTimeout(() => {
-                                targetOption.scrollIntoView(scrollOptions);
-                            }, 0);
-                        }
-                    }
-                    else {
-                        // Find the first non-disabled option
-                        for (const [i, option] of optionNodes.entries()) {
-                            if (option && option.getAttribute('aria-disabled') !== 'true') {
-                                // Only focus the option element if search is not enabled
-                                if (!enableSearchOptions) {
-                                    option.focus({ preventScroll: true });
-                                    handleOptionFocus(i);
-                                }
-                                // Auto-scroll to the selected option if enabled
-                                if (enableAutoScrollToSelectedOption && typeof option.scrollIntoView === 'function') {
-                                    const scrollOptions = enableAutoScrollToSelectedOption === true
-                                        ? DEFAULT_SCROLL_OPTIONS
-                                        : enableAutoScrollToSelectedOption;
-                                    setTimeout(() => {
-                                        option.scrollIntoView(scrollOptions);
-                                    }, 0);
-                                }
-                                break;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }, [
-        isOptionPanelOpen,
-        loading,
-        enableSearchOptions,
-        localSelectedOption,
-        flatOptions,
-        filteredOptions.length,
-        handleOptionFocus,
-        searchInputRef,
-        optionPanelRef,
-        enableAutoScrollToSelectedOption,
-        isVirtualized,
-        scrollToIndex,
-    ]);
-    const createKeyDownHandler = (0, react_1.useCallback)((option) => (event) => {
-        switch (event.key) {
-            case 'Tab':
-                // Don't prevent default Tab key behavior - let natural Tab flow work
-                resetTabbableIndex();
-                break;
-            case 'ArrowDown':
-            case 'ArrowUp':
-                event.preventDefault();
-                if (isVirtualized && scrollToIndex) {
-                    // Safety check: ensure flatOptions exists
-                    if (!flatOptions || flatOptions.length === 0)
-                        break;
-                    // For virtualized lists: calculate next/prev index from flatOptions array
-                    const currentFlatIndex = flatOptions.findIndex((opt) => opt.value === option.value);
-                    // Get all enabled option indices
-                    const enabledIndices = flatOptions
-                        .map((opt, index) => (!(0, isSelectableOption_1.isOptionDisabled)(opt) ? index : -1))
-                        .filter((index) => index !== -1);
-                    if (enabledIndices.length === 0)
-                        break;
-                    const currentPos = enabledIndices.indexOf(currentFlatIndex);
-                    const isArrowDown = event.key === 'ArrowDown';
-                    // Calculate next/previous enabled index with wrapping
-                    const nextPos = isArrowDown
-                        ? (currentPos + 1) % enabledIndices.length
-                        : currentPos === 0
-                            ? enabledIndices.length - 1
-                            : currentPos - 1;
-                    const targetIndex = enabledIndices[nextPos];
-                    if (targetIndex === undefined)
-                        break;
-                    // Scroll to the target index
-                    scrollToIndex(targetIndex, { align: 'center', behavior: 'auto' });
-                    // Wait for virtualizer to render the option, then focus
-                    requestAnimationFrame(() => {
-                        const targetValue = flatOptions[targetIndex]?.value;
-                        const valueString = targetValue !== undefined ? String(targetValue) : '';
-                        const selector = `[role="option"][data-value="${(0, getFlatOptions_1.escapeAttributeSelector)(valueString)}"]`;
-                        optionPanelRef.current?.querySelector(selector)?.focus();
-                    });
-                }
-                else {
-                    // Non-virtualized: use existing DOM-based navigation
-                    const siblingElements = (0, findSiblingElements_1.findSiblingElements)(event.currentTarget, '[role="option"]:not([aria-disabled="true"])');
-                    const currentIndex = siblingElements.indexOf(event.currentTarget);
-                    const nextIndex = event.key === 'ArrowDown'
-                        ? currentIndex === siblingElements.length - 1
-                            ? 0
-                            : currentIndex + 1
-                        : currentIndex === 0
-                            ? siblingElements.length - 1
-                            : currentIndex - 1;
-                    siblingElements[nextIndex]?.focus();
-                }
-                break;
-            case 'Escape':
-                event.preventDefault();
-                onCloseOptionPanel();
-                resetTabbableIndex();
-                break;
-            case 'Enter':
-            case ' ':
-                event.preventDefault();
-                onSelectOption(option);
-                break;
-        }
-    }, [onSelectOption, onCloseOptionPanel, resetTabbableIndex, isVirtualized, scrollToIndex, flatOptions, optionPanelRef]);
-    return {
-        tabbableOptionIndex,
-        handleOptionFocus,
-        createKeyDownHandler,
-    };
-}

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

@@ -1,87 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSearchBox = void 0;
-const react_1 = require("react");
-/**
- * Custom hook to handle search functionality within a SelectBox component.
- *
- * @param options - Array of SelectBox options (can include nested group options).
- *
- * @param enableSearchOptions - Indicates if the SelectBox component is searchable.
- *
- * @param onSearchOptions - Handler executed when the search text changes. When
- * provided, client-side filtering is disabled as it's assumed that the caller
- * will handle the filtering.
- *
- * @returns Object containing the filtered options, search text, and handler to update search text.
- */
-const useSearchBox = (options, enableSearchOptions, onSearchOptions) => {
-    const [searchText, setSearchText] = (0, react_1.useState)('');
-    const debounceRef = (0, react_1.useRef)(null);
-    const previousSearchTextRef = (0, react_1.useRef)('');
-    const filteredOptions = (0, react_1.useMemo)(() => {
-        // If not searchable or if onSearchOptions is provided, return all options without filtering
-        if (!enableSearchOptions || onSearchOptions) {
-            return options;
-        }
-        // Only perform client-side filtering if onSearchOptions is not provided
-        const searchTerm = searchText.trim().toLocaleLowerCase();
-        if (!searchTerm) {
-            return options;
-        }
-        return options
-            .map((option) => {
-            if (!option)
-                return null;
-            if ('options' in option && Array.isArray(option.options)) {
-                const filteredNestedOptions = option.options.filter((nestedOption) => nestedOption.label.toLocaleLowerCase().includes(searchTerm));
-                if (filteredNestedOptions.length === 0)
-                    return null;
-                if (filteredNestedOptions.length === option.options.length)
-                    return option;
-                return { ...option, options: filteredNestedOptions };
-            }
-            return option.label.toLocaleLowerCase().includes(searchTerm) ? option : null;
-        })
-            .filter(Boolean);
-    }, [enableSearchOptions, options, searchText, onSearchOptions]);
-    const handleSearchTextChange = (0, react_1.useCallback)((event) => {
-        setSearchText(event.target.value);
-    }, []);
-    (0, react_1.useEffect)(() => {
-        if (!enableSearchOptions || !onSearchOptions)
-            return;
-        // Skip if searchText hasn't changed (prevents initial mount and unnecessary calls)
-        if (searchText === previousSearchTextRef.current) {
-            return;
-        }
-        previousSearchTextRef.current = searchText;
-        if (debounceRef.current) {
-            clearTimeout(debounceRef.current);
-        }
-        debounceRef.current = setTimeout(() => {
-            onSearchOptions(searchText);
-        }, 300);
-        return () => {
-            if (debounceRef.current) {
-                clearTimeout(debounceRef.current);
-            }
-        };
-    }, [searchText, onSearchOptions, enableSearchOptions]);
-    return {
-        /**
-         * Handler for search input change events.
-         */
-        onSearchTextChange: handleSearchTextChange,
-        /**
-         * Filtered options based on search text (client-side filtering only when onSearchOptions is not provided).
-         */
-        filteredOptions,
-        /**
-         * Current search text value.
-         */
-        searchText,
-    };
-};
-exports.useSearchBox = useSearchBox;

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

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTypeAhead = void 0;
-const react_1 = require("react");
-const isSelectableOption_1 = require("../utils/isSelectableOption");
-// Timeout duration for clearing the typed text
-// It's approximately the same as the timeout of default type-ahead behavior of <select> elements in browsers
-const TIMEOUT_DURATION = 500; // milliseconds
-const useTypeAhead = ({ options, onSelectOption, scrollToIndex, isVirtualized = false, }) => {
-    const [typeAheadText, setTypeAheadText] = (0, react_1.useState)('');
-    const timeoutRef = (0, react_1.useRef)(null);
-    const handleTypeAhead = (0, react_1.useCallback)((event) => {
-        // Only handle printable characters
-        if (event.key.length !== 1)
-            return;
-        // Clear previous timeout
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-        // Update type-ahead text
-        const newText = typeAheadText + event.key.toLowerCase();
-        setTypeAheadText(newText);
-        // Safety check: ensure options has items
-        if (options.length === 0)
-            return;
-        // Filter out disabled options
-        const enabledOptions = options.filter((option) => !(0, isSelectableOption_1.isOptionDisabled)(option));
-        // Find the first option that starts with the typed text
-        const matchingIndex = enabledOptions.findIndex((option) => option.label.toLowerCase().startsWith(newText));
-        const matchingOption = enabledOptions[matchingIndex];
-        if (matchingOption) {
-            // Find the original index in the full options array
-            const originalIndex = options.indexOf(matchingOption);
-            // For virtualized lists, scroll to the matched option first
-            if (isVirtualized && scrollToIndex) {
-                scrollToIndex(originalIndex, { align: 'center', behavior: 'auto' });
-            }
-            onSelectOption(matchingOption, originalIndex);
-        }
-        // Clear the type-ahead text after 500ms
-        timeoutRef.current = setTimeout(() => {
-            setTypeAheadText('');
-        }, TIMEOUT_DURATION);
-    }, [options, onSelectOption, typeAheadText, isVirtualized, scrollToIndex]);
-    // Clear timeout on unmount
-    const cleanup = (0, react_1.useCallback)(() => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-        }
-    }, []);
-    return {
-        handleTypeAhead,
-        cleanup,
-    };
-};
-exports.useTypeAhead = useTypeAhead;

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

@@ -1,57 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useVirtualizedOptions = useVirtualizedOptions;
-const react_virtual_1 = require("@tanstack/react-virtual");
-const react_1 = require("react");
-/**
- * Custom hook for virtualizing large option lists using @tanstack/react-virtual.
- * Only renders visible items + overscan for improved performance.
- *
- * @param params - Virtualization configuration
- *
- * @returns Virtualizer instance and helper methods
- *
- * @example
- * ```tsx
- * const { virtualItems, totalSize, scrollToIndex, isVirtualized } = useVirtualizedOptions({
- *   enabled: true,
- *   parentRef: optionPanelRef,
- *   flatOptions,
- *   estimateSize: () => 36, // or (index) => index < 10 ? 40 : 36 for dynamic sizing
- *   overscan: 5,
- * });
- * ```
- */
-function useVirtualizedOptions({ enabled, parentRef, flatOptions, estimateSize = () => 36, overscan = 5, }) {
-    // Always call useVirtualizer to maintain hook order, but with 0 count when disabled
-    const virtualizer = (0, react_virtual_1.useVirtualizer)({
-        count: enabled ? flatOptions.length : 0,
-        getScrollElement: () => 
-        // parentRef points to scrollWrapper, which is always the scroll container
-        // Structure: Popover root > optionPanel > scrollWrapper (parentRef) > listBox
-        parentRef.current ?? null,
-        estimateSize,
-        overscan,
-        enabled,
-    });
-    const scrollToIndex = (0, react_1.useCallback)((index, options) => {
-        if (!enabled)
-            return;
-        // Safety check: ensure index is within bounds
-        const { count } = virtualizer.options;
-        if (index < 0 || index >= count)
-            return;
-        virtualizer.scrollToIndex(index, {
-            align: 'center',
-            behavior: 'auto',
-            ...options,
-        });
-    }, [enabled, virtualizer]);
-    return {
-        virtualizer: enabled ? virtualizer : null,
-        virtualItems: enabled ? virtualizer.getVirtualItems() : [],
-        totalSize: enabled ? virtualizer.getTotalSize() : 0,
-        scrollToIndex,
-        isVirtualized: enabled,
-    };
-}

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

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

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

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buildValueToIndexMap = buildValueToIndexMap;
-exports.findFlatOptionIndexByValue = findFlatOptionIndexByValue;
-/**
- * Builds a Map from option value to its index in flatOptions for O(1) lookup.
- *
- * @param flatOptions - The array of flat options to index.
- *
- * @returns Map of value to index.
- */
-function buildValueToIndexMap(flatOptions) {
-    const map = new Map();
-    flatOptions.forEach((option, index) => {
-        if ('value' in option && option.value !== undefined) {
-            map.set(option.value, index);
-        }
-    });
-    return map;
-}
-/**
- * Finds the index of an option in flatOptions by matching the value property using a prebuilt map.
- * Returns -1 if not found or if the option has no value.
- *
- * @param valueToIndexMap - Map from value to index, built from flatOptions.
- *
- * @param option - The option whose value to match.
- */
-function findFlatOptionIndexByValue(valueToIndexMap, option) {
-    if (!('value' in option) || option.value === undefined)
-        return -1;
-    return valueToIndexMap.get(option.value) ?? -1;
-}

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

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.findOptionByValue = findOptionByValue;
-/**
- * Finds an option in a (potentially) nested SelectBox options array by its value.
- *
- * @param options - The (possibly nested) options array to search in.
- *
- * @param value - The value to search for.
- *
- * @returns The found option or null if no option with the given value exists.
- */
-function findOptionByValue(options, value) {
-    for (const option of options) {
-        if (!option) {
-            // Skip null or undefined options
-        }
-        else if ('options' in option && Array.isArray(option.options)) {
-            const found = option.options.find((opt) => opt.value === value);
-            if (found)
-                return found;
-        }
-        else if (option.value === value) {
-            return option;
-        }
-    }
-    return null;
-}

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

@@ -1,57 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFlatOptions = getFlatOptions;
-exports.escapeAttributeSelector = escapeAttributeSelector;
-const isSelectableOption_1 = require("./isSelectableOption");
-/**
- * Flattens a (potentially) nested SelectBox options array into a single–level array of selectable options.
- *
- * Group options (objects that contain an `options` property) are traversed and their selectable child options are
- * collected. Only options that satisfy `isSelectableOption` (i.e. have a `value`) are included in the resulting
- * array.
- *
- * This utility is primarily used to simplify focus-management and keyboard-navigation logic inside the SelectBox
- * component.
- *
- * @param options - The (possibly nested) options array.
- *
- * @returns A flat array that contains only selectable options in the same order they appear visually.
- */
-function getFlatOptions(options) {
-    return options.flatMap((option) => {
-        if (option && 'options' in option && Array.isArray(option.options)) {
-            return option.options.filter(isSelectableOption_1.isSelectableOption);
-        }
-        if (option && (0, isSelectableOption_1.isSelectableOption)(option)) {
-            return [option];
-        }
-        return [];
-    });
-}
-/**
- * Escapes a string or number for use as a CSS attribute value selector.
- * Uses CSS.escape if available, otherwise falls back to a polyfill.
- * See: https://mathiasbynens.be/notes/css-escapes
- *
- * @param value - The value to escape for use in a CSS selector
- *
- * @returns The escaped string
- */
-function escapeAttributeSelector(value) {
-    const stringValue = String(value);
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    if (typeof window !== 'undefined' && window.CSS && typeof window.CSS.escape === 'function') {
-        return window.CSS.escape(stringValue);
-    }
-    // Polyfill for CSS.escape
-    // https://github.com/mathiasbynens/CSS.escape
-    function escapeChar(c) {
-        const code = c.codePointAt(0);
-        const hex = code !== undefined ? code.toString(16).toUpperCase() : '';
-        if (!hex)
-            return '';
-        return `\\${hex} `;
-    }
-    // eslint-disable-next-line unicorn/prefer-string-replace-all
-    return stringValue.replace(/[^a-zA-Z0-9\u00A0-\u10FFFF_-]/g, escapeChar);
-}

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

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isSelectableOption = isSelectableOption;
-exports.isOptionDisabled = isOptionDisabled;
-/**
- * Type guard to check if an option is a selectable option (has value and may have disabled)
- *
- * @param option - The option to check
- *
- * @returns True if the option has a value (is not a group label)
- */
-function isSelectableOption(option) {
-    return 'value' in option;
-}
-/**
- * Returns true if the option is selectable and disabled.
- *
- * @param option - Option to check
- */
-function isOptionDisabled(option) {
-    return isSelectableOption(option) && 'disabled' in option && !!option.disabled;
-}

package/dist/cjs/src/SidePane/SidePane.js

@@ -1,64 +0,0 @@
-"use strict";
-'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidePane = 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 Heading_1 = require("../Heading");
-const IconButton_1 = require("../IconButton");
-const recipes_1 = require("../../styled-system/recipes");
-const useSidePaneStateController_1 = require("./hooks/useSidePaneStateController");
-const useFocusTrap_1 = require("../utilities/dom/useFocusTrap");
-const compatibleForwardRef_1 = require("../utilities/react/compatibleForwardRef");
-const Portal_1 = require("../Portal");
-/**
- * The general purpose SidePane component.
- * This component extends the props of `<div>` element with `role="dialog"`.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
- */
-exports.SidePane = (0, compatibleForwardRef_1.compatibleForwardRef)(({ open, title, renderHeading, onClose, className, children, actionSlot, position = 'right', enableModal = false, enableAutoUnmount = true, disableBackdropClose = false, closeButtonProps, targetDOMNode, insideProps, ...props }, ref) => {
-    const classes = (0, recipes_1.sidePaneSlotRecipe)({ position, nonModal: !enableModal });
-    const { localOpen, handleCloseSidePane, handleStopCloseSidePane, sidePaneElement, setSidePaneElement } = (0, useSidePaneStateController_1.useSidePaneStateController)({
-        open,
-        onClose,
-        ref,
-    });
-    const handleBackdropClick = (0, react_1.useCallback)(() => {
-        if (!disableBackdropClose) {
-            handleCloseSidePane();
-        }
-    }, [disableBackdropClose, handleCloseSidePane]);
-    const handleKeyDown = (0, react_1.useCallback)((event) => {
-        if (event.key === 'Escape') {
-            event.stopPropagation();
-            event.preventDefault();
-            handleCloseSidePane();
-        }
-        props.onKeyDown?.(event);
-    }, [handleCloseSidePane, props]);
-    // Get the focus trap handler
-    const { handleOnKeyDown: focusTrapKeyHandler } = (0, useFocusTrap_1.useFocusTrap)({
-        onKeyDown: handleKeyDown,
-    });
-    // Only use focus trap for modal SidePanes
-    const handleOnKeyDown = enableModal ? focusTrapKeyHandler : handleKeyDown;
-    const closeButtonIcon = (0, react_1.useMemo)(() => {
-        if (!closeButtonProps?.isCollapseIcon) {
-            return (0, jsx_runtime_1.jsx)(mfui_icons_react_1.Close, {});
-        }
-        if (position === 'left') {
-            return (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PaneExpansionToLeft, {});
-        }
-        return (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PaneExpansionToRight, {});
-    }, [closeButtonProps?.isCollapseIcon, position]);
-    const targetElement = (0, Portal_1.useAutomaticTargetDomNode)(targetDOMNode, sidePaneElement);
-    const shouldRenderContent = enableAutoUnmount ? localOpen : true;
-    const headingNode = title ? ((0, jsx_runtime_1.jsx)(Heading_1.Heading, { variant: "pageHeading2", tag: "h2", children: title })) : null;
-    return ((0, jsx_runtime_1.jsx)(Portal_1.TargetDomNodeProvider, { targetDomNode: sidePaneElement, children: shouldRenderContent ? ((0, jsx_runtime_1.jsx)(Portal_1.Portal, { targetDOMNode: targetElement, children: (0, jsx_runtime_1.jsxs)("div", { ref: setSidePaneElement, role: "dialog", ...props, className: (0, css_1.cx)(classes.root, 'mfui-SidePane__root', className), tabIndex: -1, style: {
-                    ...props.style,
-                    ...(!enableAutoUnmount && !localOpen && { display: 'none' }),
-                }, onKeyDown: handleOnKeyDown, children: [enableModal ? ((0, jsx_runtime_1.jsx)("div", { "data-mfui-content": "backdrop", className: (0, css_1.cx)(classes.backdrop, 'mfui-SidePane__backdrop'), onClick: handleBackdropClick })) : null, (0, jsx_runtime_1.jsxs)("div", { "data-mfui-content": "inside", className: (0, css_1.cx)(classes.inside, 'mfui-SidePane__inside', insideProps?.className), onClick: handleStopCloseSidePane, children: [(0, jsx_runtime_1.jsxs)("header", { className: (0, css_1.cx)(classes.header, 'mfui-SidePane__header'), children: [renderHeading ? (renderHeading({ headingNode })) : ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.title, 'mfui-SidePane__title'), children: headingNode })), (0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.actionSlotWrapper, 'mfui-SidePane__actionSlotWrapper'), children: [!!actionSlot && ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.actionSlot, 'mfui-SidePane__actionSlot'), children: actionSlot })), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.closeButtonWrapper, 'mfui-SidePane__closeButtonWrapper'), children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": closeButtonProps?.['aria-label'] ?? '閉じる', onClick: handleCloseSidePane, children: closeButtonIcon }) })] })] }), (0, jsx_runtime_1.jsx)("main", { className: (0, css_1.cx)(classes.content, 'mfui-SidePane__content'), children: children })] })] }) })) : null }));
-});

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

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

package/dist/cjs/src/SidePane/constants.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ANIMATION_DURATION_OUT = exports.ANIMATION_DURATION_OUT_IN_MS = exports.ANIMATION_DURATION_IN = void 0;
-exports.ANIMATION_DURATION_IN = '0.35s';
-exports.ANIMATION_DURATION_OUT_IN_MS = 250;
-exports.ANIMATION_DURATION_OUT = `${(exports.ANIMATION_DURATION_OUT_IN_MS / 1000).toString()}s`;