@hyphen/hyphen-components 9.1.0 → 9.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "9.1.0",
+  "version": "9.1.1",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -57,7 +57,7 @@
     "react-select": "^5.10.0",
     "react-select-event": "^5.5.1",
     "uuid": "^11.1.1",
-    "@hyphen/hyphen-design-tokens": "^9.1.0"
+    "@hyphen/hyphen-design-tokens": "^9.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",

package/src/components/Sidebar/Sidebar.resize.test.tsx

@@ -289,20 +289,43 @@ test('mobile uses its drawer without resize controls', () => {
   ).not.toBeInTheDocument();
 });
 
-test('pointer movement clamps at both bounds and lost capture cancels', () => {
+test('pointer movement clamps at both bounds', () => {
   render(<Example />);
   const rail = screen.getByRole('button', { name: /Resize or toggle/ });
   drag(rail, 500, -1000);
   expect(width()).toBe('960px');
   drag(rail, 500, 1500);
   expect(width()).toBe('320px');
-  fireEvent.pointerDown(rail, { button: 0, clientX: 500 });
-  fireEvent.pointerMove(rail, { clientX: 400 });
-  fireEvent.lostPointerCapture(rail);
-  expect(width()).toBe('320px');
-  expect(document.body.style.cursor).toBe('');
 });
 
+test.each(['left', 'right'] as const)(
+  'keeps the last dragged %s width when capture ends before pointerup',
+  (side) => {
+    render(<Example side={side} />);
+    const rail = screen.getByRole('button', {
+      name: `Resize or toggle ${side} sidebar`,
+    });
+    const endX = side === 'left' ? 700 : 300;
+    fireEvent.pointerDown(rail, { pointerId: 1, button: 0, clientX: 500 });
+    // Do not pause for a render between the last move and losing capture.
+    act(() => {
+      fireEvent.pointerMove(rail, { pointerId: 1, clientX: endX });
+      fireEvent.lostPointerCapture(rail, { pointerId: 1 });
+    });
+    expect(width(side)).toBe('584px');
+    expect(localStorage.getItem(`width-${side}`)).toBe('584');
+    expect(document.body.style.cursor).toBe('');
+    expect(document.body.style.userSelect).toBe('');
+    fireEvent.pointerUp(rail, { pointerId: 1, clientX: endX });
+    fireEvent.click(rail, { detail: 1 });
+    expect(width(side)).toBe('584px');
+    expect(document.querySelector(`[data-side="${side}"]`)).toHaveAttribute(
+      'data-state',
+      'expanded'
+    );
+  }
+);
+
 test('resizes without ResizeObserver and removes its window listener on unmount', () => {
   Object.defineProperty(window, 'ResizeObserver', {
     configurable: true,

package/src/components/Sidebar/useSidebarResize.ts

@@ -121,6 +121,12 @@ export function useSidebarResize({
       // A storage failure must not interrupt the interaction.
     }
   };
+  const finish = () => {
+    if (!gesture.current) return;
+    if (gesture.current.moved) persist();
+    gesture.current = null;
+    setDragging(false);
+  };
   const cancel = () => {
     if (!gesture.current) return;
     setPreferredWidth(gesture.current.preferred);
@@ -158,14 +164,16 @@ export function useSidebarResize({
         update(
           start.width + (side === 'left' ? 1 : -1) * (event.clientX - start.x)
         );
-        persist();
       }
-      gesture.current = null;
-      setDragging(false);
+      finish();
       event.currentTarget.releasePointerCapture(event.pointerId);
     },
     onPointerCancel: cancel,
-    onLostPointerCapture: cancel,
+    // Capture can end before pointerup reaches the rail. Keep the last move
+    // instead of treating release as a cancelled drag and restoring its start.
+    onLostPointerCapture: (event) => {
+      if (gesture.current?.id === event.pointerId) finish();
+    },
     onClickCapture: (event) => {
       if (suppressClick.current && event.detail !== 0) {
         event.preventDefault();