@moneyforward/mfui-components 3.26.0 → 3.27.1

package/dist/src/Sidebar/SidebarTenantMenu.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+export type SidebarTenantMenuProps = {
+    /**
+     * The tenant (business) name shown in the trigger.
+     */
+    name: string;
+    /**
+     * The tooltip label describing what the trigger is (e.g. `"事業者"`).
+     * Shown on hover/focus. When omitted, no tooltip is shown.
+     */
+    tooltipLabel?: string;
+    /**
+     * The dropdown menu items (e.g. `DropdownMenu.Item` / `DropdownMenu.Divider`).
+     */
+    children: ReactNode;
+};
+/**
+ * The tenant (business) menu shown in the Sidebar footer.
+ *
+ * It renders a fixed, text-only trigger showing the tenant name that opens a dropdown menu.
+ * The trigger design and accessibility are fixed; pass the name and menu items only.
+ */
+export declare function SidebarTenantMenu({ name, tooltipLabel, children }: SidebarTenantMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Sidebar/SidebarTenantMenu.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DropdownMenu } from '../DropdownMenu';
+/**
+ * The tenant (business) menu shown in the Sidebar footer.
+ *
+ * It renders a fixed, text-only trigger showing the tenant name that opens a dropdown menu.
+ * The trigger design and accessibility are fixed; pass the name and menu items only.
+ */
+export function SidebarTenantMenu({ name, tooltipLabel, children }) {
+    return (_jsx(DropdownMenu, { triggerMiddleTruncate: true, label: name, tooltipLabel: tooltipLabel, tooltipPlacement: "top", triggerTypographyVariant: "condensedControlLabel", triggerProps: {
+            priority: 'tertiary',
+            size: 'small',
+            isDropdownTrigger: false,
+            // Styled via the `footerUserIdMenuItem` slot's `& .mfui-Sidebar__tenantTrigger` descendant selector.
+            className: 'mfui-Sidebar__tenantTrigger',
+        }, menuPopoverProps: { allowedPlacements: ['top-start'] }, children: children }));
+}

package/dist/src/Sidebar/SidebarUserMenu.d.ts

@@ -0,0 +1,23 @@
+import { type ReactNode } from 'react';
+export type SidebarUserMenuProps = {
+    /**
+     * The user (account) name shown in the trigger.
+     */
+    name: string;
+    /**
+     * The tooltip label describing what the trigger is (e.g. `"アカウント"`).
+     * Shown on hover/focus. When omitted, no tooltip is shown.
+     */
+    tooltipLabel?: string;
+    /**
+     * The dropdown menu items (e.g. `DropdownMenu.Item` / `DropdownMenu.Divider`).
+     */
+    children: ReactNode;
+};
+/**
+ * The user (account) menu shown in the Sidebar footer.
+ *
+ * It renders a fixed, text-only trigger showing the user name that opens a dropdown menu.
+ * The trigger design and accessibility are fixed; pass the name and menu items only.
+ */
+export declare function SidebarUserMenu({ name, tooltipLabel, children }: SidebarUserMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/Sidebar/SidebarUserMenu.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DropdownMenu } from '../DropdownMenu';
+/**
+ * The user (account) menu shown in the Sidebar footer.
+ *
+ * It renders a fixed, text-only trigger showing the user name that opens a dropdown menu.
+ * The trigger design and accessibility are fixed; pass the name and menu items only.
+ */
+export function SidebarUserMenu({ name, tooltipLabel, children }) {
+    return (_jsx(DropdownMenu, { label: name, tooltipLabel: tooltipLabel, tooltipPlacement: "top", triggerProps: {
+            priority: 'tertiary',
+            size: 'small',
+            isDropdownTrigger: false,
+            // Styled via the `footerUserIdMenuItem` slot's `& .mfui-Sidebar__userTrigger` descendant selector.
+            className: 'mfui-Sidebar__userTrigger',
+        }, menuPopoverProps: { allowedPlacements: ['top-start'] }, children: children }));
+}

package/dist/src/Sidebar/hooks/useSidebarResize.d.ts

@@ -0,0 +1,28 @@
+import { type KeyboardEvent, type PointerEvent as ReactPointerEvent } from 'react';
+/**
+ * Hook to manage the resizable width of the Sidebar via pointer dragging and keyboard control.
+ *
+ * @param options.minWidth - Minimum width in pixels (default 180)
+ *
+ * @param options.maxWidth - Maximum width in pixels (default 280)
+ *
+ * @param options.defaultWidth - Seeds the initial width only (like React's `defaultValue`); not re-synced afterwards (default 200)
+ *
+ * @param options.onWidthChange - Called with the new width when a change is committed (pointer release or keyboard step)
+ *
+ * @returns Object containing the current width, resolved bounds, refs, and resize handlers
+ */
+export declare function useSidebarResize({ minWidth, maxWidth, defaultWidth, onWidthChange, }?: {
+    minWidth?: number;
+    maxWidth?: number;
+    defaultWidth?: number;
+    onWidthChange?: (width: number) => void;
+}): {
+    width: number;
+    minWidth: number;
+    maxWidth: number;
+    rootRef: import("react").RefObject<HTMLDivElement | null>;
+    isDragging: boolean;
+    handlePointerDown: (event: ReactPointerEvent<HTMLElement>) => void;
+    handleKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+};

package/dist/src/Sidebar/hooks/useSidebarResize.js

@@ -0,0 +1,111 @@
+import { useCallback, useEffect, useRef, useState, } from 'react';
+const DEFAULT_WIDTH = 200;
+const DEFAULT_MIN_WIDTH = 180;
+const DEFAULT_MAX_WIDTH = 280;
+const KEYBOARD_STEP_PX = 14;
+/**
+ * Hook to manage the resizable width of the Sidebar via pointer dragging and keyboard control.
+ *
+ * @param options.minWidth - Minimum width in pixels (default 180)
+ *
+ * @param options.maxWidth - Maximum width in pixels (default 280)
+ *
+ * @param options.defaultWidth - Seeds the initial width only (like React's `defaultValue`); not re-synced afterwards (default 200)
+ *
+ * @param options.onWidthChange - Called with the new width when a change is committed (pointer release or keyboard step)
+ *
+ * @returns Object containing the current width, resolved bounds, refs, and resize handlers
+ */
+export function useSidebarResize({ minWidth = DEFAULT_MIN_WIDTH, maxWidth = DEFAULT_MAX_WIDTH, defaultWidth, onWidthChange, } = {}) {
+    const rootRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const pointerIdRef = useRef(null);
+    const onWidthChangeRef = useRef(onWidthChange);
+    useEffect(() => {
+        onWidthChangeRef.current = onWidthChange;
+    });
+    const clamp = useCallback((value) => Math.min(Math.max(value, minWidth), maxWidth), [minWidth, maxWidth]);
+    // Validate the resolved bounds. When minWidth > maxWidth the clamp pins the width to maxWidth,
+    // which is counterintuitive, so surface it as a developer error.
+    useEffect(() => {
+        if (minWidth > maxWidth) {
+            console.error(`Sidebar: minWidth (${String(minWidth)}) must be less than or equal to maxWidth (${String(maxWidth)}).`);
+        }
+    }, [minWidth, maxWidth]);
+    // Clamp the default so the initial render stays within the user-supplied bounds.
+    // `defaultWidth` seeds the initial width only (like React's `defaultValue`); it is intentionally
+    // not re-synced on later changes, so the user's drag/keyboard adjustments are never overridden.
+    const initialWidth = clamp(defaultWidth ?? DEFAULT_WIDTH);
+    const widthRef = useRef(initialWidth);
+    const [width, setWidth] = useState(initialWidth);
+    const notify = useCallback((value) => {
+        onWidthChangeRef.current?.(value);
+    }, []);
+    const applyWidth = useCallback((newWidth) => {
+        widthRef.current = newWidth;
+        setWidth(newWidth);
+    }, []);
+    // --- Drag ---
+    const handlePointerDown = useCallback((event) => {
+        event.preventDefault();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        pointerIdRef.current = event.pointerId;
+        setIsDragging(true);
+    }, []);
+    const handlePointerMove = useCallback((event) => {
+        if (pointerIdRef.current !== event.pointerId)
+            return;
+        if (!rootRef.current)
+            return;
+        const rect = rootRef.current.getBoundingClientRect();
+        const newWidth = Math.min(Math.max(event.clientX - rect.left, minWidth), maxWidth);
+        applyWidth(newWidth);
+    }, [minWidth, maxWidth, applyWidth]);
+    const handlePointerUp = useCallback((event) => {
+        if (pointerIdRef.current !== event.pointerId)
+            return;
+        setIsDragging(false);
+        pointerIdRef.current = null;
+        notify(widthRef.current);
+    }, [notify]);
+    useEffect(() => {
+        if (!isDragging)
+            return;
+        document.addEventListener('pointermove', handlePointerMove);
+        document.addEventListener('pointerup', handlePointerUp);
+        document.addEventListener('pointercancel', handlePointerUp);
+        return () => {
+            document.removeEventListener('pointermove', handlePointerMove);
+            document.removeEventListener('pointerup', handlePointerUp);
+            document.removeEventListener('pointercancel', handlePointerUp);
+        };
+    }, [isDragging, handlePointerMove, handlePointerUp]);
+    // --- Keyboard ---
+    const handleKeyDown = useCallback((event) => {
+        let newWidth;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                newWidth = Math.min(widthRef.current + KEYBOARD_STEP_PX, maxWidth);
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                newWidth = Math.max(widthRef.current - KEYBOARD_STEP_PX, minWidth);
+                break;
+            case 'Home':
+                event.preventDefault();
+                newWidth = minWidth;
+                break;
+            case 'End':
+                event.preventDefault();
+                newWidth = maxWidth;
+                break;
+            // No default
+        }
+        if (newWidth !== undefined) {
+            applyWidth(newWidth);
+            notify(newWidth);
+        }
+    }, [minWidth, maxWidth, applyWidth, notify]);
+    return { width, minWidth, maxWidth, rootRef, isDragging, handlePointerDown, handleKeyDown };
+}

package/dist/src/Sidebar/index.d.ts

@@ -0,0 +1,6 @@
+export { Sidebar } from './Sidebar';
+export type { SidebarProps, SidebarNavigationItem, SidebarNavigationDivider, SidebarNavigationEntry, } from './Sidebar.types';
+export type { SidebarNavigationItemProps } from './SidebarNavigationItem';
+export type { SidebarServiceMenuProps } from './SidebarServiceMenu';
+export type { SidebarTenantMenuProps } from './SidebarTenantMenu';
+export type { SidebarUserMenuProps } from './SidebarUserMenu';

package/dist/src/Sidebar/index.js

@@ -0,0 +1 @@
+export { Sidebar } from './Sidebar';

package/dist/src/SplitView/SplitView.js

@@ -32,7 +32,7 @@ import { parseSizeToNumber } from './utils/parseSize';
  * />
  * ```
  */
-export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot, isOpen, initialPanelSize, minPanelSize, maxPanelSize, targetPanel, initialRightPanelSize, minRightPanelSize, maxRightPanelSize, leftPanelProps, rightPanelProps, dividerProps, enableAutoUnmount = true, ...props }, ref) => {
+export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot, isOpen, initialPanelSize, minPanelSize, maxPanelSize, targetPanel, initialRightPanelSize, minRightPanelSize, maxRightPanelSize, leftPanelProps, rightPanelProps, dividerProps, onWidthChange, enableAutoUnmount = true, ...props }, ref) => {
     // Normalize legacy props to the new API
     const resolvedTargetPanel = targetPanel ?? 'right';
     const resolvedInitialPanelSize = initialPanelSize ?? initialRightPanelSize;
@@ -135,6 +135,7 @@ export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot,
         targetPanel: resolvedTargetPanel,
         minPanelSize: minPanelSizeNumber,
         maxPanelSize: maxPanelSizeNumber,
+        onWidthChange,
         setControlledPanelSize,
         setLastControlledPanelSize,
     });
@@ -146,6 +147,7 @@ export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot,
         initialPanelSize: initialPanelSizeNumber,
         minPanelSize: minPanelSizeNumber,
         maxPanelSize: maxPanelSizeNumber,
+        onWidthChange,
         setControlledPanelSize,
         setLastControlledPanelSize,
     });
@@ -207,7 +209,7 @@ export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot,
                 ref.current = node;
             }
             containerRef.current = node;
-        }, className: cx(classes.root, 'mfui-SplitView__root', className), ...props, children: [resolvedTargetPanel === 'left' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (leftPanelSlot ?? lastRightPanelRef.current) : leftPanelSlot }) })) : null) : (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: leftPanelSlot })), isRightPanelVisible || isSlideOutAnimating ? (_jsx("div", { ...dividerProps, className: cx(classes.divider, 'mfui-SplitView__divider', dividerProps?.className), role: "separator", "aria-orientation": "vertical", "aria-label": dividerProps?.['aria-label'] ?? '左右のパネルを調整', 
+        }, className: cx(classes.root, 'mfui-SplitView__root', className), ...props, children: [resolvedTargetPanel === 'left' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (leftPanelSlot ?? lastRightPanelRef.current) : leftPanelSlot }) })) : null) : (_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), style: computedLeftPanelStyle, children: leftPanelSlot })), isRightPanelVisible || isSlideOutAnimating ? (_jsx("div", { className: cx(classes.divider, 'mfui-SplitView__divider', dividerProps?.className), role: "separator", "aria-orientation": "vertical", "aria-label": dividerProps?.['aria-label'] ?? '左右のパネルを調整', "aria-valuenow": currentControlledPanelSize ?? initialPanelSizeNumber, "aria-valuemin": minPanelSizeNumber, "aria-valuemax": maxPanelSizeNumber, 
                 // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                tabIndex: 0, style: dividerStyle, onPointerDown: handleMouseDown, onKeyDown: handleKeyDown })) : null, resolvedTargetPanel === 'right' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (rightPanelSlot ?? lastRightPanelRef.current) : rightPanelSlot }) })) : null) : (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: rightPanelSlot }))] }));
+                tabIndex: 0, style: dividerStyle, onPointerDown: handleMouseDown, onKeyDown: handleKeyDown, ...dividerProps })) : null, resolvedTargetPanel === 'right' ? (shouldRenderControlledPanel || isSlideOutAnimating ? (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: _jsx("div", { style: controlledPanelInnerStyle, children: enableAutoUnmount ? (rightPanelSlot ?? lastRightPanelRef.current) : rightPanelSlot }) })) : null) : (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: computedRightPanelStyle, children: rightPanelSlot }))] }));
 });

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

@@ -52,6 +52,12 @@ type SplitViewBaseProps = {
      * Props for the divider element.
      */
     dividerProps?: ComponentPropsWithoutRef<'div'>;
+    /**
+     * Called when the user commits a width change by releasing a drag or pressing an arrow key.
+     *
+     * Use this to persist the controlled panel width and restore it later via `initialPanelSize`.
+     */
+    onWidthChange?: (width: number) => void;
     /**
      * Enable auto unmounting of the controlled panel content when it is not displayed.
      * When true, the controlled panel content will return null instead of hiding via CSS.

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

@@ -8,6 +8,7 @@ export declare function useSplitViewDrag(options: {
     targetPanel: 'left' | 'right';
     minPanelSize: number;
     maxPanelSize: number;
+    onWidthChange?: (width: number) => void;
     setControlledPanelSize: (size: number | undefined) => void;
     setLastControlledPanelSize: (size: number | undefined) => void;
 }): {

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

@@ -6,9 +6,14 @@ import { calculateConstrainedPanelSize } from '../utils/calculatePanelSize';
  * @param options - Drag hook options
  */
 export function useSplitViewDrag(options) {
-    const { containerRef, targetPanel, minPanelSize, maxPanelSize, setControlledPanelSize, setLastControlledPanelSize } = options;
+    const { containerRef, targetPanel, minPanelSize, maxPanelSize, onWidthChange, setControlledPanelSize, setLastControlledPanelSize, } = options;
     const [isDragging, setIsDragging] = useState(false);
     const pointerIdRef = useRef(null);
+    const latestSizeRef = useRef(undefined);
+    const onWidthChangeRef = useRef(onWidthChange);
+    useEffect(() => {
+        onWidthChangeRef.current = onWidthChange;
+    });
     /**
      * Handle pointer down on the divider.
      */
@@ -34,6 +39,7 @@ export function useSplitViewDrag(options) {
             ? event.clientX - containerRect.left // left panel size = pointer X from container left
             : containerSize - (event.clientX - containerRect.left); // right panel size (legacy behavior)
         const constrainedSize = calculateConstrainedPanelSize(rawControlledPanelSize, minPanelSize, maxPanelSize);
+        latestSizeRef.current = constrainedSize;
         setControlledPanelSize(constrainedSize);
         setLastControlledPanelSize(constrainedSize);
     }, [
@@ -50,8 +56,12 @@ export function useSplitViewDrag(options) {
      */
     const handlePointerUp = useCallback((event) => {
         if (pointerIdRef.current === event.pointerId) {
+            if (latestSizeRef.current !== undefined) {
+                onWidthChangeRef.current?.(latestSizeRef.current);
+            }
             setIsDragging(false);
             pointerIdRef.current = null;
+            latestSizeRef.current = undefined;
         }
     }, []);
     /**

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
+});