@moneyforward/mfui-components 4.6.0 → 4.7.0

package/dist/src/MultipleSelectBox/hooks/useOptionKeyboardNavigation.js

@@ -25,25 +25,31 @@ export function useOptionKeyboardNavigation({ filteredOptions, selectedValues, o
         // Fallback to 0 if no enabled option is found
         return Math.max(tabbableIndex, 0);
     }, [filteredOptions, selectedValues]);
-    // State to track which option should be tabbable
-    const [tabbableOptionIndex, setTabbableOptionIndex] = useState(getDefaultTabbableIndex());
-    // Adjusted during render (React's documented pattern for resyncing state to changed
-    // props) rather than in an effect, so the UI never flashes the stale index for one frame.
-    const [prevFilteredOptions, setPrevFilteredOptions] = useState(filteredOptions);
-    const [prevSelectedValues, setPrevSelectedValues] = useState(selectedValues);
-    if (filteredOptions !== prevFilteredOptions || selectedValues !== prevSelectedValues) {
-        setPrevFilteredOptions(filteredOptions);
-        setPrevSelectedValues(selectedValues);
-        setTabbableOptionIndex(getDefaultTabbableIndex());
-    }
-    // Update tabbable index when selected values change
+    // The focused option is stored by its value, and the tabbable index is calculated during render.
+    // Storing the index and resetting it whenever `filteredOptions` is a different array would set
+    // state during render, which loops forever when `filteredOptions` is a new array on every render
+    // (e.g. `options` is omitted). The focused option stays tabbable while it is in `filteredOptions`,
+    // including after it is toggled, so the tabbable option is always the focused one. The caller
+    // forgets it with `resetTabbableIndex` whenever the option panel opens, so every opening starts
+    // from the first selected option, or the first option when nothing is selected.
+    const [focusedOption, setFocusedOption] = useState(null);
+    const focusedOptionIndex = focusedOption
+        ? filteredOptions.findIndex((option) => isSelectableOption(option) && option.value === focusedOption.value)
+        : -1;
+    const tabbableOptionIndex = focusedOptionIndex !== -1 ? focusedOptionIndex : getDefaultTabbableIndex();
     const resetTabbableIndex = useCallback(() => {
-        setTabbableOptionIndex(getDefaultTabbableIndex());
-    }, [getDefaultTabbableIndex]);
+        setFocusedOption(null);
+    }, []);
     // Handler for when an option receives focus
     const handleOptionFocus = useCallback((optionIndex) => {
-        setTabbableOptionIndex(optionIndex);
-    }, []);
+        const option = filteredOptions[optionIndex];
+        if (!option || !isSelectableOption(option)) {
+            setFocusedOption(null);
+            return;
+        }
+        // Keep the current object when the same option is focused again, so React can skip the re-render.
+        setFocusedOption((previous) => previous && previous.value === option.value ? previous : { value: option.value });
+    }, [filteredOptions]);
     // Create keyboard event handler for an option
     const createKeyDownHandler = useCallback((option) => (event) => {
         const siblingElements = findSiblingElements(event.currentTarget, '[role="option"]:not([aria-disabled="true"])');
@@ -81,5 +87,6 @@ export function useOptionKeyboardNavigation({ filteredOptions, selectedValues, o
         tabbableOptionIndex,
         handleOptionFocus,
         createKeyDownHandler,
+        resetTabbableIndex,
     };
 }

package/dist/src/SelectBox/SelectBox.js

@@ -33,12 +33,15 @@ const DEFAULT_SCROLL_OPTIONS = {
 };
 // How many skeleton items to render while the component is loading.
 const SKELETON_ITEM_COUNT = 4;
+// The default for an omitted `options` prop. A default written inline (`options = []`) is a new
+// array on every render, which invalidates every memoized value derived from the options.
+const EMPTY_OPTIONS = [];
 /**
  * The general-purpose SelectBox component.
  * This component switches the variants of looks and behaviors depends on the props: size, invalid, caution, disabled.
  */
 export const SelectBox = forwardRef((props, ref) => {
-    const { id, triggerProps, clearButtonProps, enableClearButton = false, size, options = [], defaultValue, 
+    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;
     const classes = selectBoxSlotRecipe({ size, showGroupOptionDivider });
@@ -215,7 +218,7 @@ export const SelectBox = forwardRef((props, ref) => {
     });
     // Cleanup timeout on unmount
     useEffect(() => cleanup, [cleanup]);
-    const { tabbableOptionIndex, handleOptionFocus, createKeyDownHandler } = useKeyboardNavigation({
+    const { tabbableOptionIndex, handleOptionFocus, createKeyDownHandler, resetTabbableIndex } = useKeyboardNavigation({
         isOptionPanelOpen,
         loading,
         enableSearchOptions,
@@ -384,6 +387,12 @@ export const SelectBox = forwardRef((props, ref) => {
     };
     const hasSelectedValue = value !== undefined || localSelectedOption !== null;
     const showClearButton = enableClearButton && hasSelectedValue;
+    const handleOpenStateChanged = (open) => {
+        // Every opening starts from the selected option, not from the option focused last time.
+        if (open)
+            resetTabbableIndex();
+        toggleOptionPanel();
+    };
     // Use Popover's centralized blur handling instead of custom logic
     return (_jsx(Popover, { open: isOptionPanelOpen, targetDOMNode: targetDOMNode, minWidth: popoverContentProps?.minWidth, maxHeight: popoverWrapperProps?.maxHeight, allowedPlacements: popoverContentProps?.allowedPlacements, enableConstrainedContentWidth: enableConstrainedPopoverWidth, renderContent: () => (_jsx("div", { ref: optionPanelRef, 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, 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": isOptionPanelOpen ? listBoxId : undefined, "aria-describedby": triggerProps?.['aria-describedby'], "aria-expanded": isOptionPanelOpen, "aria-haspopup": "listbox", "aria-invalid": invalid, "aria-required": required, className: cx(classes.trigger, 'mfui-SelectBox__trigger', triggerProps?.className), "data-placeholder": !!placeholder && !localSelectedOption, "data-selected": !!localSelectedOption, "data-mfui-has-clear-button": showClearButton, "data-mfui-caution": caution && !invalid ? true : undefined, onClick: togglePopover, onKeyDown: (event) => {
                             handleTypeAhead(event.nativeEvent);
@@ -391,6 +400,6 @@ export const SelectBox = forwardRef((props, ref) => {
                         }, 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 }));
+                        } }) })) : null] })), contentProps: { className: classes.popover }, enableAutoUnmount: enableAutoUnmount, onOpenStateChanged: handleOpenStateChanged, onBlur: onBlur }));
 });
 SelectBox.displayName = 'SelectBox';

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

@@ -73,5 +73,6 @@ export declare function useKeyboardNavigation<T extends string | number | undefi
     tabbableOptionIndex: number;
     handleOptionFocus: (optionIndex: number) => void;
     createKeyDownHandler: (option: SelectBoxOption<T, AdditionalProps>) => KeyboardEventHandler<HTMLLIElement>;
+    resetTabbableIndex: () => void;
 };
 export {};

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

@@ -2,6 +2,7 @@
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import { useState, useCallback, useEffect } from 'react';
 import { findSiblingElements } from '../../utilities/dom/findSiblingElements';
+import { getDeepActiveElement } from '../../utilities/dom/getDeepActiveElement';
 import { escapeAttributeSelector } from '../utils/getFlatOptions';
 import { isOptionDisabled } from '../utils/isSelectableOption';
 const DEFAULT_SCROLL_OPTIONS = {
@@ -29,28 +30,41 @@ export function useKeyboardNavigation({ isOptionPanelOpen, loading, enableSearch
             : -1;
         return selectedIndex !== -1 ? selectedIndex : 0;
     }, [flatOptions, localSelectedOption]);
-    const [tabbableOptionIndex, setTabbableOptionIndex] = useState(getDefaultTabbableIndex());
-    // Adjusted during render (React's documented pattern for resyncing state to changed
-    // props) rather than in an effect, so the UI never flashes the stale index for one frame.
-    const [prevFlatOptions, setPrevFlatOptions] = useState(flatOptions);
-    const [prevLocalSelectedOption, setPrevLocalSelectedOption] = useState(localSelectedOption);
-    if (flatOptions !== prevFlatOptions || localSelectedOption !== prevLocalSelectedOption) {
-        setPrevFlatOptions(flatOptions);
-        setPrevLocalSelectedOption(localSelectedOption);
-        setTabbableOptionIndex(getDefaultTabbableIndex());
-    }
+    // The focused option is stored by its value, and the tabbable index is calculated during render.
+    // Storing the index and resetting it whenever `flatOptions` is a different array would set state
+    // during render, which loops forever when `flatOptions` is a new array on every render (e.g.
+    // `options` is omitted). The focused option stays tabbable while it is in `flatOptions`. The
+    // caller forgets it with `resetTabbableIndex` whenever the option panel opens, so every opening
+    // starts from the selected option, or the first option when nothing is selected.
+    const [focusedOption, setFocusedOption] = useState(null);
+    const focusedOptionIndex = focusedOption
+        ? flatOptions.findIndex((option) => option.value === focusedOption.value)
+        : -1;
+    const tabbableOptionIndex = focusedOptionIndex !== -1 ? focusedOptionIndex : getDefaultTabbableIndex();
     const resetTabbableIndex = useCallback(() => {
-        setTabbableOptionIndex(getDefaultTabbableIndex());
-    }, [getDefaultTabbableIndex]);
+        setFocusedOption(null);
+    }, []);
     const handleOptionFocus = useCallback((optionIndex) => {
-        setTabbableOptionIndex(optionIndex);
+        const option = flatOptions[optionIndex];
+        if (!option) {
+            setFocusedOption(null);
+            return;
+        }
+        // Keep the current object when the same option is focused again, so React can skip the re-render.
+        setFocusedOption((previous) => previous && previous.value === option.value ? previous : { value: option.value });
         // Don't do auto-scroll on focus change - let selection handle its own scrolling
         // This prevents interference between focus events (from clicks) and selection logic
         // Auto-scroll should only happen when an option is actually selected, not just focused
-    }, []);
+    }, [flatOptions]);
     useEffect(() => {
         if (!isOptionPanelOpen)
             return;
+        // The effect also runs when the options change while the panel is open (e.g. infinite scroll
+        // loaded more). Don't take the focus away from an option the user has already moved to.
+        const activeElement = getDeepActiveElement();
+        if (activeElement?.getAttribute('role') === 'option' && optionPanelRef.current?.contains(activeElement)) {
+            return;
+        }
         // When loading, focus on the option panel root div to enable ESC key functionality
         if (loading) {
             optionPanelRef.current?.focus({ preventScroll: true });
@@ -220,5 +234,6 @@ export function useKeyboardNavigation({ isOptionPanelOpen, loading, enableSearch
         tabbableOptionIndex,
         handleOptionFocus,
         createKeyDownHandler,
+        resetTabbableIndex,
     };
 }

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

@@ -9,6 +9,12 @@ export declare const DEFAULT_MAX_WIDTH = "268px";
  * - `className`: Applied to the root wrapper element that contains the trigger children
  * - `contentProps.className`: Applied to the floating tooltip content element
  *
+ * ## Layering
+ *
+ * The tooltip content is drawn on the `--mfui-z-index-tooltip` layer (`10000`), above every other layer MFUI renders.
+ * To place it above an application overlay with a higher `z-index`, set `z-index` through `contentProps.className`.
+ * See the "Layering" page in Storybook for the full layer order.
+ *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
  *
  * @example

package/dist/src/Tooltip/Tooltip.js

@@ -22,6 +22,12 @@ export const DEFAULT_MAX_WIDTH = '268px';
  * - `className`: Applied to the root wrapper element that contains the trigger children
  * - `contentProps.className`: Applied to the floating tooltip content element
  *
+ * ## Layering
+ *
+ * The tooltip content is drawn on the `--mfui-z-index-tooltip` layer (`10000`), above every other layer MFUI renders.
+ * To place it above an application overlay with a higher `z-index`, set `z-index` through `contentProps.className`.
+ * See the "Layering" page in Storybook for the full layer order.
+ *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
  *
  * @example

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

@@ -10,7 +10,7 @@ type DataTableBodySlotRecipeVariantMap = {
   [key in keyof DataTableBodySlotRecipeVariant]: Array<DataTableBodySlotRecipeVariant[key]>
 }
 
-type DataTableBodySlotRecipeSlot = "root"
+type DataTableBodySlotRecipeSlot = "root" | "spacer"
 
 export type DataTableBodySlotRecipeVariantProps = {
   [key in keyof DataTableBodySlotRecipeVariant]?: ConditionalValue<DataTableBodySlotRecipeVariant[key]> | undefined

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

@@ -6,6 +6,10 @@ const dataTableBodySlotRecipeSlotNames = [
     [
         "root",
         "DataTableBody__root"
+    ],
+    [
+        "spacer",
+        "DataTableBody__spacer"
     ]
 ];
 const dataTableBodySlotRecipeSlotFns = /* @__PURE__ */ dataTableBodySlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableBodySlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableBodySlotRecipeCompoundVariants, slotName))]);

package/dist/styled-system/tokens/index.js

@@ -5667,6 +5667,10 @@ const tokens = {
         "value": 1000,
         "variable": "var(--mfui-z-index-toast-item)"
     },
+    "zIndex.tooltip": {
+        "value": 10000,
+        "variable": "var(--mfui-z-index-tooltip)"
+    },
     "breakpoints.sm": {
         "value": "600px",
         "variable": "var(--mfui-breakpoints-sm)"

package/dist/styled-system/tokens/tokens.d.ts

@@ -15,7 +15,7 @@ export type DurationToken = "mfui.core.transition.duration.none" | "mfui.core.tr
 
 export type EasingToken = "mfui.core.transition.easing.linear" | "mfui.core.transition.easing.ease-in-out" | "mfui.transition.easing.side-pane.in" | "mfui.transition.easing.side-pane.out" | "mfui.transition.easing.split-view.in" | "mfui.transition.easing.split-view.out"
 
-export type ZIndexToken = "dialog" | "toast.container" | "toast.item"
+export type ZIndexToken = "dialog" | "toast.container" | "toast.item" | "tooltip"
 
 export type BreakpointToken = "sm" | "lg"
 

package/dist/styles.css

@@ -153,6 +153,7 @@
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               --mfui-z-index-dialog: 5000;
   --mfui-z-index-toast-container: 9999;
   --mfui-z-index-toast-item: 1000;
+  --mfui-z-index-tooltip: 10000;
                                   --mfui-colors-mfui\.color\.base\.content\.none: #262626ff;
   --mfui-colors-mfui\.color\.base\.content\.hovered: #111111ff;
   --mfui-colors-mfui\.color\.base\.content\.pressed: #000000ff;
@@ -1444,6 +1445,7 @@
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.control\.horizontal\.comfort);
   border-radius: var(--mfui-radii-mfui\.size\.radius\.indicator-component\.comfort);
   position: fixed;
+  z-index: var(--mfui-z-index-tooltip);
   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);
@@ -2977,6 +2979,11 @@
   top: 50%;
 }
 
+.mfui-kWseNH {
+  padding: 0;
+  border: 0;
+}
+
 .mfui-dDOVnx {
   vertical-align: top;
 }
@@ -7793,9 +7800,7 @@ li:last-child > .mfui-cXGJls {
 }
 
 .mfui-coGcRr {
-  width: 32px;
-  min-width: 32px;
-  max-width: 32px;
+  width: calc(var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort) + var(--mfui-spacing-mfui\.size\.padding\.data-table-cell\.horizontal\.comfort) * 2 + var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort));
 }
 
 .mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)) {
@@ -8001,7 +8006,7 @@ li:last-child > .mfui-cXGJls {
 }
 
 .mfui-hdkeDU {
-  width: 32px;
+  width: calc(var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort) + var(--mfui-spacing-mfui\.size\.padding\.data-table-cell\.horizontal\.comfort) * 2 + var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort));
 }
 
 .mfui-dQChFX:not(:disabled, [disabled], [data-disabled]) {