@moneyforward/mfui-components 3.25.1 → 3.27.0

package/dist/src/SplitView/hooks/useSplitViewKeyboard.d.ts

@@ -10,6 +10,7 @@ export declare function useSplitViewKeyboard(options: {
     initialPanelSize: number;
     minPanelSize: number;
     maxPanelSize: number;
+    onWidthChange?: (width: number) => void;
     setControlledPanelSize: (size: number | undefined) => void;
     setLastControlledPanelSize: (size: number | undefined) => void;
 }): {

package/dist/src/SplitView/hooks/useSplitViewKeyboard.js

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { KEYBOARD_STEP_PX } from '../constants';
 import { calculateConstrainedPanelSize } from '../utils/calculatePanelSize';
 /**
@@ -7,7 +7,11 @@ import { calculateConstrainedPanelSize } from '../utils/calculatePanelSize';
  * @param options - Keyboard hook options
  */
 export function useSplitViewKeyboard(options) {
-    const { containerRef, targetPanel, controlledPanelSize, initialPanelSize, minPanelSize, maxPanelSize, setControlledPanelSize, setLastControlledPanelSize, } = options;
+    const { containerRef, targetPanel, controlledPanelSize, initialPanelSize, minPanelSize, maxPanelSize, onWidthChange, setControlledPanelSize, setLastControlledPanelSize, } = options;
+    const onWidthChangeRef = useRef(onWidthChange);
+    useEffect(() => {
+        onWidthChangeRef.current = onWidthChange;
+    });
     /**
      * Handle keyboard navigation for the divider.
      *
@@ -36,6 +40,9 @@ export function useSplitViewKeyboard(options) {
         const constrainedSize = calculateConstrainedPanelSize(newSize, minPanelSize, maxPanelSize);
         setControlledPanelSize(constrainedSize);
         setLastControlledPanelSize(constrainedSize);
+        if (constrainedSize !== currentSize) {
+            onWidthChangeRef.current?.(constrainedSize);
+        }
     }, [
         containerRef,
         targetPanel,

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

@@ -1,7 +1,22 @@
-import { useCallback, useEffect, useId, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, } from 'react';
 import { useUpdateEffect } from '../../utilities/effect/useUpdateEffect';
 import { tooltipManager } from '../GlobalTooltipManager';
 import { useOpenStateDelayed } from './useOpenStateDelayed';
+/**
+ * Returns `true` only when the event originated from an element that is a real DOM
+ * descendant of the wrapper (i.e. the trigger itself).
+ *
+ * React dispatches synthetic events along the React tree, not the DOM tree, so events
+ * from portaled descendants (e.g. a DropdownMenu popover rendered into `document.body`)
+ * still bubble up to the wrapper's handlers. Those elements are not DOM descendants of
+ * the wrapper, so this check filters them out and prevents the tooltip from reacting to
+ * interactions that happen inside portaled content.
+ *
+ * @param event - The synthetic event dispatched to the wrapper handler.
+ */
+function isEventFromTrigger(event) {
+    return event.currentTarget.contains(event.target);
+}
 /**
  * A hook to control the display of the tooltip.
  *
@@ -82,6 +97,8 @@ export function useTooltipDisplayController({ trigger, wrapperProps, tooltipOpen
         if (triggers.includes('hover')) {
             Object.assign(updatedWrapperProps, {
                 onMouseEnter: (event) => {
+                    if (!isEventFromTrigger(event))
+                        return;
                     triggerSource.current = 'hover';
                     isHoveringTrigger.current = true;
                     cancelClose(); // Cancel any pending close
@@ -91,6 +108,8 @@ export function useTooltipDisplayController({ trigger, wrapperProps, tooltipOpen
                 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
@@ -104,6 +123,8 @@ export function useTooltipDisplayController({ trigger, wrapperProps, tooltipOpen
         if (triggers.includes('click')) {
             Object.assign(updatedWrapperProps, {
                 onClick: (event) => {
+                    if (!isEventFromTrigger(event))
+                        return;
                     if (!open) {
                         triggerSource.current = 'click';
                         openWithManager('immediate');
@@ -119,6 +140,8 @@ export function useTooltipDisplayController({ trigger, wrapperProps, tooltipOpen
             // 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();
                     }
@@ -129,6 +152,8 @@ export function useTooltipDisplayController({ trigger, wrapperProps, tooltipOpen
         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;
@@ -139,6 +164,8 @@ export function useTooltipDisplayController({ trigger, wrapperProps, tooltipOpen
                 onBlur: (event) => {
                     if (triggerSource.current !== 'focus')
                         return;
+                    if (!isEventFromTrigger(event))
+                        return;
                     closeWithManager();
                     wrapperProps.onBlur?.(event);
                 },

package/dist/src/index.d.ts

@@ -42,6 +42,7 @@ export * from './RadioGroup';
 export * from './SearchBox';
 export * from './SectionMessage';
 export * from './SelectBox';
+export * from './Sidebar';
 export * from './SidePane';
 export * from './Skeleton';
 export * from './SplitView';

package/dist/src/index.js

@@ -42,6 +42,7 @@ export * from './RadioGroup';
 export * from './SearchBox';
 export * from './SectionMessage';
 export * from './SelectBox';
+export * from './Sidebar';
 export * from './SidePane';
 export * from './Skeleton';
 export * from './SplitView';

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

@@ -0,0 +1,11 @@
+import { useEffect } from 'react';
+/**
+ * `useLayoutEffect` that falls back to `useEffect` on the server.
+ *
+ * `useLayoutEffect` does nothing during server rendering and React logs a warning when it is used
+ * there. Using this hook keeps the synchronous, pre-paint timing on the client while avoiding the
+ * SSR warning.
+ *
+ * @see https://react.dev/reference/react/useLayoutEffect#caveats
+ */
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

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

@@ -0,0 +1,11 @@
+import { useEffect, useLayoutEffect } from 'react';
+/**
+ * `useLayoutEffect` that falls back to `useEffect` on the server.
+ *
+ * `useLayoutEffect` does nothing during server rendering and React logs a warning when it is used
+ * there. Using this hook keeps the synchronous, pre-paint timing on the client while avoiding the
+ * SSR warning.
+ *
+ * @see https://react.dev/reference/react/useLayoutEffect#caveats
+ */
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/dist/styled-system/recipes/index.d.ts

@@ -98,4 +98,5 @@ export * from './split-view-slot-recipe';
 export * from './toggle-switch-slot-recipe';
 export * from './navigation-list-slot-recipe';
 export * from './navigation-list-item-slot-recipe';
-export * from './form-footer-slot-recipe';
+export * from './form-footer-slot-recipe';
+export * from './sidebar-slot-recipe';

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

@@ -98,3 +98,4 @@ export * from './toggle-switch-slot-recipe.js';
 export * from './navigation-list-slot-recipe.js';
 export * from './navigation-list-item-slot-recipe.js';
 export * from './form-footer-slot-recipe.js';
+export * from './sidebar-slot-recipe.js';

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

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface SidebarSlotRecipeVariant {
+  
+}
+
+type SidebarSlotRecipeVariantMap = {
+  [key in keyof SidebarSlotRecipeVariant]: Array<SidebarSlotRecipeVariant[key]>
+}
+
+type SidebarSlotRecipeSlot = "root" | "header" | "leftPane" | "logo" | "navigationWrapper" | "mainNavigation" | "extraNavigation" | "navigationList" | "navigationListItem" | "navigationDivider" | "navigationLink" | "navigationLinkInner" | "navigationLinkIcon" | "navigationLinkLabel" | "navigationLinkLabelInner" | "footer" | "footerSlot" | "serviceMenu" | "footerIconMenu" | "footerUserIdMenu" | "footerUserIdMenuItem" | "handle"
+
+export type SidebarSlotRecipeVariantProps = {
+  [key in keyof SidebarSlotRecipeVariant]?: ConditionalValue<SidebarSlotRecipeVariant[key]> | undefined
+}
+
+export interface SidebarSlotRecipeRecipe {
+  __slot: SidebarSlotRecipeSlot
+  __type: SidebarSlotRecipeVariantProps
+  (props?: SidebarSlotRecipeVariantProps): Pretty<Record<SidebarSlotRecipeSlot, string>>
+  raw: (props?: SidebarSlotRecipeVariantProps) => SidebarSlotRecipeVariantProps
+  variantMap: SidebarSlotRecipeVariantMap
+  variantKeys: Array<keyof SidebarSlotRecipeVariant>
+  splitVariantProps<Props extends SidebarSlotRecipeVariantProps>(props: Props): [SidebarSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof SidebarSlotRecipeVariantProps>>]
+  getVariantProps: (props?: SidebarSlotRecipeVariantProps) => SidebarSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI Sidebar component.
+ */
+export declare const sidebarSlotRecipe: SidebarSlotRecipeRecipe

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

@@ -0,0 +1,112 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const sidebarSlotRecipeDefaultVariants = {};
+const sidebarSlotRecipeCompoundVariants = [];
+const sidebarSlotRecipeSlotNames = [
+    [
+        "root",
+        "Sidebar__root"
+    ],
+    [
+        "header",
+        "Sidebar__header"
+    ],
+    [
+        "leftPane",
+        "Sidebar__leftPane"
+    ],
+    [
+        "logo",
+        "Sidebar__logo"
+    ],
+    [
+        "navigationWrapper",
+        "Sidebar__navigationWrapper"
+    ],
+    [
+        "mainNavigation",
+        "Sidebar__mainNavigation"
+    ],
+    [
+        "extraNavigation",
+        "Sidebar__extraNavigation"
+    ],
+    [
+        "navigationList",
+        "Sidebar__navigationList"
+    ],
+    [
+        "navigationListItem",
+        "Sidebar__navigationListItem"
+    ],
+    [
+        "navigationDivider",
+        "Sidebar__navigationDivider"
+    ],
+    [
+        "navigationLink",
+        "Sidebar__navigationLink"
+    ],
+    [
+        "navigationLinkInner",
+        "Sidebar__navigationLinkInner"
+    ],
+    [
+        "navigationLinkIcon",
+        "Sidebar__navigationLinkIcon"
+    ],
+    [
+        "navigationLinkLabel",
+        "Sidebar__navigationLinkLabel"
+    ],
+    [
+        "navigationLinkLabelInner",
+        "Sidebar__navigationLinkLabelInner"
+    ],
+    [
+        "footer",
+        "Sidebar__footer"
+    ],
+    [
+        "footerSlot",
+        "Sidebar__footerSlot"
+    ],
+    [
+        "serviceMenu",
+        "Sidebar__serviceMenu"
+    ],
+    [
+        "footerIconMenu",
+        "Sidebar__footerIconMenu"
+    ],
+    [
+        "footerUserIdMenu",
+        "Sidebar__footerUserIdMenu"
+    ],
+    [
+        "footerUserIdMenuItem",
+        "Sidebar__footerUserIdMenuItem"
+    ],
+    [
+        "handle",
+        "Sidebar__handle"
+    ]
+];
+const sidebarSlotRecipeSlotFns = /* @__PURE__ */ sidebarSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, sidebarSlotRecipeDefaultVariants, getSlotCompoundVariant(sidebarSlotRecipeCompoundVariants, slotName))]);
+const sidebarSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(sidebarSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const sidebarSlotRecipeVariantKeys = [];
+const getVariantProps = (variants) => ({ ...sidebarSlotRecipeDefaultVariants, ...compact(variants) });
+export const sidebarSlotRecipe = /* @__PURE__ */ Object.assign(sidebarSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'sidebarSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: sidebarSlotRecipeVariantKeys,
+    variantMap: {},
+    splitVariantProps(props) {
+        return splitProps(props, sidebarSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

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

@@ -5744,15 +5744,15 @@ const tokens = {
         "variable": "var(--mfui-colors-mfui\\.color\\.base\\.content\\.pressed)"
     },
     "colors.mfui.color.base.sub-content.none": {
-        "value": "#747474ff",
+        "value": "#5e5e5eff",
         "variable": "var(--mfui-colors-mfui\\.color\\.base\\.sub-content\\.none)"
     },
     "colors.mfui.color.base.sub-content.hovered": {
-        "value": "#595959ff",
+        "value": "#474747ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.base\\.sub-content\\.hovered)"
     },
     "colors.mfui.color.base.sub-content.pressed": {
-        "value": "#424242ff",
+        "value": "#303030ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.base\\.sub-content\\.pressed)"
     },
     "colors.mfui.color.base.inverted-content.none": {
@@ -5940,15 +5940,15 @@ const tokens = {
         "variable": "var(--mfui-colors-mfui\\.color\\.disabled\\.background)"
     },
     "colors.mfui.color.link.content.none": {
-        "value": "#2e72d8ff",
+        "value": "#165cb7ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.link\\.content\\.none)"
     },
     "colors.mfui.color.link.content.hovered": {
-        "value": "#0d57b1ff",
+        "value": "#004396ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.link\\.content\\.hovered)"
     },
     "colors.mfui.color.link.content.pressed": {
-        "value": "#003e90ff",
+        "value": "#072977ff",
         "variable": "var(--mfui-colors-mfui\\.color\\.link\\.content\\.pressed)"
     },
     "colors.mfui.color.neutral.content.none": {