@moneyforward/mfui-components 3.13.1 → 3.14.1

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/src/MultipleSelectBox/MultipleSelectBox.js

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

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

@@ -290,6 +290,83 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
      * ```
      */
     renderOption?: (option: MultipleSelectBoxOption<T, AdditionalProps>, isSelected: boolean) => React.ReactNode;
+    /**
+     * Customize the popover header content.
+     *
+     * The component always renders the `mfui-MultipleSelectBox__menuHeader` wrapper (when
+     * `enableSearchOptions` or `enableAllOptionsControls` is `true`) — this function controls
+     * the content rendered inside it.
+     *
+     * - `searchNode` is the search input. Available only when `enableSearchOptions` is `true`, otherwise `null`.
+     * - `allOptionsControlsNode` is the "Select All" / "Clear All" buttons row. Available only when `enableAllOptionsControls` is `true`, otherwise `null`.
+     *
+     * @example
+     * ```tsx
+     * <MultipleSelectBox
+     *   enableSearchOptions
+     *   enableAllOptionsControls
+     *   renderPopoverHeader={({ searchNode, allOptionsControlsNode }) => (
+     *     <>
+     *       {searchNode}
+     *       {allOptionsControlsNode}
+     *       <Button size="small">+ Add Option</Button>
+     *     </>
+     *   )}
+     * />
+     * ```
+     */
+    renderPopoverHeader?: (nodes: {
+        searchNode: React.ReactNode | null;
+        allOptionsControlsNode: React.ReactNode | null;
+    }) => React.ReactNode;
+    /**
+     * Customize the popover body content.
+     *
+     * - `optionsNode` is the scrollable list of options (includes the scroll wrapper and listbox).
+     *
+     * @example
+     * ```tsx
+     * <MultipleSelectBox
+     *   renderOptionList={({ optionsNode }) => (
+     *     <>
+     *       {optionsNode}
+     *       <div>Custom content below the list</div>
+     *     </>
+     *   )}
+     * />
+     * ```
+     */
+    renderOptionList?: (nodes: {
+        optionsNode: React.ReactNode;
+    }) => React.ReactNode;
+    /**
+     * Customize the popover footer content.
+     *
+     * The component always renders the `mfui-MultipleSelectBox__menuFooter` wrapper (when
+     * `enableApplyControls` or `showSelectedCount` is `true`) — this function controls
+     * the content rendered inside it.
+     *
+     * - `selectedCountNode` is the selected count text. Available when `enableApplyControls` or `showSelectedCount` is `true`, otherwise `null`.
+     * - `applyControlsNode` is the Cancel / Apply buttons row. Available only when `enableApplyControls` is `true`, otherwise `null`.
+     *
+     * @example
+     * ```tsx
+     * <MultipleSelectBox
+     *   enableApplyControls
+     *   renderPopoverFooter={({ selectedCountNode, applyControlsNode }) => (
+     *     <>
+     *       {selectedCountNode}
+     *       <Button size="small">Custom action</Button>
+     *       {applyControlsNode}
+     *     </>
+     *   )}
+     * />
+     * ```
+     */
+    renderPopoverFooter?: (nodes: {
+        selectedCountNode: React.ReactNode | null;
+        applyControlsNode: React.ReactNode | null;
+    }) => React.ReactNode;
     /**
      * Whether to enable search options functionality
      */
@@ -301,7 +378,7 @@ export type MultipleSelectBoxProps<T extends AllowedValueTypes = string, Additio
     /**
      * The properties for the SearchBox component.
      */
-    searchBoxProps?: Pick<SearchBoxProps, 'clearButtonProps' | 'placeholder'>;
+    searchBoxProps?: Pick<SearchBoxProps, 'clearButtonProps' | 'placeholder' | 'invalid'>;
     /**
      * The properties for the option panel element.
      *

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

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

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

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

package/dist/src/Stack/Stack.d.ts

@@ -21,7 +21,7 @@ export declare const GRID_TOKEN_VALUES: Record<string, string>;
 export declare const Stack: import("react").ForwardRefExoticComponent<{
     children?: import("react").ReactNode;
     direction?: import("react").CSSProperties["flexDirection"];
-    gap?: ("horizontal.1" | "horizontal.2" | "horizontal.8" | "horizontal.3" | "horizontal.4" | "horizontal.5" | "horizontal.6" | "horizontal.7" | "horizontal.20" | "horizontal.0-1of8" | "horizontal.0-1of4" | "horizontal.0-1of2" | "horizontal.1-1of2" | "horizontal.2-1of2" | "horizontal.3-1of7" | "horizontal.3-1of2" | "horizontal.4-1of2" | "horizontal.5-1of2" | "horizontal.6-1of2" | "horizontal.7-1of2" | "vertical.1" | "vertical.2" | "vertical.3" | "vertical.0-1of8" | "vertical.0-1of4" | "vertical.0-1of2" | "vertical.1-1of2" | "vertical.2-1of2" | "vertical.0-1of6" | "vertical.0-1of3" | "vertical.0-2of3" | "vertical.0-3of4" | "vertical.0-5of6" | "vertical.0-7of8" | "vertical.1-1of8" | "vertical.1-1of4" | "vertical.1-1of3" | "vertical.1-2of3") | `${number}px` | number;
+    gap?: ("horizontal.1" | "horizontal.2" | "horizontal.3" | "horizontal.8" | "horizontal.4" | "horizontal.5" | "horizontal.6" | "horizontal.7" | "horizontal.20" | "horizontal.0-1of8" | "horizontal.0-1of4" | "horizontal.0-1of2" | "horizontal.1-1of2" | "horizontal.2-1of2" | "horizontal.3-1of7" | "horizontal.3-1of2" | "horizontal.4-1of2" | "horizontal.5-1of2" | "horizontal.6-1of2" | "horizontal.7-1of2" | "vertical.1" | "vertical.2" | "vertical.3" | "vertical.0-1of8" | "vertical.0-1of4" | "vertical.0-1of2" | "vertical.1-1of2" | "vertical.2-1of2" | "vertical.0-1of6" | "vertical.0-1of3" | "vertical.0-2of3" | "vertical.0-3of4" | "vertical.0-5of6" | "vertical.0-7of8" | "vertical.1-1of8" | "vertical.1-1of4" | "vertical.1-1of3" | "vertical.1-2of3") | `${number}px` | number;
     wrap?: import("react").CSSProperties["flexWrap"];
     alignItems?: import("react").CSSProperties["alignItems"];
     justifyContent?: import("react").CSSProperties["justifyContent"];

package/dist/src/Tooltip/Tooltip.d.ts

@@ -43,4 +43,4 @@ export declare const Tooltip: import("react").ForwardRefExoticComponent<{
     hideFromScreenReader?: boolean;
     maxWidth?: import("react").CSSProperties["maxWidth"];
     contentProps?: Pick<import("react").ComponentPropsWithoutRef<"div">, "className">;
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "content" | "disabled"> & import("react").RefAttributes<HTMLDivElement>>;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "disabled" | "content"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/src/index.d.ts

@@ -1,58 +1,58 @@
+export * from './Accordion';
+export * from './Badge';
 export * from './Breadcrumbs';
 export * from './Button';
+export * from './Checkbox';
+export * from './CheckboxCard';
+export * from './CheckboxGroup';
+export * from './DataGrid';
+export * from './DataTable';
+export * from './DateTimeSelection';
 export * from './Dialog';
+export * from './Disclosure';
+export * from './DisplayTable';
 export * from './DropdownMenu';
+export * from './EmbeddedSidePane';
+export * from './FileBox';
+export * from './FileDropZone';
+export * from './FilterSelectBox';
+export * from './FilterTrigger';
 export * from './FocusIndicator';
+export * from './FormFooter';
 export * from './GlobalHeader';
+export * from './Heading';
 export * from './HelpMessage';
 export * from './IconButton';
+export * from './KeyValue';
+export * from './MainNavigation';
 export * from './MultilineTextBox';
+export * from './MultipleFilterSelectBox';
+export * from './MultipleSelectBox';
+export * from './NavigationList';
+export * from './NumberBox';
+export * from './PageHeader';
+export * from './Pagination';
 export * from './Panel';
-export * from './SectionMessage';
-export * from './TextBox';
-export * from './TextLink';
-export * from './Tooltip';
-export * from './Typography';
-export * from './Checkbox';
-export * from './Heading';
+export * from './Popover';
+export * from './Portal';
+export * from './ProgressIndicator';
 export * from './RadioButton';
+export * from './RadioButtonCard';
 export * from './RadioGroup';
-export * from './Badge';
-export * from './MainNavigation';
+export * from './SearchBox';
+export * from './SectionMessage';
 export * from './SelectBox';
 export * from './SidePane';
-export * from './Toast';
-export * from './ToggleSwitch';
-export * from './Pagination';
-export * from './Tag';
-export * from './ProgressIndicator';
-export * from './DataTable';
-export * from './DataGrid';
-export * from './SubNavigation';
-export * from './Tabs';
-export * from './DateTimeSelection';
-export * from './Stack';
-export * from './MultipleSelectBox';
-export * from './SearchBox';
-export * from './CheckboxCard';
-export * from './PageHeader';
-export * from './RadioButtonCard';
-export * from './Disclosure';
-export * from './StatusLabel';
-export * from './FileBox';
-export * from './FilterSelectBox';
-export * from './FilterTrigger';
 export * from './Skeleton';
-export * from './CheckboxGroup';
-export * from './MultipleFilterSelectBox';
-export * from './Popover';
-export * from './Portal';
-export * from './KeyValue';
-export * from './FileDropZone';
-export * from './EmbeddedSidePane';
-export * from './DisplayTable';
-export * from './Accordion';
 export * from './SplitView';
-export * from './NavigationList';
-export * from './FormFooter';
-export * from './NumberBox';
+export * from './Stack';
+export * from './StatusLabel';
+export * from './SubNavigation';
+export * from './Tabs';
+export * from './Tag';
+export * from './TextBox';
+export * from './TextLink';
+export * from './Toast';
+export * from './ToggleSwitch';
+export * from './Tooltip';
+export * from './Typography';

package/dist/src/index.js

@@ -1,58 +1,58 @@
+export * from './Accordion';
+export * from './Badge';
 export * from './Breadcrumbs';
 export * from './Button';
+export * from './Checkbox';
+export * from './CheckboxCard';
+export * from './CheckboxGroup';
+export * from './DataGrid';
+export * from './DataTable';
+export * from './DateTimeSelection';
 export * from './Dialog';
+export * from './Disclosure';
+export * from './DisplayTable';
 export * from './DropdownMenu';
+export * from './EmbeddedSidePane';
+export * from './FileBox';
+export * from './FileDropZone';
+export * from './FilterSelectBox';
+export * from './FilterTrigger';
 export * from './FocusIndicator';
+export * from './FormFooter';
 export * from './GlobalHeader';
+export * from './Heading';
 export * from './HelpMessage';
 export * from './IconButton';
+export * from './KeyValue';
+export * from './MainNavigation';
 export * from './MultilineTextBox';
+export * from './MultipleFilterSelectBox';
+export * from './MultipleSelectBox';
+export * from './NavigationList';
+export * from './NumberBox';
+export * from './PageHeader';
+export * from './Pagination';
 export * from './Panel';
-export * from './SectionMessage';
-export * from './TextBox';
-export * from './TextLink';
-export * from './Tooltip';
-export * from './Typography';
-export * from './Checkbox';
-export * from './Heading';
+export * from './Popover';
+export * from './Portal';
+export * from './ProgressIndicator';
 export * from './RadioButton';
+export * from './RadioButtonCard';
 export * from './RadioGroup';
-export * from './Badge';
-export * from './MainNavigation';
+export * from './SearchBox';
+export * from './SectionMessage';
 export * from './SelectBox';
 export * from './SidePane';
-export * from './Toast';
-export * from './ToggleSwitch';
-export * from './Pagination';
-export * from './Tag';
-export * from './ProgressIndicator';
-export * from './DataTable';
-export * from './DataGrid';
-export * from './SubNavigation';
-export * from './Tabs';
-export * from './DateTimeSelection';
-export * from './Stack';
-export * from './MultipleSelectBox';
-export * from './SearchBox';
-export * from './CheckboxCard';
-export * from './PageHeader';
-export * from './RadioButtonCard';
-export * from './Disclosure';
-export * from './StatusLabel';
-export * from './FileBox';
-export * from './FilterSelectBox';
-export * from './FilterTrigger';
 export * from './Skeleton';
-export * from './CheckboxGroup';
-export * from './MultipleFilterSelectBox';
-export * from './Popover';
-export * from './Portal';
-export * from './KeyValue';
-export * from './FileDropZone';
-export * from './EmbeddedSidePane';
-export * from './DisplayTable';
-export * from './Accordion';
 export * from './SplitView';
-export * from './NavigationList';
-export * from './FormFooter';
-export * from './NumberBox';
+export * from './Stack';
+export * from './StatusLabel';
+export * from './SubNavigation';
+export * from './Tabs';
+export * from './Tag';
+export * from './TextBox';
+export * from './TextLink';
+export * from './Toast';
+export * from './ToggleSwitch';
+export * from './Tooltip';
+export * from './Typography';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.13.1",
+  "version": "3.14.1",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",