@blocksdiy/react-common 1.52.1 → 1.53.0

package/dist/hooks/use-resizable-panel.js

@@ -0,0 +1,184 @@
+// A floating panel's size, headless: resized from the edges its corner anchoring leaves free by
+// a pointer drag (with capture) or arrow keys on a focused handle, clamped to a floor and to the
+// viewport, remembered per browser. The hook owns the math and the memory; the component owns
+// the handles' markup and spreads `getHandleProps(axis)` on them.
+import { useCallback, useRef, useState } from "react";
+const clampNumber = (value, min, max) => Math.min(Math.max(value, min), max);
+/**
+ * A size the panel can take inside `viewport`: never below the floor, never past the viewport
+ * minus the inset on both sides — unless the viewport itself is smaller than the floor, where
+ * the floor wins (CSS still caps the box to the viewport).
+ */
+export const clampPanelSize = (size, viewport, { minSize, inset }) => {
+    const maxWidth = Math.max(minSize.width, viewport.width - 2 * inset);
+    const maxHeight = Math.max(minSize.height, viewport.height - 2 * inset);
+    return {
+        width: Math.round(clampNumber(size.width, minSize.width, maxWidth)),
+        height: Math.round(clampNumber(size.height, minSize.height, maxHeight)),
+    };
+};
+/** A stored size, or null for anything but two finite positive numbers. */
+export const parseStoredPanelSize = (raw) => {
+    if (!raw) {
+        return null;
+    }
+    try {
+        const parsed = JSON.parse(raw);
+        if (typeof parsed !== "object" || parsed === null) {
+            return null;
+        }
+        const { width, height } = parsed;
+        if (typeof width !== "number" ||
+            typeof height !== "number" ||
+            !Number.isFinite(width) ||
+            !Number.isFinite(height) ||
+            width <= 0 ||
+            height <= 0) {
+            return null;
+        }
+        return { width, height };
+    }
+    catch {
+        return null;
+    }
+};
+/**
+ * The size a drag has reached. The panel is anchored at the viewport's bottom-start corner, so
+ * growth is toward the end edge and upward — the horizontal delta flips in RTL, and a drag up
+ * counts as more height.
+ */
+export const panelSizeFromDrag = (drag, pointer, bounds) => {
+    const dx = (pointer.clientX - drag.startX) * (drag.isRtl ? -1 : 1);
+    const dy = drag.startY - pointer.clientY;
+    return clampPanelSize({
+        width: drag.axis === "height" ? drag.startSize.width : drag.startSize.width + dx,
+        height: drag.axis === "width" ? drag.startSize.height : drag.startSize.height + dy,
+    }, drag.viewport, bounds);
+};
+/** The key's step for a handle: toward the end edge and up grow; null for a key the axis ignores. */
+export const panelKeyboardDelta = (key, axis, step, isRtl) => {
+    const grow = isRtl ? "ArrowLeft" : "ArrowRight";
+    const shrink = isRtl ? "ArrowRight" : "ArrowLeft";
+    if (axis !== "height" && key === grow) {
+        return { dx: step, dy: 0 };
+    }
+    if (axis !== "height" && key === shrink) {
+        return { dx: -step, dy: 0 };
+    }
+    if (axis !== "width" && key === "ArrowUp") {
+        return { dx: 0, dy: step };
+    }
+    if (axis !== "width" && key === "ArrowDown") {
+        return { dx: 0, dy: -step };
+    }
+    return null;
+};
+const KEYBOARD_STEP = 16;
+const KEYBOARD_STEP_LARGE = 64;
+const readStoredSize = (storageKey) => {
+    if (!storageKey) {
+        return null;
+    }
+    try {
+        return parseStoredPanelSize(window.localStorage.getItem(storageKey));
+    }
+    catch {
+        return null;
+    }
+};
+const storeSize = (storageKey, size) => {
+    if (!storageKey) {
+        return;
+    }
+    try {
+        window.localStorage.setItem(storageKey, JSON.stringify(size));
+    }
+    catch {
+        // Private mode or a full store: the panel still resizes, it just forgets on reload.
+    }
+};
+/** The panel's box, the viewport it floats in, and its direction. */
+const measure = (panel) => {
+    const rect = panel.getBoundingClientRect();
+    return {
+        size: { width: rect.width, height: rect.height },
+        viewport: { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight },
+        isRtl: getComputedStyle(panel).direction === "rtl",
+    };
+};
+export const useResizablePanel = (panelRef, { defaultSize, minSize, inset, storageKey }) => {
+    const [size, setSize] = useState(() => {
+        const stored = readStoredSize(storageKey);
+        if (!stored) {
+            return defaultSize;
+        }
+        // Remembered under an earlier, smaller floor: never below today's (CSS caps it to the viewport).
+        return {
+            width: Math.max(stored.width, minSize.width),
+            height: Math.max(stored.height, minSize.height),
+        };
+    });
+    const [isResizing, setResizing] = useState(false);
+    const dragRef = useRef(null);
+    const bounds = { minSize, inset };
+    const commit = useCallback((next) => {
+        setSize(next);
+        storeSize(storageKey, next);
+    }, [storageKey]);
+    const getHandleProps = (axis) => ({
+        onPointerDown: (event) => {
+            const panel = panelRef.current;
+            if (!panel || event.button !== 0) {
+                return;
+            }
+            const measured = measure(panel);
+            dragRef.current = {
+                pointerId: event.pointerId,
+                axis,
+                startX: event.clientX,
+                startY: event.clientY,
+                startSize: measured.size,
+                viewport: measured.viewport,
+                isRtl: measured.isRtl,
+            };
+            event.currentTarget.setPointerCapture(event.pointerId);
+            event.preventDefault(); // no text selection while dragging
+            setResizing(true);
+        },
+        onPointerMove: (event) => {
+            const drag = dragRef.current;
+            if (!drag || drag.pointerId !== event.pointerId) {
+                return;
+            }
+            setSize(panelSizeFromDrag(drag, event, bounds));
+        },
+        onPointerUp: (event) => {
+            const drag = dragRef.current;
+            if (!drag || drag.pointerId !== event.pointerId) {
+                return;
+            }
+            dragRef.current = null;
+            setResizing(false);
+            // The drag's own final value — a DOM measurement here could lag the last move by a frame.
+            commit(panelSizeFromDrag(drag, event, bounds));
+        },
+        onPointerCancel: () => {
+            dragRef.current = null;
+            setResizing(false);
+        },
+        onKeyDown: (event) => {
+            const panel = panelRef.current;
+            if (!panel) {
+                return;
+            }
+            const { size: current, viewport, isRtl } = measure(panel);
+            const delta = panelKeyboardDelta(event.key, axis, event.shiftKey ? KEYBOARD_STEP_LARGE : KEYBOARD_STEP, isRtl);
+            if (!delta) {
+                return;
+            }
+            event.preventDefault();
+            commit(clampPanelSize({ width: current.width + delta.dx, height: current.height + delta.dy }, viewport, bounds));
+        },
+    });
+    return { size, isResizing, getHandleProps };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocksdiy/react-common",
-  "version": "1.52.1",
+  "version": "1.53.0",
   "type": "module",
   "description": "React common",
   "keywords": [],
@@ -39,7 +39,7 @@
     "penpal": "^8.0.0",
     "react": "^19.2.8",
     "use-stick-to-bottom": "1.1.4",
-    "@blocksdiy/blocks-client-api": "1.25.2"
+    "@blocksdiy/blocks-client-api": "1.5.0"
   },
   "devDependencies": {
     "@types/react": "^19.2.18",