@moneyforward/mfui-components 3.11.0 → 3.12.0

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

@@ -1,6 +1,6 @@
 import { useLayoutEffect } from 'react';
 import { ANIMATION_SIZE_THRESHOLD_PX } from '../constants';
-import { calculateInitialRightPanelSize } from '../utils/calculatePanelSize';
+import { calculateInitialPanelSize } from '../utils/calculatePanelSize';
 import { createSlideInAnimation, createSlideOutAnimation } from '../utils/animation';
 /**
  * Hook to handle slide-in and slide-out animations for the split view.
@@ -8,20 +8,20 @@ import { createSlideInAnimation, createSlideOutAnimation } from '../utils/animat
  * @param options - Animation hook options
  */
 export function useSplitViewAnimation(options) {
-    const { isRightPanelVisible, containerRef, initialRightPanelSize, minRightPanelSize, isInitialMountRef, wasRightPanelVisibleOnMountRef, previousIsRightPanelVisibleRef, hasRightPanelBeenVisible, isAnimating, rightPanelSize, lastRightPanelSizeRef, lastRightPanelRef, setRightPanelSize, setIsAnimating, setAnimatedRightPanelSize, setHasRightPanelBeenVisible, setIsSlideOutAnimating, } = options;
-    // Track when right panel becomes visible to trigger animation (only when opened by trigger, not on initial mount)
+    const { isRightPanelVisible, containerRef, initialPanelSize, isInitialMountRef, wasRightPanelVisibleOnMountRef, previousIsRightPanelVisibleRef, hasRightPanelBeenVisible, isAnimating, controlledPanelSize, lastControlledPanelSizeRef, lastRightPanelRef, setControlledPanelSize, setIsAnimating, setAnimatedPanelSize, setHasRightPanelBeenVisible, setIsSlideOutAnimating, } = options;
+    // Track when the controlled panel becomes visible to trigger animation
+    // (only when opened by a user action, not on initial mount)
     useLayoutEffect(() => {
         const isInitialMount = isInitialMountRef.current;
         const previousIsRightPanelVisible = previousIsRightPanelVisibleRef.current;
         // Update previous visibility state at the start of layout effect
         previousIsRightPanelVisibleRef.current = isRightPanelVisible;
-        // Handle initial mount: if right panel is already visible, set size without animation
+        // Handle initial mount: if panel is already visible, set size without animation
         if (isInitialMount && isRightPanelVisible && wasRightPanelVisibleOnMountRef.current) {
-            // Use saved right panel size if available, otherwise use initialRightPanelSize
-            const savedRightPanelSize = lastRightPanelSizeRef.current;
-            const targetRightPanelSize = calculateInitialRightPanelSize(initialRightPanelSize, savedRightPanelSize);
-            setRightPanelSize(targetRightPanelSize);
-            lastRightPanelSizeRef.current = targetRightPanelSize;
+            const savedPanelSize = lastControlledPanelSizeRef.current;
+            const targetPanelSize = calculateInitialPanelSize(initialPanelSize, savedPanelSize);
+            setControlledPanelSize(targetPanelSize);
+            lastControlledPanelSizeRef.current = targetPanelSize;
             // hasRightPanelBeenVisible is already true from initial state, no need to set it
             isInitialMountRef.current = false;
             return;
@@ -30,63 +30,64 @@ export function useSplitViewAnimation(options) {
         if (isInitialMount) {
             isInitialMountRef.current = false;
         }
-        // Animate slide-in only when right panel becomes visible after initial mount (triggered by user action)
-        // Check if right panel just became visible (transition from hidden to visible)
+        // Animate slide-in only when the controlled panel becomes visible after initial mount
+        // (i.e., triggered by a user action, not on first render)
         const justBecameVisible = isRightPanelVisible && !previousIsRightPanelVisible && !hasRightPanelBeenVisible;
         if (justBecameVisible && !isAnimating && !isInitialMount) {
-            // Use saved right panel size if available, otherwise use initialRightPanelSize
-            const savedRightPanelSize = lastRightPanelSizeRef.current;
-            const targetRightPanelSize = calculateInitialRightPanelSize(initialRightPanelSize, savedRightPanelSize);
-            // Start animation from 0px (right panel hidden)
+            const savedPanelSize = lastControlledPanelSizeRef.current;
+            const targetPanelSize = calculateInitialPanelSize(initialPanelSize, savedPanelSize);
+            // Start animation from 0 (panel hidden)
             const startSize = 0;
-            // Only animate if there's a visual difference
-            if (Math.abs(targetRightPanelSize - startSize) < ANIMATION_SIZE_THRESHOLD_PX) {
-                // No animation needed, set directly
-                setRightPanelSize(targetRightPanelSize);
-                lastRightPanelSizeRef.current = targetRightPanelSize;
+            // Skip animation if the size difference is negligible
+            if (Math.abs(targetPanelSize - startSize) < ANIMATION_SIZE_THRESHOLD_PX) {
+                setControlledPanelSize(targetPanelSize);
+                lastControlledPanelSizeRef.current = targetPanelSize;
                 setHasRightPanelBeenVisible(true);
                 return;
             }
-            // Immediately set the right panel size to avoid layout shift flash
-            setRightPanelSize(startSize);
+            // Store the target size before animation so the inner wrapper can maintain
+            // the correct fixed width from the very first frame.
+            lastControlledPanelSizeRef.current = targetPanelSize;
+            // Immediately set the panel size to avoid layout shift flash
+            setControlledPanelSize(startSize);
             setIsAnimating(true);
-            setAnimatedRightPanelSize(startSize);
+            setAnimatedPanelSize(startSize);
             setHasRightPanelBeenVisible(true);
             createSlideInAnimation({
                 startSize,
-                targetSize: targetRightPanelSize,
+                targetSize: targetPanelSize,
                 onUpdate: (size) => {
-                    setAnimatedRightPanelSize(size);
+                    setAnimatedPanelSize(size);
                 },
                 onComplete: () => {
                     setIsAnimating(false);
-                    setAnimatedRightPanelSize(undefined);
-                    setRightPanelSize(targetRightPanelSize);
-                    lastRightPanelSizeRef.current = targetRightPanelSize;
+                    setAnimatedPanelSize(undefined);
+                    setControlledPanelSize(targetPanelSize);
+                    lastControlledPanelSizeRef.current = targetPanelSize;
                 },
             });
         }
-        // Slide-out animation: right panel becomes hidden
+        // Slide-out animation: controlled panel becomes hidden
         if (!isRightPanelVisible && hasRightPanelBeenVisible) {
             if (containerRef.current && !isAnimating) {
-                // Start from current right panel size
-                const startSize = lastRightPanelSizeRef.current ?? rightPanelSize ?? 0;
-                // Animate to 0px (right panel hidden)
+                // Start from current controlled panel size
+                const startSize = lastControlledPanelSizeRef.current ?? controlledPanelSize ?? 0;
+                // Animate to 0 (panel hidden)
                 const targetSize = 0;
                 setIsAnimating(true);
                 setIsSlideOutAnimating(true);
-                setAnimatedRightPanelSize(startSize);
+                setAnimatedPanelSize(startSize);
                 createSlideOutAnimation({
                     startSize,
                     targetSize,
                     onUpdate: (size) => {
-                        setAnimatedRightPanelSize(size);
+                        setAnimatedPanelSize(size);
                     },
                     onComplete: () => {
                         setIsAnimating(false);
                         setIsSlideOutAnimating(false);
-                        setAnimatedRightPanelSize(undefined);
-                        setRightPanelSize(undefined);
+                        setAnimatedPanelSize(undefined);
+                        setControlledPanelSize(undefined);
                         setHasRightPanelBeenVisible(false);
                         // Clear stored content after animation completes
                         lastRightPanelRef.current = null;
@@ -94,32 +95,29 @@ export function useSplitViewAnimation(options) {
                 });
             }
             else {
-                // No animation - immediately reset
-                // Save current right panel size before closing
-                if (rightPanelSize !== undefined) {
-                    lastRightPanelSizeRef.current = rightPanelSize;
+                // No animation — immediately reset
+                if (controlledPanelSize !== undefined) {
+                    lastControlledPanelSizeRef.current = controlledPanelSize;
                 }
                 setHasRightPanelBeenVisible(false);
-                // Reset right panel size to allow left panel to take full width
-                setRightPanelSize(undefined);
+                setControlledPanelSize(undefined);
             }
         }
     }, [
         isRightPanelVisible,
         containerRef,
-        initialRightPanelSize,
-        minRightPanelSize,
+        initialPanelSize,
         isInitialMountRef,
         wasRightPanelVisibleOnMountRef,
         previousIsRightPanelVisibleRef,
         hasRightPanelBeenVisible,
         isAnimating,
-        rightPanelSize,
-        lastRightPanelSizeRef,
+        controlledPanelSize,
+        lastControlledPanelSizeRef,
         lastRightPanelRef,
-        setRightPanelSize,
+        setControlledPanelSize,
         setIsAnimating,
-        setAnimatedRightPanelSize,
+        setAnimatedPanelSize,
         setHasRightPanelBeenVisible,
         setIsSlideOutAnimating,
     ]);

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

@@ -5,10 +5,11 @@
  */
 export declare function useSplitViewDrag(options: {
     containerRef: React.RefObject<HTMLDivElement | null>;
-    minRightPanelSize: number;
-    maxRightPanelSize: number;
-    setRightPanelSize: (size: number | undefined) => void;
-    setLastRightPanelSize: (size: number | undefined) => void;
+    targetPanel: 'left' | 'right';
+    minPanelSize: number;
+    maxPanelSize: number;
+    setControlledPanelSize: (size: number | undefined) => void;
+    setLastControlledPanelSize: (size: number | undefined) => void;
 }): {
     isDragging: boolean;
     handleMouseDown: (event: React.PointerEvent<HTMLDivElement>) => void;

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

@@ -1,16 +1,16 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { calculateConstrainedRightPanelSize } from '../utils/calculatePanelSize';
+import { calculateConstrainedPanelSize } from '../utils/calculatePanelSize';
 /**
  * Hook to handle drag interactions for resizing the split view.
  *
  * @param options - Drag hook options
  */
 export function useSplitViewDrag(options) {
-    const { containerRef, minRightPanelSize, maxRightPanelSize, setRightPanelSize, setLastRightPanelSize } = options;
+    const { containerRef, targetPanel, minPanelSize, maxPanelSize, setControlledPanelSize, setLastControlledPanelSize } = options;
     const [isDragging, setIsDragging] = useState(false);
     const pointerIdRef = useRef(null);
     /**
-     * Handle pointer down on the divider
+     * Handle pointer down on the divider.
      */
     const handlePointerDown = useCallback((event) => {
         event.preventDefault();
@@ -20,7 +20,7 @@ export function useSplitViewDrag(options) {
         setIsDragging(true);
     }, []);
     /**
-     * Handle pointer move during drag
+     * Handle pointer move during drag.
      */
     const handlePointerMove = useCallback((event) => {
         if (!isDragging || pointerIdRef.current !== event.pointerId)
@@ -29,14 +29,24 @@ export function useSplitViewDrag(options) {
             return;
         const containerRect = containerRef.current.getBoundingClientRect();
         const containerSize = containerRect.width;
-        const rawRightPanelSize = containerSize - (event.clientX - containerRect.left);
-        // Apply min/max constraints directly to right panel size
-        const constrainedRightPanelSize = calculateConstrainedRightPanelSize(rawRightPanelSize, minRightPanelSize, maxRightPanelSize);
-        setRightPanelSize(constrainedRightPanelSize);
-        setLastRightPanelSize(constrainedRightPanelSize);
-    }, [isDragging, containerRef, minRightPanelSize, maxRightPanelSize, setRightPanelSize, setLastRightPanelSize]);
+        // Compute raw controlled panel size based on which panel is being controlled
+        const rawControlledPanelSize = targetPanel === 'left'
+            ? 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);
+        setControlledPanelSize(constrainedSize);
+        setLastControlledPanelSize(constrainedSize);
+    }, [
+        isDragging,
+        containerRef,
+        targetPanel,
+        minPanelSize,
+        maxPanelSize,
+        setControlledPanelSize,
+        setLastControlledPanelSize,
+    ]);
     /**
-     * Handle pointer up to stop dragging
+     * Handle pointer up to stop dragging.
      */
     const handlePointerUp = useCallback((event) => {
         if (pointerIdRef.current === event.pointerId) {
@@ -45,7 +55,7 @@ export function useSplitViewDrag(options) {
         }
     }, []);
     /**
-     * Set up pointer event listeners
+     * Set up pointer event listeners.
      */
     useEffect(() => {
         if (!isDragging)

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

@@ -5,12 +5,13 @@
  */
 export declare function useSplitViewKeyboard(options: {
     containerRef: React.RefObject<HTMLDivElement | null>;
-    rightPanelSize: number | undefined;
-    initialRightPanelSize: number;
-    minRightPanelSize: number;
-    maxRightPanelSize: number;
-    setRightPanelSize: (size: number | undefined) => void;
-    setLastRightPanelSize: (size: number | undefined) => void;
+    targetPanel: 'left' | 'right';
+    controlledPanelSize: number | undefined;
+    initialPanelSize: number;
+    minPanelSize: number;
+    maxPanelSize: number;
+    setControlledPanelSize: (size: number | undefined) => void;
+    setLastControlledPanelSize: (size: number | undefined) => void;
 }): {
     handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
 };

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

@@ -1,25 +1,31 @@
 import { useCallback } from 'react';
 import { KEYBOARD_STEP_PX } from '../constants';
-import { calculateConstrainedRightPanelSize } from '../utils/calculatePanelSize';
+import { calculateConstrainedPanelSize } from '../utils/calculatePanelSize';
 /**
  * Hook to handle keyboard navigation for resizing the split view.
  *
  * @param options - Keyboard hook options
  */
 export function useSplitViewKeyboard(options) {
-    const { containerRef, rightPanelSize, initialRightPanelSize, minRightPanelSize, maxRightPanelSize, setRightPanelSize, setLastRightPanelSize, } = options;
+    const { containerRef, targetPanel, controlledPanelSize, initialPanelSize, minPanelSize, maxPanelSize, setControlledPanelSize, setLastControlledPanelSize, } = options;
     /**
-     * Handle keyboard navigation for the divider
+     * Handle keyboard navigation for the divider.
+     *
+     * Key directions depend on targetPanel:
+     * - targetPanel="right": ArrowLeft expands the right panel, ArrowRight shrinks it
+     * - targetPanel="left":  ArrowRight expands the left panel, ArrowLeft shrinks it
      */
     const handleKeyDown = useCallback((event) => {
         if (!containerRef.current)
             return;
-        const increaseKeys = ['ArrowLeft'];
-        const decreaseKeys = ['ArrowRight'];
+        // Key-to-action mapping varies by targetPanel to keep UX intuitive:
+        // the divider always moves in the direction of the pressed arrow key.
+        const increaseKeys = targetPanel === 'left' ? ['ArrowRight'] : ['ArrowLeft'];
+        const decreaseKeys = targetPanel === 'left' ? ['ArrowLeft'] : ['ArrowRight'];
         if (![...increaseKeys, ...decreaseKeys].includes(event.key))
             return;
         event.preventDefault();
-        const currentSize = rightPanelSize ?? initialRightPanelSize;
+        const currentSize = controlledPanelSize ?? initialPanelSize;
         let newSize = currentSize;
         if (increaseKeys.includes(event.key)) {
             newSize = currentSize + KEYBOARD_STEP_PX;
@@ -27,18 +33,18 @@ export function useSplitViewKeyboard(options) {
         else if (decreaseKeys.includes(event.key)) {
             newSize = currentSize - KEYBOARD_STEP_PX;
         }
-        // Apply min/max constraints directly to right panel size
-        const constrainedSize = calculateConstrainedRightPanelSize(newSize, minRightPanelSize, maxRightPanelSize);
-        setRightPanelSize(constrainedSize);
-        setLastRightPanelSize(constrainedSize);
+        const constrainedSize = calculateConstrainedPanelSize(newSize, minPanelSize, maxPanelSize);
+        setControlledPanelSize(constrainedSize);
+        setLastControlledPanelSize(constrainedSize);
     }, [
         containerRef,
-        rightPanelSize,
-        initialRightPanelSize,
-        minRightPanelSize,
-        maxRightPanelSize,
-        setRightPanelSize,
-        setLastRightPanelSize,
+        targetPanel,
+        controlledPanelSize,
+        initialPanelSize,
+        minPanelSize,
+        maxPanelSize,
+        setControlledPanelSize,
+        setLastControlledPanelSize,
     ]);
     return { handleKeyDown };
 }

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

@@ -1,14 +1,14 @@
 import { type ReactNode } from 'react';
 /**
- * Hook to manage the visibility state of the right panel.
+ * Hook to manage the visibility state of the controlled panel.
  *
  * @param isOpen - Controlled visibility state (optional)
  *
- * @param rightPanelSlot - The right panel content
+ * @param controlledPanelSlot - The content of the controlled panel (left or right depending on targetPanel)
  *
  * @returns Object containing visibility state and related refs
  */
-export declare function useSplitViewPanelVisibility(isOpen: boolean | undefined, rightPanelSlot: ReactNode): {
+export declare function useSplitViewPanelVisibility(isOpen: boolean | undefined, controlledPanelSlot: ReactNode): {
     isRightPanelVisible: boolean;
     isInitialMountRef: import("react").RefObject<boolean>;
     wasRightPanelVisibleOnMountRef: import("react").RefObject<boolean | null>;

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

@@ -1,19 +1,19 @@
 import { useEffect, useRef, useState } from 'react';
 /**
- * Hook to manage the visibility state of the right panel.
+ * Hook to manage the visibility state of the controlled panel.
  *
  * @param isOpen - Controlled visibility state (optional)
  *
- * @param rightPanelSlot - The right panel content
+ * @param controlledPanelSlot - The content of the controlled panel (left or right depending on targetPanel)
  *
  * @returns Object containing visibility state and related refs
  */
-export function useSplitViewPanelVisibility(isOpen, rightPanelSlot) {
-    // Determine if right panel should be visible (controlled by isOpen prop only)
+export function useSplitViewPanelVisibility(isOpen, controlledPanelSlot) {
+    // Determine if the controlled panel should be visible (controlled by isOpen prop only)
     const isRightPanelVisible = isOpen ?? true;
     // Track if this is the initial mount
     const isInitialMountRef = useRef(true);
-    // Track if right panel was visible on initial mount
+    // Track if the controlled panel was visible on initial mount
     const wasRightPanelVisibleOnMountRef = useRef(null);
     // Initialize wasRightPanelVisibleOnMountRef on first render only
     if (wasRightPanelVisibleOnMountRef.current === null) {
@@ -24,14 +24,14 @@ export function useSplitViewPanelVisibility(isOpen, rightPanelSlot) {
     // Track previous visibility state
     // Note: This ref is updated in useSplitViewAnimation hook to ensure correct timing
     const previousIsRightPanelVisibleRef = useRef(isRightPanelVisible);
-    // Store last seen right panel for slide-out animation
+    // Store last seen controlled panel slot for slide-out animation
     const lastRightPanelRef = useRef(null);
-    // Store right panel when visible for slide-out animation
+    // Store controlled panel slot when visible for use during slide-out animation
     useEffect(() => {
         if (isRightPanelVisible) {
-            lastRightPanelRef.current = rightPanelSlot;
+            lastRightPanelRef.current = controlledPanelSlot;
         }
-    }, [rightPanelSlot, isRightPanelVisible]);
+    }, [controlledPanelSlot, isRightPanelVisible]);
     return {
         isRightPanelVisible,
         isInitialMountRef,

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

@@ -1,5 +1,5 @@
 /**
- * Hook to handle container resize: maintain right panel size and apply constraints.
+ * Hook to handle container resize: maintain controlled panel size and apply constraints.
  *
  * @param options - Resize hook options
  */
@@ -8,9 +8,9 @@ export declare function useSplitViewResize(options: {
     containerRef: React.RefObject<HTMLDivElement | null>;
     isAnimating: boolean;
     isDragging: boolean;
-    rightPanelSize: number | undefined;
-    minRightPanelSize: number;
-    maxRightPanelSize: number;
-    setRightPanelSize: (size: number | undefined) => void;
-    setLastRightPanelSize: (size: number | undefined) => void;
+    controlledPanelSize: number | undefined;
+    minPanelSize: number;
+    maxPanelSize: number;
+    setControlledPanelSize: (size: number | undefined) => void;
+    setLastControlledPanelSize: (size: number | undefined) => void;
 }): void;

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

@@ -1,12 +1,12 @@
 import { useEffect } from 'react';
-import { calculateConstrainedRightPanelSize } from '../utils/calculatePanelSize';
+import { calculateConstrainedPanelSize } from '../utils/calculatePanelSize';
 /**
- * Hook to handle container resize: maintain right panel size and apply constraints.
+ * Hook to handle container resize: maintain controlled panel size and apply constraints.
  *
  * @param options - Resize hook options
  */
 export function useSplitViewResize(options) {
-    const { isRightPanelVisible, containerRef, isAnimating, isDragging, rightPanelSize, minRightPanelSize, maxRightPanelSize, setRightPanelSize, setLastRightPanelSize, } = options;
+    const { isRightPanelVisible, containerRef, isAnimating, isDragging, controlledPanelSize, minPanelSize, maxPanelSize, setControlledPanelSize, setLastControlledPanelSize, } = options;
     useEffect(() => {
         if (!isRightPanelVisible || !containerRef.current || isAnimating || isDragging)
             return;
@@ -14,15 +14,15 @@ export function useSplitViewResize(options) {
         const resizeObserver = new ResizeObserver((entries) => {
             for (const entry of entries) {
                 const containerSize = entry.contentRect.width;
-                const currentRightPanelSize = rightPanelSize;
-                if (currentRightPanelSize !== undefined) {
-                    // Ensure right panel size doesn't exceed container size
-                    const maxAllowedSize = Math.min(maxRightPanelSize, containerSize);
-                    const constrainedRightPanelSize = calculateConstrainedRightPanelSize(currentRightPanelSize, minRightPanelSize, maxAllowedSize);
+                const currentControlledPanelSize = controlledPanelSize;
+                if (currentControlledPanelSize !== undefined) {
+                    // Controlled panel size must not exceed container size
+                    const maxAllowedSize = Math.min(maxPanelSize, containerSize);
+                    const constrainedSize = calculateConstrainedPanelSize(currentControlledPanelSize, minPanelSize, maxAllowedSize);
                     // Only update if constraints were applied
-                    if (constrainedRightPanelSize !== currentRightPanelSize) {
-                        setRightPanelSize(constrainedRightPanelSize);
-                        setLastRightPanelSize(constrainedRightPanelSize);
+                    if (constrainedSize !== currentControlledPanelSize) {
+                        setControlledPanelSize(constrainedSize);
+                        setLastControlledPanelSize(constrainedSize);
                     }
                 }
             }
@@ -36,10 +36,10 @@ export function useSplitViewResize(options) {
         containerRef,
         isAnimating,
         isDragging,
-        rightPanelSize,
-        minRightPanelSize,
-        maxRightPanelSize,
-        setRightPanelSize,
-        setLastRightPanelSize,
+        controlledPanelSize,
+        minPanelSize,
+        maxPanelSize,
+        setControlledPanelSize,
+        setLastControlledPanelSize,
     ]);
 }

package/dist/src/SplitView/utils/calculatePanelSize.d.ts

@@ -1,22 +1,22 @@
 /**
- * Calculate the right panel size with min/max constraints applied.
+ * Calculate the panel size with min/max constraints applied.
  *
- * @param rightPanelSize - The desired right panel size
+ * @param panelSize - The desired panel size
  *
- * @param minRightPanelSize - The minimum size of the right panel
+ * @param minPanelSize - The minimum size of the panel
  *
- * @param maxRightPanelSize - The maximum size of the right panel
+ * @param maxPanelSize - The maximum size of the panel
  *
- * @returns The constrained right panel size
+ * @returns The constrained panel size
  */
-export declare function calculateConstrainedRightPanelSize(rightPanelSize: number, minRightPanelSize: number, maxRightPanelSize: number): number;
+export declare function calculateConstrainedPanelSize(panelSize: number, minPanelSize: number, maxPanelSize: number): number;
 /**
- * Calculate the initial right panel size based on props and saved state.
+ * Calculate the initial controlled panel size based on props and saved state.
  *
- * @param initialRightPanelSize - The initial right panel size prop
+ * @param initialPanelSize - The initial panel size prop
  *
- * @param savedRightPanelSize - The saved right panel size from previous state (optional)
+ * @param savedPanelSize - The saved panel size from previous state (optional)
  *
- * @returns The calculated right panel size
+ * @returns The calculated panel size
  */
-export declare function calculateInitialRightPanelSize(initialRightPanelSize: number, savedRightPanelSize?: number): number;
+export declare function calculateInitialPanelSize(initialPanelSize: number, savedPanelSize?: number): number;

package/dist/src/SplitView/utils/calculatePanelSize.js

@@ -1,26 +1,26 @@
 /**
- * Calculate the right panel size with min/max constraints applied.
+ * Calculate the panel size with min/max constraints applied.
  *
- * @param rightPanelSize - The desired right panel size
+ * @param panelSize - The desired panel size
  *
- * @param minRightPanelSize - The minimum size of the right panel
+ * @param minPanelSize - The minimum size of the panel
  *
- * @param maxRightPanelSize - The maximum size of the right panel
+ * @param maxPanelSize - The maximum size of the panel
  *
- * @returns The constrained right panel size
+ * @returns The constrained panel size
  */
-export function calculateConstrainedRightPanelSize(rightPanelSize, minRightPanelSize, maxRightPanelSize) {
-    return Math.max(minRightPanelSize, Math.min(rightPanelSize, maxRightPanelSize));
+export function calculateConstrainedPanelSize(panelSize, minPanelSize, maxPanelSize) {
+    return Math.max(minPanelSize, Math.min(panelSize, maxPanelSize));
 }
 /**
- * Calculate the initial right panel size based on props and saved state.
+ * Calculate the initial controlled panel size based on props and saved state.
  *
- * @param initialRightPanelSize - The initial right panel size prop
+ * @param initialPanelSize - The initial panel size prop
  *
- * @param savedRightPanelSize - The saved right panel size from previous state (optional)
+ * @param savedPanelSize - The saved panel size from previous state (optional)
  *
- * @returns The calculated right panel size
+ * @returns The calculated panel size
  */
-export function calculateInitialRightPanelSize(initialRightPanelSize, savedRightPanelSize) {
-    return savedRightPanelSize ?? initialRightPanelSize;
+export function calculateInitialPanelSize(initialPanelSize, savedPanelSize) {
+    return savedPanelSize ?? initialPanelSize;
 }

package/dist/src/SplitView/utils/styles.d.ts

@@ -13,18 +13,34 @@ export declare function calculateDividerStyle(options: {
     dividerPropsStyle?: CSSProperties;
 }): CSSProperties;
 /**
- * Calculate the right panel style based on the current size state, visibility, and animation state.
+ * Styles returned for the controlled panel: the outer div handles layout and animation,
+ * the inner div maintains a fixed width during animation to prevent content reflow.
+ */
+export type ControlledPanelStyles = {
+    /** Applied to the panel div (the flex item). */
+    outer: CSSProperties;
+    /**
+     * Applied to an inner wrapper div that wraps the panel's slot content.
+     * Maintains a fixed width during animation so the content never reflows.
+     */
+    inner: CSSProperties;
+};
+/**
+ * Calculate the controlled panel style based on the current size state, visibility, and animation state.
  *
  * @param options - Style calculation options
  *
- * @returns The style object for the right panel
+ * @returns Styles for the outer panel div and the inner content wrapper div.
  */
-export declare function calculateRightPanelStyleUnified(options: {
+export declare function calculateControlledPanelStyle(options: {
     currentSize: number | undefined;
+    /** The full open size of the panel, used to fix the inner wrapper width during animation. */
+    fullPanelSize: number;
+    targetPanel: 'left' | 'right';
     enableAutoUnmount: boolean;
     isRightPanelVisible: boolean;
     isSlideOutAnimating: boolean;
     hasRightPanelBeenVisible: boolean;
     isAnimating: boolean;
-    rightPanelPropsStyle?: CSSProperties;
-}): CSSProperties;
+    panelPropsStyle?: CSSProperties;
+}): ControlledPanelStyles;