@astryxdesign/core 0.5.0 → 0.5.1-canary.046f6ea

package/src/Resizable/useResizable.test.ts

@@ -0,0 +1,421 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file useResizable.test.ts
+ * @input Uses vitest, @testing-library/react renderHook, useResizable
+ * @output Unit tests for useResizable persistence and collapse state
+ * @position Testing; validates useResizable implementation
+ *
+ * Persistence coverage originated in #4824 by @AKnassa.
+ *
+ * SYNC: When useResizable changes, update tests to match new behavior
+ */
+
+import {useLayoutEffect} from 'react';
+import {describe, it, expect, beforeEach, vi} from 'vitest';
+import {renderHook, act} from '@testing-library/react';
+import {useResizable} from './useResizable';
+
+const AUTO_SAVE_ID = 'test-panel';
+const KEY = `astryx-resizable:${AUTO_SAVE_ID}`;
+
+const BASE_CONFIG = {
+  defaultSize: 260,
+  minSizePx: 180,
+  maxSizePx: 480,
+  autoSaveId: AUTO_SAVE_ID,
+};
+
+type StoredEntry = {size: number; isCollapsed: boolean} | number | null;
+
+function readStored(): StoredEntry {
+  return JSON.parse(localStorage.getItem(KEY) ?? 'null') as StoredEntry;
+}
+
+beforeEach(() => {
+  localStorage.clear();
+});
+
+describe('useResizable persistence', () => {
+  it('restores a persisted width (legacy plain-number format)', () => {
+    localStorage.setItem(KEY, '320');
+    const {result} = renderHook(() =>
+      useResizable({...BASE_CONFIG, collapsible: true}),
+    );
+    expect(result.current.size).toBe(320);
+    expect(result.current.isCollapsed).toBe(false);
+  });
+
+  it('clamps a persisted width below the minimum', () => {
+    localStorage.setItem(KEY, '20');
+    const {result} = renderHook(() => useResizable(BASE_CONFIG));
+    expect(result.current.size).toBe(180);
+  });
+
+  it('ignores a non-finite persisted value', () => {
+    // JSON.parse('1e999') yields Infinity, which passes a typeof check.
+    localStorage.setItem(KEY, '1e999');
+    const {result} = renderHook(() => useResizable(BASE_CONFIG));
+    expect(result.current.size).toBe(260);
+  });
+
+  it('ignores corrupt storage content', () => {
+    localStorage.setItem(KEY, 'not json');
+    const {result} = renderHook(() => useResizable(BASE_CONFIG));
+    expect(result.current.size).toBe(260);
+  });
+
+  it('persists the expanded size together with the collapse flag', () => {
+    const {result} = renderHook(() =>
+      useResizable({...BASE_CONFIG, collapsible: true}),
+    );
+    act(() => result.current.resize(340));
+    expect(readStored()).toEqual({size: 340, isCollapsed: false});
+  });
+
+  it('keeps the expanded width in storage when collapsing', () => {
+    const {result} = renderHook(() =>
+      useResizable({...BASE_CONFIG, collapsible: true}),
+    );
+    act(() => result.current.resize(300));
+    act(() => result.current.collapse());
+
+    expect(result.current.size).toBe(0);
+    expect(result.current.isCollapsed).toBe(true);
+    expect(readStored()).toEqual({size: 300, isCollapsed: true});
+  });
+
+  it('restores the collapsed state and the pre-collapse width on remount', () => {
+    localStorage.setItem(KEY, JSON.stringify({size: 300, isCollapsed: true}));
+    const {result} = renderHook(() =>
+      useResizable({...BASE_CONFIG, collapsible: true}),
+    );
+
+    expect(result.current.isCollapsed).toBe(true);
+    expect(result.current.size).toBe(0);
+
+    act(() => result.current.expand());
+    expect(result.current.size).toBe(300);
+    expect(readStored()).toEqual({size: 300, isCollapsed: false});
+  });
+
+  it('treats a legacy persisted 0 as collapsed when collapsible', () => {
+    localStorage.setItem(KEY, '0');
+    const {result} = renderHook(() =>
+      useResizable({...BASE_CONFIG, collapsible: true}),
+    );
+
+    expect(result.current.isCollapsed).toBe(true);
+    expect(result.current.size).toBe(0);
+
+    // The legacy entry lost the real width, so expanding falls back to the
+    // default rather than to the minimum.
+    act(() => result.current.expand());
+    expect(result.current.size).toBe(260);
+  });
+
+  it('treats a legacy persisted 0 as the default width when not collapsible', () => {
+    localStorage.setItem(KEY, '0');
+    const {result} = renderHook(() => useResizable(BASE_CONFIG));
+    expect(result.current.isCollapsed).toBe(false);
+    expect(result.current.size).toBe(260);
+  });
+
+  it('ignores a persisted collapse flag when not collapsible', () => {
+    localStorage.setItem(KEY, JSON.stringify({size: 300, isCollapsed: true}));
+    const {result} = renderHook(() => useResizable(BASE_CONFIG));
+    expect(result.current.isCollapsed).toBe(false);
+    expect(result.current.size).toBe(300);
+  });
+
+  it('keeps the saved width across repeated collapse calls', () => {
+    const {result} = renderHook(() =>
+      useResizable({...BASE_CONFIG, collapsible: true}),
+    );
+    act(() => result.current.resize(300));
+    act(() => result.current.collapse());
+    act(() => result.current.collapse());
+
+    expect(readStored()).toEqual({size: 300, isCollapsed: true});
+    act(() => result.current.expand());
+    expect(result.current.size).toBe(300);
+  });
+
+  it('persists the pre-drag width when dragging to collapse', () => {
+    const {result} = renderHook(() =>
+      useResizable({...BASE_CONFIG, collapsible: true}),
+    );
+    act(() => result.current.resize(300));
+    act(() => result.current.props._onResizeStart());
+    act(() => result.current.props._onResizeMove(-270));
+
+    expect(result.current.isCollapsed).toBe(true);
+    expect(readStored()).toEqual({size: 300, isCollapsed: true});
+
+    // A continued drag below the threshold must not clobber the saved width.
+    act(() => result.current.props._onResizeMove(-275));
+    act(() => result.current.expand());
+    expect(result.current.size).toBe(300);
+  });
+
+  it('does not touch storage without an autoSaveId', () => {
+    const {result} = renderHook(() =>
+      useResizable({defaultSize: 260, collapsible: true}),
+    );
+    act(() => result.current.collapse());
+    expect(localStorage.length).toBe(0);
+  });
+});
+
+describe('useResizable uncontrolled collapse', () => {
+  it('starts collapsed from defaultIsCollapsed', () => {
+    const {result} = renderHook(() =>
+      useResizable({
+        defaultSize: 260,
+        collapsible: true,
+        defaultIsCollapsed: true,
+      }),
+    );
+    expect(result.current.isCollapsed).toBe(true);
+    expect(result.current.size).toBe(0);
+
+    act(() => result.current.expand());
+    expect(result.current.isCollapsed).toBe(false);
+    expect(result.current.size).toBe(260);
+  });
+
+  it('ignores defaultIsCollapsed when not collapsible', () => {
+    const {result} = renderHook(() =>
+      useResizable({defaultSize: 260, defaultIsCollapsed: true}),
+    );
+    expect(result.current.isCollapsed).toBe(false);
+    expect(result.current.size).toBe(260);
+  });
+
+  it('lets a persisted collapse flag win over defaultIsCollapsed', () => {
+    localStorage.setItem(KEY, JSON.stringify({size: 300, isCollapsed: false}));
+    const {result} = renderHook(() =>
+      useResizable({
+        ...BASE_CONFIG,
+        collapsible: true,
+        defaultIsCollapsed: true,
+      }),
+    );
+    expect(result.current.isCollapsed).toBe(false);
+    expect(result.current.size).toBe(300);
+  });
+
+  it('keeps defaultIsCollapsed when a legacy width entry says nothing about collapse', () => {
+    localStorage.setItem(KEY, '300');
+    const {result} = renderHook(() =>
+      useResizable({
+        ...BASE_CONFIG,
+        collapsible: true,
+        defaultIsCollapsed: true,
+      }),
+    );
+    expect(result.current.isCollapsed).toBe(true);
+    // The width is still restored — it is only collapse that is unknown.
+    act(() => result.current.expand());
+    expect(result.current.size).toBe(300);
+  });
+
+  it('notifies onCollapseChange once per collapse and expand', () => {
+    const onCollapseChange = vi.fn();
+    const {result} = renderHook(() =>
+      useResizable({defaultSize: 260, collapsible: true, onCollapseChange}),
+    );
+
+    act(() => result.current.collapse());
+    expect(onCollapseChange).toHaveBeenCalledExactlyOnceWith(true);
+
+    onCollapseChange.mockClear();
+    act(() => result.current.expand());
+    expect(onCollapseChange).toHaveBeenCalledExactlyOnceWith(false);
+  });
+
+  it('collapses on a drag past the threshold', () => {
+    const onCollapseChange = vi.fn();
+    const {result} = renderHook(() =>
+      useResizable({...BASE_CONFIG, collapsible: true, onCollapseChange}),
+    );
+
+    act(() => result.current.props._onResizeStart());
+    act(() => result.current.props._onResizeMove(-240));
+
+    expect(result.current.isCollapsed).toBe(true);
+    expect(onCollapseChange).toHaveBeenCalledWith(true);
+  });
+});
+
+describe('useResizable controlled collapse', () => {
+  it('renders the controlled value rather than its own state', () => {
+    const {result, rerender} = renderHook(
+      ({isCollapsed}: {isCollapsed: boolean}) =>
+        useResizable({defaultSize: 260, collapsible: true, isCollapsed}),
+      {initialProps: {isCollapsed: true}},
+    );
+
+    expect(result.current.isCollapsed).toBe(true);
+    expect(result.current.size).toBe(0);
+
+    rerender({isCollapsed: false});
+    expect(result.current.isCollapsed).toBe(false);
+    expect(result.current.size).toBe(260);
+  });
+
+  it('makes collapse() and expand() intents that change nothing locally', () => {
+    const onCollapseChange = vi.fn();
+    const {result} = renderHook(() =>
+      useResizable({
+        defaultSize: 260,
+        collapsible: true,
+        isCollapsed: false,
+        onCollapseChange,
+      }),
+    );
+
+    act(() => result.current.collapse());
+    expect(onCollapseChange).toHaveBeenCalledExactlyOnceWith(true);
+    // The owner said expanded and never changed its mind.
+    expect(result.current.isCollapsed).toBe(false);
+    expect(result.current.size).toBe(260);
+  });
+
+  it('reports a drag past the threshold instead of collapsing itself', () => {
+    const onCollapseChange = vi.fn();
+    const {result} = renderHook(() =>
+      useResizable({
+        ...BASE_CONFIG,
+        collapsible: true,
+        isCollapsed: false,
+        onCollapseChange,
+      }),
+    );
+
+    act(() => result.current.props._onResizeStart());
+    act(() => result.current.props._onResizeMove(-240));
+
+    expect(onCollapseChange).toHaveBeenCalledWith(true);
+    expect(result.current.isCollapsed).toBe(false);
+  });
+
+  it('persists the collapse state the owner holds', () => {
+    const {result} = renderHook(() =>
+      useResizable({...BASE_CONFIG, collapsible: true, isCollapsed: true}),
+    );
+    expect(result.current.isCollapsed).toBe(true);
+    expect(readStored()).toEqual({size: 260, isCollapsed: true});
+  });
+});
+
+// The fix under test is @AKnassa's, from #5118.
+describe('useResizable live collapse state', () => {
+  it('reads the current controlled value before consumer layout effects', () => {
+    const onCollapseChange = vi.fn();
+    const {rerender} = renderHook(
+      ({isCollapsed, shouldCollapse}) => {
+        const {collapse} = useResizable({
+          defaultSize: 260,
+          collapsible: true,
+          isCollapsed,
+          onCollapseChange,
+        });
+        useLayoutEffect(() => {
+          if (shouldCollapse) {
+            collapse();
+          }
+        }, [collapse, shouldCollapse]);
+        return collapse;
+      },
+      {initialProps: {isCollapsed: true, shouldCollapse: false}},
+    );
+
+    rerender({isCollapsed: false, shouldCollapse: true});
+    expect(onCollapseChange).toHaveBeenCalledExactlyOnceWith(true);
+  });
+
+  // ResizeHandle registers its pointermove listener once at pointer down, so
+  // a whole gesture runs against the props object captured there. These tests
+  // hold that snapshot instead of re-reading result.current between moves —
+  // re-reading hands the callbacks a fresh render and hides the bug.
+  it('reports one collapse for a drag that stays below the threshold', () => {
+    const onCollapseChange = vi.fn();
+    const {result} = renderHook(() =>
+      useResizable({...BASE_CONFIG, collapsible: true, onCollapseChange}),
+    );
+
+    act(() => result.current.props._onResizeStart());
+    const gesture = result.current.props;
+    for (const delta of [-240, -245, -250, -255, -260]) {
+      act(() => gesture._onResizeMove(delta));
+    }
+
+    expect(onCollapseChange).toHaveBeenCalledExactlyOnceWith(true);
+    expect(result.current.isCollapsed).toBe(true);
+  });
+
+  it('re-expands mid-gesture when the drag crosses back above the threshold', () => {
+    const onCollapseChange = vi.fn();
+    const {result} = renderHook(() =>
+      useResizable({...BASE_CONFIG, collapsible: true, onCollapseChange}),
+    );
+
+    act(() => result.current.props._onResizeStart());
+    const gesture = result.current.props;
+    act(() => gesture._onResizeMove(-240));
+    act(() => gesture._onResizeMove(-20));
+
+    expect(onCollapseChange.mock.calls).toEqual([[true], [false]]);
+    expect(result.current.isCollapsed).toBe(false);
+    expect(result.current.size).toBe(240);
+  });
+
+  it('notifies when resize() lifts the panel out of collapse', () => {
+    const onCollapseChange = vi.fn();
+    const {result} = renderHook(() =>
+      useResizable({...BASE_CONFIG, collapsible: true, onCollapseChange}),
+    );
+
+    act(() => result.current.collapse());
+    onCollapseChange.mockClear();
+    act(() => result.current.resize(300));
+
+    expect(onCollapseChange).toHaveBeenCalledExactlyOnceWith(false);
+    expect(result.current.isCollapsed).toBe(false);
+    expect(result.current.size).toBe(300);
+  });
+
+  it('reports one collapse when collapse() runs twice in a tick', () => {
+    const onCollapseChange = vi.fn();
+    const {result} = renderHook(() =>
+      useResizable({...BASE_CONFIG, collapsible: true, onCollapseChange}),
+    );
+
+    act(() => {
+      result.current.collapse();
+      result.current.collapse();
+    });
+
+    expect(onCollapseChange).toHaveBeenCalledExactlyOnceWith(true);
+  });
+});
+
+describe('useResizable identity', () => {
+  it('keeps callbacks stable when optional snaps are omitted', () => {
+    const {result, rerender} = renderHook(() =>
+      useResizable({defaultSize: 200, minSizePx: 100, maxSizePx: 400}),
+    );
+    const first = {
+      expand: result.current.expand,
+      resize: result.current.resize,
+      snaps: result.current.props._snaps,
+    };
+
+    rerender();
+
+    expect(result.current.expand).toBe(first.expand);
+    expect(result.current.resize).toBe(first.resize);
+    expect(result.current.props._snaps).toBe(first.snaps);
+  });
+});

package/src/Resizable/useResizable.ts

@@ -4,7 +4,8 @@
 
 /**
  * @file useResizable.ts
- * @input Resize configuration (defaultSize, minSizePx, maxSizePx, collapsible, snaps)
+ * @input Resize configuration (defaultSize, minSizePx, maxSizePx, snaps) and
+ *   collapse configuration (collapsible, defaultIsCollapsed, isCollapsed)
  * @output Hook return: size, isCollapsed, collapse/expand/resize methods, props for handle
  * @position Public hook; consumed by layout components via `resizable` prop
  */
@@ -44,15 +45,33 @@ export interface ResizableConfig {
   minWidth?: number;
   /** Maximum width in pixels. @default 480 */
   maxWidth?: number;
-  /** localStorage key for persisting width. */
+  /** localStorage key for persisting width and collapse state. */
   autoSaveId?: string;
   /** Called when the width changes (on drag end). */
   onWidthChange?: (width: number) => void;
+  /** Start collapsed (uncontrolled). A persisted entry wins over this. */
+  defaultIsCollapsed?: boolean;
+  /** Controlled collapse state. Pair with `onCollapseChange`. */
+  isCollapsed?: boolean;
+  /** Called when collapse state changes (via drag or programmatic). */
+  onCollapseChange?: (isCollapsed: boolean) => void;
 }
 
 export interface UseResizableSingleConfig extends ResizableRegionConfig {
   /** Unique key for localStorage persistence. */
   autoSaveId?: string;
+  /**
+   * Initial collapse state (uncontrolled). A persisted entry wins over it,
+   * so a restored session keeps the state the user left behind.
+   * Only honored when `collapsible` is true.
+   */
+  defaultIsCollapsed?: boolean;
+  /**
+   * Controlled collapse state. When set, the caller owns collapse:
+   * `collapse()`, `expand()` and a drag past the collapse threshold report
+   * through `onCollapseChange` instead of changing state here.
+   */
+  isCollapsed?: boolean;
   /** Called when size changes during drag. */
   onSizeChange?: (size: number) => void;
   /** Called when collapse state changes (via drag or programmatic). */
@@ -138,16 +157,55 @@ function clampSize(
   return clamped;
 }
 
-function loadPersistedSize(key: string): number | null {
+interface PersistedResizableState {
+  /** Expanded size in px, or null when the entry carries no usable size. */
+  size: number | null;
+  /**
+   * Collapse state when the entry was written, or null when the entry
+   * predates collapse persistence and says nothing about it.
+   */
+  isCollapsed: boolean | null;
+}
+
+/**
+ * Reads a persisted entry. Three formats exist in storage:
+ * - `{size, isCollapsed}` — the current format; `size` is the expanded size,
+ *   so the pre-collapse width survives a collapsed session
+ * - a plain non-zero number — a legacy width-only entry that never recorded
+ *   collapse, so `isCollapsed` is null (unknown)
+ * - a plain `0` — written by legacy collapse, which restored the region as a
+ *   zero-width expanded panel (#4790); read as "collapsed, no saved size"
+ */
+function loadPersistedState(key: string): PersistedResizableState | null {
   if (typeof window === 'undefined') {
     return null;
   }
   try {
     const raw = localStorage.getItem(STORAGE_PREFIX + key);
-    if (raw != null) {
-      const parsed = JSON.parse(raw);
-      if (typeof parsed === 'number') {
-        return parsed;
+    if (raw == null) {
+      return null;
+    }
+    const parsed: unknown = JSON.parse(raw);
+    if (typeof parsed === 'number') {
+      if (!Number.isFinite(parsed)) {
+        return null;
+      }
+      return parsed === 0
+        ? {size: null, isCollapsed: true}
+        : {size: parsed, isCollapsed: null};
+    }
+    if (typeof parsed === 'object' && parsed != null) {
+      const {size, isCollapsed} = parsed as {
+        size?: unknown;
+        isCollapsed?: unknown;
+      };
+      const hasSize =
+        typeof size === 'number' && Number.isFinite(size) && size > 0;
+      if (hasSize || isCollapsed === true) {
+        return {
+          size: hasSize ? size : null,
+          isCollapsed: isCollapsed === true,
+        };
       }
     }
   } catch {
@@ -156,12 +214,12 @@ function loadPersistedSize(key: string): number | null {
   return null;
 }
 
-function persistSize(key: string, size: number): void {
+function persistState(key: string, state: PersistedResizableState): void {
   if (typeof window === 'undefined') {
     return;
   }
   try {
-    localStorage.setItem(STORAGE_PREFIX + key, JSON.stringify(size));
+    localStorage.setItem(STORAGE_PREFIX + key, JSON.stringify(state));
   } catch {
     /* ignore */
   }
@@ -195,87 +253,115 @@ function useSingleResizable(config: UseResizableSingleConfig): ResizableRegion {
     maxSizePx = Infinity,
     collapsible = false,
     collapsedSize = DEFAULT_COLLAPSED_SIZE,
-    snaps = [],
+    snaps: configuredSnaps,
     autoSaveId,
+    defaultIsCollapsed,
+    isCollapsed: controlledIsCollapsed,
     onSizeChange,
     onCollapseChange,
   } = config;
+  const emptySnapsRef = useRef<number[]>([]);
+  const snaps = configuredSnaps ?? emptySnapsRef.current;
 
   const resolvedDefault = resolveDefaultSize(defaultSize);
-  const persisted = autoSaveId ? loadPersistedSize(autoSaveId) : null;
-  const initial = persisted ?? resolvedDefault;
+  const persisted = autoSaveId ? loadPersistedState(autoSaveId) : null;
+  const initial = persisted?.size ?? resolvedDefault;
 
+  // `size` is always the *expanded* size: collapse hides it behind the
+  // isCollapsed gate below rather than zeroing it, so the width the user had
+  // survives a collapse, a persist round-trip, and an expand.
   const [size, setSize] = useState(() =>
     clampSize(initial, minSizePx, maxSizePx, snaps),
   );
-  const [isCollapsed, setIsCollapsed] = useState(
-    () => persisted === 0 && collapsible,
+  const [uncontrolledIsCollapsed, setUncontrolledIsCollapsed] = useState(
+    () => persisted?.isCollapsed ?? defaultIsCollapsed ?? false,
   );
-  const preCollapseSizeRef = useRef(size);
+
+  const isControlled = controlledIsCollapsed !== undefined;
+  const isCollapsed =
+    collapsible &&
+    (isControlled ? controlledIsCollapsed : uncontrolledIsCollapsed);
   const dragStartSizeRef = useRef(size);
 
+  // Mirrors isCollapsed so the callbacks below read the live value instead of
+  // the one their last render captured. Two cases reach them from a stale
+  // closure: two imperative calls in one tick, and a drag — ResizeHandle
+  // registers its pointermove listener once at pointer down, so a whole
+  // gesture runs against one props snapshot.
+  const isCollapsedRef = useRef(isCollapsed);
+  isCollapsedRef.current = isCollapsed;
+
+  // Controlled callers own the state; collapse() and a drag past the
+  // threshold report through onCollapseChange and change nothing here.
+  const setCollapsed = useCallback(
+    (value: boolean) => {
+      if (!isControlled) {
+        isCollapsedRef.current = value;
+        setUncontrolledIsCollapsed(value);
+      }
+    },
+    [isControlled],
+  );
+
   useEffect(() => {
     if (autoSaveId) {
-      persistSize(autoSaveId, isCollapsed ? 0 : size);
+      persistState(autoSaveId, {size, isCollapsed});
     }
   }, [size, isCollapsed, autoSaveId]);
 
   const collapse = useCallback(() => {
-    if (!collapsible) {
+    // The already-collapsed guard keeps a repeated call from re-notifying a
+    // transition that already happened.
+    if (!collapsible || isCollapsedRef.current) {
       return;
     }
-    preCollapseSizeRef.current = size;
-    setIsCollapsed(true);
-    setSize(0);
+    setCollapsed(true);
     onCollapseChange?.(true);
     onSizeChange?.(0);
-  }, [collapsible, size, onCollapseChange, onSizeChange]);
+  }, [collapsible, setCollapsed, onCollapseChange, onSizeChange]);
 
   const expand = useCallback(() => {
-    setIsCollapsed(false);
-    const restored = preCollapseSizeRef.current || resolvedDefault;
-    const newSize = clampSize(restored, minSizePx, maxSizePx, snaps);
-    setSize(newSize);
-    onCollapseChange?.(false);
-    onSizeChange?.(newSize);
-  }, [
-    resolvedDefault,
-    minSizePx,
-    maxSizePx,
-    snaps,
-    onCollapseChange,
-    onSizeChange,
-  ]);
+    const wasCollapsed = isCollapsedRef.current;
+    setCollapsed(false);
+    if (wasCollapsed) {
+      onCollapseChange?.(false);
+    }
+    onSizeChange?.(size);
+  }, [setCollapsed, size, onCollapseChange, onSizeChange]);
 
   const resize = useCallback(
     (newSize: number) => {
       const clamped = clampSize(newSize, minSizePx, maxSizePx, snaps);
+      const wasCollapsed = isCollapsedRef.current;
       setSize(clamped);
-      setIsCollapsed(false);
+      setCollapsed(false);
+      // Resizing out of the collapsed state is an implicit expand — notify
+      // like the drag path does when it crosses back over the threshold.
+      if (wasCollapsed) {
+        onCollapseChange?.(false);
+      }
       onSizeChange?.(clamped);
     },
-    [minSizePx, maxSizePx, snaps, onSizeChange],
+    [minSizePx, maxSizePx, snaps, setCollapsed, onCollapseChange, onSizeChange],
   );
 
   const onResizeStart = useCallback(() => {
-    dragStartSizeRef.current = isCollapsed ? 0 : size;
-  }, [size, isCollapsed]);
+    dragStartSizeRef.current = isCollapsedRef.current ? 0 : size;
+  }, [size]);
 
   const onResizeMove = useCallback(
     (delta: number) => {
       const raw = dragStartSizeRef.current + delta;
       if (collapsible && raw < collapsedSize) {
-        if (!isCollapsed) {
-          preCollapseSizeRef.current = size;
+        if (!isCollapsedRef.current) {
+          setCollapsed(true);
           onCollapseChange?.(true);
+          onSizeChange?.(0);
         }
-        setIsCollapsed(true);
-        setSize(0);
-        onSizeChange?.(0);
         return;
       }
-      if (isCollapsed && raw >= collapsedSize) {
-        setIsCollapsed(false);
+      if (isCollapsedRef.current && raw >= collapsedSize) {
+        setCollapsed(false);
         onCollapseChange?.(false);
       }
       const clamped = clampSize(raw, minSizePx, maxSizePx, snaps);
@@ -285,8 +371,7 @@ function useSingleResizable(config: UseResizableSingleConfig): ResizableRegion {
     [
       collapsible,
       collapsedSize,
-      isCollapsed,
-      size,
+      setCollapsed,
       minSizePx,
       maxSizePx,
       snaps,