@moneyforward/mfui-components 3.13.0 → 3.14.0

package/dist/src/Accordion/Accordion.js

@@ -63,7 +63,7 @@ const AccordionTrigger = forwardRef(({ children, className, onClick, ...props },
         toggle();
         onClick?.(event);
     }, [onClick, toggle]);
-    return (_jsx(FocusIndicator, { children: _jsxs("button", { ref: ref, className: cx(classes.trigger, 'mfui-Accordion__trigger', className), "aria-expanded": isOpen, "aria-controls": id, onClick: handleClick, ...props, children: [_jsx(Typography, { variant: "controlLabel", children: children }), isOpen ? _jsx(DisclosureBasicExpanded, {}) : _jsx(DisclosureBasicCollapsed, {})] }) }));
+    return (_jsx(FocusIndicator, { children: _jsxs("button", { ref: ref, className: cx(classes.trigger, 'mfui-Accordion__trigger', className), "aria-expanded": isOpen, "aria-controls": id, onClick: handleClick, ...props, children: [_jsx(Typography, { variant: "controlLabel", children: children }), isOpen ? _jsx(DisclosureBasicExpanded, { "aria-hidden": "true" }) : _jsx(DisclosureBasicCollapsed, { "aria-hidden": "true" })] }) }));
 });
 const AccordionTarget = forwardRef(({ children, className, style, ...props }, ref) => {
     const { size } = useAccordionContext();

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/MonthRangePicker/MonthRangePicker.js

@@ -31,14 +31,26 @@ import { MonthRangePickerPanel } from './MonthRangePickerPanel';
  */
 export function MonthRangePicker({ format = 'YYYY/MM', minMonth, maxMonth, startInputProps = {}, endInputProps = {}, initialDisplayedMonths, ...restProps }) {
     // MonthRangePicker panels are grouped by year (left = viewingYear, right = viewingYear + 1).
-    // When `previousAndCurrent` is requested, we must shift by a full year so the left panel
-    // shows the previous year instead of the current year.
-    const initialViewingDate = initialDisplayedMonths === 'previousAndCurrent' && !restProps.value && !restProps.defaultValue
-        ? (() => {
+    // When `previousAndCurrent` is requested, we shift by a full year so the left panel
+    // shows the previous year. This applies regardless of whether `value` is set.
+    const initialViewingDate = (() => {
+        if (initialDisplayedMonths !== 'previousAndCurrent') {
+            return;
+        }
+        const startDate = restProps.value?.[0] ?? restProps.defaultValue?.[0];
+        if (!startDate) {
+            // No value: show previous year relative to today
             const today = new Date();
             return new Date(today.getFullYear() - 1, 0, 1);
-        })()
-        : undefined;
+        }
+        const endDate = restProps.value?.[1] ?? restProps.defaultValue?.[1];
+        if (endDate && startDate.getFullYear() !== endDate.getFullYear()) {
+            // Value spans different years: provider handles it via the multi-month path
+            return;
+        }
+        // Same-year value + previousAndCurrent: show previous year on the left
+        return new Date(startDate.getFullYear() - 1, 0, 1);
+    })();
     return (_jsx(BaseRangePicker, { ...restProps, format: format, initialDisplayedMonths: initialDisplayedMonths, initialViewingDate: initialViewingDate, startInputProps: {
             placeholder: '開始月',
             ...startInputProps,

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

@@ -272,12 +272,15 @@ export type BaseRangePickerProps = {
     calendarLocale?: BasePickerProps['calendarLocale'];
     /**
      * Controls which months are initially displayed in the two-panel calendar view.
-     * - `'currentAndNext'`: Shows current month on the left and next month on the right (default behavior).
-     * - `'previousAndCurrent'`: Shows previous month on the left and current month on the right.
+     * - `'currentAndNext'`: Shows the value's start month on the left and the next month on the right.
+     *   When no value is set, shows the current month on the left and next month on the right.
+     * - `'previousAndCurrent'`: Shows the month before the value's start month on the left and
+     *   the value's start month on the right.
+     *   When no value is set, shows the previous month on the left and current month on the right.
      *   Useful for log date range selection where showing future months is not meaningful.
      *
-     * This prop only affects the initial view when no `value` or `defaultValue` is provided.
-     * When a `value` or `defaultValue` is set, the calendar will show the months containing the selected dates.
+     * When `value`/`defaultValue` spans two different months, the calendar always shows both selected
+     * months regardless of this setting.
      *
      * @default 'currentAndNext'
      *
@@ -285,6 +288,12 @@ export type BaseRangePickerProps = {
      * ```tsx
      * // Show previous month + current month for log date selection
      * <DateRangePicker initialDisplayedMonths="previousAndCurrent" />
+     *
+     * // With a value set: shows February (left) and March (right)
+     * <DateRangePicker
+     *   initialDisplayedMonths="previousAndCurrent"
+     *   value={[new Date(2024, 2, 1), new Date(2024, 2, 15)]}
+     * />
      * ```
      */
     initialDisplayedMonths?: 'currentAndNext' | 'previousAndCurrent';
@@ -293,7 +302,7 @@ export type BaseRangePickerProps = {
      * Use this when the component operates at a different granularity than months
      * (e.g., MonthRangePicker uses years for panel navigation).
      *
-     * This prop only affects the initial view when no `value` or `defaultValue` is provided.
+     * Takes the highest priority in the `viewingMonth` computation.
      *
      * @internal
      */

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/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerProvider/BaseRangePickerProvider.js

@@ -11,6 +11,40 @@ const noop = () => { };
 function normalizeToFirstOfMonth(date) {
     return dayjs(date).startOf('month').toDate();
 }
+/**
+ * Computes the initial viewing month for the dual-panel calendar.
+ *
+ * Priority:
+ * 1. `initialViewingDate` — explicit internal override (used by MonthRangePicker for year-level navigation)
+ * 2. `value`/`defaultValue` spans **different** months → use start month (both selected months visible)
+ * 3. `value`/`defaultValue` within a **single** month:
+ *    - `previousAndCurrent` → start month − 1 month (left panel = month before value, right = value month)
+ *    - `currentAndNext` → start month (left panel = value month, right = next month)
+ * 4. No value → `initialDisplayedMonths` relative to today
+ */
+function computeInitialViewingMonth({ value, defaultValue, initialViewingDate, initialDisplayedMonths, today, }) {
+    if (initialViewingDate) {
+        return initialViewingDate;
+    }
+    const rangeStart = value?.[0] ?? defaultValue?.[0];
+    const rangeEnd = value?.[1] ?? defaultValue?.[1];
+    if (rangeStart) {
+        if (rangeEnd && !dayjs(rangeStart).isSame(rangeEnd, 'month')) {
+            // Spans different months: show start month on the left
+            return rangeStart;
+        }
+        // Single-month value: apply initialDisplayedMonths
+        if (initialDisplayedMonths === 'previousAndCurrent') {
+            return dayjs(rangeStart).subtract(1, 'month').toDate();
+        }
+        return rangeStart;
+    }
+    // No value: apply initialDisplayedMonths relative to today
+    if (initialDisplayedMonths === 'previousAndCurrent') {
+        return new Date(today.getFullYear(), today.getMonth() - 1, 1);
+    }
+    return new Date(today.getFullYear(), today.getMonth(), 1);
+}
 /**
  * Checks if a date is outside the specified constraints
  *
@@ -73,12 +107,13 @@ const useBaseRangePickerContextValue = ({ value, defaultValue, disabled = false,
     const [startDateString, endDateString] = dateStrings;
     // Add viewingMonth state
     const today = useMemo(() => new Date(), []);
-    const [viewingMonth, setViewingMonth] = useTransformedState(value?.[0] ??
-        defaultValue?.[0] ??
-        initialViewingDate ??
-        (initialDisplayedMonths === 'previousAndCurrent'
-            ? new Date(today.getFullYear(), today.getMonth() - 1, 1)
-            : new Date(today.getFullYear(), today.getMonth(), 1)), normalizeToFirstOfMonth);
+    const [viewingMonth, setViewingMonth] = useTransformedState(computeInitialViewingMonth({
+        value,
+        defaultValue,
+        initialViewingDate,
+        initialDisplayedMonths,
+        today,
+    }), normalizeToFirstOfMonth);
     // --- Selection/Preview State and Logic ---
     const [selecting, setSelecting] = useState('start');
     const [temporaryStart, setTemporaryStart] = useState(startDate);

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
      */

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/SelectBox/SelectBox.js

@@ -328,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' : size === 'large' ? 'large' : '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, { "aria-hidden": "true", focusable: false }), _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/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/dist/styles.css

@@ -1326,6 +1326,8 @@
   background-color: var(--mfui-colors-mfui\.color\.neutral\.background\.none);
   color: var(--mfui-colors-mfui\.color\.base\.inverted-content\.none);
   box-shadow: var(--mfui-shadows-mfui\.elevation\.plus-1\.shadow-1);
+  word-break: break-word;
+  overflow-wrap: break-word;
   min-height: 24px;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",
@@ -61,8 +61,8 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@tanstack/react-virtual": "^3.13.18",
     "dayjs": "^1.11.13",
-    "@moneyforward/mfui-icons-react": "^3.1.0",
-    "@moneyforward/mfui-design-tokens": "^3.1.0"
+    "@moneyforward/mfui-design-tokens": "^3.1.0",
+    "@moneyforward/mfui-icons-react": "^3.1.0"
   },
   "scripts": {
     "prepare:panda": "panda codegen",