@moneyforward/mfui-components 3.11.0 → 3.12.0

package/dist/src/Breadcrumbs/Breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Breadcrumbs is a navigation component that shows the user's current location
+ * within the site hierarchy and allows quick navigation to parent pages.
+ */
+export declare const Breadcrumbs: import("react").ForwardRefExoticComponent<{
+    items: import("./Breadcrumbs.types").BreadcrumbItem[];
+    wrap?: boolean;
+    customLinkComponent?: import("react").ElementType;
+} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;

package/dist/src/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,150 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { MoreHorizontal, NavigationToDetail } from '@moneyforward/mfui-icons-react';
+import { TextLink } from '../TextLink';
+import { DropdownMenu } from '../DropdownMenu';
+import { Tooltip } from '../Tooltip';
+import { cx } from '../../styled-system/css';
+import { breadcrumbsSlotRecipe } from '../../styled-system/recipes';
+const FULL_WIDTH_2_CHARS = 24; // Width of 2 full-width characters
+const SEPARATOR_ICON_WIDTH = 28; // Width of the separator icon
+const ELLIPSIS_WIDTH = 12; // Width of the ellipsis
+const ITEM_MIN_WIDTH = FULL_WIDTH_2_CHARS + SEPARATOR_ICON_WIDTH + ELLIPSIS_WIDTH; // = 64
+const CURRENT_ITEM_MIN_WIDTH = FULL_WIDTH_2_CHARS + ELLIPSIS_WIDTH; // = 36
+function Separator({ className }) {
+    return (_jsx("span", { "aria-hidden": true, className: className, children: _jsx(NavigationToDetail, { width: 14, height: 14 }) }));
+}
+/**
+ * Breadcrumbs is a navigation component that shows the user's current location
+ * within the site hierarchy and allows quick navigation to parent pages.
+ */
+export const Breadcrumbs = forwardRef(({ items, wrap = false, customLinkComponent, className, 'aria-label': ariaLabel = '現在のページ位置', ...rest }, ref) => {
+    const classes = breadcrumbsSlotRecipe({ wrap });
+    // Decompose items into logical groups:
+    // - rootItem:    items[0] (always shown, link)
+    // - currentItem: items[n-1] (always shown, non-link)
+    // - parentItem:  items[n-2] (shown when items.length >= 3, link)
+    // - middleItems: items[1..n-3] (shown when items.length >= 4, truncation targets)
+    const rootItem = items.length > 1 ? items[0] : undefined;
+    const currentItem = items.at(-1);
+    const parentItem = items.length >= 3 ? items.at(-2) : undefined;
+    const middleItems = items.length >= 4 ? items.slice(1, -2) : [];
+    const [collapsedCount, setCollapsedCount] = useState(0);
+    const [containerWidth, setContainerWidth] = useState(0);
+    // True when all middle items are collapsed (or there are none).
+    // In this state flex-shrink: 1 is active and CSS ellipsis kicks in.
+    const allCollapsed = middleItems.length === 0 || collapsedCount === middleItems.length;
+    const listRef = useRef(null);
+    // Previous container width, used to detect expansion and trigger a reset.
+    const previousContainerWidthRef = useRef(0);
+    const rootLinkRef = useRef(null);
+    const parentLinkRef = useRef(null);
+    const currentItemRef = useRef(null);
+    const rootItemLiRef = useRef(null);
+    const parentItemLiRef = useRef(null);
+    const currentItemLiRef = useRef(null);
+    const [rootTruncated, setRootTruncated] = useState(false);
+    const [parentTruncated, setParentTruncated] = useState(false);
+    const [currentTruncated, setCurrentTruncated] = useState(false);
+    const [rootMinWidth, setRootMinWidth] = useState();
+    const [parentMinWidth, setParentMinWidth] = useState();
+    const [currentMinWidth, setCurrentMinWidth] = useState();
+    const itemsKey = items.map((item) => `${item.label}::${item.href ?? ''}`).join('|');
+    // Reset collapsedCount when items change.
+    useLayoutEffect(() => {
+        if (wrap)
+            return;
+        previousContainerWidthRef.current = 0;
+        setCollapsedCount(0);
+        // Use itemsKey as dependency instead of items to avoid referential inequality.
+    }, [itemsKey, wrap]);
+    // Overflow-based truncation: collapse middle items one by one from the left
+    // as long as scrollWidth > clientWidth.
+    useLayoutEffect(() => {
+        if (wrap || middleItems.length === 0) {
+            setCollapsedCount(0);
+            return;
+        }
+        if (!listRef.current)
+            return;
+        const list = listRef.current;
+        const currentWidth = list.clientWidth;
+        // Container expanded — reset and re-evaluate to show as many items as possible.
+        if (currentWidth > previousContainerWidthRef.current && collapsedCount > 0) {
+            previousContainerWidthRef.current = currentWidth;
+            setCollapsedCount(0);
+            return;
+        }
+        previousContainerWidthRef.current = currentWidth;
+        // Still overflowing — collapse one more item from the left.
+        if (list.scrollWidth > list.clientWidth && collapsedCount < middleItems.length) {
+            setCollapsedCount((c) => c + 1);
+        }
+    }, [containerWidth, collapsedCount, middleItems.length, wrap]);
+    // Watch container width changes with ResizeObserver.
+    useEffect(() => {
+        if (wrap || !listRef.current)
+            return;
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            if (entry) {
+                setContainerWidth(entry.contentRect.width);
+            }
+        });
+        observer.observe(listRef.current);
+        return () => {
+            observer.disconnect();
+        };
+    }, [wrap]);
+    // Measure each item's natural (unshrunk) width and cap it at the maximum.
+    // Temporarily sets flex-shrink: 0 before measuring so that shrinkage doesn't skew the result.
+    useLayoutEffect(() => {
+        if (wrap) {
+            setRootMinWidth(undefined);
+            setParentMinWidth(undefined);
+            setCurrentMinWidth(undefined);
+            return;
+        }
+        const entries = [
+            { ref: rootItemLiRef, set: setRootMinWidth, max: ITEM_MIN_WIDTH },
+            { ref: parentItemLiRef, set: setParentMinWidth, max: ITEM_MIN_WIDTH },
+            { ref: currentItemLiRef, set: setCurrentMinWidth, max: CURRENT_ITEM_MIN_WIDTH },
+        ];
+        // Step 1: disable flex-shrink on all items (marks layout dirty).
+        entries.forEach(({ ref }) => {
+            const element = ref.current;
+            if (element)
+                element.style.flexShrink = '0';
+        });
+        // Step 2: read offsetWidth (first access forces reflow with all items unshrunk).
+        entries.forEach(({ ref, set, max }) => {
+            const element = ref.current;
+            if (element)
+                set(Math.min(element.offsetWidth, max));
+        });
+        // Step 3: restore (CSS class will re-apply flex-shrink: 1 when all-collapsed).
+        entries.forEach(({ ref }) => {
+            const element = ref.current;
+            if (element)
+                element.style.flexShrink = '';
+        });
+    }, [itemsKey, wrap]);
+    // Detect whether each item's text is actually truncated (disabled in wrap mode).
+    useLayoutEffect(() => {
+        if (wrap) {
+            setRootTruncated(false);
+            setParentTruncated(false);
+            setCurrentTruncated(false);
+            return;
+        }
+        setRootTruncated(!!(rootLinkRef.current && rootLinkRef.current.scrollWidth > rootLinkRef.current.clientWidth));
+        setParentTruncated(!!(parentLinkRef.current && parentLinkRef.current.scrollWidth > parentLinkRef.current.clientWidth));
+        setCurrentTruncated(!!(currentItemRef.current && currentItemRef.current.scrollWidth > currentItemRef.current.clientWidth));
+    }, [containerWidth, collapsedCount, wrap]);
+    const truncatedItems = middleItems.slice(0, collapsedCount);
+    return (_jsx("nav", { ref: ref, className: cx(classes.root, className), "aria-label": ariaLabel, ...rest, children: _jsxs("ol", { ref: listRef, className: classes.list, "data-mfui-all-collapsed": allCollapsed ? true : undefined, children: [rootItem ? (_jsxs("li", { ref: rootItemLiRef, className: classes.item, style: allCollapsed && rootMinWidth !== undefined ? { minWidth: rootMinWidth } : undefined, children: [_jsx(Tooltip, { hideFromScreenReader: true, content: rootItem.label, disabled: !rootTruncated, placement: "bottom", style: { display: 'flex', alignItems: 'center', minWidth: 0, overflow: 'hidden' }, children: _jsx(TextLink, { ref: rootLinkRef, href: rootItem.href, variant: "condensedBody", customLinkComponent: customLinkComponent, className: classes.linkText, children: rootItem.label }) }), _jsx(Separator, { className: classes.separator })] })) : null, collapsedCount > 0 ? (_jsxs("li", { className: classes.truncateItem, children: [_jsx(DropdownMenu, { label: "\u7701\u7565\u3055\u308C\u305F\u30A2\u30A4\u30C6\u30E0\u3092\u8868\u793A", icon: _jsx(MoreHorizontal, {}), triggerProps: {
+                                className: classes.truncateButton,
+                            }, children: truncatedItems.map((item, i) => item.href !== undefined ? (_jsx(DropdownMenu.Item, { href: item.href, customLinkComponent: customLinkComponent, children: item.label }, i)) : (_jsx(DropdownMenu.Item, { children: item.label }, i))) }), _jsx(Separator, { className: classes.separator })] })) : null, middleItems.map((item, i) => (_jsxs("li", { className: classes.item, style: i < collapsedCount ? { display: 'none' } : undefined, children: [_jsx(TextLink, { href: item.href, variant: "condensedBody", customLinkComponent: customLinkComponent, className: classes.linkText, children: item.label }), _jsx(Separator, { className: classes.separator })] }, i))), parentItem ? (_jsxs("li", { ref: parentItemLiRef, className: classes.item, style: allCollapsed && parentMinWidth !== undefined ? { minWidth: parentMinWidth } : undefined, children: [_jsx(Tooltip, { hideFromScreenReader: true, content: parentItem.label, disabled: !parentTruncated, placement: "bottom", style: { display: 'flex', alignItems: 'center', minWidth: 0, overflow: 'hidden' }, children: _jsx(TextLink, { ref: parentLinkRef, href: parentItem.href, variant: "condensedBody", customLinkComponent: customLinkComponent, className: classes.linkText, children: parentItem.label }) }), _jsx(Separator, { className: classes.separator })] })) : null, currentItem ? (_jsx("li", { ref: currentItemLiRef, className: classes.item, "aria-current": "page", style: allCollapsed && currentMinWidth !== undefined ? { minWidth: currentMinWidth } : undefined, children: _jsx(Tooltip, { hideFromScreenReader: true, content: currentItem.label, disabled: !currentTruncated, placement: "bottom", style: { display: 'flex', alignItems: 'center', minWidth: 0, overflow: 'hidden' }, children: _jsx("span", { ref: currentItemRef, className: classes.currentItem, children: currentItem.label }) }) })) : null] }) }));
+});
+Breadcrumbs.displayName = 'Breadcrumbs';

package/dist/src/Breadcrumbs/Breadcrumbs.types.d.ts

@@ -0,0 +1,31 @@
+import { type ComponentPropsWithoutRef, type ElementType } from 'react';
+/** A single item in the breadcrumb list. */
+export type BreadcrumbItem = {
+    /** The display label of the page. */
+    label: string;
+    /** The URL to link to. */
+    href?: string;
+};
+export type BreadcrumbsProps = {
+    /**
+     * Array of breadcrumb items.
+     * The last item is treated as the current page and rendered as non-link.
+     * If only one item is provided, only the current item is shown.
+     */
+    items: BreadcrumbItem[];
+    /**
+     * Whether to allow text wrapping.
+     * When `true`, items wrap to multiple lines (truncation is disabled).
+     * When `false` (default), items stay on one line and overflowing middle items are truncated.
+     * In wrap mode, each item includes a separator to prevent separators from appearing at line starts.
+     *
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Custom link component (e.g. Next.js Link).
+     * Falls back to a plain `<a>` tag when omitted.
+     * Also applied to truncated items in the DropdownMenu.
+     */
+    customLinkComponent?: ElementType;
+} & ComponentPropsWithoutRef<'nav'>;

package/dist/src/Breadcrumbs/Breadcrumbs.types.js

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

package/dist/src/Breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export { Breadcrumbs } from './Breadcrumbs';
+export type { BreadcrumbItem, BreadcrumbsProps } from './Breadcrumbs.types';

package/dist/src/Breadcrumbs/index.js

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

package/dist/src/Button/Button.d.ts

@@ -20,4 +20,4 @@ export declare const Button: import("react").ForwardRefExoticComponent<{
     rightIcon?: React.ReactElement;
     href?: string;
     customLinkComponent?: import("react").ElementType;
-} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "type" | "rel" | "download" | "hrefLang" | "ping" | "target" | "referrerPolicy"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "target" | "type" | "download" | "hrefLang" | "ping" | "referrerPolicy" | "rel"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

package/dist/src/CheckboxGroup/CheckboxGroup.d.ts

@@ -14,4 +14,4 @@ export declare const CheckboxGroup: import("react").ForwardRefExoticComponent<{
     defaultValues?: (string | number | readonly string[] | undefined)[];
     values?: (string | number | readonly string[] | undefined)[];
     onChange?: (selectedValue: (string | number | readonly string[] | undefined)[]) => void;
-} & Pick<import("..").CheckboxProps, "disabled" | "name"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange"> & import("react").RefAttributes<HTMLDivElement>>;
+} & Pick<import("..").CheckboxProps, "name" | "disabled"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/DateTimeSelection/DateRangePicker/DateRangePickerProvider/DateRangePickerProvider.d.ts

@@ -31,7 +31,7 @@ export declare function useDateRangePickerContext(): {
     handleClear: () => void;
     handleApply: () => void;
     handleCancel: () => void;
-    selecting: "start" | "end";
+    selecting: "end" | "start";
     temporaryStart: Date | undefined;
     temporaryEnd: Date | undefined;
     previewDate: Date | undefined;
@@ -43,7 +43,7 @@ export declare function useDateRangePickerContext(): {
     isRangeEnd: (date: Date) => boolean;
     setTemporaryStart: import("react").Dispatch<import("react").SetStateAction<Date | undefined>>;
     setTemporaryEnd: import("react").Dispatch<import("react").SetStateAction<Date | undefined>>;
-    setSelecting: import("react").Dispatch<import("react").SetStateAction<"start" | "end">>;
+    setSelecting: import("react").Dispatch<import("react").SetStateAction<"end" | "start">>;
     disableAutoOpen: boolean | undefined;
     pendingFocusDate: string | null;
     setPendingFocusDate: import("react").Dispatch<import("react").SetStateAction<string | null>>;

package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerProvider/BaseRangePickerProvider.d.ts

@@ -31,7 +31,7 @@ export declare function useBaseRangePickerContext(): {
     handleClear: () => void;
     handleApply: () => void;
     handleCancel: () => void;
-    selecting: "start" | "end";
+    selecting: "end" | "start";
     temporaryStart: Date | undefined;
     temporaryEnd: Date | undefined;
     previewDate: Date | undefined;
@@ -43,7 +43,7 @@ export declare function useBaseRangePickerContext(): {
     isRangeEnd: (date: Date) => boolean;
     setTemporaryStart: import("react").Dispatch<import("react").SetStateAction<Date | undefined>>;
     setTemporaryEnd: import("react").Dispatch<import("react").SetStateAction<Date | undefined>>;
-    setSelecting: import("react").Dispatch<import("react").SetStateAction<"start" | "end">>;
+    setSelecting: import("react").Dispatch<import("react").SetStateAction<"end" | "start">>;
     disableAutoOpen: boolean | undefined;
     pendingFocusDate: string | null;
     setPendingFocusDate: import("react").Dispatch<import("react").SetStateAction<string | null>>;

package/dist/src/IconButton/IconButton.d.ts

@@ -4,7 +4,7 @@ export declare const InternalIconButton: import("react").ForwardRefExoticCompone
     disabled?: boolean;
     href?: string;
     customLinkComponent?: import("react").ElementType;
-} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "type" | "rel" | "download" | "hrefLang" | "ping" | "target" | "referrerPolicy"> & {
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "target" | "type" | "download" | "hrefLang" | "ping" | "referrerPolicy" | "rel"> & {
     size?: import("../../styled-system/recipes").IconButtonSlotRecipeVariant["size"];
 } & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 export declare const IconButton: import("react").ForwardRefExoticComponent<{
@@ -13,4 +13,4 @@ export declare const IconButton: import("react").ForwardRefExoticComponent<{
     disabled?: boolean;
     href?: string;
     customLinkComponent?: import("react").ElementType;
-} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "type" | "rel" | "download" | "hrefLang" | "ping" | "target" | "referrerPolicy"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & Pick<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref">, "target" | "type" | "download" | "hrefLang" | "ping" | "referrerPolicy" | "rel"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;

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

@@ -4,4 +4,4 @@ import { type MultipleSelectBoxProps, type AllowedValueTypes } from './MultipleS
  * This component is separated from the SelectBox component because it has a different behavior.
  * This component switches the variants of looks and behaviors depends on the props: size, invalid, disabled.
  */
-export declare function MultipleSelectBox<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ id, triggerProps, triggerWrapperProps, size, options, defaultValue, placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions, notFoundMessage, searchBoxProps, loading, onSearchOptions, clearButtonProps, disableClearButton, optionPanelProps, popoverWrapperProps, enableAllOptionsControls, enableApplyControls, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, onOpenStateChanged, enableAutoUnmount, onBlur, showGroupOptionDivider, enableVirtualization, virtualizationOptions, infiniteScroll, }: MultipleSelectBoxProps<T, AdditionalProps>): import("react/jsx-runtime").JSX.Element;
+export declare function MultipleSelectBox<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>>({ id, triggerProps, triggerWrapperProps, size, options, defaultValue, placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions, notFoundMessage, searchBoxProps, loading, onSearchOptions, clearButtonProps, disableClearButton, optionPanelProps, popoverWrapperProps, enableAllOptionsControls, enableApplyControls, showSelectedCount, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, onOpenStateChanged, enableAutoUnmount, onBlur, showGroupOptionDivider, enableVirtualization, virtualizationOptions, infiniteScroll, }: MultipleSelectBoxProps<T, AdditionalProps>): import("react/jsx-runtime").JSX.Element;

package/dist/src/MultipleSelectBox/MultipleSelectBox.js

@@ -34,7 +34,7 @@ const SKELETON_ITEM_COUNT = 4;
  */
 export function MultipleSelectBox({ id, triggerProps, triggerWrapperProps, size, options = [], defaultValue, 
 // eslint-disable-next-line @typescript-eslint/no-deprecated
-placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, clearButtonProps, disableClearButton = false, optionPanelProps, popoverWrapperProps, enableAllOptionsControls = false, enableApplyControls = false, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, onOpenStateChanged, enableAutoUnmount = true, onBlur, showGroupOptionDivider, enableVirtualization = false, virtualizationOptions, infiniteScroll, }) {
+placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, clearButtonProps, disableClearButton = false, optionPanelProps, popoverWrapperProps, enableAllOptionsControls = false, enableApplyControls = false, showSelectedCount = false, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, onOpenStateChanged, enableAutoUnmount = true, onBlur, showGroupOptionDivider, enableVirtualization = false, virtualizationOptions, infiniteScroll, }) {
     const classes = multipleSelectBoxSlotRecipe({ showGroupOptionDivider });
     const triggerRef = useRef(null);
     const listBoxId = useId();
@@ -325,5 +325,8 @@ placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, val
                                                         ? notFoundMessage
                                                         : emptyMessage }) }, "empty"),
                                         renderInfiniteScrollError(),
-                                    ].filter(Boolean) }) }), enableApplyControls ? (_jsxs(HStack, { className: cx(classes.menuFooter, 'mfui-MultipleSelectBox__menuFooter'), justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { variant: "body", color: "neutral.600", children: selectedCountProps?.render?.(temporaryValues.size) ?? `${String(temporaryValues.size)}件選択中` }), _jsxs(HStack, { gap: "horizontal.0-1of2", children: [_jsx(Button, { ref: cancelButtonRef, size: "small", priority: "secondary", onClick: handleCancelButtonClick, children: cancelButtonProps?.label ?? 'キャンセル' }), _jsx(Button, { ref: applyButtonRef, size: "small", priority: "primary", onClick: handleApplyButtonClick, children: applyButtonProps?.label ?? '適用' })] })] })) : null] })), open: isOptionPanelOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: toggleOptionPanel, onBlur: onBlur }));
+                                    ].filter(Boolean) }) }), enableApplyControls || showSelectedCount ? (_jsxs(HStack, { className: cx(classes.menuFooter, 'mfui-MultipleSelectBox__menuFooter'), justifyContent: "space-between", alignItems: "center", children: [_jsx(Typography, { variant: "body", color: "neutral.600", children: enableApplyControls
+                                ? (selectedCountProps?.render?.(temporaryValues.size) ?? `${String(temporaryValues.size)}件選択中`)
+                                : (selectedCountProps?.render?.(localSelectedValuesSet.size) ??
+                                    `${String(localSelectedValuesSet.size)}件選択中`) }), enableApplyControls ? (_jsxs(HStack, { gap: "horizontal.0-1of2", children: [_jsx(Button, { ref: cancelButtonRef, size: "small", priority: "secondary", onClick: handleCancelButtonClick, children: cancelButtonProps?.label ?? 'キャンセル' }), _jsx(Button, { ref: applyButtonRef, size: "small", priority: "primary", onClick: handleApplyButtonClick, children: applyButtonProps?.label ?? '適用' })] })) : null] })) : null] })), open: isOptionPanelOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: toggleOptionPanel, onBlur: onBlur }));
 }

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

@@ -235,6 +235,15 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
      * @default false
      */
     enableApplyControls?: boolean;
+    /**
+     * Whether to show the number of selected options in the popover footer.
+     * When `enableApplyControls` is true, the count is always shown automatically.
+     * When `enableApplyControls` is false, this prop controls the visibility.
+     * The count reflects the actual confirmed selection.
+     *
+     * @default false
+     */
+    showSelectedCount?: boolean;
     /**
      * Properties for the "Select All Button"
      */

package/dist/src/RadioButton/RadioButton.d.ts

@@ -10,4 +10,4 @@ export declare const RadioButton: import("react").ForwardRefExoticComponent<{
     label?: string;
     checked?: boolean | undefined;
     disabled?: boolean | undefined;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "disabled" | "checked"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref">, "checked" | "disabled"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/src/RadioGroup/RadioGroup.d.ts

@@ -10,4 +10,4 @@
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
  */
-export declare const RadioGroup: import("react").ForwardRefExoticComponent<Pick<import("..").RadioButtonProps, "disabled" | "name" | "value" | "defaultValue" | "onChange"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const RadioGroup: import("react").ForwardRefExoticComponent<Pick<import("..").RadioButtonProps, "name" | "onChange" | "defaultValue" | "disabled" | "value"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onChange"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/SplitView/SplitView.d.ts

@@ -1,8 +1,9 @@
+import { type SplitViewProps } from './SplitView.types';
 /**
  * A resizable split layout component with two panels.
  *
  * Users can adjust panel sizes by dragging the divider between panels.
- * The right panel can be shown or hidden using the `isOpen` prop.
+ * The controlled panel (determined by `targetPanel`) can be shown or hidden using the `isOpen` prop.
  *
  * @example
  * ```tsx
@@ -12,22 +13,12 @@
  *   leftPanelSlot={<div>Left Panel</div>}
  *   rightPanelSlot={<div>Right Panel</div>}
  *   isOpen={isOpen}
- *   initialRightPanelSize={300}
- *   minRightPanelSize={200}
- *   maxRightPanelSize={500}
+ *   targetPanel="right"
+ *   initialPanelSize={300}
+ *   minPanelSize={200}
+ *   maxPanelSize={500}
  *   style={{ minWidth: '600px' }}
  * />
  * ```
  */
-export declare const SplitView: import("react").ForwardRefExoticComponent<{
-    leftPanelSlot: import("react").ReactNode;
-    rightPanelSlot: import("react").ReactNode;
-    isOpen?: boolean;
-    initialRightPanelSize: import("react").CSSProperties["width"];
-    minRightPanelSize: import("react").CSSProperties["minWidth"];
-    maxRightPanelSize: import("react").CSSProperties["maxWidth"];
-    leftPanelProps?: import("react").ComponentPropsWithoutRef<"div">;
-    rightPanelProps?: import("react").ComponentPropsWithoutRef<"div">;
-    dividerProps?: import("react").ComponentPropsWithoutRef<"div">;
-    enableAutoUnmount?: boolean;
-} & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SplitView: import("react").ForwardRefExoticComponent<SplitViewProps & import("react").RefAttributes<HTMLDivElement>>;