@moneyforward/mfui-components 3.1.0 → 3.3.0

package/dist/src/DateTimeSelection/shared/BasePicker/BasePicker.d.ts

@@ -4,4 +4,4 @@ import { type BasePickerProps } from './BasePicker.types';
  * This component uses the composition component of the TextBox component. Please refer to the TextBox documentation for their usage.
  * This component extends the props of TextBox component.
  */
-export declare function BasePicker({ targetDOMNode, enableAutoUnmount, open, onOpenStateChanged, disableAutoOpen, format, baseFormat, customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, calendarLocale, disabled, ...textBoxProps }: BasePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function BasePicker({ targetDOMNode, enableAutoUnmount, open, onOpenStateChanged, disableAutoOpen, format, baseFormat, customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, enableViewportConstraint, calendarLocale, disabled, ...textBoxProps }: BasePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -18,7 +18,7 @@ import { getBasePickerLabel } from './constants';
  * This component uses the composition component of the TextBox component. Please refer to the TextBox documentation for their usage.
  * This component extends the props of TextBox component.
  */
-export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = false, onOpenStateChanged, disableAutoOpen = false, format = 'YYYY/MM/DD', baseFormat = 'YYYY-MM-DD', customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, calendarLocale = 'ja', disabled, ...textBoxProps }) {
+export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = false, onOpenStateChanged, disableAutoOpen = false, format = 'YYYY/MM/DD', baseFormat = 'YYYY-MM-DD', customFormatValue, value, defaultValue, onChange, calendarIconButtonProps, renderPopoverContent, onBlur, allowedPlacements, enableViewportConstraint, calendarLocale = 'ja', disabled, ...textBoxProps }) {
     const textBoxRef = useRef(null);
     const basePickerPopoverWrapperRef = useRef(null);
     const triggerRef = useRef(null);
@@ -83,17 +83,17 @@ 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)
                     inputValueProps.onBlur(event);
                     // Then call the Popover's smart blur detection
                     handleTriggerBlur(event);
-                } })), open: isBasePickerOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, minWidth: "min-content", value: value, defaultValue: defaultValue, baseFormat: baseFormat, renderPopoverContent: renderPopoverContent, textBoxRef: textBoxRef, triggerRef: triggerRef, basePickerPopoverWrapperRef: basePickerPopoverWrapperRef, handleOnKeyDown: handleOnKeyDown, pickerPopoverProps: pickerPopoverProps, allowedPlacements: allowedPlacements, onOpenStateChanged: toggleBasePicker, onBlur: onBlur }) }));
+                } })), open: isBasePickerOpen, targetDOMNode: targetDOMNode, enableAutoUnmount: enableAutoUnmount, minWidth: "min-content", value: value, defaultValue: defaultValue, baseFormat: baseFormat, renderPopoverContent: renderPopoverContent, textBoxRef: textBoxRef, triggerRef: triggerRef, basePickerPopoverWrapperRef: basePickerPopoverWrapperRef, handleOnKeyDown: handleOnKeyDown, pickerPopoverProps: pickerPopoverProps, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, onOpenStateChanged: toggleBasePicker, onBlur: onBlur }) }));
 }
 /**
  * Internal Popover component that needs access to BasePickerContext.
@@ -101,7 +101,7 @@ export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = fal
  * which requires being within a BasePickerProvider. Creating it as an internal
  * component ensures proper context access while keeping the logic encapsulated.
  */
-function InternalPopover({ value, defaultValue, textBoxRef, triggerRef, baseFormat = 'YYYY-MM-DD', renderPopoverContent, basePickerPopoverWrapperRef, handleOnKeyDown, pickerPopoverProps, onOpenStateChanged, allowedPlacements, ...popoverProps }) {
+function InternalPopover({ value, defaultValue, textBoxRef, triggerRef, baseFormat = 'YYYY-MM-DD', renderPopoverContent, basePickerPopoverWrapperRef, handleOnKeyDown, pickerPopoverProps, onOpenStateChanged, allowedPlacements, enableViewportConstraint, ...popoverProps }) {
     // Always call the hook at the top level to ensure consistent hook order
     const { viewingValue, setViewingValue, setPendingFocusDate } = useBasePickerContext();
     const handlePopoverOpen = useCallback((event) => {
@@ -129,7 +129,7 @@ function InternalPopover({ value, defaultValue, textBoxRef, triggerRef, baseForm
         // Set the pending focus date to ensure proper focus after month change
         setPendingFocusDate(formattedDate);
     }, [textBoxRef, triggerRef, value, defaultValue, baseFormat, setViewingValue, setPendingFocusDate]);
-    return (_jsx(Popover, { enableAutomaticPortalTargetResolution: true, enableViewportConstraint: false, enableAutoFocusOnPopover: false, ...popoverProps, renderContent: () => (_jsx("div", { ref: basePickerPopoverWrapperRef, className: "mfui-BasePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: renderPopoverContent({
+    return (_jsx(Popover, { enableAutomaticPortalTargetResolution: true, enableViewportConstraint: enableViewportConstraint ?? false, enableAutoFocusOnPopover: false, ...popoverProps, renderContent: () => (_jsx("div", { ref: basePickerPopoverWrapperRef, className: "mfui-BasePicker__popoverWrapper", onKeyDown: handleOnKeyDown, children: renderPopoverContent({
                 viewingValue,
                 setViewingValue,
                 value: pickerPopoverProps.value,

package/dist/src/DateTimeSelection/shared/BasePicker/BasePicker.types.d.ts

@@ -118,4 +118,4 @@ export type BasePickerProps = {
      * @see https://en.wikipedia.org/wiki/ISO_8601
      */
     baseFormat?: string;
-} & Omit<TextBoxProps, 'value' | 'defaultValue' | 'onChange'> & Pick<PopoverProps, 'allowedPlacements'>;
+} & Omit<TextBoxProps, 'value' | 'defaultValue' | 'onChange'> & Pick<PopoverProps, 'allowedPlacements' | 'enableViewportConstraint'>;

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

@@ -3,4 +3,4 @@ import { type BaseRangePickerProps } from './BaseRangePicker.types';
  * BaseRangePicker component
  * A generic component for selecting a range of dates with configurable format
  */
-export declare function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format, onOpenStateChanged, disableAutoOpen, onBlur, allowedPlacements, enableClearButton, clearButtonProps, minDate, maxDate, enableAutoUnmount, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale, }: BaseRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format, onOpenStateChanged, disableAutoOpen, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton, clearButtonProps, minDate, maxDate, enableAutoUnmount, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale, }: BaseRangePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -9,7 +9,7 @@ import { dayjs } from '../../../utilities/date/dayjs';
 /**
  * Internal component that has access to BaseRangePickerContext
  */
-function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid, format, enableClearButton, clearButtonProps, targetDOMNode, onBlur, isOpen, open, close, onOpenStateChanged, enableAutoUnmount, allowedPlacements, minWidth, renderPopoverContent, startInputProps = {}, endInputProps = {}, calendarLocale = 'ja', }) {
+function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid, format, enableClearButton, clearButtonProps, targetDOMNode, onBlur, isOpen, open, close, onOpenStateChanged, enableAutoUnmount, allowedPlacements, enableViewportConstraint, minWidth, renderPopoverContent, startInputProps = {}, endInputProps = {}, calendarLocale = 'ja', }) {
     const { setPendingFocusDate, temporaryStart, temporaryEnd, viewingMonth, setViewingMonth } = useBaseRangePickerContext();
     // Custom onOpen handler to prevent auto-focus when clicking on input elements
     // and implement smart focus management for calendar dates
@@ -49,7 +49,7 @@ function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid
         setPendingFocusDate(formattedDate);
         open();
     }, [startInputRef, endInputRef, temporaryStart, temporaryEnd, setPendingFocusDate, open, format]);
-    return (_jsx(Popover, { enableAutomaticPortalTargetResolution: true, open: isOpen, allowedPlacements: allowedPlacements, minWidth: minWidth, renderTrigger: ({ setTriggerRef, handleTriggerBlur, handleTriggerKeyDown, openPopover }) => (_jsx(BaseRangePickerTrigger, { ref: setTriggerRef, disabled: disabled, invalid: invalid, format: format, enableClearValue: enableClearButton, clearButtonProps: clearButtonProps, startInputRef: startInputRef, endInputRef: endInputRef, startInputProps: startInputProps, endInputProps: endInputProps, popoverOpenFunction: openPopover, calendarLocale: calendarLocale, onBlur: handleTriggerBlur, onKeyDown: handleTriggerKeyDown })), renderContent: () => renderPopoverContent({
+    return (_jsx(Popover, { enableAutomaticPortalTargetResolution: true, open: isOpen, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, minWidth: minWidth, renderTrigger: ({ setTriggerRef, handleTriggerBlur, handleTriggerKeyDown, openPopover }) => (_jsx(BaseRangePickerTrigger, { ref: setTriggerRef, disabled: disabled, invalid: invalid, format: format, enableClearValue: enableClearButton, clearButtonProps: clearButtonProps, startInputRef: startInputRef, endInputRef: endInputRef, startInputProps: startInputProps, endInputProps: endInputProps, popoverOpenFunction: openPopover, calendarLocale: calendarLocale, onBlur: handleTriggerBlur, onKeyDown: handleTriggerKeyDown })), renderContent: () => renderPopoverContent({
             viewingValue: viewingMonth,
             setViewingValue: setViewingMonth,
             value: [temporaryStart, temporaryEnd],
@@ -61,12 +61,12 @@ function InternalBaseRangePicker({ startInputRef, endInputRef, disabled, invalid
  * BaseRangePicker component
  * A generic component for selecting a range of dates with configurable format
  */
-export function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format = 'YYYY/MM/DD', onOpenStateChanged, disableAutoOpen = false, onBlur, allowedPlacements, enableClearButton = false, clearButtonProps, minDate, maxDate, enableAutoUnmount = true, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale = 'ja', }) {
+export function BaseRangePicker({ value, defaultValue, disabled, invalid, targetDOMNode, onChange, format = 'YYYY/MM/DD', onOpenStateChanged, disableAutoOpen = false, onBlur, allowedPlacements, enableViewportConstraint, enableClearButton = false, clearButtonProps, minDate, maxDate, enableAutoUnmount = true, minWidth, renderPopoverContent, startInputProps, endInputProps, calendarLocale = 'ja', }) {
     const { isOpen, open, close } = useDisclosure({ value: false });
     const startInputRef = useRef(null);
     const endInputRef = useRef(null);
     // Default renderPopoverContent implementation for backward compatibility
     const defaultRenderPopoverContent = useCallback(() => _jsx(BaseRangePickerPopover, { calendarLocale: calendarLocale }), [calendarLocale]);
     const finalRenderPopoverContent = renderPopoverContent ?? defaultRenderPopoverContent;
-    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isOpen, open: open, close: close, disableAutoOpen: disableAutoOpen, minDate: minDate, maxDate: maxDate, onChange: onChange, children: _jsx(InternalBaseRangePicker, { startInputRef: startInputRef, endInputRef: endInputRef, disabled: disabled, invalid: invalid, format: format, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, allowedPlacements: allowedPlacements, enableAutoUnmount: enableAutoUnmount, minWidth: minWidth, startInputProps: startInputProps, endInputProps: endInputProps, isOpen: isOpen, open: open, close: close, renderPopoverContent: finalRenderPopoverContent, calendarLocale: calendarLocale, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }) }));
+    return (_jsx(BaseRangePickerProvider, { value: value, defaultValue: defaultValue, disabled: disabled, format: format, isOpen: isOpen, open: open, close: close, disableAutoOpen: disableAutoOpen, minDate: minDate, maxDate: maxDate, onChange: onChange, children: _jsx(InternalBaseRangePicker, { startInputRef: startInputRef, endInputRef: endInputRef, disabled: disabled, invalid: invalid, format: format, enableClearButton: enableClearButton, clearButtonProps: clearButtonProps, targetDOMNode: targetDOMNode, allowedPlacements: allowedPlacements, enableViewportConstraint: enableViewportConstraint, enableAutoUnmount: enableAutoUnmount, minWidth: minWidth, startInputProps: startInputProps, endInputProps: endInputProps, isOpen: isOpen, open: open, close: close, renderPopoverContent: finalRenderPopoverContent, calendarLocale: calendarLocale, onBlur: onBlur, onOpenStateChanged: onOpenStateChanged }) }));
 }

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

@@ -128,6 +128,14 @@ export type BaseRangePickerProps = {
      * ```
      */
     allowedPlacements?: PopoverProps['allowedPlacements'];
+    /**
+     * Whether to enable viewport constraint for the popover.
+     * When true, the popover will be constrained within the visible viewport and a maxHeight is applied.
+     * Set to true when the picker is inside a constrained container like SidePane.
+     *
+     * @default true
+     */
+    enableViewportConstraint?: PopoverProps['enableViewportConstraint'];
     /**
      * Whether to enable the clear button functionality.
      * When enabled, a clear button will appear when there are values in the date inputs.

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/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 }));
 }

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

@@ -3,8 +3,61 @@ import { type VirtualizerOptions } from '@tanstack/react-virtual';
 import { type SearchBoxProps } from '../SearchBox';
 import { type MultipleSelectBoxTriggerProps, type PassedProps } from './MultipleSelectBoxTrigger/MultipleSelectBoxTrigger.types';
 import { type PopoverProps } from '../Popover';
+import { type InfiniteScrollDirection } from '../utilities/dom/useInfiniteScroll';
 export type AllowedValueTypes = string | number | undefined;
 export type VirtualOptionTypes = Pick<VirtualizerOptions<HTMLElement, Element>, 'estimateSize' | 'overscan'>;
+export type InfiniteScrollConfig = {
+    /**
+     * Enable infinite scroll functionality.
+     * When enabled, additional options can be loaded dynamically when scrolling.
+     *
+     * @default false
+     */
+    enabled?: boolean;
+    /**
+     * Callback executed when more options need to be loaded.
+     * Called when user scrolls near the top or bottom of the options list.
+     *
+     * @param direction - The direction of loading ('forward' for bottom, 'backward' for top)
+     */
+    onLoadMore?: (direction: InfiniteScrollDirection) => Promise<void>;
+    /**
+     * Whether there are more options available to load in the forward direction (bottom).
+     * Used to determine if infinite scroll should trigger when scrolling down.
+     *
+     * @default true
+     */
+    hasNextPage?: boolean;
+    /**
+     * Whether there are more options available to load in the backward direction (top).
+     * Used to determine if infinite scroll should trigger when scrolling up.
+     *
+     * @default true
+     */
+    hasPreviousPage?: boolean;
+    /**
+     * The scroll threshold in pixels for triggering infinite scroll.
+     * When the scroll position is within this distance from the top or bottom,
+     * the onLoadMore callback will be triggered.
+     *
+     * @default 100
+     */
+    threshold?: number;
+    /**
+     * The error message to display when loading fails.
+     * This message supports internationalization.
+     *
+     * @default "読み込みに失敗しました"
+     */
+    errorMessage?: string;
+    /**
+     * The text for the retry button when loading fails.
+     * This message supports internationalization.
+     *
+     * @default "再読み込み"
+     */
+    retryButtonText?: string;
+};
 export type MultipleSelectBoxOption<T extends AllowedValueTypes = string, AdditionalProps extends Record<string, unknown> = Record<string, never>> = ({
     /**
      * The label to be displayed in the list.
@@ -253,6 +306,14 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
         minWidth?: PopoverProps['minWidth'];
         allowedPlacements?: PopoverProps['allowedPlacements'];
     };
+    /**
+     * The properties for the popover wrapper element.
+     *
+     * @property maxHeight - The maximum height of the popover wrapper element.
+     */
+    popoverWrapperProps?: {
+        maxHeight?: PopoverProps['maxHeight'];
+    };
     /**
      * Flag to indicate loading state of the options.
      * When true, the MultipleSelectBox will display skeleton placeholders
@@ -334,4 +395,29 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
      * ```
      */
     virtualizationOptions?: VirtualOptionTypes;
+    /**
+     * Configuration for infinite scroll behavior.
+     * Allows loading additional options dynamically when scrolling.
+     *
+     * @example
+     * ```tsx
+     * <MultipleSelectBox
+     *   infiniteScroll={{
+     *     enabled: true,
+     *     onLoadMore: async (direction) => {
+     *       // Load more options from API
+     *       const newOptions = await fetchOptions(direction);
+     *       setOptions(prev => direction === 'forward' ?
+     *         [...prev, ...newOptions] :
+     *         [...newOptions, ...prev]
+     *       );
+     *     },
+     *     hasNextPage: true,
+     *     threshold: 100
+     *   }}
+     * />
+     * ```
+     */
+    infiniteScroll?: InfiniteScrollConfig;
 } & Pick<MultipleSelectBoxTriggerProps<T, AdditionalProps>, keyof PassedProps<T, AdditionalProps>>;
+export { type InfiniteScrollDirection } from '../utilities/dom/useInfiniteScroll';