@moneyforward/mfui-components 2.48.2 → 3.0.0

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

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

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

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

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

@@ -1,58 +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.
- *
- * @param enableSearchOptions - Indicates if the SelectBox component is searchable.
- *
- * @param onSearchOptions - Handler executed when the search text changes. When
- * provided, client-side filtering is disabled as it's assumed that the caller
- * will handle the filtering.
- *
- * @returns - Object containing the filtered options and a function to update the search text.
- */
-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 (!enableSearchOptions || onSearchOptions) {
-            return options;
-        }
-        return options.filter((option) => option.label.toLowerCase().includes(searchText.trim().toLowerCase()));
-    }, [enableSearchOptions, options, searchText, onSearchOptions]);
-    const onSearchTextChange = (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 {
-        onSearchTextChange,
-        filteredOptions,
-        searchText,
-    };
-};
-exports.useSearchBox = useSearchBox;

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

@@ -1,35 +0,0 @@
-import { type MultipleSelectBoxOption, type AllowedValueTypes } from '../MultipleSelectBox.types';
-type UseSelectedValuesProps<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>> = {
-    /**
-     * Available options.
-     */
-    options: MultipleSelectBoxOption<T, AdditionalProps>[];
-    /**
-     * Initial selected values for uncontrolled component.
-     * Can be either primitive values or full option objects.
-     */
-    defaultValue?: MultipleSelectBoxOption<T, AdditionalProps>['value'][] | MultipleSelectBoxOption<T, AdditionalProps>[];
-    /**
-     * Current selected values for controlled component.
-     * Can be either primitive values or full option objects.
-     */
-    value?: MultipleSelectBoxOption<T, AdditionalProps>['value'][] | MultipleSelectBoxOption<T, AdditionalProps>[] | undefined;
-    /**
-     * Callback when the selected values change.
-     * Receives both values array and full options array.
-     */
-    onChange?: (values: MultipleSelectBoxOption<T, AdditionalProps>['value'][], options: MultipleSelectBoxOption<T, AdditionalProps>[]) => void;
-};
-/**
- * Hook to manage selected values in MultipleSelectBox
- *
- * This hook manages the state of selected values and preserves option labels
- * even when the options array changes (e.g., during async search).
- * It does not include any handlers to keep its responsibility minimal.
- */
-export declare function useSelectedValues<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ options, defaultValue, value, onChange }: UseSelectedValuesProps<T, AdditionalProps>): {
-    localSelectedValuesSet: Set<MultipleSelectBoxOption<T, AdditionalProps>["value"]>;
-    localSelectedOptions: MultipleSelectBoxOption<T, AdditionalProps>[];
-    updateSelectedValues: (newValues: MultipleSelectBoxOption<T, AdditionalProps>["value"][]) => void;
-};
-export {};

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

@@ -1,161 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSelectedValues = useSelectedValues;
-const react_1 = require("react");
-/**
- * Helper function to check if an item is a full option object or a primitive value
- *
- * @param item - The item to check (can be a primitive value or full option object)
- */
-function isFullOption(item) {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    return item !== null && typeof item === 'object' && 'label' in item;
-}
-/**
- * Helper function to convert defaultValue/value to options array and values set
- *
- * @param initialValue - The initial value (can be primitive values or full option objects)
- *
- * @param options - The available options array
- */
-function initializeSelectedOptions(initialValue, options) {
-    const optionsMap = new Map();
-    const valuesSet = new Set();
-    if (!initialValue) {
-        return { optionsMap, valuesSet };
-    }
-    for (const item of initialValue) {
-        if (isFullOption(item)) {
-            // Item is a full option object
-            if (item.value != null) {
-                optionsMap.set(item.value, item);
-                valuesSet.add(item.value);
-            }
-        }
-        else {
-            // Item is a primitive value, try to find the option in the options array
-            const foundOption = options.find((opt) => opt.value === item);
-            if (foundOption) {
-                optionsMap.set(item, foundOption);
-            }
-            valuesSet.add(item);
-        }
-    }
-    return { optionsMap, valuesSet };
-}
-/**
- * Hook to manage selected values in MultipleSelectBox
- *
- * This hook manages the state of selected values and preserves option labels
- * even when the options array changes (e.g., during async search).
- * It does not include any handlers to keep its responsibility minimal.
- */
-function useSelectedValues({ options, defaultValue, value, onChange }) {
-    // Determine the operational mode:
-    // - Controlled: both value and onChange provided (parent controls state)
-    // - Display-only: value provided but no onChange (display only, no interaction)
-    // - Uncontrolled: no value (component manages its own state)
-    const isControlled = value !== undefined && onChange !== undefined;
-    // Store selected options with their full data (including labels)
-    const [selectedOptionsMap, setSelectedOptionsMap] = (0, react_1.useState)(() => {
-        // For initialization, use value if provided, otherwise use defaultValue
-        const initialValue = value !== undefined ? value : defaultValue;
-        const { optionsMap } = initializeSelectedOptions(initialValue, options);
-        return optionsMap;
-    });
-    // Store selected values as a Set for fast lookup
-    const [localSelectedValuesSet, setLocalSelectedValuesSet] = (0, react_1.useState)(() => {
-        // For initialization, use value if provided, otherwise use defaultValue
-        const initialValue = value !== undefined ? value : defaultValue;
-        const { valuesSet } = initializeSelectedOptions(initialValue, options);
-        return valuesSet;
-    });
-    // Derive local selected options array from the map
-    const localSelectedOptions = (0, react_1.useMemo)(() => [...selectedOptionsMap.values()], [selectedOptionsMap]);
-    // Update local state when controlled value changes
-    (0, react_1.useEffect)(() => {
-        if (!isControlled) {
-            return;
-        }
-        const { optionsMap, valuesSet } = initializeSelectedOptions(value, options);
-        // Preserve existing options from the map if they're not in the new options array
-        setSelectedOptionsMap((previousMap) => {
-            const newOptionsMap = new Map(optionsMap);
-            for (const selectedValue of valuesSet) {
-                if (!newOptionsMap.has(selectedValue) && previousMap.has(selectedValue)) {
-                    // Preserve the option from the existing map
-                    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                    newOptionsMap.set(selectedValue, previousMap.get(selectedValue));
-                }
-            }
-            return newOptionsMap;
-        });
-        setLocalSelectedValuesSet(valuesSet);
-    }, [value, options, isControlled]);
-    // Sync state for display-only mode (value provided but no onChange)
-    // This handles scenarios like disabled/display-only components where
-    // the parent provides values but doesn't expect interaction
-    (0, react_1.useEffect)(() => {
-        // Skip if this is controlled (already handled above) or uncontrolled (no value)
-        if (isControlled || value === undefined) {
-            return;
-        }
-        // This is display-only mode: value is provided but no onChange
-        // Treat it like controlled for state sync purposes
-        const { optionsMap, valuesSet } = initializeSelectedOptions(value, options);
-        // Preserve existing options from the map if they're not in the new options array
-        setSelectedOptionsMap((previousMap) => {
-            const newOptionsMap = new Map(optionsMap);
-            for (const selectedValue of valuesSet) {
-                if (!newOptionsMap.has(selectedValue) && previousMap.has(selectedValue)) {
-                    // Preserve the option from the existing map
-                    const existingOption = previousMap.get(selectedValue);
-                    if (existingOption) {
-                        newOptionsMap.set(selectedValue, existingOption);
-                    }
-                }
-            }
-            return newOptionsMap;
-        });
-        setLocalSelectedValuesSet(valuesSet);
-    }, [value, options, isControlled]);
-    // Helper function to update the selected values
-    const updateSelectedValues = (newValues) => {
-        const newValuesSet = new Set(newValues);
-        const newOptionsMap = new Map();
-        // Build new map, preserving existing options where possible
-        for (const newValue of newValues) {
-            if (selectedOptionsMap.has(newValue)) {
-                // Preserve existing option
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                newOptionsMap.set(newValue, selectedOptionsMap.get(newValue));
-            }
-            else {
-                // Try to find the option in the current options array
-                const foundOption = options.find((opt) => opt.value === newValue);
-                if (foundOption) {
-                    newOptionsMap.set(newValue, foundOption);
-                }
-            }
-        }
-        // Controlled component: Don't update local state directly
-        // Let the parent component control the state via value prop
-        // The useEffect will sync local state when value prop changes
-        if (isControlled) {
-            const selectedOptions = [...newOptionsMap.values()];
-            onChange(newValues, selectedOptions);
-            return;
-        }
-        // Uncontrolled component: Update local state and call onChange
-        setSelectedOptionsMap(newOptionsMap);
-        setLocalSelectedValuesSet(newValuesSet);
-        // Call onChange with both values and options arrays
-        const selectedOptions = [...newOptionsMap.values()];
-        onChange?.(newValues, selectedOptions);
-    };
-    return {
-        localSelectedValuesSet,
-        localSelectedOptions,
-        updateSelectedValues,
-    };
-}

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

@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useVirtualizedMultipleSelectBoxOptions = useVirtualizedMultipleSelectBoxOptions;
-const react_virtual_1 = require("@tanstack/react-virtual");
-const react_1 = require("react");
-/**
- * Custom hook for virtualizing large option lists in MultipleSelectBox 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 } = useVirtualizedMultipleSelectBoxOptions({
- *   enabled: true,
- *   parentRef: optionPanelRef,
- *   flatOptions,
- *   estimateSize: () => 36, // or (index) => index < 10 ? 40 : 36 for dynamic sizing
- *   overscan: 5,
- * });
- * ```
- */
-function useVirtualizedMultipleSelectBoxOptions({ enabled, parentRef, flatOptions, estimateSize = () => 36, overscan = 5, }) {
-    const shouldVirtualize = enabled;
-    // Always call useVirtualizer to maintain hook order, but with 0 count when disabled
-    const virtualizer = (0, react_virtual_1.useVirtualizer)({
-        count: shouldVirtualize ? flatOptions.length : 0,
-        getScrollElement: () => 
-        // The parentRef itself is the scrollable element (option panel div)
-        parentRef.current ?? null,
-        estimateSize,
-        paddingStart: 12,
-        paddingEnd: 12,
-        overscan,
-        enabled: shouldVirtualize,
-    });
-    const scrollToIndex = (0, react_1.useCallback)((index, options) => {
-        if (!shouldVirtualize)
-            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,
-        });
-    }, [shouldVirtualize, virtualizer]);
-    return {
-        virtualizer: shouldVirtualize ? virtualizer : null,
-        virtualItems: shouldVirtualize ? virtualizer.getVirtualItems() : [],
-        totalSize: shouldVirtualize ? virtualizer.getTotalSize() : 0,
-        scrollToIndex,
-        isVirtualized: shouldVirtualize,
-    };
-}

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

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

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

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.flattenOptions = flattenOptions;
-/**
- * Flattens options with only one level of nesting.
- * only one level of nesting is allowed.
- * Group labels are preserved, followed by their immediate children.
- *
- * @param options - The options array to flatten
- *
- * @returns Flat array of options, including group labels and their children in order
- */
-function flattenOptions(options) {
-    const result = [];
-    for (const option of options) {
-        if ('options' in option && Array.isArray(option.options)) {
-            result.push({ ...option, options: option.options }, ...option.options);
-        }
-        else if ('value' in option) {
-            result.push(option);
-        }
-        else if ('label' in option && !('value' in option) && !('options' in option)) {
-            // Include label-only group labels
-            result.push(option);
-        }
-    }
-    return result;
-}

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

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.insertOptionValueInSortedOrder = insertOptionValueInSortedOrder;
-/**
- * Inserts a value into a sorted array based on the original options order.
- * This function maintains the order of the options while inserting a new value at the appropriate position.
- *
- * @param sortedValues - Array of currently selected values that are already sorted
- *
- * @param newValue - New value to be inserted
- *
- * @param options - Array of all available options (used as reference for ordering)
- *
- * @returns A new sorted array with the inserted value
- */
-function insertOptionValueInSortedOrder(sortedValues, newValue, options) {
-    const newValueIndex = options.findIndex((option) => option.value === newValue);
-    const insertIndex = sortedValues.findIndex((value) => {
-        const currentValueIndex = options.findIndex((option) => option.value === value);
-        return currentValueIndex > newValueIndex;
-    });
-    const result = [...sortedValues];
-    if (insertIndex === -1) {
-        result.push(newValue);
-    }
-    else {
-        result.splice(insertIndex, 0, newValue);
-    }
-    return result;
-}

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

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isSelectableOption = isSelectableOption;
-exports.isOptionDisabled = isOptionDisabled;
-exports.isOptionSelected = isOptionSelected;
-/**
- * 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 - The option to check
- */
-function isOptionDisabled(option) {
-    return isSelectableOption(option) && !!option.disabled;
-}
-/**
- * Returns true if the option is selectable, has a value, and is selected.
- *
- * @param option - The option to check
- *
- * @param selectedValues - The set of selected values
- */
-function isOptionSelected(option, selectedValues) {
-    return isSelectableOption(option) && option.value != null && selectedValues.has(option.value);
-}

package/dist/cjs/src/PageHeader/PageHeader.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageHeader = PageHeader;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const mfui_icons_react_1 = require("@moneyforward/mfui-icons-react");
-const IconButton_1 = require("../IconButton");
-const Heading_1 = require("../Heading");
-const recipes_1 = require("../../styled-system/recipes");
-const css_1 = require("../../styled-system/css");
-const responsive_1 = require("../utilities/responsive");
-/**
- * The page header component.
- * The PageHeader component is for the main heading title and related actions and navigations of a page. It's always placed at the top of a page after the GlobalHeader and MainNavigation.
- */
-function PageHeader({ headingSlot, renderHeading, showBackButton, backButtonProps, actionSlot, className, }) {
-    const responsiveSlot = (0, responsive_1.isResponsiveSlot)(actionSlot) ? actionSlot : { base: actionSlot };
-    const classes = (0, recipes_1.pageHeaderSlotRecipe)({
-        isResponsive: Boolean(responsiveSlot.narrowViewport),
-    });
-    const headingNode = ((0, jsx_runtime_1.jsx)(Heading_1.Heading, { variant: "pageHeading1", tag: "h1", children: headingSlot }));
-    return ((0, jsx_runtime_1.jsxs)("header", { className: (0, css_1.cx)(classes.root, 'mfui-PageHeader__root', className), children: [showBackButton ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.backButton, 'mfui-PageHeader__backButton'), children: (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { "aria-label": backButtonProps?.['aria-label'] ?? '戻る', ...backButtonProps, children: (0, jsx_runtime_1.jsx)(mfui_icons_react_1.PaneSwitchToLeft, {}) }) })) : null, (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.leftPane, 'mfui-PageHeader__leftPane'), children: renderHeading ? renderHeading({ headingNode }) : headingNode }), responsiveSlot.base ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.rightPane, classes.rightPaneWide, 'mfui-PageHeader__rightPane'), children: responsiveSlot.base })) : null, responsiveSlot.narrowViewport ? ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.rightPane, classes.rightPaneNarrow, 'mfui-PageHeader__rightPane'), children: responsiveSlot.narrowViewport })) : null] }));
-}

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

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

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

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

package/dist/cjs/src/Pagination/ItemsCount/ItemsCount.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ItemsCount = ItemsCount;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const recipes_1 = require("../../../styled-system/recipes");
-const Typography_1 = require("../../Typography");
-const css_1 = require("../../../styled-system/css");
-/**
- * The ItemsCount for displaying the number of items.
- */
-function ItemsCount({ totalPages, currentPageNumber, totalItems, itemsPerPage, unitLabel }) {
-    const startItem = (currentPageNumber - 1) * itemsPerPage + 1;
-    const endItem = Math.min(currentPageNumber * itemsPerPage, totalItems);
-    const classes = (0, recipes_1.itemsCountSlotRecipe)();
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.root, 'mfui-ItemsCount__root'), children: totalPages <= 1 ? ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, { className: (0, css_1.cx)(classes.itemsCount, 'mfui-ItemsCount__itemsCount'), children: [endItem, unitLabel] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Typography_1.Typography, { className: (0, css_1.cx)(classes.itemsCount, 'mfui-ItemsCount__itemsCount'), children: [startItem, "\u301C", endItem, unitLabel] }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: (0, css_1.cx)(classes.separator, 'mfui-ItemsCount__separator'), children: "/" }), (0, jsx_runtime_1.jsxs)(Typography_1.Typography, { className: (0, css_1.cx)(classes.totalItems, 'mfui-ItemsCount__totalItems'), children: [totalItems, unitLabel] })] })) }));
-}

package/dist/cjs/src/Pagination/ItemsCount/ItemsCount.types.js

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

package/dist/cjs/src/Pagination/ItemsCount/index.js

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

package/dist/cjs/src/Pagination/ItemsPerPage/ItemsPerPage.js

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ItemsPerPage = ItemsPerPage;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const recipes_1 = require("../../../styled-system/recipes");
-const Typography_1 = require("../../Typography");
-const SelectBox_1 = require("../../SelectBox");
-const css_1 = require("../../../styled-system/css");
-/**
- * The ItemsPerPage for displaying the number of items per page.
- */
-function ItemsPerPage({ itemsPerPage, itemsPerPageLabel, itemsPerPageOptions, itemsPerPageSelectBoxProps, onItemsPerPageChange, }) {
-    const classes = (0, recipes_1.itemsPerPageSlotRecipe)();
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.root, 'mfui-ItemsPerPage__root'), children: [(0, jsx_runtime_1.jsx)(Typography_1.Typography, { children: itemsPerPageLabel }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.root, 'mfui-ItemsPerPage__selectBoxWrapper'), children: (0, jsx_runtime_1.jsx)(SelectBox_1.SelectBox, { size: "small", triggerProps: {
-                        'aria-label': itemsPerPageSelectBoxProps?.['aria-label'] ?? '1ページあたりの表示件数を選択する',
-                    }, value: itemsPerPage.toString(), options: itemsPerPageOptions.map((value) => ({
-                        value: value.toString(),
-                        label: value.toString(),
-                    })), popoverContentProps: { className: classes.optionPanel }, onChange: (value) => {
-                        onItemsPerPageChange?.(Number(value));
-                    } }) })] }));
-}

package/dist/cjs/src/Pagination/ItemsPerPage/ItemsPerPage.types.js

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

package/dist/cjs/src/Pagination/ItemsPerPage/index.js

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