@moneyforward/mfui-components 3.1.0 → 3.2.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);
@@ -93,7 +93,7 @@ export function BasePicker({ targetDOMNode, enableAutoUnmount = true, open = fal
                     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/SelectBox/SelectBox.js

@@ -1,12 +1,14 @@
 'use client';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
-import { Dropdown as DropdownIcon } from '@moneyforward/mfui-icons-react';
+import { Dropdown as DropdownIcon, Error } from '@moneyforward/mfui-icons-react';
 import { ClearButton } from '../shared/ClearButton';
 import { FocusIndicator } from '../FocusIndicator';
 import { selectBoxSlotRecipe } from '../../styled-system/recipes';
 import { Typography } from '../Typography';
 import { SearchBox } from '../SearchBox';
+import { Button } from '../Button';
+import { ProgressIndicator } from '../ProgressIndicator';
 import { useSearchBox } from './hooks/useSearchBox';
 import { Skeleton } from '../Skeleton';
 import { useFocusTrap } from '../utilities/dom/useFocusTrap';
@@ -22,6 +24,7 @@ import { SelectBoxOptionComponent } from './SelectBoxOption';
 import { SelectBoxOptionGroup } from './SelectBoxOptionGroup';
 import { isOptionDisabled } from './utils/isSelectableOption';
 import { useVirtualizedOptions } from './hooks/useVirtualizedOptions';
+import { useInfiniteScroll } from './hooks/useInfiniteScroll';
 const DEFAULT_SCROLL_OPTIONS = {
     behavior: 'auto',
     block: 'center',
@@ -35,7 +38,7 @@ const SKELETON_ITEM_COUNT = 4;
 export const SelectBox = forwardRef((props, ref) => {
     const { id, triggerProps, clearButtonProps, enableClearButton = false, size, options = [], defaultValue, 
     // eslint-disable-next-line @typescript-eslint/no-deprecated
-    placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, onBlur, value, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, renderDisplayValue, renderOption, renderPopoverContent, enableAutoScrollToSelectedOption, popoverContentProps, popoverWrapperProps, onOpenStateChanged, showGroupOptionDivider, triggerWrapperProps, enableAutoUnmount = true, enableConstrainedPopoverWidth = false, enableVirtualization = false, virtualizationOptions, } = props;
+    placeholder, emptyMessage, disabled, invalid, targetDOMNode, name, onChange, onBlur, value, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, renderDisplayValue, renderOption, renderPopoverContent, enableAutoScrollToSelectedOption, popoverContentProps, popoverWrapperProps, onOpenStateChanged, showGroupOptionDivider, triggerWrapperProps, enableAutoUnmount = true, enableConstrainedPopoverWidth = false, enableVirtualization = false, virtualizationOptions, infiniteScroll, } = props;
     const classes = selectBoxSlotRecipe({ size, showGroupOptionDivider });
     const triggerRef = useRef(null);
     const listBoxId = useId();
@@ -117,6 +120,25 @@ export const SelectBox = forwardRef((props, ref) => {
         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 handleSelectOption = useCallback((option) => {
         if (isOptionDisabled(option))
             return;
@@ -266,7 +288,23 @@ export const SelectBox = forwardRef((props, ref) => {
                 : options.length > 0
                     ? notFoundMessage
                     : emptyMessage }) })), [classes.emptyMessage, enableSearchOptions, searchText, notFoundMessage, options.length, emptyMessage]);
-    const optionsNode = (_jsx("div", { ref: scrollWrapperRef, className: cx(classes.scrollWrapper, 'mfui-SelectBox__scrollWrapper'), children: _jsx("ul", { role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-SelectBox__listBox'), tabIndex: -1, style: isVirtualized
+    // Render infinite scroll error message with retry button
+    const renderInfiniteScrollError = useCallback(() => infiniteScrollError ? (_jsxs("li", { className: cx(classes.infiniteScrollError, 'mfui-SelectBox__infiniteScrollError'), role: "alert", children: [_jsxs("div", { className: cx(classes.infiniteScrollErrorMessage, 'mfui-SelectBox__infiniteScrollErrorMessage'), "aria-live": "polite", children: [_jsx(Error, { "aria-hidden": true, className: cx(classes.infiniteScrollErrorIcon, 'mfui-SelectBox__infiniteScrollErrorIcon') }), _jsx(Typography, { variant: "body", children: infiniteScrollErrorMessage })] }), _jsx("div", { className: cx(classes.infiniteScrollErrorButton, 'mfui-SelectBox__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-SelectBox__infiniteScrollLoading'), children: _jsx(ProgressIndicator, {}) })) : null, [isInfiniteScrollLoading, enableInfiniteScroll, classes.infiniteScrollLoading]);
+    const optionsNode = (_jsx("div", { ref: scrollWrapperRef, className: cx(classes.scrollWrapper, 'mfui-SelectBox__scrollWrapper'), onScroll: enableInfiniteScroll ? handleInfiniteScroll : undefined, children: _jsx("ul", { role: "listbox", id: listBoxId, className: cx(classes.listBox, 'mfui-SelectBox__listBox'), tabIndex: -1, style: isVirtualized
                 ? {
                     height: `${String(totalSize)}px`,
                     position: 'relative',
@@ -275,10 +313,10 @@ export const SelectBox = forwardRef((props, ref) => {
                 ? Array.from({ length: SKELETON_ITEM_COUNT }).map((_, index) => (_jsx("li", { className: cx(classes.skeletonItem, 'mfui-SelectBox__skeletonItem'), children: _jsx(Skeleton, {}) }, index)))
                 : isVirtualized && virtualItems.length > 0
                     ? // Virtualized rendering with group support
-                        renderVirtualizedItems()
+                        [...renderVirtualizedItems(), renderInfiniteScrollLoading(), renderInfiniteScrollError()].filter(Boolean)
                     : filteredOptions.length > 0
-                        ? renderNonVirtualizedItems()
-                        : renderEmptyMessage() }) }));
+                        ? [...renderNonVirtualizedItems(), renderInfiniteScrollLoading(), renderInfiniteScrollError()].filter(Boolean)
+                        : [renderEmptyMessage(), renderInfiniteScrollError()].filter(Boolean) }) }));
     const handleClearValue = () => {
         setLocalSelectedOption(null);
         onChange?.(null);
@@ -290,7 +328,7 @@ export const SelectBox = forwardRef((props, ref) => {
     return (_jsx(Popover, { open: isOptionPanelOpen, targetDOMNode: targetDOMNode, minWidth: popoverContentProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: popoverContentProps?.allowedPlacements, enableConstrainedContentWidth: enableConstrainedPopoverWidth, renderContent: () => (_jsx("div", { ref: optionPanelRef, id: listBoxId, className: cx(classes.optionPanel, 'mfui-SelectBox__optionPanel', popoverContentProps?.className), tabIndex: -1, onKeyDown: handleKeyDownMenu, children: renderPopoverContent ? (renderPopoverContent({ searchNode, optionsNode })) : (_jsxs(_Fragment, { children: [searchNode, optionsNode] })) })), renderTrigger: ({ setTriggerRef, togglePopover, isPopoverOpen, handleTriggerKeyDown, handleTriggerBlur }) => (_jsxs("div", { ref: setTriggerRef, ...triggerWrapperProps, className: cx(classes.triggerWrapper, 'mfui-SelectBox__triggerWrapper', triggerWrapperProps?.className), children: [_jsx(FocusIndicator, { children: _jsxs("button", { ref: triggerRef, id: id, type: "button", role: "combobox", disabled: disabled, "aria-label": triggerProps?.['aria-label'], "aria-controls": listBoxId, "aria-expanded": isPopoverOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, className: cx(classes.trigger, 'mfui-SelectBox__trigger', triggerProps?.className), "data-placeholder": !!placeholder && !localSelectedOption, "data-selected": !!localSelectedOption, "data-mfui-has-clear-button": showClearButton, onClick: togglePopover, onKeyDown: (event) => {
                             handleTypeAhead(event.nativeEvent);
                             handleTriggerKeyDown(event);
-                        }, onBlur: handleTriggerBlur, children: [_jsx("span", { "data-mfui-content": "select-box-trigger-display-value", children: renderTriggerLabel() }), _jsx(DropdownIcon, {}), _jsx("input", { ref: ref, type: "hidden", value: localSelectedOption?.value ?? '', name: name, disabled: disabled })] }) }), showClearButton ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-SelectBox__clearButtonWrapper'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "select-box-clear-button", onClick: (event) => {
+                        }, onBlur: handleTriggerBlur, children: [_jsx("span", { "data-mfui-content": "select-box-trigger-display-value", children: renderTriggerLabel() }), _jsx(DropdownIcon, {}), _jsx("input", { ref: ref, type: "hidden", value: localSelectedOption?.value ?? '', name: name, disabled: disabled })] }) }), showClearButton ? (_jsx("div", { className: cx(classes.clearButtonWrapper, 'mfui-SelectBox__clearButtonWrapper'), children: _jsx(ClearButton, { size: size === 'small' ? 'small' : size === 'large' ? 'large' : 'default', "aria-label": clearButtonProps?.['aria-label'] ?? '値をクリアする', "data-mfui-content": "select-box-clear-button", onClick: (event) => {
                             event.stopPropagation();
                             handleClearValue();
                         } }) })) : null] })), contentProps: { className: classes.popover }, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: toggleOptionPanel, onBlur: onBlur }));

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

@@ -3,8 +3,61 @@ import { type VirtualizerOptions } from '@tanstack/react-virtual';
 import { type SelectBoxSlotRecipeVariant } from '../../styled-system/recipes';
 import { type SearchBoxProps } from '../SearchBox';
 import { type PopoverProps } from '../Popover';
+import { type InfiniteScrollDirection } from './hooks/useInfiniteScroll';
 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 "Failed to load data"
+     */
+    errorMessage?: string;
+    /**
+     * The text for the retry button when loading fails.
+     * This message supports internationalization.
+     *
+     * @default "Retry"
+     */
+    retryButtonText?: string;
+};
 export type BasedAdditionalProps = Record<string, unknown>;
 export type SelectBoxOption<T extends AllowedValueTypes = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps> = ({
     /**
@@ -351,5 +404,31 @@ export type SelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps
      * ```
      */
     virtualizationOptions?: VirtualOptionTypes;
+    /**
+     * Infinite scroll configuration.
+     * When provided, enables infinite scroll functionality for loading additional options dynamically.
+     *
+     * @example
+     * ```tsx
+     * <SelectBox
+     *   infiniteScroll={{
+     *     enabled: true,
+     *     onLoadMore: async (direction) => {
+     *       if (direction === 'forward') {
+     *         const nextOptions = await loadNextPage();
+     *         setOptions(prev => [...prev, ...nextOptions]);
+     *       } else {
+     *         const prevOptions = await loadPreviousPage();
+     *         setOptions(prev => [...prevOptions, ...prev]);
+     *       }
+     *     },
+     *     hasNextPage: hasMore,
+     *     hasPreviousPage: hasPrevious,
+     *     threshold: 50 // Trigger when within 50px of edges
+     *   }}
+     * />
+     * ```
+     */
+    infiniteScroll?: InfiniteScrollConfig;
 };
-export {};
+export { type InfiniteScrollDirection } from './hooks/useInfiniteScroll';

package/dist/src/SelectBox/hooks/useInfiniteScroll.d.ts

@@ -0,0 +1,22 @@
+export type InfiniteScrollDirection = 'forward' | 'backward';
+export type InfiniteScrollCallbacks = {
+    onLoadMore?: (direction: InfiniteScrollDirection) => Promise<void>;
+    hasNextPage?: boolean;
+    hasPreviousPage?: boolean;
+};
+export type InfiniteScrollError = {
+    direction: InfiniteScrollDirection;
+    error: Error;
+};
+export type UseInfiniteScrollOptions = {
+    enabled?: boolean;
+    threshold?: number;
+};
+export type UseInfiniteScrollReturn = {
+    isLoading: boolean;
+    error: InfiniteScrollError | null;
+    handleScroll: (event: React.UIEvent<HTMLElement>) => void;
+    retryLoad: () => void;
+    clearError: () => void;
+};
+export declare const useInfiniteScroll: (callbacks: InfiniteScrollCallbacks, options?: UseInfiniteScrollOptions) => UseInfiniteScrollReturn;

package/dist/src/SelectBox/hooks/useInfiniteScroll.js

@@ -0,0 +1,65 @@
+import { useCallback, useRef, useState } from 'react';
+export const useInfiniteScroll = (callbacks, options = {}) => {
+    const { enabled = true, threshold = 100 } = options;
+    const { onLoadMore, hasNextPage = true, hasPreviousPage = true } = callbacks;
+    const [isLoading, setIsLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const isLoadingRef = useRef(false);
+    const executeLoad = useCallback(async (direction, forceLoad = false) => {
+        if ((!enabled && !forceLoad) || !onLoadMore || isLoadingRef.current)
+            return;
+        if (direction === 'forward' && !hasNextPage)
+            return;
+        if (direction === 'backward' && !hasPreviousPage)
+            return;
+        try {
+            isLoadingRef.current = true;
+            setIsLoading(true);
+            setError(null);
+            await onLoadMore(direction);
+        }
+        catch (error_) {
+            const errorObject = error_ instanceof Error ? error_ : new Error('Unknown error');
+            setError({ direction, error: errorObject });
+        }
+        finally {
+            isLoadingRef.current = false;
+            setIsLoading(false);
+        }
+    }, [enabled, onLoadMore, hasNextPage, hasPreviousPage]);
+    const handleScroll = useCallback((event) => {
+        if (!enabled || isLoadingRef.current)
+            return;
+        const target = event.currentTarget;
+        const { scrollTop, scrollHeight, clientHeight } = target;
+        const nearTop = scrollTop <= threshold;
+        const nearBottom = scrollTop + clientHeight >= scrollHeight - threshold;
+        if (nearBottom && hasNextPage) {
+            executeLoad('forward').catch(() => {
+                // Error handling is done within executeLoad
+            });
+        }
+        else if (nearTop && hasPreviousPage) {
+            executeLoad('backward').catch(() => {
+                // Error handling is done within executeLoad
+            });
+        }
+    }, [enabled, threshold, hasNextPage, hasPreviousPage, executeLoad]);
+    const retryLoad = useCallback(() => {
+        if (error) {
+            executeLoad(error.direction, true).catch(() => {
+                // Error handling is done within executeLoad
+            });
+        }
+    }, [error, executeLoad]);
+    const clearError = useCallback(() => {
+        setError(null);
+    }, []);
+    return {
+        isLoading,
+        error,
+        handleScroll,
+        retryLoad,
+        clearError,
+    };
+};

package/dist/src/ToggleSwitch/ToggleSwitch.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The general-purpose ToggleSwitch component.
+ * This component provides a switch to toggle between ON and OFF states.
+ *
+ * This component extends the props of `<input type="checkbox">` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
+ */
+export declare const ToggleSwitch: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/src/ToggleSwitch/ToggleSwitch.js

@@ -0,0 +1,32 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useState } from 'react';
+import { cx } from '../../styled-system/css';
+import { toggleSwitchSlotRecipe } from '../../styled-system/recipes';
+import { FocusIndicator } from '../FocusIndicator/FocusIndicator';
+/**
+ * The general-purpose ToggleSwitch component.
+ * This component provides a switch to toggle between ON and OFF states.
+ *
+ * This component extends the props of `<input type="checkbox">` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
+ */
+export const ToggleSwitch = forwardRef(({ className, checked, defaultChecked, disabled, onChange, ...props }, ref) => {
+    const [localChecked, setLocalChecked] = useState(!!defaultChecked);
+    const isControlled = checked !== undefined;
+    const classes = toggleSwitchSlotRecipe();
+    const isChecked = isControlled ? checked : localChecked;
+    return (_jsx(FocusIndicator, { children: _jsxs("span", { className: cx(classes.root, 'mfui-ToggleSwitch__root', className), children: [_jsx("span", { className: cx(classes.handle, 'mfui-ToggleSwitch__handle'), "data-mfui-content": "toggle-handle" }), _jsx("input", { ref: ref, type: "checkbox", role: "switch", checked: isChecked, disabled: disabled, className: cx(classes.input, 'mfui-ToggleSwitch__input'), "data-mfui-content": "toggle-input", onChange: (event) => {
+                        onChange?.(event);
+                        // If the event is defaultPrevented in "onChange" prop via "e.preventDefault()", do not update local
+                        // states.
+                        if (event.defaultPrevented) {
+                            return;
+                        }
+                        if (!isControlled) {
+                            setLocalChecked(event.target.checked);
+                        }
+                    }, ...props })] }) }));
+});
+ToggleSwitch.displayName = 'ToggleSwitch';

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

@@ -0,0 +1,6 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * ToggleSwitch component props.
+ * Extends the standard HTML input checkbox element props.
+ */
+export type ToggleSwitchProps = ComponentPropsWithoutRef<'input'>;

package/dist/src/ToggleSwitch/ToggleSwitch.types.js

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

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

@@ -0,0 +1,2 @@
+export * from './ToggleSwitch';
+export * from './ToggleSwitch.types';

package/dist/src/ToggleSwitch/index.js

@@ -0,0 +1,2 @@
+export * from './ToggleSwitch';
+export * from './ToggleSwitch.types';

package/dist/src/index.d.ts

@@ -21,6 +21,7 @@ export * from './MainNavigation';
 export * from './SelectBox';
 export * from './SidePane';
 export * from './Toast';
+export * from './ToggleSwitch';
 export * from './Pagination';
 export * from './Tag';
 export * from './ProgressIndicator';

package/dist/src/index.js

@@ -21,6 +21,7 @@ export * from './MainNavigation';
 export * from './SelectBox';
 export * from './SidePane';
 export * from './Toast';
+export * from './ToggleSwitch';
 export * from './Pagination';
 export * from './Tag';
 export * from './ProgressIndicator';

package/dist/src/utilities/dom/useFixedColumns.js

@@ -37,19 +37,45 @@ export const useFixedColumns = ({ enableRowSelection = false, columnIndex, leftF
         if (!cellRef.current)
             return;
         const cell = cellRef.current;
+        const row = cell.closest('tr');
         const table = cell.closest('table');
-        if (!table)
+        if (!row || !table)
             return;
-        const tableRect = table.getBoundingClientRect();
-        const cellRect = cell.getBoundingClientRect();
-        // Calculate distance from left edge
-        const leftPosition = cellRect.left - tableRect.left;
-        // Calculate distance from right edge
-        const rightPosition = tableRect.right - cellRect.right;
-        setCellRect({
-            left: leftPosition,
-            right: rightPosition,
+        const calculatePosition = () => {
+            const cells = [...row.querySelectorAll('th, td')];
+            const cellIndex = cells.indexOf(cell);
+            if (cellIndex === -1)
+                return;
+            // Calculate left position by summing widths of previous cells
+            let leftPosition = 0;
+            for (let i = 0; i < cellIndex; i++) {
+                const cellElement = cells[i];
+                if (cellElement) {
+                    leftPosition += cellElement.offsetWidth;
+                }
+            }
+            // Calculate right position by summing widths of following cells
+            let rightPosition = 0;
+            for (let i = cellIndex + 1; i < cells.length; i++) {
+                const cellElement = cells[i];
+                if (cellElement) {
+                    rightPosition += cellElement.offsetWidth;
+                }
+            }
+            setCellRect({
+                left: leftPosition,
+                right: rightPosition,
+            });
+        };
+        calculatePosition();
+        // Recalculate on table resize (e.g., when content changes after sorting)
+        const resizeObserver = new ResizeObserver(() => {
+            calculatePosition();
         });
+        resizeObserver.observe(table);
+        return () => {
+            resizeObserver.disconnect();
+        };
     }, []);
     useLayoutEffect(() => {
         if (isCheckboxColumn && leftFixedColumnIndex !== undefined) {

package/dist/styled-system/css/conditions.js

@@ -1,5 +1,5 @@
 import { withoutSpace } from '../helpers.js';
-const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_notDisabled,_notFocused,_focusable,_focusInputInside,_hasCheckboxInside,_hasDisabledCheckboxInside,_hasFocusedCheckboxInside,_hasFocusedCheckedCheckboxInside,_hasCheckedCheckboxInside,_hasRadioButtonInside,_hasFocusedRadioButtonInside,_hasFocusedCheckedRadioButtonInside,_hasDisabledRadioButtonInside,_hasCheckedRadioButtonInside,sm,smOnly,smDown,lg,lgOnly,lgDown,smToLg,base";
+const conditionsStr = "_hover,_focus,_focusWithin,_focusVisible,_disabled,_active,_visited,_target,_readOnly,_readWrite,_empty,_checked,_enabled,_expanded,_highlighted,_complete,_incomplete,_dragging,_before,_after,_firstLetter,_firstLine,_marker,_selection,_file,_backdrop,_first,_last,_only,_even,_odd,_firstOfType,_lastOfType,_onlyOfType,_peerFocus,_peerHover,_peerActive,_peerFocusWithin,_peerFocusVisible,_peerDisabled,_peerChecked,_peerInvalid,_peerExpanded,_peerPlaceholderShown,_groupFocus,_groupHover,_groupActive,_groupFocusWithin,_groupFocusVisible,_groupDisabled,_groupChecked,_groupExpanded,_groupInvalid,_indeterminate,_required,_valid,_invalid,_autofill,_inRange,_outOfRange,_placeholder,_placeholderShown,_pressed,_selected,_grabbed,_underValue,_overValue,_atValue,_default,_optional,_open,_closed,_fullscreen,_loading,_hidden,_current,_currentPage,_currentStep,_today,_unavailable,_rangeStart,_rangeEnd,_now,_topmost,_motionReduce,_motionSafe,_print,_landscape,_portrait,_dark,_light,_osDark,_osLight,_highContrast,_lessContrast,_moreContrast,_ltr,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_horizontal,_vertical,_icon,_starting,_noscript,_invertedColors,_notDisabled,_notFocused,_focusable,_focusInputInside,_hasCheckboxInside,_hasDisabledCheckboxInside,_hasFocusedCheckboxInside,_hasFocusedCheckedCheckboxInside,_hasCheckedCheckboxInside,_hasRadioButtonInside,_hasFocusedRadioButtonInside,_hasFocusedCheckedRadioButtonInside,_hasDisabledRadioButtonInside,_hasCheckedRadioButtonInside,_hasToggleSwitchInside,_hasFocusedToggleSwitchInside,_hasFocusedCheckedToggleSwitchInside,_hasDisabledToggleSwitchInside,_hasCheckedToggleSwitchInside,sm,smOnly,smDown,lg,lgOnly,lgDown,smToLg,base";
 const conditions = new Set(conditionsStr.split(','));
 const conditionRegex = /^@|&|&$/;
 export function isCondition(value) {