@moneyforward/mfui-components 4.7.0 → 4.8.0

package/dist/src/DataTable/shared/commonStyles.js

@@ -0,0 +1,11 @@
+/**
+ * The width of the selection checkbox column.
+ *
+ * The checkbox cell is always the table's start-edge cell, so its border-box has to hold the
+ * start-edge padding from `_first` as well as the inner cell's padding around the checkbox.
+ * Otherwise the checkbox overflows into the next column under `table-layout: fixed`.
+ *
+ * The header cell, the body cell and the `<col>` that `DataTable` renders for column virtualization
+ * all take the width from here, so that they cannot disagree.
+ */
+export const SELECTION_COLUMN_WIDTH = '[calc({sizes.mfui.size.dimension.icon.square.comfort} + {spacing.mfui.size.padding.data-table-cell.horizontal.comfort} * 2 + {spacing.mfui.size.padding.container.horizontal.comfort})]';

package/dist/src/DataTable/utils/renderVirtualizedColumns.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from 'react';
+import { type DataTableColumnWindow } from '../hooks/useVirtualizedColumns';
+type RenderVirtualizedColumnsParams = {
+    /**
+     * The cells of the row, flattened, without the selection checkbox cell the row renders itself.
+     */
+    cells: ReactNode[];
+    /**
+     * The grid column of the first cell, which is 1 when the row renders a selection checkbox cell.
+     */
+    columnOffset: number;
+    /**
+     * The columns to mount, or `null` to mount every cell.
+     */
+    columnWindow: DataTableColumnWindow | null;
+    /**
+     * The class name of the spacer cells.
+     */
+    spacerClassName: string;
+    /**
+     * Renders a mounted cell.
+     *
+     * @param cell - The cell to render.
+     * @param columnIndex - The grid column of the cell.
+     */
+    renderCell: (cell: ReactNode, columnIndex: number) => ReactNode;
+};
+/**
+ * Applies the column window to the cells of a row. The header row and the rows share it, so that
+ * they cannot disagree about which columns are mounted.
+ *
+ * Each gap left by the columns that are not mounted is filled with a single spacer cell spanning
+ * them. Under `table-layout: fixed` the spacer takes exactly the width of the `<col>` elements it
+ * spans, so the mounted cells stay in their columns and the sticky offsets of the fixed columns,
+ * which are summed over the cells of the row, stay what they are without virtualization.
+ *
+ * @param params - The cells of the row and the window to apply.
+ *
+ * @returns The cells to mount, with the spacer cells in place of the columns that are not mounted.
+ */
+export declare function renderVirtualizedColumns({ cells, columnOffset, columnWindow, spacerClassName, renderCell, }: RenderVirtualizedColumnsParams): ReactNode[];
+export {};

package/dist/src/DataTable/utils/renderVirtualizedColumns.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Applies the column window to the cells of a row. The header row and the rows share it, so that
+ * they cannot disagree about which columns are mounted.
+ *
+ * Each gap left by the columns that are not mounted is filled with a single spacer cell spanning
+ * them. Under `table-layout: fixed` the spacer takes exactly the width of the `<col>` elements it
+ * spans, so the mounted cells stay in their columns and the sticky offsets of the fixed columns,
+ * which are summed over the cells of the row, stay what they are without virtualization.
+ *
+ * @param params - The cells of the row and the window to apply.
+ *
+ * @returns The cells to mount, with the spacer cells in place of the columns that are not mounted.
+ */
+export function renderVirtualizedColumns({ cells, columnOffset, columnWindow, spacerClassName, renderCell, }) {
+    if (columnWindow === null) {
+        return cells.map((cell, index) => renderCell(cell, index + columnOffset));
+    }
+    const rowColumnCount = cells.length + columnOffset;
+    // The bounds are clamped to the row, so a row with fewer cells than the header still lays out.
+    const suffixStart = Math.min(columnWindow.suffixStart ?? rowColumnCount, rowColumnCount);
+    const prefixEnd = Math.min(columnWindow.prefixEnd, suffixStart);
+    const windowStart = Math.min(Math.max(columnWindow.windowStart, prefixEnd), suffixStart);
+    const windowEnd = Math.min(Math.max(columnWindow.windowEnd, windowStart), suffixStart);
+    const renderRange = (start, end) => cells
+        .slice(Math.max(start - columnOffset, 0), Math.max(end - columnOffset, 0))
+        .map((cell, index) => renderCell(cell, Math.max(start, columnOffset) + index));
+    // The spacer stands in for the columns that are not mounted, so it reserves their width without
+    // being announced as a cell of the table.
+    const renderSpacer = (position, colSpan) => (_jsx("td", { 
+        // oxlint-disable-next-line jsx-a11y/no-interactive-element-to-noninteractive-role -- A `td` is not interactive; the role only keeps this empty layout cell from being announced as a cell.
+        role: "presentation", colSpan: colSpan, className: spacerClassName, "data-mfui-virtual-spacer": position }, `mfui-virtual-column-spacer-${position}`));
+    return [
+        ...renderRange(0, prefixEnd),
+        windowStart > prefixEnd ? renderSpacer('start', windowStart - prefixEnd) : null,
+        ...renderRange(windowStart, windowEnd),
+        suffixStart > windowEnd ? renderSpacer('end', suffixStart - windowEnd) : null,
+        ...renderRange(suffixStart, rowColumnCount),
+    ];
+}

package/dist/src/DataTable/utils/resolveColumnWidths.d.ts

@@ -0,0 +1,28 @@
+import { type CSSProperties } from 'react';
+import { type DataTableColumnVirtualizationOptions } from '../DataTable.types';
+/**
+ * The width of a column in pixels when neither `getColumnWidth` nor its header cell declares one.
+ */
+export declare const DEFAULT_COLUMN_WIDTH = 160;
+/**
+ * The `style.width` of a header cell, which the header row reports for each column.
+ */
+export type DeclaredColumnWidth = CSSProperties['width'];
+/**
+ * Resolves the width of every consumer column, in pixels, for column virtualization.
+ *
+ * Each column takes the first of:
+ *
+ * 1. `getColumnWidth(index)`, when it returns a width.
+ * 2. The `style.width` of the column's `DataTable.HeaderCell`, when it is a number or a `px` string.
+ * 3. {@link DEFAULT_COLUMN_WIDTH}.
+ *
+ * @param declaredColumnWidths - The `style.width` of each header cell, which also gives the number
+ * of consumer columns.
+ *
+ * @param getColumnWidth - The consumer's width callback, which receives the column index counted as
+ * `leftFixedColumnIndex` is, without the selection column.
+ *
+ * @returns The width of each consumer column in pixels.
+ */
+export declare function resolveColumnWidths(declaredColumnWidths: readonly DeclaredColumnWidth[], getColumnWidth: DataTableColumnVirtualizationOptions['getColumnWidth']): number[];

package/dist/src/DataTable/utils/resolveColumnWidths.js

@@ -0,0 +1,41 @@
+/**
+ * The width of a column in pixels when neither `getColumnWidth` nor its header cell declares one.
+ */
+export const DEFAULT_COLUMN_WIDTH = 160;
+/**
+ * Converts the `style.width` of a header cell into pixels.
+ * Only a number or a `px` string is understood, because the column virtualizer needs the width in
+ * pixels before anything is laid out. Any other value counts as not declared.
+ *
+ * @param width - The declared width.
+ *
+ * @returns The width in pixels, or `undefined` when it cannot be resolved without layout.
+ */
+function toPixels(width) {
+    if (typeof width === 'number')
+        return Number.isFinite(width) && width > 0 ? width : undefined;
+    if (typeof width !== 'string')
+        return undefined;
+    const match = /^\s*(\d+(?:\.\d+)?)px\s*$/u.exec(width);
+    return match?.[1] === undefined ? undefined : Number(match[1]);
+}
+/**
+ * Resolves the width of every consumer column, in pixels, for column virtualization.
+ *
+ * Each column takes the first of:
+ *
+ * 1. `getColumnWidth(index)`, when it returns a width.
+ * 2. The `style.width` of the column's `DataTable.HeaderCell`, when it is a number or a `px` string.
+ * 3. {@link DEFAULT_COLUMN_WIDTH}.
+ *
+ * @param declaredColumnWidths - The `style.width` of each header cell, which also gives the number
+ * of consumer columns.
+ *
+ * @param getColumnWidth - The consumer's width callback, which receives the column index counted as
+ * `leftFixedColumnIndex` is, without the selection column.
+ *
+ * @returns The width of each consumer column in pixels.
+ */
+export function resolveColumnWidths(declaredColumnWidths, getColumnWidth) {
+    return declaredColumnWidths.map((declaredWidth, index) => getColumnWidth?.(index) ?? toPixels(declaredWidth) ?? DEFAULT_COLUMN_WIDTH);
+}

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, required, caution, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions, notFoundMessage, searchBoxProps, loading, onSearchOptions, clearButtonProps, disableClearButton, optionPanelProps, popoverWrapperProps, enableAllOptionsControls, enableApplyControls, showSelectedCount, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, renderPopoverHeader, renderOptionList, renderPopoverFooter, onOpenStateChanged, enableAutoUnmount, onBlur, showGroupOptionDivider, enableVirtualization, virtualizationOptions, infiniteScroll, enableCreateOption, onCreateOption, createOptionProps, }: 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, required, caution, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions, notFoundMessage, searchBoxProps, loading, onSearchOptions, clearButtonProps, disableClearButton, optionPanelProps, popoverWrapperProps, enableAllOptionsControls, enableApplyControls, showSelectedCount, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, renderOptionLabelSlot, renderPopoverHeader, renderOptionList, renderPopoverFooter, onOpenStateChanged, enableAutoUnmount, onBlur, showGroupOptionDivider, enableVirtualization, virtualizationOptions, infiniteScroll, enableCreateOption, onCreateOption, createOptionProps, }: MultipleSelectBoxProps<T, AdditionalProps>): import("react/jsx-runtime").JSX.Element;

package/dist/src/MultipleSelectBox/MultipleSelectBox.js

@@ -26,6 +26,7 @@ import { cx } from '../../styled-system/css';
 import { flattenOptions } from './utils/flattenOptions';
 import { getGroupLabelId } from '../utilities/dom/getGroupLabelId';
 import { OptionGroupLabelDescriptions } from '../shared/OptionGroupLabelDescriptions';
+import { OptionLabel } from '../shared/OptionLabel';
 import { isSelectableOption, isOptionDisabled, isOptionSelected } from './utils/isSelectableOption';
 import { useVirtualizedMultipleSelectBoxOptions } from './hooks/useVirtualizedMultipleSelectBoxOptions';
 import { useInfiniteScroll } from '../utilities/dom/useInfiniteScroll';
@@ -41,7 +42,7 @@ const EMPTY_OPTIONS = [];
  */
 export function MultipleSelectBox({ id, triggerProps, triggerWrapperProps, size, options = EMPTY_OPTIONS, defaultValue, 
 // eslint-disable-next-line @typescript-eslint/no-deprecated
-placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, clearButtonProps, disableClearButton = false, optionPanelProps, popoverWrapperProps, enableAllOptionsControls = false, enableApplyControls = false, showSelectedCount = false, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, renderPopoverHeader, renderOptionList, renderPopoverFooter, onOpenStateChanged, enableAutoUnmount = true, onBlur, showGroupOptionDivider, enableVirtualization = false, virtualizationOptions, infiniteScroll, enableCreateOption = false, onCreateOption, createOptionProps, }) {
+placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode, name, onChange, value, showDisplayValueAsTag, renderDisplayValue, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, clearButtonProps, disableClearButton = false, optionPanelProps, popoverWrapperProps, enableAllOptionsControls = false, enableApplyControls = false, showSelectedCount = false, selectAllButtonProps, clearAllButtonProps, selectedCountProps, cancelButtonProps, applyButtonProps, renderOption, renderOptionLabelSlot, renderPopoverHeader, renderOptionList, renderPopoverFooter, onOpenStateChanged, enableAutoUnmount = true, onBlur, showGroupOptionDivider, enableVirtualization = false, virtualizationOptions, infiniteScroll, enableCreateOption = false, onCreateOption, createOptionProps, }) {
     const classes = multipleSelectBoxSlotRecipe({ showGroupOptionDivider });
     const triggerRef = useRef(null);
     const listBoxId = useId();
@@ -214,7 +215,7 @@ placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode,
                     }, children: _jsx("li", { role: "presentation", className: cx(classes.listItem, 'mfui-MultipleSelectBox__listItem'), "data-mfui-group-label": "true", children: _jsx(Typography, { variant: "label", children: option.label }) }) }, virtualItem.key));
             }
             if (isSelectableOption(option) && option.value != null) {
-                const { value, label } = option;
+                const { value } = option;
                 const isDisabled = isOptionDisabled(option);
                 const selectedSet = enableApplyControls ? temporaryValues : localSelectedValuesSet;
                 const isSelected = isOptionSelected(option, selectedSet);
@@ -241,7 +242,7 @@ placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode,
                                     return;
                                 }
                                 handleSelectOption(option);
-                            }, children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [isSelected ? _jsx(CheckboxChecked, { "aria-hidden": "true" }) : _jsx(CheckboxUnchecked, { "aria-hidden": "true" }), _jsx(Typography, { variant: "body", children: label })] })) }) }) }, virtualItem.key));
+                            }, children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [isSelected ? _jsx(CheckboxChecked, { "aria-hidden": "true" }) : _jsx(CheckboxUnchecked, { "aria-hidden": "true" }), _jsx(OptionLabel, { option: option, isSelected: isSelected, renderOptionLabelSlot: renderOptionLabelSlot, slotContentName: "multiple-select-box-option-label-slot" })] })) }) }) }, virtualItem.key));
             }
             return null;
         });
@@ -254,6 +255,7 @@ placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode,
         classes,
         handleSelectOption,
         renderOption,
+        renderOptionLabelSlot,
         createKeyDownHandler,
         handleOptionFocus,
         tabbableOptionIndex,
@@ -274,7 +276,7 @@ placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode,
                     return null;
                 }
                 // Only reaches here if isSelectableOption(option) is true and value is not null/undefined
-                const { value, label } = option;
+                const { value } = option;
                 const isDisabled = isOptionDisabled(option);
                 const selectedSet = enableApplyControls ? temporaryValues : localSelectedValuesSet;
                 const isSelected = isOptionSelected(option, selectedSet);
@@ -292,7 +294,7 @@ placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode,
                                 return;
                             }
                             handleSelectOption(option);
-                        }, children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [isSelected ? _jsx(CheckboxChecked, { "aria-hidden": "true" }) : _jsx(CheckboxUnchecked, { "aria-hidden": "true" }), _jsx(Typography, { variant: "body", children: label })] })) }) }, String(value)));
+                        }, children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [isSelected ? _jsx(CheckboxChecked, { "aria-hidden": "true" }) : _jsx(CheckboxUnchecked, { "aria-hidden": "true" }), _jsx(OptionLabel, { option: option, isSelected: isSelected, renderOptionLabelSlot: renderOptionLabelSlot, slotContentName: "multiple-select-box-option-label-slot" })] })) }) }, String(value)));
             }
             // Only render group label if truly a group label (no value property at all)
             const { label } = option;
@@ -307,6 +309,7 @@ placeholder, emptyMessage, disabled, invalid, required, caution, targetDOMNode,
         classes,
         handleSelectOption,
         renderOption,
+        renderOptionLabelSlot,
         createKeyDownHandler,
         handleOptionFocus,
         tabbableOptionIndex,

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

@@ -4,6 +4,7 @@ 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';
+import { type RenderOptionLabelSlot } from '../shared/OptionLabel';
 export type AllowedValueTypes = string | number | undefined;
 export type VirtualOptionTypes = Pick<VirtualizerOptions<HTMLElement, Element>, 'estimateSize' | 'overscan'>;
 export type InfiniteScrollConfig = {
@@ -313,6 +314,38 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
      * ```
      */
     renderOption?: (option: MultipleSelectBoxOption<T, AdditionalProps>, isSelected: boolean) => React.ReactNode;
+    /**
+     * The function to customize the label area of each option in the list, such as adding an icon or tags.
+     *
+     * Unlike `renderOption`, only the label text is replaced. The checkbox and the
+     * hover, focus, pressed, and disabled styles of the option are kept.
+     *
+     * - The `label` of the option is still required and is used for search and the trigger.
+     * - The slot content becomes the accessible name of the option. Include the same words as `label`,
+     *   as text or as the accessible name of an image, so that what users read matches what they can type.
+     * - Return only non-interactive content, because the option itself is the interactive element.
+     * - Ignored when `renderOption` is provided.
+     * - Define the function outside the component or wrap it in `useCallback`, so that the options are
+     *   not re-rendered every time the parent renders.
+     *
+     * @param option - The option object being rendered (includes additional properties if defined)
+     *
+     * @param state.isSelected - Whether the option is currently selected
+     *
+     * @example
+     * ```tsx
+     * <MultipleSelectBox
+     *   options={options}
+     *   renderOptionLabelSlot={(option) => (
+     *     <>
+     *       <Icon aria-hidden />
+     *       <span>{option.label}</span>
+     *     </>
+     *   )}
+     * />
+     * ```
+     */
+    renderOptionLabelSlot?: RenderOptionLabelSlot<MultipleSelectBoxOption<T, AdditionalProps>>;
     /**
      * Customize the popover header content.
      *

package/dist/src/SelectBox/SelectBox.js

@@ -43,7 +43,7 @@ const EMPTY_OPTIONS = [];
 export const SelectBox = forwardRef((props, ref) => {
     const { id, triggerProps, clearButtonProps, enableClearButton = false, size, options = EMPTY_OPTIONS, defaultValue, 
     // eslint-disable-next-line @typescript-eslint/no-deprecated
-    placeholder, emptyMessage, disabled, invalid, caution = false, required, 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;
+    placeholder, emptyMessage, disabled, invalid, caution = false, required, targetDOMNode, name, onChange, onBlur, value, enableSearchOptions = false, notFoundMessage, searchBoxProps, loading = false, onSearchOptions, renderDisplayValue, renderOption, renderOptionLabelSlot, 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();
@@ -272,7 +272,7 @@ export const SelectBox = forwardRef((props, ref) => {
                 left: 0,
                 width: '100%',
                 transform: `translateY(${String(virtualItem.start)}px)`,
-            }, children: _jsx(SelectBoxOptionComponent, { option: option, isSelected: localSelectedOption?.value === option.value, tabbableOptionIndex: tabbableOptionIndex, optionIndex: originalIndex ?? virtualItem.index, classes: classes, groupLabelId: groupLabelId, renderOption: renderOption, onFocus: handleOptionFocus, onClick: handleSelectOption, onKeyDown: (event) => {
+            }, children: _jsx(SelectBoxOptionComponent, { option: option, isSelected: localSelectedOption?.value === option.value, tabbableOptionIndex: tabbableOptionIndex, optionIndex: originalIndex ?? virtualItem.index, classes: classes, groupLabelId: groupLabelId, renderOption: renderOption, renderOptionLabelSlot: renderOptionLabelSlot, onFocus: handleOptionFocus, onClick: handleSelectOption, onKeyDown: (event) => {
                     handleTypeAhead(event.nativeEvent);
                     createKeyDownHandler(option)(event);
                 } }) }, virtualItem.key));
@@ -283,6 +283,7 @@ export const SelectBox = forwardRef((props, ref) => {
         tabbableOptionIndex,
         classes,
         renderOption,
+        renderOptionLabelSlot,
         handleOptionFocus,
         handleSelectOption,
         handleTypeAhead,
@@ -297,14 +298,14 @@ export const SelectBox = forwardRef((props, ref) => {
                 return null;
             if ('options' in option && Array.isArray(option.options)) {
                 currentGroupLabelId = getGroupLabelId(listBoxId, optionIndex);
-                return (_jsx(React.Fragment, { children: _jsx(SelectBoxOptionGroup, { groupOption: option, selectedOption: localSelectedOption, valueToIndexMap: valueToIndexMap, tabbableOptionIndex: tabbableOptionIndex, classes: classes, groupLabelId: currentGroupLabelId, hasHiddenGroupLabel: rendersHiddenGroupLabels, renderOption: renderOption, findFlatOptionIndexByValue: (_, option) => findFlatOptionIndexByValue(valueToIndexMap, option), onOptionFocus: handleOptionFocus, onOptionClick: handleSelectOption, onOptionKeyDown: (option) => (event) => {
+                return (_jsx(React.Fragment, { children: _jsx(SelectBoxOptionGroup, { groupOption: option, selectedOption: localSelectedOption, valueToIndexMap: valueToIndexMap, tabbableOptionIndex: tabbableOptionIndex, classes: classes, groupLabelId: currentGroupLabelId, hasHiddenGroupLabel: rendersHiddenGroupLabels, renderOption: renderOption, renderOptionLabelSlot: renderOptionLabelSlot, findFlatOptionIndexByValue: (_, option) => findFlatOptionIndexByValue(valueToIndexMap, option), onOptionFocus: handleOptionFocus, onOptionClick: handleSelectOption, onOptionKeyDown: (option) => (event) => {
                             handleTypeAhead(event.nativeEvent);
                             createKeyDownHandler(option)(event);
                         } }) }, `group-label-${option.label}-${String(optionIndex)}`));
             }
             if (!('options' in option)) {
                 const flatOptionIndex = findFlatOptionIndexByValue(valueToIndexMap, option);
-                return (_jsx(SelectBoxOptionComponent, { option: option, isSelected: localSelectedOption?.value === option.value, tabbableOptionIndex: tabbableOptionIndex, optionIndex: flatOptionIndex, classes: classes, groupLabelId: currentGroupLabelId, renderOption: renderOption, onFocus: handleOptionFocus, onClick: handleSelectOption, onKeyDown: (event) => {
+                return (_jsx(SelectBoxOptionComponent, { option: option, isSelected: localSelectedOption?.value === option.value, tabbableOptionIndex: tabbableOptionIndex, optionIndex: flatOptionIndex, classes: classes, groupLabelId: currentGroupLabelId, renderOption: renderOption, renderOptionLabelSlot: renderOptionLabelSlot, onFocus: handleOptionFocus, onClick: handleSelectOption, onKeyDown: (event) => {
                         handleTypeAhead(event.nativeEvent);
                         createKeyDownHandler(option)(event);
                     } }, option.value ?? `option-${option.label}-${String(optionIndex)}`));
@@ -320,6 +321,7 @@ export const SelectBox = forwardRef((props, ref) => {
         listBoxId,
         rendersHiddenGroupLabels,
         renderOption,
+        renderOptionLabelSlot,
         handleOptionFocus,
         handleSelectOption,
         handleTypeAhead,

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

@@ -4,6 +4,7 @@ import { type SelectBoxSlotRecipeVariant } from '../../styled-system/recipes';
 import { type SearchBoxProps } from '../SearchBox';
 import { type PopoverProps } from '../Popover';
 import { type InfiniteScrollDirection } from '../utilities/dom/useInfiniteScroll';
+import { type RenderOptionLabelSlot } from '../shared/OptionLabel';
 type AllowedValueTypes = string | number | undefined;
 export type VirtualOptionTypes = Pick<VirtualizerOptions<HTMLElement, Element>, 'estimateSize' | 'overscan'>;
 export type InfiniteScrollConfig = {
@@ -349,6 +350,38 @@ export type SelectBoxProps<T extends AllowedValueTypes = string, AdditionalProps
      * ```
      */
     renderOption?: (option: SelectBoxOption<T, AdditionalProps>, isSelected: boolean) => React.ReactNode;
+    /**
+     * The function to customize the label area of each option in the list, such as adding an icon or tags.
+     *
+     * Unlike `renderOption`, only the label text is replaced. The selected mark and the
+     * hover, focus, pressed, and disabled styles of the option are kept.
+     *
+     * - The `label` of the option is still required and is used for search, type-ahead, and the trigger.
+     * - The slot content becomes the accessible name of the option. Include the same words as `label`,
+     *   as text or as the accessible name of an image, so that what users read matches what they can type.
+     * - Return only non-interactive content, because the option itself is the interactive element.
+     * - Ignored when `renderOption` is provided.
+     * - Define the function outside the component or wrap it in `useCallback`, so that the options are
+     *   not re-rendered every time the parent renders.
+     *
+     * @param option - The option object being rendered (includes additional properties if defined)
+     *
+     * @param state.isSelected - Whether the option is currently selected
+     *
+     * @example
+     * ```tsx
+     * <SelectBox
+     *   options={options}
+     *   renderOptionLabelSlot={(option) => (
+     *     <>
+     *       <Icon aria-hidden />
+     *       <span>{option.label}</span>
+     *     </>
+     *   )}
+     * />
+     * ```
+     */
+    renderOptionLabelSlot?: RenderOptionLabelSlot<SelectBoxOption<T, AdditionalProps>>;
     /**
      * The function to customize how the popover is rendered.
      * - `searchNode` is the search input element. It's available only when `enableSearchOptions` is `true`.

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type BasedAdditionalProps, type SelectBoxOption } from './SelectBox.types';
+import { type BasedAdditionalProps, type SelectBoxOption, type SelectBoxProps } from './SelectBox.types';
 type SelectBoxOptionProps<T extends string | number | undefined = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps> = {
     /**
      * The option data to render.
@@ -32,6 +32,10 @@ type SelectBoxOptionProps<T extends string | number | undefined = string, Additi
      * Custom render function for the option.
      */
     renderOption?: (option: SelectBoxOption<T, AdditionalProps>, isSelected: boolean) => React.ReactNode;
+    /**
+     * Custom render function for the label area of the option.
+     */
+    renderOptionLabelSlot?: SelectBoxProps<T, AdditionalProps>['renderOptionLabelSlot'];
     /**
      * Handler called when option receives focus.
      */

package/dist/src/SelectBox/SelectBoxOption.js

@@ -3,14 +3,14 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { memo, useMemo, useCallback } from 'react';
 import { Current } from '@moneyforward/mfui-icons-react';
 import { FocusIndicator } from '../FocusIndicator';
-import { Typography } from '../Typography';
+import { OptionLabel } from '../shared/OptionLabel';
 import { cx } from '../../styled-system/css';
 import { isOptionDisabled } from './utils/isSelectableOption';
 /**
  * Individual option component for SelectBox.
  * Memoized to prevent unnecessary re-renders when other options change.
  */
-function SelectBoxOptionComponentInner({ option, isSelected, tabbableOptionIndex, optionIndex, classes, groupLabelId, renderOption, onFocus, onClick, onKeyDown, }) {
+function SelectBoxOptionComponentInner({ option, isSelected, tabbableOptionIndex, optionIndex, classes, groupLabelId, renderOption, renderOptionLabelSlot, onFocus, onClick, onKeyDown, }) {
     const isDisabled = isOptionDisabled(option);
     const tabIndex = useMemo(() => (isDisabled ? -1 : optionIndex === tabbableOptionIndex ? 0 : -1), [optionIndex, tabbableOptionIndex, isDisabled]);
     const handleFocus = useCallback(() => {
@@ -25,8 +25,7 @@ function SelectBoxOptionComponentInner({ option, isSelected, tabbableOptionIndex
     }, [onClick, option, isDisabled]);
     // Type-safe property access to satisfy eslint rules
     const optionValue = 'value' in option && option.value !== undefined ? String(option.value) : undefined;
-    const optionLabel = option.label;
-    return (_jsx(FocusIndicator, { position: "inside", children: _jsx("li", { role: "option", "data-value": optionValue, className: cx(classes.listItem, 'mfui-SelectBox__listItem'), "aria-selected": isSelected, "aria-disabled": isDisabled, "aria-describedby": groupLabelId, tabIndex: tabIndex, onFocus: handleFocus, onKeyDown: onKeyDown, onClick: handleClick, children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [_jsx(Current, { "aria-hidden": true }), _jsx(Typography, { variant: "body", children: optionLabel })] })) }) }));
+    return (_jsx(FocusIndicator, { position: "inside", children: _jsx("li", { role: "option", "data-value": optionValue, className: cx(classes.listItem, 'mfui-SelectBox__listItem'), "aria-selected": isSelected, "aria-disabled": isDisabled, "aria-describedby": groupLabelId, tabIndex: tabIndex, onFocus: handleFocus, onKeyDown: onKeyDown, onClick: handleClick, children: renderOption ? (renderOption(option, isSelected)) : (_jsxs(_Fragment, { children: [_jsx(Current, { "aria-hidden": true }), _jsx(OptionLabel, { option: option, isSelected: isSelected, renderOptionLabelSlot: renderOptionLabelSlot, slotContentName: "select-box-option-label-slot" })] })) }) }));
 }
 export const SelectBoxOptionComponent = memo(SelectBoxOptionComponentInner);
 SelectBoxOptionComponent.displayName = 'SelectBoxOptionComponent';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type BasedAdditionalProps, type SelectBoxOption } from './SelectBox.types';
+import { type BasedAdditionalProps, type SelectBoxOption, type SelectBoxProps } from './SelectBox.types';
 type SelectBoxOptionGroupProps<T extends string | number | undefined = string, AdditionalProps extends BasedAdditionalProps = BasedAdditionalProps> = {
     /**
      * The group option with nested options.
@@ -38,6 +38,10 @@ type SelectBoxOptionGroupProps<T extends string | number | undefined = string, A
      * Custom render function for options.
      */
     renderOption?: (option: SelectBoxOption<T, AdditionalProps>, isSelected: boolean) => React.ReactNode;
+    /**
+     * Custom render function for the label area of options.
+     */
+    renderOptionLabelSlot?: SelectBoxProps<T, AdditionalProps>['renderOptionLabelSlot'];
     /**
      * Handler called when option receives focus.
      */

package/dist/src/SelectBox/SelectBoxOptionGroup.js

@@ -8,7 +8,7 @@ import { SelectBoxOptionComponent } from './SelectBoxOption';
  * Renders a group label followed by its nested options.
  * Memoized to prevent unnecessary re-renders.
  */
-function SelectBoxOptionGroupInner({ groupOption, selectedOption, valueToIndexMap, tabbableOptionIndex, classes, groupLabelId, hasHiddenGroupLabel, renderOption, onOptionFocus, onOptionClick, onOptionKeyDown, findFlatOptionIndexByValue, }) {
+function SelectBoxOptionGroupInner({ groupOption, selectedOption, valueToIndexMap, tabbableOptionIndex, classes, groupLabelId, hasHiddenGroupLabel, renderOption, renderOptionLabelSlot, onOptionFocus, onOptionClick, onOptionKeyDown, findFlatOptionIndexByValue, }) {
     // Type-safe property access to satisfy eslint rules
     const groupLabel = groupOption.label;
     const nestedOptions = groupOption.options;
@@ -23,7 +23,7 @@ function SelectBoxOptionGroupInner({ groupOption, selectedOption, valueToIndexMa
                 const optionLabel = nestedOption.label;
                 const keyValue = optionValue !== undefined ? String(optionValue) : `${optionLabel}-${String(index)}`;
                 const isSelected = selectedOption && 'value' in selectedOption ? selectedOption.value === optionValue : false;
-                return (_jsx(SelectBoxOptionComponent, { option: nestedOption, isSelected: isSelected, tabbableOptionIndex: tabbableOptionIndex, optionIndex: flatOptionIndex, classes: classes, groupLabelId: groupLabelId, renderOption: renderOption, onFocus: onOptionFocus, onClick: onOptionClick, onKeyDown: onOptionKeyDown(nestedOption) }, keyValue));
+                return (_jsx(SelectBoxOptionComponent, { option: nestedOption, isSelected: isSelected, tabbableOptionIndex: tabbableOptionIndex, optionIndex: flatOptionIndex, classes: classes, groupLabelId: groupLabelId, renderOption: renderOption, renderOptionLabelSlot: renderOptionLabelSlot, onFocus: onOptionFocus, onClick: onOptionClick, onKeyDown: onOptionKeyDown(nestedOption) }, keyValue));
             })] }));
 }
 export const SelectBoxOptionGroup = memo(SelectBoxOptionGroupInner);

package/dist/src/shared/OptionLabel/OptionLabel.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+/**
+ * The state of an option passed to the function that renders its label slot.
+ */
+export type OptionLabelSlotState = {
+    /**
+     * Whether the option is currently selected.
+     */
+    isSelected: boolean;
+};
+/**
+ * The function that renders the label slot of an option, replacing its label text.
+ */
+export type RenderOptionLabelSlot<Option> = (option: Option, state: OptionLabelSlotState) => ReactNode;
+type OptionLabelProps<Option extends {
+    label: string;
+}> = {
+    /**
+     * The option whose label is rendered.
+     */
+    option: Option;
+    /**
+     * Whether the option is currently selected.
+     */
+    isSelected: boolean;
+    /**
+     * The function that renders the label slot. The label text is rendered when it is omitted.
+     */
+    renderOptionLabelSlot?: RenderOptionLabelSlot<Option>;
+    /**
+     * The `data-mfui-content` value of the slot wrapper, prefixed with the component name so that the
+     * component styles can target it.
+     */
+    slotContentName: string;
+};
+/**
+ * Renders the label of an option in an option list, or the label slot that replaces it.
+ *
+ * The slot is wrapped so that it keeps the default text style and an icon returned by it is not
+ * styled as the selected mark of the option (`& > svg`). A `div` because the slot may return block content.
+ */
+export declare const OptionLabel: <Option extends {
+    label: string;
+}>({ option, isSelected, renderOptionLabelSlot, slotContentName, }: OptionLabelProps<Option>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/shared/OptionLabel/OptionLabel.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '../../Typography';
+/**
+ * Renders the label of an option in an option list, or the label slot that replaces it.
+ *
+ * The slot is wrapped so that it keeps the default text style and an icon returned by it is not
+ * styled as the selected mark of the option (`& > svg`). A `div` because the slot may return block content.
+ */
+export const OptionLabel = ({ option, isSelected, renderOptionLabelSlot, slotContentName, }) => renderOptionLabelSlot ? (_jsx(Typography, { as: "div", variant: "body", "data-mfui-content": slotContentName, children: renderOptionLabelSlot(option, { isSelected }) })) : (_jsx(Typography, { variant: "body", children: option.label }));

package/dist/src/shared/OptionLabel/index.d.ts

@@ -0,0 +1 @@
+export * from './OptionLabel';

package/dist/src/shared/OptionLabel/index.js

@@ -0,0 +1 @@
+export * from './OptionLabel';

package/dist/styled-system/recipes/data-table-slot-recipe.d.ts

@@ -4,6 +4,10 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface DataTableSlotRecipeVariant {
   /**
+ * @default false
+ */
+columnVirtualization: boolean
+/**
  * @default "default"
  */
 layout: "default" | "edge-to-edge"
@@ -13,7 +17,7 @@ type DataTableSlotRecipeVariantMap = {
   [key in keyof DataTableSlotRecipeVariant]: Array<DataTableSlotRecipeVariant[key]>
 }
 
-type DataTableSlotRecipeSlot = "wrapper" | "table" | "emptyState"
+type DataTableSlotRecipeSlot = "wrapper" | "table" | "emptyState" | "columnSpacer" | "headerColumnSpacer" | "selectionColumn"
 
 export type DataTableSlotRecipeVariantProps = {
   [key in keyof DataTableSlotRecipeVariant]?: ConditionalValue<DataTableSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/data-table-slot-recipe.js

@@ -1,7 +1,8 @@
 import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
 import { createRecipe } from './create-recipe.js';
 const dataTableSlotRecipeDefaultVariants = {
-    "layout": "default"
+    "layout": "default",
+    "columnVirtualization": false
 };
 const dataTableSlotRecipeCompoundVariants = [];
 const dataTableSlotRecipeSlotNames = [
@@ -16,6 +17,18 @@ const dataTableSlotRecipeSlotNames = [
     [
         "emptyState",
         "DataTable__emptyState"
+    ],
+    [
+        "columnSpacer",
+        "DataTable__columnSpacer"
+    ],
+    [
+        "headerColumnSpacer",
+        "DataTable__headerColumnSpacer"
+    ],
+    [
+        "selectionColumn",
+        "DataTable__selectionColumn"
     ]
 ];
 const dataTableSlotRecipeSlotFns = /* @__PURE__ */ dataTableSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableSlotRecipeCompoundVariants, slotName))]);
@@ -23,6 +36,7 @@ const dataTableSlotRecipeFn = memo((props = {}) => {
     return Object.fromEntries(dataTableSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dataTableSlotRecipeVariantKeys = [
+    "columnVirtualization",
     "layout"
 ];
 const getVariantProps = (variants) => ({ ...dataTableSlotRecipeDefaultVariants, ...compact(variants) });
@@ -33,6 +47,10 @@ export const dataTableSlotRecipe = /* @__PURE__ */ Object.assign(dataTableSlotRe
     classNameMap: {},
     variantKeys: dataTableSlotRecipeVariantKeys,
     variantMap: {
+        "columnVirtualization": [
+            "true",
+            "false"
+        ],
         "layout": [
             "default",
             "edge-to-edge"