@moneyforward/mfui-components 4.5.0 → 4.6.0

package/dist/src/Tooltip/hooks/useTooltipDisplayController.js

@@ -79,98 +79,87 @@ export function useTooltipDisplayController({ trigger, wrapperProps, tooltipOpen
             return updatedWrapperProps;
         if (tooltipOpen)
             return updatedWrapperProps;
-        Object.assign(updatedWrapperProps, {
-            onMouseDown: (event) => {
-                isMouseTriggered.current = true;
-                wrapperProps.onMouseDown?.(event);
-            },
-            onMouseUp: (event) => {
-                isMouseTriggered.current = false;
-                wrapperProps.onMouseUp?.(event);
-            },
-            onKeyDown: (event) => {
-                if (event.key === 'Enter' && open) {
-                    closeWithManager();
-                }
-                wrapperProps.onKeyDown?.(event);
-            },
-        });
+        // Assigned directly (not via `Object.assign`) so the compiler can see these
+        // ref-closing handlers are only ever stored as props, never invoked here.
+        updatedWrapperProps.onMouseDown = (event) => {
+            isMouseTriggered.current = true;
+            wrapperProps.onMouseDown?.(event);
+        };
+        updatedWrapperProps.onMouseUp = (event) => {
+            isMouseTriggered.current = false;
+            wrapperProps.onMouseUp?.(event);
+        };
+        updatedWrapperProps.onKeyDown = (event) => {
+            if (event.key === 'Enter' && open) {
+                closeWithManager();
+            }
+            wrapperProps.onKeyDown?.(event);
+        };
         if (triggers.includes('hover')) {
-            Object.assign(updatedWrapperProps, {
-                onMouseEnter: (event) => {
-                    if (!isEventFromTrigger(event))
-                        return;
-                    triggerSource.current = 'hover';
-                    isHoveringTrigger.current = true;
-                    cancelClose(); // Cancel any pending close
-                    openWithManager('delayed');
-                    wrapperProps.onMouseEnter?.(event);
-                },
-                onMouseLeave: (event) => {
-                    if (triggerSource.current !== 'hover')
-                        return;
-                    if (!isEventFromTrigger(event))
-                        return;
-                    isHoveringTrigger.current = false;
-                    // Only start close timer if also not hovering tooltip
-                    // Use queueMicrotask to avoid race conditions with rapid mouse events
-                    queueMicrotask(() => {
-                        closeWithDelayIfNotHovering();
-                    });
-                    wrapperProps.onMouseLeave?.(event);
-                },
-            });
-        }
-        if (triggers.includes('click')) {
-            Object.assign(updatedWrapperProps, {
-                onClick: (event) => {
-                    if (!isEventFromTrigger(event))
-                        return;
-                    if (!open) {
-                        triggerSource.current = 'click';
-                        openWithManager('immediate');
-                    }
-                    else {
-                        closeWithManager();
-                    }
-                    wrapperProps.onClick?.(event);
-                },
-            });
-        }
-        else {
-            // When click is not a trigger, clicking should close the tooltip if it's open
-            Object.assign(updatedWrapperProps, {
-                onClick: (event) => {
-                    if (!isEventFromTrigger(event))
-                        return;
-                    if (open) {
-                        closeWithManager();
-                    }
-                    wrapperProps.onClick?.(event);
-                },
-            });
+            updatedWrapperProps.onMouseEnter = (event) => {
+                if (!isEventFromTrigger(event))
+                    return;
+                triggerSource.current = 'hover';
+                isHoveringTrigger.current = true;
+                cancelClose(); // Cancel any pending close
+                openWithManager('delayed');
+                wrapperProps.onMouseEnter?.(event);
+            };
+            updatedWrapperProps.onMouseLeave = (event) => {
+                if (triggerSource.current !== 'hover')
+                    return;
+                if (!isEventFromTrigger(event))
+                    return;
+                isHoveringTrigger.current = false;
+                // Only start close timer if also not hovering tooltip
+                // Use queueMicrotask to avoid race conditions with rapid mouse events
+                queueMicrotask(() => {
+                    closeWithDelayIfNotHovering();
+                });
+                wrapperProps.onMouseLeave?.(event);
+            };
         }
-        if (triggers.includes('focus')) {
-            Object.assign(updatedWrapperProps, {
-                onFocus: (event) => {
-                    if (!isEventFromTrigger(event))
-                        return;
-                    // onFocus event is triggered before onClick event when the mouse is clicked, so we need to skip it
-                    if (isMouseTriggered.current)
-                        return;
-                    triggerSource.current = 'focus';
+        // When click is not a trigger, clicking should still close the tooltip if it's open.
+        updatedWrapperProps.onClick = triggers.includes('click')
+            ? (event) => {
+                if (!isEventFromTrigger(event))
+                    return;
+                if (!open) {
+                    triggerSource.current = 'click';
                     openWithManager('immediate');
-                    wrapperProps.onFocus?.(event);
-                },
-                onBlur: (event) => {
-                    if (triggerSource.current !== 'focus')
-                        return;
-                    if (!isEventFromTrigger(event))
-                        return;
+                }
+                else {
                     closeWithManager();
-                    wrapperProps.onBlur?.(event);
-                },
-            });
+                }
+                wrapperProps.onClick?.(event);
+            }
+            : (event) => {
+                if (!isEventFromTrigger(event))
+                    return;
+                if (open) {
+                    closeWithManager();
+                }
+                wrapperProps.onClick?.(event);
+            };
+        if (triggers.includes('focus')) {
+            updatedWrapperProps.onFocus = (event) => {
+                if (!isEventFromTrigger(event))
+                    return;
+                // onFocus event is triggered before onClick event when the mouse is clicked, so we need to skip it
+                if (isMouseTriggered.current)
+                    return;
+                triggerSource.current = 'focus';
+                openWithManager('immediate');
+                wrapperProps.onFocus?.(event);
+            };
+            updatedWrapperProps.onBlur = (event) => {
+                if (triggerSource.current !== 'focus')
+                    return;
+                if (!isEventFromTrigger(event))
+                    return;
+                closeWithManager();
+                wrapperProps.onBlur?.(event);
+            };
         }
         return updatedWrapperProps;
     }, [

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

@@ -26,9 +26,7 @@ const isNonTabbableRadio = (node) => {
     }
     const getRadio = (selector) => node.ownerDocument.querySelector(`input[type="radio"]${selector}`);
     let roving = getRadio(`[name="${node.name}"]:checked`);
-    if (!roving) {
-        roving = getRadio(`[name="${node.name}"]`);
-    }
+    roving ??= getRadio(`[name="${node.name}"]`);
     return roving !== node;
 };
 // This function ensures that the node is focusable by checking if it is disabled, hidden, or a non-tabbable radio button.

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

@@ -4,7 +4,6 @@ import { useLayoutEffect, useMemo, useRef, useState } from 'react';
  */
 export const useFixedColumns = ({ enableRowSelection = false, columnIndex, leftFixedColumnIndex, rightFixedColumnIndex, }) => {
     const cellRef = useRef(null);
-    const [fixedPositionStyles, setFixedPositionStyles] = useState();
     const isCheckboxColumn = enableRowSelection && columnIndex === 0;
     // Adjust column index when row selection is enabled to account for the checkbox column
     const actualColumnIndex = useMemo(() => {
@@ -79,19 +78,18 @@ export const useFixedColumns = ({ enableRowSelection = false, columnIndex, leftF
             resizeObserver.disconnect();
         };
     }, []);
-    useLayoutEffect(() => {
+    // Fully derivable from render-time values (no external system involved), so this is a
+    // plain memo rather than an effect writing to its own state.
+    const fixedPositionStyles = useMemo(() => {
         if (isCheckboxColumn && leftFixedColumnIndex !== undefined) {
-            setFixedPositionStyles({
-                left: 0,
-            });
-            return;
+            return { left: 0 };
         }
         if (!cellRect)
             return;
-        setFixedPositionStyles({
+        return {
             left: fixedDirection === 'left' ? cellRect.left : undefined,
             right: fixedDirection === 'right' ? cellRect.right : undefined,
-        });
+        };
     }, [cellRect, fixedDirection, isCheckboxColumn, leftFixedColumnIndex]);
     const isFixedColumn = useMemo(() => fixedDirection !== undefined, [fixedDirection]);
     const isEdgeFixedColumn = useMemo(() => {

package/dist/src/utilities/react/flattenChildren.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Flattens React children by expanding Fragments so that elements wrapped in a
+ * Fragment (e.g. `<>{items.map(...)}</>`) become directly visible to
+ * `Children`-based inspection such as `isComponentOrWrapped`.
+ *
+ * The keys assigned by `Children.toArray` are combined with the keys of the
+ * enclosing Fragments so that they stay unique after flattening.
+ *
+ * @param children - The React children to flatten
+ *
+ * @param parentKeys - The accumulated keys of the enclosing Fragments (internal use for recursion)
+ *
+ * @returns The flattened children with Fragments expanded
+ */
+export declare function flattenChildren(children: React.ReactNode, parentKeys?: readonly (string | number)[]): React.ReactNode[];

package/dist/src/utilities/react/flattenChildren.js

@@ -0,0 +1,28 @@
+import { Children, Fragment, cloneElement, isValidElement } from 'react';
+/**
+ * Flattens React children by expanding Fragments so that elements wrapped in a
+ * Fragment (e.g. `<>{items.map(...)}</>`) become directly visible to
+ * `Children`-based inspection such as `isComponentOrWrapped`.
+ *
+ * The keys assigned by `Children.toArray` are combined with the keys of the
+ * enclosing Fragments so that they stay unique after flattening.
+ *
+ * @param children - The React children to flatten
+ *
+ * @param parentKeys - The accumulated keys of the enclosing Fragments (internal use for recursion)
+ *
+ * @returns The flattened children with Fragments expanded
+ */
+export function flattenChildren(children, parentKeys = []) {
+    return Children.toArray(children).flatMap((child, index) => {
+        if (isValidElement(child) && child.type === Fragment) {
+            return flattenChildren(child.props.children, [...parentKeys, child.key ?? index]);
+        }
+        if (isValidElement(child) && parentKeys.length > 0) {
+            // ':' cannot appear in the combined segments (React escapes it in user keys), so it
+            // keeps structurally different key paths from composing into the same string.
+            return cloneElement(child, { key: [...parentKeys, child.key].join(':') });
+        }
+        return child;
+    });
+}

package/dist/src/utilities/state/useLatest.d.ts

@@ -5,7 +5,7 @@
  *
  * @param value - Any value that you want to track
  *
- * @returns The React's RefObject of that value, which always the latest value.
+ * @returns The React's RefObject of that value, which holds the latest committed value.
  *
  * @see [React Hooks FAQ](https://legacy.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function)
  *

package/dist/src/utilities/state/useLatest.js

@@ -1,4 +1,5 @@
 import { useRef } from 'react';
+import { useIsomorphicLayoutEffect } from '../react/useIsomorphicLayoutEffect';
 /**
  * React state hook that returns the latest state as described in the React hooks FAQ.
  *
@@ -6,7 +7,7 @@ import { useRef } from 'react';
  *
  * @param value - Any value that you want to track
  *
- * @returns The React's RefObject of that value, which always the latest value.
+ * @returns The React's RefObject of that value, which holds the latest committed value.
  *
  * @see [React Hooks FAQ](https://legacy.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function)
  *
@@ -14,6 +15,11 @@ import { useRef } from 'react';
  */
 export const useLatest = (value) => {
     const ref = useRef(value);
-    ref.current = value;
+    // Committed in a layout effect rather than assigned during render (React's rules
+    // disallow render-time mutation). Callers only read `.current` from callbacks and
+    // effects, which all run after this commits.
+    useIsomorphicLayoutEffect(() => {
+        ref.current = value;
+    });
     return ref;
 };

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

@@ -10,7 +10,7 @@ type BadgeSlotRecipeVariantMap = {
   [key in keyof BadgeSlotRecipeVariant]: Array<BadgeSlotRecipeVariant[key]>
 }
 
-type BadgeSlotRecipeSlot = "root" | "indicator"
+type BadgeSlotRecipeSlot = "root" | "indicator" | "srOnlyLabel"
 
 export type BadgeSlotRecipeVariantProps = {
   [key in keyof BadgeSlotRecipeVariant]?: ConditionalValue<BadgeSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/badge-slot-recipe.js

@@ -10,6 +10,10 @@ const badgeSlotRecipeSlotNames = [
     [
         "indicator",
         "Badge__indicator"
+    ],
+    [
+        "srOnlyLabel",
+        "Badge__srOnlyLabel"
     ]
 ];
 const badgeSlotRecipeSlotFns = /* @__PURE__ */ badgeSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, badgeSlotRecipeDefaultVariants, getSlotCompoundVariant(badgeSlotRecipeCompoundVariants, slotName))]);

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

@@ -19,7 +19,7 @@ type DataTableCellSlotRecipeVariantMap = {
   [key in keyof DataTableCellSlotRecipeVariant]: Array<DataTableCellSlotRecipeVariant[key]>
 }
 
-type DataTableCellSlotRecipeSlot = "root" | "defaultCell" | "interactiveCell" | "disclosureIconWrapper" | "disclosureSpacing" | "skeletonCell"
+type DataTableCellSlotRecipeSlot = "root" | "defaultCell" | "interactiveCell" | "disclosureIconWrapper" | "disclosureSpacing" | "skeletonCell" | "rowActionButton"
 
 export type DataTableCellSlotRecipeVariantProps = {
   [key in keyof DataTableCellSlotRecipeVariant]?: DataTableCellSlotRecipeVariant[key] | undefined

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

@@ -68,6 +68,10 @@ const dataTableCellSlotRecipeSlotNames = [
     [
         "skeletonCell",
         "DataTableCell__skeletonCell"
+    ],
+    [
+        "rowActionButton",
+        "DataTableCell__rowActionButton"
     ]
 ];
 const dataTableCellSlotRecipeSlotFns = /* @__PURE__ */ dataTableCellSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableCellSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableCellSlotRecipeCompoundVariants, slotName))]);

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

@@ -13,12 +13,8 @@ const dataTableRowSlotRecipeCompoundVariants = [
                         "backgroundColor": "mfui.color.selected.background.hovered"
                     }
                 },
-                "_focusVisible": {
-                    "backgroundColor": "mfui.color.selected.background.hovered",
-                    "boxShadow": "[0px 0px 0px 2px {colors.mfui.color.primary.border.none} inset, 0px 0px 0px 3px {colors.mfui.color.base.background.none} inset]"
-                },
-                "_focusInputInside": {
-                    "boxShadow": "[none]"
+                "&:has([data-mfui-content=\"data-table-row-action-button\"]:focus-visible)": {
+                    "backgroundColor": "mfui.color.selected.background.hovered"
                 },
                 "_active": {
                     "&:not(:has(button:hover, input:hover, select:hover, textarea:hover, [tabindex]:hover, [data-mfui-content=\"data-table-checkbox-cell\"]:hover))": {
@@ -27,6 +23,17 @@ const dataTableRowSlotRecipeCompoundVariants = [
                 }
             }
         }
+    },
+    {
+        "highlighted": true,
+        "rowClickSelectable": true,
+        "css": {
+            "root": {
+                "&:has(.mfui-DataTableRow__selectionCheckbox input[type=\"checkbox\"]:focus-visible)": {
+                    "backgroundColor": "mfui.color.selected.background.hovered"
+                }
+            }
+        }
     }
 ];
 const dataTableRowSlotRecipeSlotNames = [

package/dist/styled-system/recipes/sub-navigation-slot-recipe.d.ts

@@ -11,7 +11,7 @@ type SubNavigationSlotRecipeVariantMap = {
   [key in keyof SubNavigationSlotRecipeVariant]: Array<SubNavigationSlotRecipeVariant[key]>
 }
 
-type SubNavigationSlotRecipeSlot = "root" | "subNavigationHeader" | "list" | "listItem" | "link" | "labelIcon" | "label" | "statusSlot" | "details" | "summary" | "disclosureIcon" | "nestedListItem"
+type SubNavigationSlotRecipeSlot = "root" | "subNavigationHeader" | "list" | "listItem" | "link" | "labelContainer" | "labelIcon" | "labelContent" | "label" | "description" | "statusSlot" | "details" | "summary" | "disclosureIcon" | "nestedListItem"
 
 export type SubNavigationSlotRecipeVariantProps = {
   [key in keyof SubNavigationSlotRecipeVariant]?: ConditionalValue<SubNavigationSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/sub-navigation-slot-recipe.js

@@ -23,14 +23,26 @@ const subNavigationSlotRecipeSlotNames = [
         "link",
         "SubNavigation__link"
     ],
+    [
+        "labelContainer",
+        "SubNavigation__labelContainer"
+    ],
     [
         "labelIcon",
         "SubNavigation__labelIcon"
     ],
+    [
+        "labelContent",
+        "SubNavigation__labelContent"
+    ],
     [
         "label",
         "SubNavigation__label"
     ],
+    [
+        "description",
+        "SubNavigation__description"
+    ],
     [
         "statusSlot",
         "SubNavigation__statusSlot"