@moneyforward/mfui-components 3.2.0 → 3.4.0

package/dist/src/DateTimeSelection/shared/BasePicker/BasePicker.js

@@ -83,10 +83,10 @@ export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = fal
                         textBoxProps.wrapperProps?.onKeyDown?.(event);
                         handleTriggerKeyDown(event);
                     },
-                    onClick: !disableAutoOpen ? handleWrapperClick(openPopover) : undefined,
+                    onClick: !disableAutoOpen && !disabled ? handleWrapperClick(openPopover) : undefined,
                     style: {
                         ...textBoxProps.wrapperProps?.style,
-                        cursor: 'text',
+                        cursor: disabled ? 'not-allowed' : 'text',
                     },
                 }, onBlur: (event) => {
                     // First call the original input onBlur handler (contains onChange logic)

package/dist/src/DateTimeSelection/shared/CalendarGrid/CalendarGrid.js

@@ -12,11 +12,13 @@ export function CalendarGrid({ viewingValue, minDate, maxDate, checkDisabledDate
     const dates = useDates(viewingValue);
     const computedDataForStyles = useMemo(() => computeDataForStyling(viewingValue), [viewingValue]);
     const computedPropsForDates = useMemo(() => {
+        const startOfMinDate = minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()) : undefined;
+        const startOfMaxDate = maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()) : undefined;
         const newDates = dates.map((dateNumber) => {
             if (!dateNumber)
                 return null;
             const date = new Date(viewingValue.getFullYear(), viewingValue.getMonth(), dateNumber);
-            const isDisabledByProps = (minDate && date < minDate) || (maxDate && date > maxDate);
+            const isDisabledByProps = (startOfMinDate && date < startOfMinDate) || (startOfMaxDate && date > startOfMaxDate);
             const isDisabledByCallback = checkDisabledDate?.(date);
             const disabled = isDisabledByProps || !!isDisabledByCallback;
             const isSelected = value ? checkIsSameDate(value, date) : false;

package/dist/src/DisplayTable/DisplayTable.d.ts

@@ -5,7 +5,7 @@ import { DisplayTableHeader } from './DisplayTableHeader';
 import { DisplayTableHeaderCell } from './DisplayTableHeaderCell';
 import { DisplayTableHeaderRow } from './DisplayTableHeaderRow';
 import { DisplayTableRow } from './DisplayTableRow';
-declare function Base({ title, titleTag, lead, className, fixedHeader, leftFixedColumnIndex, rightFixedColumnIndex, wrapperProps, ...props }: DisplayTableProps): import("react/jsx-runtime").JSX.Element;
+declare function Base({ title, titleTag, lead, className, fixedHeader, leftFixedColumnIndex, rightFixedColumnIndex, wrapperProps, loading, ...props }: DisplayTableProps): import("react/jsx-runtime").JSX.Element;
 /**
  * The `DisplayTable` component.
  *
@@ -17,12 +17,13 @@ declare function Base({ title, titleTag, lead, className, fixedHeader, leftFixed
  * @example
  * ```jsx
  * <DisplayTable title="My Table" lead="Table lead text">
+ *   <DisplayTable.Header>
  *     <DisplayTable.HeaderRow>
  *       <DisplayTable.HeaderCell>Header 1</DisplayTable.HeaderCell>
  *       <DisplayTable.HeaderCell>Header 2</DisplayTable.HeaderCell>
  *     </DisplayTable.HeaderRow>
  *   </DisplayTable.Header>
- *   </DisplayTable.Body>
+ *   <DisplayTable.Body>
  *     <DisplayTable.Row>
  *       <DisplayTable.Cell>Cell 1</DisplayTable.Cell>
  *       <DisplayTable.Cell>Cell 2</DisplayTable.Cell>

package/dist/src/DisplayTable/DisplayTable.js

@@ -11,9 +11,9 @@ import { DisplayTableRow } from './DisplayTableRow';
 import { cx } from '../../styled-system/css';
 import { Heading } from '../Heading';
 import { Typography } from '../Typography';
-function Base({ title, titleTag = 'h4', lead, className, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, wrapperProps, ...props }) {
+function Base({ title, titleTag = 'h4', lead, className, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, wrapperProps, loading = false, ...props }) {
     const classes = displayTableSlotRecipe({ fixedHeader });
-    return (_jsx(DisplayTableProvider, { fixedHeader: fixedHeader, leftFixedColumnIndex: leftFixedColumnIndex, rightFixedColumnIndex: rightFixedColumnIndex, children: _jsxs("div", { ...wrapperProps, className: cx(classes.wrapper, 'mfui-DisplayTable__wrapper', wrapperProps?.className), children: [_jsxs("div", { className: cx(classes.header, 'mfui-DisplayTable__header'), children: [_jsx(Heading, { variant: "sectionHeading2", tag: titleTag, className: cx(classes.title, 'mfui-DisplayTable__title'), children: title }), lead ? (_jsx(Typography, { tag: "p", className: cx(classes.lead, 'mfui-DisplayTable__lead'), children: lead })) : null] }), _jsx("div", { className: cx(classes.body, 'mfui-DisplayTable__body'), children: _jsx("table", { className: cx(classes.table, 'mfui-DisplayTable__table', className), ...props }) })] }) }));
+    return (_jsx(DisplayTableProvider, { fixedHeader: fixedHeader, leftFixedColumnIndex: leftFixedColumnIndex, rightFixedColumnIndex: rightFixedColumnIndex, loading: loading, children: _jsxs("div", { ...wrapperProps, className: cx(classes.wrapper, 'mfui-DisplayTable__wrapper', wrapperProps?.className), children: [_jsxs("div", { className: cx(classes.header, 'mfui-DisplayTable__header'), children: [_jsx(Heading, { variant: "sectionHeading2", tag: titleTag, className: cx(classes.title, 'mfui-DisplayTable__title'), children: title }), lead ? (_jsx(Typography, { tag: "p", className: cx(classes.lead, 'mfui-DisplayTable__lead'), children: lead })) : null] }), _jsx("div", { className: cx(classes.body, 'mfui-DisplayTable__body'), children: _jsx("table", { className: cx(classes.table, 'mfui-DisplayTable__table', className), "aria-live": "polite", "aria-busy": loading, "aria-label": loading ? 'データを読み込み中' : undefined, ...props }) })] }) }));
 }
 /**
  * The `DisplayTable` component.
@@ -26,12 +26,13 @@ function Base({ title, titleTag = 'h4', lead, className, fixedHeader = false, le
  * @example
  * ```jsx
  * <DisplayTable title="My Table" lead="Table lead text">
+ *   <DisplayTable.Header>
  *     <DisplayTable.HeaderRow>
  *       <DisplayTable.HeaderCell>Header 1</DisplayTable.HeaderCell>
  *       <DisplayTable.HeaderCell>Header 2</DisplayTable.HeaderCell>
  *     </DisplayTable.HeaderRow>
  *   </DisplayTable.Header>
- *   </DisplayTable.Body>
+ *   <DisplayTable.Body>
  *     <DisplayTable.Row>
  *       <DisplayTable.Cell>Cell 1</DisplayTable.Cell>
  *       <DisplayTable.Cell>Cell 2</DisplayTable.Cell>

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

@@ -74,4 +74,11 @@ export type DisplayTableProps = {
      * @property className - The class name of the wrapper element.
      */
     wrapperProps?: Pick<ComponentPropsWithoutRef<'div'>, 'className'>;
+    /**
+     * Whether the table is loading.
+     * If `true`, four rows with the skeleton cell will be shown instead of the table content.
+     *
+     * @default false
+     */
+    loading?: boolean;
 } & ComponentPropsWithoutRef<'table'>;

package/dist/src/DisplayTable/DisplayTableBody/DisplayTableBody.js

@@ -1,7 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
 import { displayTableBodySlotRecipe } from '../../../styled-system/recipes';
 import { cx } from '../../../styled-system/css';
+import { useDisplayTableContext } from '../DisplayTableProvider';
+import { DisplayTableRow } from '../DisplayTableRow';
+import { DisplayTableCell } from '../DisplayTableCell';
+const NUMBER_OF_LOADING_ROWS = 4;
 export function DisplayTableBody({ className, ...props }) {
+    const { numberColumns, loading } = useDisplayTableContext();
     const classes = displayTableBodySlotRecipe();
+    // Memoize loading rows to avoid recreating arrays on every render
+    const loadingRows = useMemo(() => {
+        if (!loading)
+            return null;
+        return Array.from({ length: NUMBER_OF_LOADING_ROWS }).map((_, rowIndex) => (_jsx(DisplayTableRow, { children: Array.from({ length: numberColumns }).map((_, colIndex) => (_jsx(DisplayTableCell, { columnIndex: colIndex }, colIndex))) }, rowIndex)));
+    }, [loading, numberColumns]);
+    if (loading) {
+        return (_jsx("tbody", { className: cx(classes.root, 'mfui-DisplayTableBody__root', className), ...props, children: loadingRows }));
+    }
     return _jsx("tbody", { className: cx(classes.root, 'mfui-DisplayTableBody__root', className), ...props });
 }

package/dist/src/DisplayTable/DisplayTableCell/DisplayTableCell.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { displayTableCellSlotRecipe } from '../../../styled-system/recipes';
 import { Typography } from '../../Typography';
+import { Skeleton } from '../../Skeleton';
 import { useDisplayTableContext } from '../DisplayTableProvider';
 import { cx } from '../../../styled-system/css';
 import { useFixedColumns } from '../../utilities/dom/useFixedColumns';
 export function DisplayTableCell({ children, className, depth = '0', columnIndex, style, type = 'text', isTotal = false, ...props }) {
-    const { leftFixedColumnIndex, rightFixedColumnIndex } = useDisplayTableContext();
+    const { leftFixedColumnIndex, rightFixedColumnIndex, loading } = useDisplayTableContext();
     const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = useFixedColumns({
         columnIndex,
         leftFixedColumnIndex,
@@ -27,5 +28,11 @@ export function DisplayTableCell({ children, className, depth = '0', columnIndex
     // Row headers are fixed columns on the left side
     const isRowHeader = isFixedColumn && isEdgeFixedColumn === 'left';
     const Tag = isRowHeader ? 'th' : 'td';
-    return (_jsx(Tag, { ref: cellRef, className: cx(classes.root, 'mfui-DisplayTableCell__root', className), style: { ...style, ...fixedPositionStyles }, ...props, children: _jsx(Typography, { variant: getTypographyVariant(), children: children }) }));
+    const cellContent = (() => {
+        if (loading) {
+            return (_jsx("div", { className: cx(classes.skeletonCell, 'mfui-DisplayTableCell__skeletonCell'), children: _jsx(Skeleton, {}) }));
+        }
+        return _jsx(Typography, { variant: getTypographyVariant(), children: children });
+    })();
+    return (_jsx(Tag, { ref: cellRef, className: cx(classes.root, 'mfui-DisplayTableCell__root', className), style: { ...style, ...fixedPositionStyles }, ...props, children: cellContent }));
 }

package/dist/src/DisplayTable/DisplayTableHeaderRow/DisplayTableHeaderRow.js

@@ -1,11 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, cloneElement, isValidElement } from 'react';
+import { Children, cloneElement, isValidElement, useMemo, useEffect } from 'react';
 import { displayTableHeaderRowSlotRecipe } from '../../../styled-system/recipes';
 import { DisplayTableHeaderCell } from '../DisplayTableHeaderCell';
 import { cx } from '../../../styled-system/css';
 import { isComponentOrWrapped } from '../../utilities/react/isComponentOrWrapped';
+import { useDisplayTableContext } from '../DisplayTableProvider';
 export function DisplayTableHeaderRow({ children, className, ...props }) {
+    const { setNumberColumns } = useDisplayTableContext();
     const classes = displayTableHeaderRowSlotRecipe();
+    // Count the number of header cells
+    const numberOfColumns = useMemo(() => {
+        const headerCells = Children.toArray(children).filter((child) => isValidElement(child) && isComponentOrWrapped(child, DisplayTableHeaderCell));
+        return headerCells.length;
+    }, [children]);
+    // Update context with the number of columns
+    useEffect(() => {
+        setNumberColumns(numberOfColumns);
+    }, [numberOfColumns, setNumberColumns]);
     return (_jsx("tr", { className: cx(classes.root, 'mfui-DisplayTableHeaderRow__root', className), ...props, children: Children.map(children, (child, index) => {
             if (!isValidElement(child)) {
                 return child;

package/dist/src/DisplayTable/DisplayTableProvider.d.ts

@@ -3,20 +3,24 @@ import { type DisplayTableProps } from './DisplayTable.types';
 /**
  * The props for the `DisplayTableContext` component.
  */
-export type DisplayTableContextProps = Pick<DisplayTableProps, 'fixedHeader' | 'leftFixedColumnIndex' | 'rightFixedColumnIndex'>;
+export type DisplayTableContextProps = Pick<DisplayTableProps, 'fixedHeader' | 'leftFixedColumnIndex' | 'rightFixedColumnIndex' | 'loading'>;
+export type DisplayTableProviderValues = {
+    numberColumns: number;
+    setNumberColumns: (number: number) => void;
+} & DisplayTableContextProps;
 /**
  * The context for the `DisplayTable` component.
  *
  * This should only be used in DisplayTable component.
  */
-export declare const DisplayTableContext: import("react").Context<DisplayTableContextProps>;
+export declare const DisplayTableContext: import("react").Context<DisplayTableProviderValues>;
 /**
  * The hook to use the `DisplayTableContext`.
  */
-export declare const useDisplayTableContext: () => DisplayTableContextProps;
+export declare const useDisplayTableContext: () => DisplayTableProviderValues;
 /**
  * The provider for the `DisplayTableContext`.
  *
  * This should only be used in DisplayTable component.
  */
-export declare function DisplayTableProvider({ children, fixedHeader, leftFixedColumnIndex, rightFixedColumnIndex, }: PropsWithChildren<DisplayTableContextProps>): import("react/jsx-runtime").JSX.Element;
+export declare function DisplayTableProvider({ children, fixedHeader, leftFixedColumnIndex, rightFixedColumnIndex, loading, }: PropsWithChildren<DisplayTableContextProps>): import("react/jsx-runtime").JSX.Element;

package/dist/src/DisplayTable/DisplayTableProvider.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from 'react';
+import { createContext, useContext, useMemo, useState } from 'react';
 /**
  * The context for the `DisplayTable` component.
  *
@@ -10,6 +10,11 @@ export const DisplayTableContext = createContext({
     fixedHeader: false,
     leftFixedColumnIndex: undefined,
     rightFixedColumnIndex: undefined,
+    loading: false,
+    numberColumns: 0,
+    setNumberColumns: () => {
+        // Do nothing
+    },
 });
 /**
  * The hook to use the `DisplayTableContext`.
@@ -20,11 +25,15 @@ export const useDisplayTableContext = () => useContext(DisplayTableContext);
  *
  * This should only be used in DisplayTable component.
  */
-export function DisplayTableProvider({ children, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, }) {
+export function DisplayTableProvider({ children, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, loading = false, }) {
+    const [numberColumns, setNumberColumns] = useState(0);
     const contextValue = useMemo(() => ({
         fixedHeader,
         leftFixedColumnIndex,
         rightFixedColumnIndex,
-    }), [fixedHeader, leftFixedColumnIndex, rightFixedColumnIndex]);
+        loading,
+        numberColumns,
+        setNumberColumns,
+    }), [fixedHeader, leftFixedColumnIndex, rightFixedColumnIndex, loading, numberColumns]);
     return _jsx(DisplayTableContext.Provider, { value: contextValue, children: children });
 }

package/dist/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.d.ts

@@ -12,4 +12,4 @@ import { type DropdownMenuItemProps } from './DropdownMenuItem.types';
  *
  * Otherwise, it will be rendered as a div element.
  */
-export declare function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, 'aria-labelledby': ariaLabelledby, ...rest }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, disabled, 'aria-labelledby': ariaLabelledby, ...rest }: DropdownMenuItemProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.js

@@ -20,7 +20,7 @@ import { useDropdownMenuContext } from '../DropdownMenuContext';
  *
  * Otherwise, it will be rendered as a div element.
  */
-export function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, 'aria-labelledby': ariaLabelledby, ...rest }) {
+export function DropdownMenuItem({ children, className, href, target, customLinkComponent, onClick, disabled, 'aria-labelledby': ariaLabelledby, ...rest }) {
     const classes = dropdownMenuItemSlotRecipe();
     const { closeMenuPopover } = useDropdownMenuContext();
     const id = useId();
@@ -48,11 +48,13 @@ export function DropdownMenuItem({ children, className, href, target, customLink
         }
     }, []);
     const handleClick = useCallback((event) => {
+        if (disabled)
+            return;
         if (onClick) {
             onClick(event);
             closeMenuPopover?.();
         }
-    }, [onClick, closeMenuPopover]);
+    }, [disabled, onClick, closeMenuPopover]);
     const isButton = useMemo(() => onClick && !href, [onClick, href]);
     const Tag = useMemo(() => {
         if (href) {
@@ -66,6 +68,16 @@ export function DropdownMenuItem({ children, className, href, target, customLink
     // If the href is provided, it should be an anchor element and focusable.
     // If the href is undefined and onClick is provided, it should be a button element and focusable.
     // If both are undefined, it should be a div element and not focusable.
-    const isFocusable = !!href || !!onClick;
-    return (_jsx(FocusIndicator, { position: "inside", children: _jsx(Tag, { ...rest, ref: itemRef, ...(ariaLabelledby && { id }), "data-mfui-menu-item": true, role: "menuitem", className: cx(classes.root, 'mfui-DropdownMenuItem__root', className), tabIndex: -1, href: href, target: target, "data-mfui-focusable": isFocusable, type: onClick ? 'button' : undefined, "aria-labelledby": ariaLabelledby ? `${ariaLabelledby} ${id}` : undefined, onKeyDown: handleKeyDown, onClick: isButton ? handleClick : undefined, children: typeof children === 'string' ? _jsx(Typography, { variant: "body", children: children }) : children }) }));
+    // If disabled is true, the menu item is not focusable.
+    const isFocusable = (!!href || !!onClick) && !disabled;
+    // Anchor navigation is suppressed when disabled to prevent unintended navigation.
+    const resolvedHref = isButton || disabled ? undefined : href;
+    // For button elements, use the native disabled attribute for full browser semantics.
+    // For anchor and div elements, use aria-disabled and data-disabled since they have no native disabled support.
+    const disabledProps = isButton
+        ? { disabled }
+        : disabled
+            ? { 'aria-disabled': true, 'data-disabled': '' }
+            : {};
+    return (_jsx(FocusIndicator, { position: "inside", children: _jsx(Tag, { ...rest, ref: itemRef, ...(ariaLabelledby && { id }), "data-mfui-menu-item": true, role: "menuitem", className: cx(classes.root, 'mfui-DropdownMenuItem__root', className), tabIndex: -1, href: resolvedHref, target: target, "data-mfui-focusable": isFocusable, type: onClick ? 'button' : undefined, "aria-labelledby": ariaLabelledby ? `${ariaLabelledby} ${id}` : undefined, ...disabledProps, onKeyDown: handleKeyDown, onClick: isButton ? handleClick : undefined, children: typeof children === 'string' ? _jsx(Typography, { variant: "body", children: children }) : children }) }));
 }

package/dist/src/DropdownMenu/DropdownMenuItem/DropdownMenuItem.types.d.ts

@@ -16,6 +16,10 @@ type AnchorProps = {
      * This property is ignored if the href property is provided.
      */
     onClick?: undefined;
+    /**
+     * When true, the menu item is disabled and not interactive.
+     */
+    disabled?: boolean;
 };
 type DivProps = {
     /**
@@ -34,6 +38,10 @@ type DivProps = {
      * If not provided and the href prop is not provided, the menu item will be rendered as a div element.
      */
     onClick?: undefined;
+    /**
+     * When true, the menu item is disabled and not interactive.
+     */
+    disabled?: boolean;
 };
 type ButtonProps = {
     /**
@@ -52,6 +60,10 @@ type ButtonProps = {
      * The handler to call when the menu item is clicked or the Enter key is pressed.
      */
     onClick?: ComponentPropsWithoutRef<'button'>['onClick'];
+    /**
+     * When true, the menu item is disabled and not interactive.
+     */
+    disabled?: boolean;
 };
 /**
  * The props for the MenuItem component.

package/dist/src/MainNavigation/BaseMainNavigation.js

@@ -37,7 +37,7 @@ export function BaseMainNavigation({ className, featureShortcut, navigationItems
                                 else {
                                     setOpenPopoverIndex(null);
                                 }
-                            } })) : (_jsxs("details", { open: hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-BaseMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-BaseMainNavigation__parentSummary'), children: [_jsx("div", { className: cx(classes.parentSummaryIcon, 'mfui-BaseMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-BaseMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-BaseMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-BaseMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-BaseMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] }))) : (_jsx(Tooltip, { className: cx(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: !isCollapsed, placement: "right", children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-label": isCollapsed ? navigation.label : undefined, "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }), isCollapsed ? null : _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, !isCollapsed && navigation.statusSlot && navigation.locked !== true
+                            } })) : (_jsxs("details", { open: navigation.isOpenByDefault || hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-BaseMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-BaseMainNavigation__parentSummary'), children: [_jsx("div", { className: cx(classes.parentSummaryIcon, 'mfui-BaseMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-BaseMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-BaseMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-BaseMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-BaseMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] }))) : (_jsx(Tooltip, { className: cx(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: !isCollapsed, placement: "right", children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-label": isCollapsed ? navigation.label : undefined, "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }), isCollapsed ? null : _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, !isCollapsed && navigation.statusSlot && navigation.locked !== true
                                                 ? navigation.statusSlot
                                                 : null] }) }) }) })) }, index))) }) }), enableCollapsible ? (_jsx("div", { className: cx(classes.footer, 'mfui-BaseMainNavigation__footer'), children: _jsx(Tooltip, { content: toggleButtonLabel, placement: "right", children: _jsx(ToggleButton, { className: cx(classes.toggleButton, 'mfui-BaseMainNavigation__toggleButton'), iconClassName: cx(classes.toggleButtonIcon, 'mfui-BaseMainNavigation__toggleButtonIcon'), isCollapsed: isCollapsed, "aria-label": toggleButtonLabel, targetId: navId, handleClickToggleButton: handleClickToggleButton }) }) })) : null] }));
 }

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

@@ -81,6 +81,14 @@ type ParentNavigationItem = {
      * This property is not allowed for the parent navigation items.
      */
     isCurrent?: undefined;
+    /**
+     * Whether the nested navigation is open by default.
+     * When set to true, the parent navigation item is expanded on initial render,
+     * regardless of whether any child has `isCurrent: true`.
+     *
+     * @default false
+     */
+    isOpenByDefault?: boolean;
     /**
      * Nested navigation items.
      *

package/dist/src/MainNavigation/NarrowViewportMainNavigation.js

@@ -47,5 +47,5 @@ export const NarrowViewportMainNavigation = forwardRef(({ className, featureShor
     }
     return (_jsx(Portal, { children: _jsxs("div", { ref: dialogRef, role: "dialog", className: cx(classes.root, 'mfui-NarrowViewportMainNavigation__root', className), tabIndex: -1, onKeyDown: handleOnKeyDown, children: [_jsx("div", { "data-mfui-content": "backdrop", className: cx(classes.backdrop, 'mfui-NarrowViewportMainNavigation__backdrop'), onClick: handleCloseMainNavigation }), _jsxs("div", { "data-mfui-content": "inside", className: cx(classes.container, 'mfui-NarrowViewportMainNavigation__container'), onClick: (event) => {
                         event.stopPropagation();
-                    }, children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-NarrowViewportMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-NarrowViewportMainNavigation__featureShortcutAnchor'), onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsx("nav", { className: cx(classes.nav, 'mfui-NarrowViewportMainNavigation__nav'), children: _jsx("ul", { className: cx(classes.list, 'mfui-NarrowViewportMainNavigation__list'), children: navigationItems.map((navigation, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-NarrowViewportMainNavigation__listItem'), children: navigation.children ? (_jsxs("details", { open: hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-NarrowViewportMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-NarrowViewportMainNavigation__parentSummary'), children: [_jsx("div", { className: cx(classes.parentSummaryIcon, 'mfui-NarrowViewportMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-NarrowViewportMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-NarrowViewportMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-NarrowViewportMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] })) : (_jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null] }) }) })) }, index))) }) })] })] }) }));
+                    }, children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-NarrowViewportMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-NarrowViewportMainNavigation__featureShortcutAnchor'), onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsx("nav", { className: cx(classes.nav, 'mfui-NarrowViewportMainNavigation__nav'), children: _jsx("ul", { className: cx(classes.list, 'mfui-NarrowViewportMainNavigation__list'), children: navigationItems.map((navigation, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-NarrowViewportMainNavigation__listItem'), children: navigation.children ? (_jsxs("details", { open: navigation.isOpenByDefault || hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-NarrowViewportMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-NarrowViewportMainNavigation__parentSummary'), children: [_jsx("div", { className: cx(classes.parentSummaryIcon, 'mfui-NarrowViewportMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-NarrowViewportMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-NarrowViewportMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-NarrowViewportMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-NarrowViewportMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-NarrowViewportMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, onClick: handleCloseMainNavigation, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] })) : (_jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-NarrowViewportMainNavigation__listItemAnchor'), "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-NarrowViewportMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-NarrowViewportMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-NarrowViewportMainNavigation__listItemAnchorIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-NarrowViewportMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null] }) }) })) }, index))) }) })] })] }) }));
 });

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, enableAllOptionsControls, enableApplyControls, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, onOpenStateChanged, enableAutoUnmount, onBlur, showGroupOptionDivider, enableVirtualization, virtualizationOptions, }: 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, 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

@@ -1,7 +1,7 @@
 'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useId, useMemo, useRef } from 'react';
-import { CheckboxChecked, CheckboxUnchecked } from '@moneyforward/mfui-icons-react';
+import { CheckboxChecked, CheckboxUnchecked, Error } from '@moneyforward/mfui-icons-react';
 import { FocusIndicator } from '../FocusIndicator';
 import { Typography } from '../Typography';
 import { useFocusTrap } from '../utilities/dom/useFocusTrap';
@@ -13,6 +13,7 @@ import { SearchBox } from '../SearchBox';
 import { Button } from '../Button';
 import { HStack, VStack } from '../Stack';
 import { Skeleton } from '../Skeleton';
+import { ProgressIndicator } from '../ProgressIndicator';
 import { useInitialFocusOnOptionPanelOpen } from './hooks/useInitialFocusOnOptionPanelOpen';
 import { useSelectedValues } from './hooks/useSelectedValues';
 import { useOptionKeyboardNavigation } from './hooks/useOptionKeyboardNavigation';
@@ -23,6 +24,7 @@ import { cx } from '../../styled-system/css';
 import { flattenOptions } from './utils/flattenOptions';
 import { isSelectableOption, isOptionDisabled, isOptionSelected } from './utils/isSelectableOption';
 import { useVirtualizedMultipleSelectBoxOptions } from './hooks/useVirtualizedMultipleSelectBoxOptions';
+import { useInfiniteScroll } from '../utilities/dom/useInfiniteScroll';
 // How many skeleton items to render while the component is loading.
 const SKELETON_ITEM_COUNT = 4;
 /**
@@ -32,12 +34,13 @@ 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, enableAllOptionsControls = false, enableApplyControls = false, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, onOpenStateChanged, enableAutoUnmount = true, onBlur, showGroupOptionDivider, enableVirtualization = false, virtualizationOptions, }) {
+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, }) {
     const classes = multipleSelectBoxSlotRecipe({ showGroupOptionDivider });
     const triggerRef = useRef(null);
     const listBoxId = useId();
     const optionPanelRef = useRef(null);
     const listBoxRef = useRef(null);
+    const scrollWrapperRef = useRef(null);
     const searchInputRef = useRef(null);
     const selectAllButtonRef = useRef(null);
     const clearAllButtonRef = useRef(null);
@@ -71,11 +74,30 @@ placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, val
     // Initialize virtualization
     const { virtualizer, virtualItems, totalSize, isVirtualized } = useVirtualizedMultipleSelectBoxOptions({
         enabled: shouldVirtualize,
-        parentRef: listBoxRef,
+        parentRef: scrollWrapperRef,
         flatOptions: filteredOptions.filter((option) => 'value' in option),
         estimateSize: virtualizationOptions?.estimateSize,
         overscan: virtualizationOptions?.overscan,
     });
+    // Extract infinite scroll configuration with defaults
+    const baseEnabledInfiniteScroll = infiniteScroll?.enabled ?? false;
+    const onLoadMore = infiniteScroll?.onLoadMore;
+    const hasNextPage = infiniteScroll?.hasNextPage ?? true;
+    const hasPreviousPage = infiniteScroll?.hasPreviousPage ?? true;
+    const infiniteScrollThreshold = infiniteScroll?.threshold ?? 100;
+    const infiniteScrollErrorMessage = infiniteScroll?.errorMessage ?? '読み込みに失敗しました';
+    const infiniteScrollRetryButtonText = infiniteScroll?.retryButtonText ?? '再読み込み';
+    // Initialize infinite scroll
+    const { isLoading: isInfiniteScrollLoading, error: infiniteScrollError, handleScroll: handleInfiniteScroll, retryLoad: retryInfiniteScroll, } = useInfiniteScroll({
+        onLoadMore,
+        hasNextPage,
+        hasPreviousPage,
+    }, {
+        enabled: baseEnabledInfiniteScroll,
+        threshold: infiniteScrollThreshold,
+    });
+    // Disable infinite scroll when there's an error
+    const enableInfiniteScroll = baseEnabledInfiniteScroll && !infiniteScrollError;
     const { temporaryValues, updateTemporaryValues, initializeTemporaryValues, handleCancelButtonClick, handleApplyButtonClick, } = useApplyControls({
         onValuesChange: updateSelectedValues,
         closeOptionPanel,
@@ -262,18 +284,46 @@ placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, val
         handleOptionFocus,
         tabbableOptionIndex,
     ]);
+    // Render infinite scroll error message with retry button
+    const renderInfiniteScrollError = useCallback(() => infiniteScrollError ? (_jsxs("li", { className: cx(classes.infiniteScrollError, 'mfui-MultipleSelectBox__infiniteScrollError'), role: "alert", children: [_jsxs("div", { className: cx(classes.infiniteScrollErrorMessage, 'mfui-MultipleSelectBox__infiniteScrollErrorMessage'), "aria-live": "polite", children: [_jsx(Error, { "aria-hidden": true, className: cx(classes.infiniteScrollErrorIcon, 'mfui-MultipleSelectBox__infiniteScrollErrorIcon') }), _jsx(Typography, { variant: "body", children: infiniteScrollErrorMessage })] }), _jsx("div", { className: cx(classes.infiniteScrollErrorButton, 'mfui-MultipleSelectBox__infiniteScrollErrorButton'), children: _jsx(Button, { size: "small", onClick: (event) => {
+                        event.stopPropagation();
+                        retryInfiniteScroll();
+                    }, children: infiniteScrollRetryButtonText }) })] })) : null, [
+        infiniteScrollError,
+        classes.infiniteScrollError,
+        classes.infiniteScrollErrorIcon,
+        classes.infiniteScrollErrorMessage,
+        classes.infiniteScrollErrorButton,
+        retryInfiniteScroll,
+        infiniteScrollErrorMessage,
+        infiniteScrollRetryButtonText,
+    ]);
+    // Render infinite scroll loading indicator
+    const renderInfiniteScrollLoading = useCallback(() => isInfiniteScrollLoading && enableInfiniteScroll ? (_jsx("div", { className: cx(classes.infiniteScrollLoading, 'mfui-MultipleSelectBox__infiniteScrollLoading'), children: _jsx(ProgressIndicator, {}) })) : null, [isInfiniteScrollLoading, enableInfiniteScroll, classes.infiniteScrollLoading]);
     return (_jsx(Popover, { renderTrigger: ({ setTriggerRef, togglePopover, handleTriggerKeyDown, handleTriggerBlur }) => (_jsx(MultipleSelectBoxTrigger, { ref: triggerRef, wrapperRef: setTriggerRef, selectedOptions: localSelectedOptions, id: id, disabled: disabled, triggerProps: triggerProps, triggerWrapperProps: triggerWrapperProps, name: name, 
             // eslint-disable-next-line @typescript-eslint/no-deprecated
-            placeholder: placeholder, size: size, listBoxId: listBoxId, isOptionPanelOpen: isOptionPanelOpen, invalid: invalid, showDisplayValueAsTag: showDisplayValueAsTag, renderDisplayValue: renderDisplayValue, clearButtonProps: clearButtonProps, disableClearButton: disableClearButton, updateSelectedValues: updateSelectedValues, onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur })), contentProps: { className: classes.popover }, minWidth: optionPanelProps?.minWidth, allowedPlacements: optionPanelProps?.allowedPlacements, renderContent: () => (_jsxs("div", { ref: optionPanelRef, className: cx(classes.optionPanel, 'mfui-MultipleSelectBox__optionPanel', optionPanelProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: [enableSearchOptions || enableAllOptionsControls ? (_jsxs(VStack, { className: cx(classes.menuHeader, 'mfui-MultipleSelectBox__menuHeader'), gap: "8px", children: [enableSearchOptions ? (_jsx(SearchBox, { ref: searchInputRef, enableClearButton: true, value: searchText, textBoxSize: "small", autoComplete: "off", onChange: onSearchTextChange, ...searchBoxProps })) : null, enableAllOptionsControls ? (_jsxs(HStack, { justifyContent: "space-between", children: [_jsx(Button, { ref: selectAllButtonRef, size: "small", onClick: handleSelectAll, children: selectAllButtonProps?.label ?? 'すべて選択' }), _jsx(Button, { ref: clearAllButtonRef, size: "small", onClick: handleClearAll, children: clearAllButtonProps?.label ?? 'すべて解除' })] })) : null] })) : null, _jsx("ul", { ref: listBoxRef, role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-MultipleSelectBox__listBox'), tabIndex: -1, style: isVirtualized && totalSize > 0
-                        ? {
-                            height: `${String(totalSize)}px`,
-                            position: 'relative',
-                        }
-                        : undefined, children: loading ? (Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => (_jsx("li", { className: cx(classes.skeletonItem, 'mfui-MultipleSelectBox__skeletonItem'), children: _jsx(Skeleton, {}) }, index)))) : isVirtualized && virtualItems.length > 0 ? (
-                    // Virtualized rendering with group support
-                    renderVirtualizedItems()) : filteredOptions.length > 0 ? (renderNonVirtualizedItems()) : (_jsx("li", { className: cx(classes.emptyMessage, 'mfui-MultipleSelectBox__emptyMessage'), children: _jsx(Typography, { variant: "body", children: enableSearchOptions && searchText && notFoundMessage
-                                ? notFoundMessage
-                                : options.length > 0
-                                    ? notFoundMessage
-                                    : emptyMessage }) })) }), 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 }));
+            placeholder: placeholder, size: size, listBoxId: listBoxId, isOptionPanelOpen: isOptionPanelOpen, invalid: invalid, showDisplayValueAsTag: showDisplayValueAsTag, renderDisplayValue: renderDisplayValue, clearButtonProps: clearButtonProps, disableClearButton: disableClearButton, updateSelectedValues: updateSelectedValues, onClick: togglePopover, onKeyDown: handleTriggerKeyDown, onBlur: handleTriggerBlur })), contentProps: { className: classes.popover }, minWidth: optionPanelProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: optionPanelProps?.allowedPlacements, renderContent: () => (_jsxs("div", { ref: optionPanelRef, className: cx(classes.optionPanel, 'mfui-MultipleSelectBox__optionPanel', optionPanelProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: [enableSearchOptions || enableAllOptionsControls ? (_jsxs(VStack, { className: cx(classes.menuHeader, 'mfui-MultipleSelectBox__menuHeader'), gap: "8px", children: [enableSearchOptions ? (_jsx(SearchBox, { ref: searchInputRef, enableClearButton: true, value: searchText, textBoxSize: "small", autoComplete: "off", onChange: onSearchTextChange, ...searchBoxProps })) : null, enableAllOptionsControls ? (_jsxs(HStack, { justifyContent: "space-between", children: [_jsx(Button, { ref: selectAllButtonRef, size: "small", onClick: handleSelectAll, children: selectAllButtonProps?.label ?? 'すべて選択' }), _jsx(Button, { ref: clearAllButtonRef, size: "small", onClick: handleClearAll, children: clearAllButtonProps?.label ?? 'すべて解除' })] })) : null] })) : null, _jsx("div", { ref: scrollWrapperRef, className: cx(classes.scrollWrapper, 'mfui-MultipleSelectBox__scrollWrapper'), onScroll: enableInfiniteScroll ? handleInfiniteScroll : undefined, children: _jsx("ul", { ref: listBoxRef, role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-MultipleSelectBox__listBox'), tabIndex: -1, style: isVirtualized && totalSize > 0
+                            ? {
+                                height: `${String(totalSize)}px`,
+                                position: 'relative',
+                            }
+                            : undefined, children: loading
+                            ? Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => (_jsx("li", { className: cx(classes.skeletonItem, 'mfui-MultipleSelectBox__skeletonItem'), children: _jsx(Skeleton, {}) }, index)))
+                            : isVirtualized && virtualItems.length > 0
+                                ? // Virtualized rendering with group support
+                                    [...renderVirtualizedItems(), renderInfiniteScrollLoading(), renderInfiniteScrollError()].filter(Boolean)
+                                : filteredOptions.length > 0
+                                    ? [
+                                        ...renderNonVirtualizedItems(),
+                                        renderInfiniteScrollLoading(),
+                                        renderInfiniteScrollError(),
+                                    ].filter(Boolean)
+                                    : [
+                                        _jsx("li", { className: cx(classes.emptyMessage, 'mfui-MultipleSelectBox__emptyMessage'), children: _jsx(Typography, { variant: "body", children: enableSearchOptions && searchText && notFoundMessage
+                                                    ? notFoundMessage
+                                                    : options.length > 0
+                                                        ? 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 }));
 }