@moneyforward/mfui-components 3.11.0 → 3.12.1

package/dist/src/SplitView/SplitView.js

@@ -8,13 +8,13 @@ import { useSplitViewDrag } from './hooks/useSplitViewDrag';
 import { useSplitViewKeyboard } from './hooks/useSplitViewKeyboard';
 import { useSplitViewPanelVisibility } from './hooks/useSplitViewPanelVisibility';
 import { useSplitViewResize } from './hooks/useSplitViewResize';
-import { calculateDividerStyle, calculateRightPanelStyleUnified } from './utils/styles';
+import { calculateControlledPanelStyle, calculateDividerStyle } from './utils/styles';
 import { parseSizeToNumber } from './utils/parseSize';
 /**
  * A resizable split layout component with two panels.
  *
  * Users can adjust panel sizes by dragging the divider between panels.
- * The right panel can be shown or hidden using the `isOpen` prop.
+ * The controlled panel (determined by `targetPanel`) can be shown or hidden using the `isOpen` prop.
  *
  * @example
  * ```tsx
@@ -24,99 +24,130 @@ import { parseSizeToNumber } from './utils/parseSize';
  *   leftPanelSlot={<div>Left Panel</div>}
  *   rightPanelSlot={<div>Right Panel</div>}
  *   isOpen={isOpen}
- *   initialRightPanelSize={300}
- *   minRightPanelSize={200}
- *   maxRightPanelSize={500}
+ *   targetPanel="right"
+ *   initialPanelSize={300}
+ *   minPanelSize={200}
+ *   maxPanelSize={500}
  *   style={{ minWidth: '600px' }}
  * />
  * ```
  */
-export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot, isOpen, 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, enableAutoUnmount = true, ...props }, ref) => {
+    // Normalize legacy props to the new API
+    const resolvedTargetPanel = targetPanel ?? 'right';
+    const resolvedInitialPanelSize = initialPanelSize ?? initialRightPanelSize;
+    const resolvedMinPanelSize = minPanelSize ?? minRightPanelSize;
+    const resolvedMaxPanelSize = maxPanelSize ?? maxRightPanelSize;
     // Convert CSS width values to numbers for internal calculations
-    const initialRightPanelSizeNumber = parseSizeToNumber(initialRightPanelSize, 'initialRightPanelSize');
-    const minRightPanelSizeNumber = parseSizeToNumber(minRightPanelSize, 'minRightPanelSize');
-    const maxRightPanelSizeNumber = parseSizeToNumber(maxRightPanelSize, 'maxRightPanelSize');
-    // Prop validation
+    const initialPanelSizeNumber = parseSizeToNumber(resolvedInitialPanelSize, 'initialPanelSize');
+    const minPanelSizeNumber = parseSizeToNumber(resolvedMinPanelSize, 'minPanelSize');
+    const maxPanelSizeNumber = parseSizeToNumber(resolvedMaxPanelSize, 'maxPanelSize');
+    // Warn when legacy and new API props are mixed.
+    // These checks are intentionally guarded at runtime for JavaScript callers who bypass TypeScript's
+    // discriminated union constraints (e.g., via `as any` or plain JS usage).
     useEffect(() => {
-        if (minRightPanelSizeNumber < 0) {
-            console.error(`SplitView: minRightPanelSize must be non-negative, but got ${String(minRightPanelSize)}.`);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (initialPanelSize !== undefined && initialRightPanelSize !== undefined) {
+            console.warn('SplitView: initialPanelSize and initialRightPanelSize cannot be used together. ' +
+                'initialPanelSize takes precedence. Remove initialRightPanelSize.');
         }
-        if (maxRightPanelSizeNumber < 0) {
-            console.error(`SplitView: maxRightPanelSize must be non-negative, but got ${String(maxRightPanelSize)}.`);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (minPanelSize !== undefined && minRightPanelSize !== undefined) {
+            console.warn('SplitView: minPanelSize and minRightPanelSize cannot be used together. ' +
+                'minPanelSize takes precedence. Remove minRightPanelSize.');
         }
-        if (initialRightPanelSizeNumber < 0) {
-            console.error(`SplitView: initialRightPanelSize must be non-negative, but got ${String(initialRightPanelSize)}.`);
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        if (maxPanelSize !== undefined && maxRightPanelSize !== undefined) {
+            console.warn('SplitView: maxPanelSize and maxRightPanelSize cannot be used together. ' +
+                'maxPanelSize takes precedence. Remove maxRightPanelSize.');
         }
-        if (minRightPanelSizeNumber > maxRightPanelSizeNumber) {
-            console.error(`SplitView: minRightPanelSize (${String(minRightPanelSize)}) must be less than or equal to maxRightPanelSize (${String(maxRightPanelSize)}).`);
+    }, [initialPanelSize, initialRightPanelSize, minPanelSize, minRightPanelSize, maxPanelSize, maxRightPanelSize]);
+    // Validate resolved prop values
+    useEffect(() => {
+        if (minPanelSizeNumber < 0) {
+            console.error(`SplitView: minPanelSize must be non-negative, but got ${String(resolvedMinPanelSize)}.`);
+        }
+        if (maxPanelSizeNumber < 0) {
+            console.error(`SplitView: maxPanelSize must be non-negative, but got ${String(resolvedMaxPanelSize)}.`);
+        }
+        if (initialPanelSizeNumber < 0) {
+            console.error(`SplitView: initialPanelSize must be non-negative, but got ${String(resolvedInitialPanelSize)}.`);
+        }
+        if (minPanelSizeNumber > maxPanelSizeNumber) {
+            console.error(`SplitView: minPanelSize (${String(resolvedMinPanelSize)}) must be less than or equal to maxPanelSize (${String(resolvedMaxPanelSize)}).`);
         }
-        if (initialRightPanelSizeNumber < minRightPanelSizeNumber) {
-            console.error(`SplitView: initialRightPanelSize (${String(initialRightPanelSize)}) must be greater than or equal to minRightPanelSize (${String(minRightPanelSize)}).`);
+        if (initialPanelSizeNumber < minPanelSizeNumber) {
+            console.error(`SplitView: initialPanelSize (${String(resolvedInitialPanelSize)}) must be greater than or equal to minPanelSize (${String(resolvedMinPanelSize)}).`);
         }
-        if (initialRightPanelSizeNumber > maxRightPanelSizeNumber) {
-            console.error(`SplitView: initialRightPanelSize (${String(initialRightPanelSize)}) must be less than or equal to maxRightPanelSize (${String(maxRightPanelSize)}).`);
+        if (initialPanelSizeNumber > maxPanelSizeNumber) {
+            console.error(`SplitView: initialPanelSize (${String(resolvedInitialPanelSize)}) must be less than or equal to maxPanelSize (${String(resolvedMaxPanelSize)}).`);
         }
     }, [
-        initialRightPanelSize,
-        minRightPanelSize,
-        maxRightPanelSize,
-        initialRightPanelSizeNumber,
-        minRightPanelSizeNumber,
-        maxRightPanelSizeNumber,
+        resolvedInitialPanelSize,
+        resolvedMinPanelSize,
+        resolvedMaxPanelSize,
+        initialPanelSizeNumber,
+        minPanelSizeNumber,
+        maxPanelSizeNumber,
     ]);
     const classes = splitViewSlotRecipe();
     const containerRef = useRef(null);
-    const [rightPanelSize, setRightPanelSize] = useState();
+    // Size of the controlled panel (the panel specified by targetPanel)
+    const [controlledPanelSize, setControlledPanelSize] = useState();
     const [isAnimating, setIsAnimating] = useState(false);
-    const [animatedRightPanelSize, setAnimatedRightPanelSize] = useState();
+    const [animatedPanelSize, setAnimatedPanelSize] = useState();
     const [isSlideOutAnimating, setIsSlideOutAnimating] = useState(false);
-    // Store last known right panel size for slide-out animation
-    const lastRightPanelSizeRef = useRef(undefined);
-    // Memoized callback to update last right panel size
-    const setLastRightPanelSize = useCallback((size) => {
-        lastRightPanelSizeRef.current = size;
+    // Store last known controlled panel size for slide-out animation
+    const lastControlledPanelSizeRef = useRef(undefined);
+    // Memoized callback to update last controlled panel size
+    const setLastControlledPanelSize = useCallback((size) => {
+        lastControlledPanelSizeRef.current = size;
     }, []);
+    // The slot of the controlled panel (varies by targetPanel)
+    const controlledPanelSlot = resolvedTargetPanel === 'left' ? leftPanelSlot : rightPanelSlot;
     // Panel visibility management
-    const { isRightPanelVisible, isInitialMountRef, wasRightPanelVisibleOnMountRef, hasRightPanelBeenVisible, setHasRightPanelBeenVisible, previousIsRightPanelVisibleRef, lastRightPanelRef, } = useSplitViewPanelVisibility(isOpen, rightPanelSlot);
-    // Determine if right panel should be rendered based on enableAutoUnmount
-    const shouldRenderRightPanel = enableAutoUnmount ? isRightPanelVisible : true;
+    const { isRightPanelVisible, isInitialMountRef, wasRightPanelVisibleOnMountRef, hasRightPanelBeenVisible, setHasRightPanelBeenVisible, previousIsRightPanelVisibleRef, lastRightPanelRef, } = useSplitViewPanelVisibility(isOpen, controlledPanelSlot);
+    // Determine if the controlled panel should be rendered based on enableAutoUnmount
+    const shouldRenderControlledPanel = enableAutoUnmount ? isRightPanelVisible : true;
     // Animation management
     useSplitViewAnimation({
         isRightPanelVisible,
         containerRef,
-        initialRightPanelSize: initialRightPanelSizeNumber,
-        minRightPanelSize: minRightPanelSizeNumber,
+        initialPanelSize: initialPanelSizeNumber,
+        minPanelSize: minPanelSizeNumber,
         isInitialMountRef,
         wasRightPanelVisibleOnMountRef,
         previousIsRightPanelVisibleRef,
         hasRightPanelBeenVisible,
         isAnimating,
-        rightPanelSize,
-        lastRightPanelSizeRef,
+        controlledPanelSize,
+        lastControlledPanelSizeRef,
         lastRightPanelRef,
-        setRightPanelSize,
+        setControlledPanelSize,
         setIsAnimating,
-        setAnimatedRightPanelSize,
+        setAnimatedPanelSize,
         setHasRightPanelBeenVisible,
         setIsSlideOutAnimating,
     });
     // Drag management
     const { isDragging, handleMouseDown } = useSplitViewDrag({
         containerRef,
-        minRightPanelSize: minRightPanelSizeNumber,
-        maxRightPanelSize: maxRightPanelSizeNumber,
-        setRightPanelSize,
-        setLastRightPanelSize,
+        targetPanel: resolvedTargetPanel,
+        minPanelSize: minPanelSizeNumber,
+        maxPanelSize: maxPanelSizeNumber,
+        setControlledPanelSize,
+        setLastControlledPanelSize,
     });
     // Keyboard navigation
     const { handleKeyDown } = useSplitViewKeyboard({
         containerRef,
-        rightPanelSize,
-        initialRightPanelSize: initialRightPanelSizeNumber,
-        minRightPanelSize: minRightPanelSizeNumber,
-        maxRightPanelSize: maxRightPanelSizeNumber,
-        setRightPanelSize,
-        setLastRightPanelSize,
+        targetPanel: resolvedTargetPanel,
+        controlledPanelSize,
+        initialPanelSize: initialPanelSizeNumber,
+        minPanelSize: minPanelSizeNumber,
+        maxPanelSize: maxPanelSizeNumber,
+        setControlledPanelSize,
+        setLastControlledPanelSize,
     });
     // Resize management
     useSplitViewResize({
@@ -124,32 +155,37 @@ export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot,
         containerRef,
         isAnimating,
         isDragging,
-        rightPanelSize,
-        minRightPanelSize: minRightPanelSizeNumber,
-        maxRightPanelSize: maxRightPanelSizeNumber,
-        setRightPanelSize,
-        setLastRightPanelSize,
+        controlledPanelSize,
+        minPanelSize: minPanelSizeNumber,
+        maxPanelSize: maxPanelSizeNumber,
+        setControlledPanelSize,
+        setLastControlledPanelSize,
     });
-    // Calculate current right panel size based on animation and visibility state
-    let currentRightPanelSize;
+    // Calculate current controlled panel size based on animation and visibility state
+    let currentControlledPanelSize;
     if (isAnimating) {
-        currentRightPanelSize = animatedRightPanelSize;
+        currentControlledPanelSize = animatedPanelSize;
     }
     else if (isRightPanelVisible) {
-        // Use rightPanelSize if set, otherwise fallback to initialRightPanelSize directly
-        currentRightPanelSize = rightPanelSize ?? initialRightPanelSizeNumber;
+        currentControlledPanelSize = controlledPanelSize ?? initialPanelSizeNumber;
     }
     else {
-        currentRightPanelSize = undefined;
+        currentControlledPanelSize = undefined;
     }
-    const rightPanelStyle = calculateRightPanelStyleUnified({
-        currentSize: currentRightPanelSize,
+    // The full open size of the controlled panel: used to fix the inner wrapper width during animation
+    // so that the panel content never reflows as the outer div width shrinks.
+    const fullControlledPanelSize = lastControlledPanelSizeRef.current ?? controlledPanelSize ?? initialPanelSizeNumber;
+    // Calculate styles for the controlled panel (applied to left or right panel based on targetPanel)
+    const { outer: controlledPanelOuterStyle, inner: controlledPanelInnerStyle } = calculateControlledPanelStyle({
+        currentSize: currentControlledPanelSize,
+        fullPanelSize: fullControlledPanelSize,
+        targetPanel: resolvedTargetPanel,
         enableAutoUnmount,
         isRightPanelVisible,
         isSlideOutAnimating,
         hasRightPanelBeenVisible,
         isAnimating,
-        rightPanelPropsStyle: rightPanelProps?.style,
+        panelPropsStyle: resolvedTargetPanel === 'left' ? leftPanelProps?.style : rightPanelProps?.style,
     });
     const dividerStyle = calculateDividerStyle({
         hasRightPanelBeenVisible,
@@ -157,6 +193,10 @@ export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot,
         isDragging,
         dividerPropsStyle: dividerProps?.style,
     });
+    // Apply controlled panel style to the correct panel based on targetPanel.
+    // When a panel is the main panel (not controlled), flex: 1 ensures it fills remaining space.
+    const computedLeftPanelStyle = resolvedTargetPanel === 'left' ? controlledPanelOuterStyle : leftPanelProps?.style;
+    const computedRightPanelStyle = resolvedTargetPanel === 'right' ? controlledPanelOuterStyle : { flex: 1, ...rightPanelProps?.style };
     return (_jsxs("div", { ref: (node) => {
             // Handle both refs
             if (typeof ref === 'function') {
@@ -167,7 +207,7 @@ export const SplitView = forwardRef(({ className, leftPanelSlot, rightPanelSlot,
                 ref.current = node;
             }
             containerRef.current = node;
-        }, className: cx(classes.root, 'mfui-SplitView__root', className), ...props, children: [_jsx("div", { ...leftPanelProps, className: cx(classes.leftPanel, 'mfui-SplitView__leftPanel', leftPanelProps?.className), 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", { ...dividerProps, className: cx(classes.divider, 'mfui-SplitView__divider', dividerProps?.className), role: "separator", "aria-orientation": "vertical", "aria-label": dividerProps?.['aria-label'] ?? '左右のパネルを調整', 
                 // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-                tabIndex: 0, style: dividerStyle, onPointerDown: handleMouseDown, onKeyDown: handleKeyDown })) : null, shouldRenderRightPanel || isSlideOutAnimating ? (_jsx("div", { ...rightPanelProps, className: cx(classes.rightPanel, 'mfui-SplitView__rightPanel', rightPanelProps?.className), style: rightPanelStyle, children: enableAutoUnmount ? (rightPanelSlot ?? lastRightPanelRef.current) : rightPanelSlot })) : null] }));
+                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 }))] }));
 });

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

@@ -1,10 +1,10 @@
 import { type ComponentPropsWithoutRef, type CSSProperties, type ReactNode } from 'react';
 /**
- * Props for the SplitView component
+ * Base props shared by both the legacy and new panel size APIs.
  */
-export type SplitViewProps = {
+type SplitViewBaseProps = {
     /**
-     * The content to display in the left panel
+     * The content to display in the left panel.
      */
     leftPanelSlot: ReactNode;
     /**
@@ -12,89 +12,117 @@ export type SplitViewProps = {
      */
     rightPanelSlot: ReactNode;
     /**
-     * Controls the visibility of the right panel.
+     * Controls which panel is visible.
      *
-     * When `true`, the right panel is shown with slide-in animation.
-     * When `false`, the right panel is hidden with slide-out animation.
-     * When `undefined`, the right panel is visible by default.
+     * When `true`, the controlled panel (determined by `targetPanel`) is shown with a slide-in animation.
+     * When `false`, the controlled panel is hidden with a slide-out animation.
+     * When `undefined`, the controlled panel is visible by default.
      *
      * The behavior when hidden depends on the `enableAutoUnmount` prop:
-     * - `enableAutoUnmount=true` (default): The right panel content will be unmounted when hidden
-     * - `enableAutoUnmount=false`: The right panel content stays mounted but is hidden via CSS
+     * - `enableAutoUnmount=true` (default): The controlled panel content will be unmounted when hidden
+     * - `enableAutoUnmount=false`: The controlled panel content stays mounted but is hidden via CSS
      *
-     * @default undefined (right panel is visible by default)
+     * @default undefined (controlled panel is visible by default)
      *
      * @example
      * ```tsx
-     * // Default: Memory-efficient (enableAutoUnmount=true)
+     * // New API: control left panel size
      * <SplitView
      *   leftPanelSlot={<LeftPanel />}
      *   rightPanelSlot={<RightPanel />}
      *   isOpen={isOpen}
-     *   initialRightPanelSize={300}
-     *   minRightPanelSize={200}
-     *   maxRightPanelSize={500}
-     *   style={{ minWidth: '600px' }}
-     * />
-     *
-     * // Advanced: State preservation (enableAutoUnmount=false)
-     * <SplitView
-     *   leftPanelSlot={<LeftPanel />}
-     *   rightPanelSlot={<ExpensiveFormWithState />}
-     *   isOpen={isOpen}
-     *   initialRightPanelSize={300}
-     *   minRightPanelSize={200}
-     *   maxRightPanelSize={500}
-     *   enableAutoUnmount={false}
+     *   targetPanel="left"
+     *   initialPanelSize={300}
+     *   minPanelSize={200}
+     *   maxPanelSize={500}
      *   style={{ minWidth: '600px' }}
      * />
      * ```
      */
     isOpen?: boolean;
     /**
-     * The initial size of the second panel.
+     * Props for the left panel container.
+     */
+    leftPanelProps?: ComponentPropsWithoutRef<'div'>;
+    /**
+     * Props for the right panel container.
+     */
+    rightPanelProps?: ComponentPropsWithoutRef<'div'>;
+    /**
+     * Props for the divider element.
+     */
+    dividerProps?: ComponentPropsWithoutRef<'div'>;
+    /**
+     * 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.
      *
-     * This prop is required and must be specified when using SplitView.
-     * The right panel will be displayed at this size initially.
+     * @default true
+     */
+    enableAutoUnmount?: boolean;
+} & ComponentPropsWithoutRef<'div'>;
+/**
+ * Legacy panel size props (right-panel-specific).
+ *
+ * This type will be deprecated in v4.0.0.
+ * Use `TargetPanelSizeProps` (`initialPanelSize`, `minPanelSize`, `maxPanelSize`, `targetPanel`) instead.
+ */
+type LegacyPanelSizeProps = {
+    /**
+     * The initial size of the right panel.
      *
-     * @example
-     * ```tsx
-     * <SplitView
-     *   leftPanelSlot={<LeftPanel />}
-     *   rightPanelSlot={<RightPanel />}
-     *   initialRightPanelSize={300}
-     *   minRightPanelSize={200}
-     *   maxRightPanelSize={500}
-     *   style={{ minWidth: '600px' }}
-     * />
-     * ```
+     * This prop will be deprecated in v4.0.0. Use `initialPanelSize` with `targetPanel="right"` instead.
      */
-    initialRightPanelSize: CSSProperties['width'];
+    initialRightPanelSize: NonNullable<CSSProperties['width']>;
     /**
-     * The minimum size of the second panel
+     * The minimum size of the right panel.
+     *
+     * This prop will be deprecated in v4.0.0. Use `minPanelSize` with `targetPanel="right"` instead.
      */
-    minRightPanelSize: CSSProperties['minWidth'];
+    minRightPanelSize: NonNullable<CSSProperties['minWidth']>;
     /**
-     * The maximum size of the second panel
+     * The maximum size of the right panel.
+     *
+     * This prop will be deprecated in v4.0.0. Use `maxPanelSize` with `targetPanel="right"` instead.
      */
-    maxRightPanelSize: CSSProperties['maxWidth'];
+    maxRightPanelSize: NonNullable<CSSProperties['maxWidth']>;
+    initialPanelSize?: never;
+    minPanelSize?: never;
+    maxPanelSize?: never;
+    targetPanel?: never;
+};
+/**
+ * Panel size props for the new API. Supports controlling either the left or right panel.
+ */
+type TargetPanelSizeProps = {
     /**
-     * Props for the left panel container
+     * The initial size of the panel specified by `targetPanel`.
      */
-    leftPanelProps?: ComponentPropsWithoutRef<'div'>;
+    initialPanelSize: NonNullable<CSSProperties['width']>;
     /**
-     * Props for the right panel container
+     * The minimum size of the panel specified by `targetPanel`.
      */
-    rightPanelProps?: ComponentPropsWithoutRef<'div'>;
+    minPanelSize: NonNullable<CSSProperties['minWidth']>;
     /**
-     * Props for the divider element
+     * The maximum size of the panel specified by `targetPanel`.
      */
-    dividerProps?: ComponentPropsWithoutRef<'div'>;
+    maxPanelSize: NonNullable<CSSProperties['maxWidth']>;
     /**
-     * Enable auto unmounting of the right panel content when it's not displayed.
-     * When true, the right panel content will return null instead of hiding via CSS.
+     * Specifies which panel's size is controlled by `initialPanelSize`, `minPanelSize`, and `maxPanelSize`.
+     * Also determines which panel is shown or hidden by the `isOpen` prop.
      *
-     * @default true
+     * - `"right"`: The right panel has a fixed size; the left panel expands to fill remaining space.
+     * - `"left"`: The left panel has a fixed size; the right panel expands to fill remaining space.
      */
-    enableAutoUnmount?: boolean;
-} & ComponentPropsWithoutRef<'div'>;
+    targetPanel: 'left' | 'right';
+    /** Disallowed when using the new API. Use `initialPanelSize` instead. */
+    initialRightPanelSize?: never;
+    /** Disallowed when using the new API. Use `minPanelSize` instead. */
+    minRightPanelSize?: never;
+    /** Disallowed when using the new API. Use `maxPanelSize` instead. */
+    maxRightPanelSize?: never;
+};
+/**
+ * Props for the SplitView component.
+ */
+export type SplitViewProps = SplitViewBaseProps & (LegacyPanelSizeProps | TargetPanelSizeProps);
+export {};

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

@@ -7,8 +7,8 @@ import { type ReactNode } from 'react';
 export declare function useSplitViewAnimation(options: {
     isRightPanelVisible: boolean;
     containerRef: React.RefObject<HTMLDivElement | null>;
-    initialRightPanelSize: number;
-    minRightPanelSize: number;
+    initialPanelSize: number;
+    minPanelSize: number;
     isInitialMountRef: {
         current: boolean;
     };
@@ -20,16 +20,16 @@ export declare function useSplitViewAnimation(options: {
     };
     hasRightPanelBeenVisible: boolean;
     isAnimating: boolean;
-    rightPanelSize: number | undefined;
-    lastRightPanelSizeRef: {
+    controlledPanelSize: number | undefined;
+    lastControlledPanelSizeRef: {
         current: number | undefined;
     };
     lastRightPanelRef: {
         current: ReactNode;
     };
-    setRightPanelSize: (size: number | undefined) => void;
+    setControlledPanelSize: (size: number | undefined) => void;
     setIsAnimating: (animating: boolean) => void;
-    setAnimatedRightPanelSize: (size: number | undefined) => void;
+    setAnimatedPanelSize: (size: number | undefined) => void;
     setHasRightPanelBeenVisible: (visible: boolean) => void;
     setIsSlideOutAnimating: (animating: boolean) => void;
 }): void;