@activecollab/components 2.0.372 → 2.0.373

package/dist/esm/components/StackedCard/useStackedCardResize.js

@@ -0,0 +1,137 @@
+import { useCallback, useRef } from "react";
+import { applyResize, isResizeKey, keyboardResize, makeStart, measurePercent } from "./resizePolicy";
+
+/**
+ * The one place pointer and keyboard input meet the resize policy.
+ *
+ * `StackedCard`'s built-in grip reports raw deltas and knows no policy — enough
+ * for a host that just tracks a width. This hook is the full contract: it
+ * captures the gesture start, funnels both inputs through the pure policy in
+ * `resizePolicy.ts`, streams preview events and fires exactly ONE commit per
+ * gesture. It returns the props to spread on the grip, including the live
+ * separator ARIA.
+ *
+ * Preview versus commit (spec §7e): the continuous stream is live feedback
+ * only. A host creates an undo entry on the COMMIT, never on a preview — and a
+ * gesture that never changed the size commits nothing at all, so a bare click
+ * on the grip is not a change.
+ *
+ * The hook never touches the card's content: the intrinsic minimum is read
+ * through `contentMin`, which may be a getter so a card that measures its own
+ * footer can answer at the moment it is asked.
+ */
+
+/** The props to spread on the grip — `StackedCard`'s `resizeHandleProps`. */
+
+const sameSize = (a, b) => a.w === b.w && a.h === b.h;
+export const useStackedCardResize = _ref => {
+  let size = _ref.size,
+    policy = _ref.policy,
+    cardId = _ref.cardId,
+    contentMin = _ref.contentMin,
+    _ref$axis = _ref.axis,
+    axis = _ref$axis === void 0 ? "both" : _ref$axis,
+    _ref$scale = _ref.scale,
+    scale = _ref$scale === void 0 ? 1 : _ref$scale,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? "Resize card" : _ref$label,
+    onResize = _ref.onResize,
+    onResizeCommit = _ref.onResizeCommit;
+  // The pointer gesture's anchor: the size + content-min captured on pointer
+  // down, plus the pointer origin the delta is measured from.
+  const pointerStart = useRef(null);
+  // Mirrors the latest emitted size so pointer-up / key-up can commit exactly
+  // what preview last showed, without a stale closure.
+  const latest = useRef(size);
+  latest.current = size;
+  // Whether this gesture actually moved the card. A bare click, or a Home on an
+  // axis with no floor, leaves it false and commits nothing.
+  const dirty = useRef(false);
+
+  // Read through refs so the handlers below can stay stable across renders
+  // while still seeing the current policy, axis and zoom.
+  const policyRef = useRef(policy);
+  policyRef.current = policy;
+  const axisRef = useRef(axis);
+  axisRef.current = axis;
+  const scaleRef = useRef(scale);
+  scaleRef.current = scale;
+  const contentMinRef = useRef(contentMin);
+  contentMinRef.current = contentMin;
+  const readContentMin = useCallback(() => {
+    const source = contentMinRef.current;
+    return typeof source === "function" ? source() : source;
+  }, []);
+  const emitPreview = useCallback((next, source) => {
+    // Nothing changed — not a preview, and not something to commit later.
+    if (sameSize(next, latest.current)) return;
+    latest.current = next;
+    dirty.current = true;
+    onResize(next, source);
+  }, [onResize]);
+  const handlePointerDown = useCallback(e => {
+    pointerStart.current = {
+      start: makeStart(latest.current, readContentMin()),
+      x: e.clientX,
+      y: e.clientY
+    };
+    dirty.current = false;
+    e.target.setPointerCapture == null || e.target.setPointerCapture(e.pointerId);
+    e.preventDefault();
+  }, [readContentMin]);
+  const handlePointerMove = useCallback(e => {
+    const ps = pointerStart.current;
+    if (!ps) return;
+    const z = scaleRef.current || 1;
+    const next = applyResize(ps.start, {
+      dx: (e.clientX - ps.x) / z,
+      dy: (e.clientY - ps.y) / z
+    }, policyRef.current,
+    // Shift held during a free-form drag = temporary proportional lock.
+    {
+      constrain: e.shiftKey,
+      axis: axisRef.current
+    });
+    emitPreview(next, "pointer");
+  }, [emitPreview]);
+  const endPointer = useCallback(() => {
+    if (!pointerStart.current) return;
+    pointerStart.current = null;
+    if (dirty.current) onResizeCommit(latest.current, "pointer");
+    dirty.current = false;
+  }, [onResizeCommit]);
+  const handleKeyDown = useCallback(e => {
+    const next = keyboardResize(e.key, latest.current, policyRef.current, readContentMin(), {
+      shiftKey: e.shiftKey,
+      axis: axisRef.current
+    });
+    if (!next) return;
+    // The key is ours even when it resolves to no movement (already pinned at
+    // a bound), so the browser must not also scroll the surface.
+    e.preventDefault();
+    emitPreview(next, "keyboard");
+  }, [emitPreview, readContentMin]);
+  const handleKeyUp = useCallback(e => {
+    if (!isResizeKey(e.key)) return;
+    // The gesture end for the keyboard is the key release: one commit per
+    // hold, mirroring pointer-up after a stream of moves.
+    if (dirty.current) onResizeCommit(latest.current, "keyboard");
+    dirty.current = false;
+  }, [onResizeCommit]);
+  return {
+    role: "separator",
+    tabIndex: 0,
+    "aria-label": label,
+    "aria-controls": cardId,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100,
+    "aria-valuenow": measurePercent(size, policy, readContentMin()),
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: endPointer,
+    onLostPointerCapture: endPointer,
+    onKeyDown: handleKeyDown,
+    onKeyUp: handleKeyUp
+  };
+};
+//# sourceMappingURL=useStackedCardResize.js.map

package/dist/esm/components/StackedCard/useStackedCardResize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStackedCardResize.js","names":["useCallback","useRef","applyResize","isResizeKey","keyboardResize","makeStart","measurePercent","sameSize","a","b","w","h","useStackedCardResize","_ref","size","policy","cardId","contentMin","_ref$axis","axis","_ref$scale","scale","_ref$label","label","onResize","onResizeCommit","pointerStart","latest","current","dirty","policyRef","axisRef","scaleRef","contentMinRef","readContentMin","source","emitPreview","next","handlePointerDown","e","start","x","clientX","y","clientY","target","setPointerCapture","pointerId","preventDefault","handlePointerMove","ps","z","dx","dy","constrain","shiftKey","endPointer","handleKeyDown","key","handleKeyUp","role","tabIndex","onPointerDown","onPointerMove","onPointerUp","onLostPointerCapture","onKeyDown","onKeyUp"],"sources":["../../../../src/components/StackedCard/useStackedCardResize.ts"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\n\nimport {\n  StackedCardContentMin,\n  StackedCardResizeAxis,\n  StackedCardResizePolicy,\n  StackedCardResizeSource,\n  StackedCardResizeStart,\n  StackedCardSize,\n  applyResize,\n  isResizeKey,\n  keyboardResize,\n  makeStart,\n  measurePercent,\n} from \"./resizePolicy\";\n\n/**\n * The one place pointer and keyboard input meet the resize policy.\n *\n * `StackedCard`'s built-in grip reports raw deltas and knows no policy — enough\n * for a host that just tracks a width. This hook is the full contract: it\n * captures the gesture start, funnels both inputs through the pure policy in\n * `resizePolicy.ts`, streams preview events and fires exactly ONE commit per\n * gesture. It returns the props to spread on the grip, including the live\n * separator ARIA.\n *\n * Preview versus commit (spec §7e): the continuous stream is live feedback\n * only. A host creates an undo entry on the COMMIT, never on a preview — and a\n * gesture that never changed the size commits nothing at all, so a bare click\n * on the grip is not a change.\n *\n * The hook never touches the card's content: the intrinsic minimum is read\n * through `contentMin`, which may be a getter so a card that measures its own\n * footer can answer at the moment it is asked.\n */\n\nexport interface UseStackedCardResizeArgs {\n  /** The card's current size, owned by the host. */\n  size: StackedCardSize;\n  policy: StackedCardResizePolicy;\n  /** Id of the element the grip resizes — becomes `aria-controls`. */\n  cardId: string;\n  /** The card's intrinsic minimum; a getter is read at the moment it is needed. */\n  contentMin: StackedCardContentMin | (() => StackedCardContentMin);\n  /** `width` locks the vertical axis (auto-height cards). Defaults to `both`. */\n  axis?: StackedCardResizeAxis;\n  /**\n   * Pointer deltas are divided by this before they reach the policy, so a grip\n   * inside a zoomed canvas tracks the cursor exactly. Keyboard nudges are\n   * already in the host's units and pass straight through. Defaults to 1.\n   */\n  scale?: number;\n  /** Accessible name for the grip. Defaults to \"Resize card\". */\n  label?: string;\n  /** Live feedback during the gesture. Never an undoable change. */\n  onResize: (next: StackedCardSize, source: StackedCardResizeSource) => void;\n  /** Fires once per gesture, and only if the size actually changed. */\n  onResizeCommit: (\n    final: StackedCardSize,\n    source: StackedCardResizeSource\n  ) => void;\n}\n\n/** The props to spread on the grip — `StackedCard`'s `resizeHandleProps`. */\nexport interface StackedCardResizeHandleProps {\n  role: \"separator\";\n  tabIndex: 0;\n  \"aria-label\": string;\n  \"aria-controls\": string;\n  \"aria-valuemin\": number;\n  \"aria-valuemax\": number;\n  \"aria-valuenow\": number;\n  onPointerDown: (e: React.PointerEvent) => void;\n  onPointerMove: (e: React.PointerEvent) => void;\n  onPointerUp: (e: React.PointerEvent) => void;\n  onLostPointerCapture: (e: React.PointerEvent) => void;\n  onKeyDown: (e: React.KeyboardEvent) => void;\n  onKeyUp: (e: React.KeyboardEvent) => void;\n}\n\nconst sameSize = (a: StackedCardSize, b: StackedCardSize): boolean =>\n  a.w === b.w && a.h === b.h;\n\nexport const useStackedCardResize = ({\n  size,\n  policy,\n  cardId,\n  contentMin,\n  axis = \"both\",\n  scale = 1,\n  label = \"Resize card\",\n  onResize,\n  onResizeCommit,\n}: UseStackedCardResizeArgs): StackedCardResizeHandleProps => {\n  // The pointer gesture's anchor: the size + content-min captured on pointer\n  // down, plus the pointer origin the delta is measured from.\n  const pointerStart = useRef<{\n    start: StackedCardResizeStart;\n    x: number;\n    y: number;\n  } | null>(null);\n  // Mirrors the latest emitted size so pointer-up / key-up can commit exactly\n  // what preview last showed, without a stale closure.\n  const latest = useRef<StackedCardSize>(size);\n  latest.current = size;\n  // Whether this gesture actually moved the card. A bare click, or a Home on an\n  // axis with no floor, leaves it false and commits nothing.\n  const dirty = useRef(false);\n\n  // Read through refs so the handlers below can stay stable across renders\n  // while still seeing the current policy, axis and zoom.\n  const policyRef = useRef(policy);\n  policyRef.current = policy;\n  const axisRef = useRef(axis);\n  axisRef.current = axis;\n  const scaleRef = useRef(scale);\n  scaleRef.current = scale;\n  const contentMinRef = useRef(contentMin);\n  contentMinRef.current = contentMin;\n\n  const readContentMin = useCallback((): StackedCardContentMin => {\n    const source = contentMinRef.current;\n    return typeof source === \"function\" ? source() : source;\n  }, []);\n\n  const emitPreview = useCallback(\n    (next: StackedCardSize, source: StackedCardResizeSource) => {\n      // Nothing changed — not a preview, and not something to commit later.\n      if (sameSize(next, latest.current)) return;\n      latest.current = next;\n      dirty.current = true;\n      onResize(next, source);\n    },\n    [onResize]\n  );\n\n  const handlePointerDown = useCallback(\n    (e: React.PointerEvent) => {\n      pointerStart.current = {\n        start: makeStart(latest.current, readContentMin()),\n        x: e.clientX,\n        y: e.clientY,\n      };\n      dirty.current = false;\n      (e.target as HTMLElement).setPointerCapture?.(e.pointerId);\n      e.preventDefault();\n    },\n    [readContentMin]\n  );\n\n  const handlePointerMove = useCallback(\n    (e: React.PointerEvent) => {\n      const ps = pointerStart.current;\n      if (!ps) return;\n      const z = scaleRef.current || 1;\n      const next = applyResize(\n        ps.start,\n        { dx: (e.clientX - ps.x) / z, dy: (e.clientY - ps.y) / z },\n        policyRef.current,\n        // Shift held during a free-form drag = temporary proportional lock.\n        { constrain: e.shiftKey, axis: axisRef.current }\n      );\n      emitPreview(next, \"pointer\");\n    },\n    [emitPreview]\n  );\n\n  const endPointer = useCallback(() => {\n    if (!pointerStart.current) return;\n    pointerStart.current = null;\n    if (dirty.current) onResizeCommit(latest.current, \"pointer\");\n    dirty.current = false;\n  }, [onResizeCommit]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      const next = keyboardResize(\n        e.key,\n        latest.current,\n        policyRef.current,\n        readContentMin(),\n        { shiftKey: e.shiftKey, axis: axisRef.current }\n      );\n      if (!next) return;\n      // The key is ours even when it resolves to no movement (already pinned at\n      // a bound), so the browser must not also scroll the surface.\n      e.preventDefault();\n      emitPreview(next, \"keyboard\");\n    },\n    [emitPreview, readContentMin]\n  );\n\n  const handleKeyUp = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (!isResizeKey(e.key)) return;\n      // The gesture end for the keyboard is the key release: one commit per\n      // hold, mirroring pointer-up after a stream of moves.\n      if (dirty.current) onResizeCommit(latest.current, \"keyboard\");\n      dirty.current = false;\n    },\n    [onResizeCommit]\n  );\n\n  return {\n    role: \"separator\",\n    tabIndex: 0,\n    \"aria-label\": label,\n    \"aria-controls\": cardId,\n    \"aria-valuemin\": 0,\n    \"aria-valuemax\": 100,\n    \"aria-valuenow\": measurePercent(size, policy, readContentMin()),\n    onPointerDown: handlePointerDown,\n    onPointerMove: handlePointerMove,\n    onPointerUp: endPointer,\n    onLostPointerCapture: endPointer,\n    onKeyDown: handleKeyDown,\n    onKeyUp: handleKeyUp,\n  };\n};\n"],"mappings":"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","ignoreList":[]}