@portnet/ui 6.0.0 → 6.0.2

package/dist/esm/v2/patterns/_sort.js

@@ -0,0 +1,112 @@
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+/**
+ * Internal: locale-correct multi-sort for DataGrid / useSortedRows.
+ *
+ * Extracted verbatim from SortableHeader (Batch 12 / C1) so the sort logic can
+ * be shared by the SortableHeader pattern (which re-exports `applySort`) and the
+ * useSortedRows hook — without a hook → component import (a .ts hook importing a
+ * still-.js component fails build:types under allowJs:false) and without
+ * duplicating the collation logic. Behaviour is unchanged.
+ *
+ * NOT part of the public surface: `applySort` is re-exported from SortableHeader
+ * (the public name / call site); getCollator + compareValues + the cache are
+ * internal implementation details that were never exported.
+ */
+
+/**
+ * Module-level cache of Intl.Collator instances keyed by locale tag.
+ * Collator construction allocates internal locale data (≈100 µs cold)
+ * — caching matters for hosts that re-sort on every render.
+ *
+ * Using "accent" sensitivity preserves the prior toLowerCase-based
+ * behaviour (case-insensitive) while honouring proper locale collation:
+ *   - FR: É sorts as if E (between Élise and Étienne, not after Z).
+ *   - AR: combining marks fold correctly.
+ *   - DE: Umlauts (ä) sort with their base letter.
+ * "numeric: true" makes "Item 10" sort AFTER "Item 2" (natural order),
+ * which the prior char-code comparison got backwards.
+ */
+var COLLATOR_CACHE = new Map();
+function getCollator(locale) {
+  var key = locale || "fr-FR";
+  var cached = COLLATOR_CACHE.get(key);
+  if (cached) return cached;
+  var collator;
+  try {
+    collator = new Intl.Collator(key, {
+      sensitivity: "accent",
+      numeric: true
+    });
+  } catch (_unused) {
+    // Invalid BCP-47 tag — fall back to fr-FR (matches the rest of v2's
+    // graceful-locale-fallback contract from Batch 2).
+    collator = new Intl.Collator("fr-FR", {
+      sensitivity: "accent",
+      numeric: true
+    });
+  }
+  COLLATOR_CACHE.set(key, collator);
+  return collator;
+}
+
+/**
+ * Compare two cell values with locale-aware semantics. Routes through
+ * the Collator only for strings or mixed types; numeric / Date pairs
+ * use native operators (faster + exact).
+ *
+ * Null / undefined / empty-string sort FIRST (preserves the prior
+ * applySort empty-string behaviour: "" < any non-empty string).
+ */
+function compareValues(av, bv, collator) {
+  var aN = av == null || av === "";
+  var bN = bv == null || bv === "";
+  if (aN && bN) return 0;
+  if (aN) return -1;
+  if (bN) return 1;
+  if (typeof av === "number" && typeof bv === "number") {
+    return av - bv;
+  }
+  if (av instanceof Date && bv instanceof Date) {
+    return av.getTime() - bv.getTime();
+  }
+  // String pair — or mixed types coerced to strings. The Collator handles
+  // both cases identically and respects `numeric: true` so digit runs
+  // inside a label compare numerically.
+  return collator.compare(String(av), String(bv));
+}
+
+/**
+ * Pure helper — applies a multi-sort state to an array of rows.
+ * Returns a NEW sorted array (input is not mutated); the original array
+ * reference is returned untouched when there is nothing to sort.
+ */
+export function applySort(rows, sort) {
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  if (!(sort !== null && sort !== void 0 && sort.length)) return rows;
+  var collator = getCollator(options.locale);
+  return _toConsumableArray(rows).sort(function (a, b) {
+    var _iterator = _createForOfIteratorHelper(sort),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var _step$value = _step.value,
+          key = _step$value.key,
+          dir = _step$value.dir;
+        var cmp = compareValues(a[key], b[key], collator);
+        if (cmp !== 0) return dir === "asc" ? cmp : -cmp;
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    return 0;
+  });
+}
+//# sourceMappingURL=_sort.js.map

package/dist/esm/v2/patterns/_sort.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_sort.js","names":["COLLATOR_CACHE","Map","getCollator","locale","key","cached","get","collator","Intl","Collator","sensitivity","numeric","_unused","set","compareValues","av","bv","aN","bN","Date","getTime","compare","String","applySort","rows","sort","options","arguments","length","undefined","_toConsumableArray","a","b","_iterator","_createForOfIteratorHelper","_step","s","n","done","_step$value","value","dir","cmp","err","e","f"],"sources":["../../../../src/lib/v2/patterns/_sort.ts"],"sourcesContent":["/**\r\n * Internal: locale-correct multi-sort for DataGrid / useSortedRows.\r\n *\r\n * Extracted verbatim from SortableHeader (Batch 12 / C1) so the sort logic can\r\n * be shared by the SortableHeader pattern (which re-exports `applySort`) and the\r\n * useSortedRows hook — without a hook → component import (a .ts hook importing a\r\n * still-.js component fails build:types under allowJs:false) and without\r\n * duplicating the collation logic. Behaviour is unchanged.\r\n *\r\n * NOT part of the public surface: `applySort` is re-exported from SortableHeader\r\n * (the public name / call site); getCollator + compareValues + the cache are\r\n * internal implementation details that were never exported.\r\n */\r\nimport type { SortDescriptor } from \"../types/common\";\r\nimport type { ApplySortOptions } from \"../types/datagrid\";\r\n\r\n/**\r\n * Module-level cache of Intl.Collator instances keyed by locale tag.\r\n * Collator construction allocates internal locale data (≈100 µs cold)\r\n * — caching matters for hosts that re-sort on every render.\r\n *\r\n * Using \"accent\" sensitivity preserves the prior toLowerCase-based\r\n * behaviour (case-insensitive) while honouring proper locale collation:\r\n *   - FR: É sorts as if E (between Élise and Étienne, not after Z).\r\n *   - AR: combining marks fold correctly.\r\n *   - DE: Umlauts (ä) sort with their base letter.\r\n * \"numeric: true\" makes \"Item 10\" sort AFTER \"Item 2\" (natural order),\r\n * which the prior char-code comparison got backwards.\r\n */\r\nconst COLLATOR_CACHE = new Map<string, Intl.Collator>();\r\n\r\nfunction getCollator(locale?: string): Intl.Collator {\r\n  const key = locale || \"fr-FR\";\r\n  const cached = COLLATOR_CACHE.get(key);\r\n  if (cached) return cached;\r\n  let collator: Intl.Collator;\r\n  try {\r\n    collator = new Intl.Collator(key, { sensitivity: \"accent\", numeric: true });\r\n  } catch {\r\n    // Invalid BCP-47 tag — fall back to fr-FR (matches the rest of v2's\r\n    // graceful-locale-fallback contract from Batch 2).\r\n    collator = new Intl.Collator(\"fr-FR\", { sensitivity: \"accent\", numeric: true });\r\n  }\r\n  COLLATOR_CACHE.set(key, collator);\r\n  return collator;\r\n}\r\n\r\n/**\r\n * Compare two cell values with locale-aware semantics. Routes through\r\n * the Collator only for strings or mixed types; numeric / Date pairs\r\n * use native operators (faster + exact).\r\n *\r\n * Null / undefined / empty-string sort FIRST (preserves the prior\r\n * applySort empty-string behaviour: \"\" < any non-empty string).\r\n */\r\nfunction compareValues(av: unknown, bv: unknown, collator: Intl.Collator): number {\r\n  const aN = av == null || av === \"\";\r\n  const bN = bv == null || bv === \"\";\r\n  if (aN && bN) return 0;\r\n  if (aN) return -1;\r\n  if (bN) return 1;\r\n\r\n  if (typeof av === \"number\" && typeof bv === \"number\") {\r\n    return av - bv;\r\n  }\r\n  if (av instanceof Date && bv instanceof Date) {\r\n    return av.getTime() - bv.getTime();\r\n  }\r\n  // String pair — or mixed types coerced to strings. The Collator handles\r\n  // both cases identically and respects `numeric: true` so digit runs\r\n  // inside a label compare numerically.\r\n  return collator.compare(String(av), String(bv));\r\n}\r\n\r\n/**\r\n * Pure helper — applies a multi-sort state to an array of rows.\r\n * Returns a NEW sorted array (input is not mutated); the original array\r\n * reference is returned untouched when there is nothing to sort.\r\n */\r\nexport function applySort<T extends object>(\r\n  rows: T[],\r\n  sort: readonly SortDescriptor[] | null | undefined,\r\n  options: ApplySortOptions = {},\r\n): T[] {\r\n  if (!sort?.length) return rows;\r\n  const collator = getCollator(options.locale);\r\n  return [...rows].sort((a, b) => {\r\n    for (const { key, dir } of sort) {\r\n      const cmp = compareValues(\r\n        (a as Record<string, unknown>)[key],\r\n        (b as Record<string, unknown>)[key],\r\n        collator,\r\n      );\r\n      if (cmp !== 0) return dir === \"asc\" ? cmp : -cmp;\r\n    }\r\n    return 0;\r\n  });\r\n}\r\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/v2/patterns/_useColumnReorder.js

@@ -0,0 +1,257 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as React from "react";
+
+/**
+ * useColumnReorder — Portnet UI v2 (private)
+ *
+ * Internal hook for the DataGrid + DataGridVirtualized reorder
+ * feature. NOT exported from the patterns barrel.
+ *
+ *   const { cellHandlers, cellSx, isReordering, moveEarlier, moveLater, handleKeyDown } =
+ *     useColumnReorder(
+ *       columns,                 // for fallback order resolution
+ *       columnOrder,             // host-controlled Array<key> | undefined
+ *       onColumnOrderChange,     // host-controlled setter
+ *       { resizeIsActive }       // cross-hook signal from useColumnResize
+ *     );
+ *
+ * Drop semantics (pointer):
+ *   The dragged column is INSERTED AT the target column's position.
+ *   The remaining columns shift to accommodate. This is the standard
+ *   Linear / Asana / GitHub Projects UX — the user thinks "move
+ *   column X to where Y is", not "swap X and Y".
+ *
+ * Keyboard (DG-R1 / WCAG 2.1.1):
+ *   moveEarlier(key) / moveLater(key) swap the column with its neighbour
+ *   toward the start / end of the order (edge-safe, no-op at the ends).
+ *   handleKeyDown(key) is meant for a focusable reorder control in the
+ *   header: ArrowLeft/ArrowRight move the column (RTL-aware, so the motion
+ *   matches the physical arrow), Home/End send it to the first/last slot.
+ *   Every move commits immediately via onColumnOrderChange (no grab/drop
+ *   mode). Direction-neutral names (earlier/later = toward index 0 / end)
+ *   keep the API unambiguous under RTL; the physical-arrow mapping lives in
+ *   handleKeyDown.
+ *
+ * Visual feedback during drag:
+ *   - Dragged column header: opacity 0.5
+ *   - Drop target column header: 2px inset accent outline
+ *   These are returned via cellSx; the host applies them as sx
+ *   fragments on each `<th>`.
+ *
+ * onDragOver MUST e.preventDefault() to allow drop. This is the
+ * single most-forgotten step of HTML5 native drag — without it,
+ * onDrop never fires.
+ */
+
+export default function useColumnReorder(columns, columnOrder, onColumnOrderChange) {
+  var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var resizeIsActive = options.resizeIsActive;
+
+  // Effective order = host order, or fallback to the natural columns
+  // sequence. Memoised on the input shapes; no allocation when both
+  // refs are stable.
+  var effectiveOrder = React.useMemo(function () {
+    return columnOrder || columns.map(function (c) {
+      return c.key;
+    });
+  }, [columnOrder, columns]);
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    dragKey = _React$useState2[0],
+    setDragKey = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    overKey = _React$useState4[0],
+    setOverKey = _React$useState4[1];
+
+  // Refs mirror state for use inside fresh-closure handlers
+  // (the onDragEnd inside cellHandlers needs the latest dragKey
+  // even if React hasn't yet re-rendered).
+  var dragKeyRef = React.useRef(null);
+  var reset = React.useCallback(function () {
+    dragKeyRef.current = null;
+    setDragKey(null);
+    setOverKey(null);
+  }, []);
+  var onDragStart = React.useCallback(function (key) {
+    return function (e) {
+      // Cross-hook: if resize is active, abort the drag. Resize fires
+      // first via mousedown; this handler runs later via dragstart.
+      if (resizeIsActive) {
+        e.preventDefault();
+        return;
+      }
+      dragKeyRef.current = key;
+      setDragKey(key);
+      // Mark the data transfer with the source key. Some browsers
+      // require a non-empty payload to allow drop (Firefox).
+      try {
+        e.dataTransfer.effectAllowed = "move";
+        e.dataTransfer.setData("text/plain", key);
+      } catch (_unused) {
+        // Older Safari throws on certain MIME types; ignored.
+      }
+    };
+  }, [resizeIsActive]);
+  var onDragOver = React.useCallback(function (key) {
+    return function (e) {
+      // CRITICAL — without preventDefault, the browser refuses the
+      // drop and onDrop never fires.
+      e.preventDefault();
+      try {
+        e.dataTransfer.dropEffect = "move";
+      } catch (_unused2) {
+        // Some browsers throw outside a trusted dragstart→drop chain.
+      }
+      if (overKey !== key) setOverKey(key);
+    };
+  }, [overKey]);
+  var onDragLeave = React.useCallback(function (key) {
+    return function () {
+      // Only clear when leaving the same key we'd entered. Without
+      // this guard, fast moves between cells flicker the highlight.
+      if (overKey === key) setOverKey(null);
+    };
+  }, [overKey]);
+  var onDrop = React.useCallback(function (targetKey) {
+    return function (e) {
+      e.preventDefault();
+      var sourceKey = e.dataTransfer && e.dataTransfer.getData("text/plain") || dragKeyRef.current;
+      if (!sourceKey || sourceKey === targetKey) {
+        reset();
+        return;
+      }
+      var sourceIdx = effectiveOrder.indexOf(sourceKey);
+      var targetIdx = effectiveOrder.indexOf(targetKey);
+      if (sourceIdx < 0 || targetIdx < 0) {
+        reset();
+        return;
+      }
+      var newOrder = _toConsumableArray(effectiveOrder);
+      newOrder.splice(sourceIdx, 1);
+      // After splice the target index may shift by 1 if source was
+      // before target. Recompute against the post-splice array.
+      var insertIdx = newOrder.indexOf(targetKey);
+      newOrder.splice(insertIdx, 0, sourceKey);
+      if (onColumnOrderChange) onColumnOrderChange(newOrder);
+      reset();
+    };
+  }, [effectiveOrder, onColumnOrderChange, reset]);
+  var onDragEnd = React.useCallback(function () {
+    // Fires whether the drop succeeded or the user cancelled (Esc /
+    // drop on a non-target). Belt-and-suspenders cleanup.
+    reset();
+  }, [reset]);
+  var cellHandlers = React.useCallback(function (key) {
+    return {
+      draggable: true,
+      onDragStart: onDragStart(key),
+      onDragOver: onDragOver(key),
+      onDragLeave: onDragLeave(key),
+      onDrop: onDrop(key),
+      onDragEnd: onDragEnd
+    };
+  }, [onDragStart, onDragOver, onDragLeave, onDrop, onDragEnd]);
+  var cellSx = React.useCallback(function (key) {
+    var isDragSource = dragKey === key;
+    var isDropTarget = overKey === key && dragKey !== key;
+    if (!isDragSource && !isDropTarget) return undefined;
+    return _objectSpread(_objectSpread({}, isDragSource && {
+      opacity: 0.5
+    }), isDropTarget && {
+      // Inset accent outline = "drop here" visual. boxShadow not
+      // outline so it doesn't extend beyond the cell border.
+      boxShadow: "inset 0 0 0 2px var(--accent)"
+    });
+  }, [dragKey, overKey]);
+
+  // ── Keyboard reorder (DG-R1) ───────────────────────────────────
+  // Commit a reordered copy of effectiveOrder. All keyboard moves route
+  // through here; edge/no-op cases are filtered by the callers.
+  var commitOrder = React.useCallback(function (newOrder) {
+    if (onColumnOrderChange) onColumnOrderChange(newOrder);
+  }, [onColumnOrderChange]);
+
+  // Adjacent swap toward the start (dir=-1) / end (dir=+1) of the order.
+  var swap = React.useCallback(function (key, dir) {
+    var idx = effectiveOrder.indexOf(key);
+    if (idx < 0) return;
+    var target = idx + dir;
+    if (target < 0 || target >= effectiveOrder.length) return; // at edge
+    var newOrder = _toConsumableArray(effectiveOrder);
+    var a = newOrder[idx];
+    var b = newOrder[target];
+    newOrder[idx] = b;
+    newOrder[target] = a;
+    commitOrder(newOrder);
+  }, [effectiveOrder, commitOrder]);
+  var moveEarlier = React.useCallback(function (key) {
+    return swap(key, -1);
+  }, [swap]);
+  var moveLater = React.useCallback(function (key) {
+    return swap(key, 1);
+  }, [swap]);
+
+  // Send the column to the first / last slot (Home / End).
+  var moveToEdge = React.useCallback(function (key, edge) {
+    var idx = effectiveOrder.indexOf(key);
+    if (idx < 0) return;
+    if (edge === "start" && idx === 0) return;
+    if (edge === "end" && idx === effectiveOrder.length - 1) return;
+    var newOrder = _toConsumableArray(effectiveOrder);
+    var moved = newOrder.splice(idx, 1)[0];
+    if (edge === "start") newOrder.unshift(moved);else newOrder.push(moved);
+    commitOrder(newOrder);
+  }, [effectiveOrder, commitOrder]);
+  var handleKeyDown = React.useCallback(function (key) {
+    return function (e) {
+      if (resizeIsActive) return;
+      var isLeft = e.key === "ArrowLeft";
+      var isRight = e.key === "ArrowRight";
+      var isHome = e.key === "Home";
+      var isEnd = e.key === "End";
+      if (!isLeft && !isRight && !isHome && !isEnd) return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (isHome) {
+        moveToEdge(key, "start");
+        return;
+      }
+      if (isEnd) {
+        moveToEdge(key, "end");
+        return;
+      }
+
+      // RTL-aware physical-arrow mapping: in RTL the visual order is
+      // reversed, so ArrowLeft advances toward the end of the order.
+      var cell = e.currentTarget.closest("th");
+      var isRtl = !!cell && typeof window !== "undefined" && typeof window.getComputedStyle === "function" && window.getComputedStyle(cell).direction === "rtl";
+      var goLater = isRtl ? isLeft : isRight;
+      if (goLater) moveLater(key);else moveEarlier(key);
+    };
+  }, [resizeIsActive, moveToEdge, moveEarlier, moveLater]);
+  return {
+    cellHandlers: cellHandlers,
+    cellSx: cellSx,
+    isReordering: dragKey != null,
+    moveEarlier: moveEarlier,
+    moveLater: moveLater,
+    handleKeyDown: handleKeyDown
+  };
+}
+//# sourceMappingURL=_useColumnReorder.js.map

package/dist/esm/v2/patterns/_useColumnReorder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_useColumnReorder.js","names":["React","useColumnReorder","columns","columnOrder","onColumnOrderChange","options","arguments","length","undefined","resizeIsActive","effectiveOrder","useMemo","map","c","key","_React$useState","useState","_React$useState2","_slicedToArray","dragKey","setDragKey","_React$useState3","_React$useState4","overKey","setOverKey","dragKeyRef","useRef","reset","useCallback","current","onDragStart","e","preventDefault","dataTransfer","effectAllowed","setData","_unused","onDragOver","dropEffect","_unused2","onDragLeave","onDrop","targetKey","sourceKey","getData","sourceIdx","indexOf","targetIdx","newOrder","_toConsumableArray","splice","insertIdx","onDragEnd","cellHandlers","draggable","cellSx","isDragSource","isDropTarget","_objectSpread","opacity","boxShadow","commitOrder","swap","dir","idx","target","a","b","moveEarlier","moveLater","moveToEdge","edge","moved","unshift","push","handleKeyDown","isLeft","isRight","isHome","isEnd","stopPropagation","cell","currentTarget","closest","isRtl","window","getComputedStyle","direction","goLater","isReordering"],"sources":["../../../../src/lib/v2/patterns/_useColumnReorder.ts"],"sourcesContent":["import * as React from \"react\";\r\nimport type { SxProps, Theme } from \"@mui/material/styles\";\r\n\r\n/**\r\n * useColumnReorder — Portnet UI v2 (private)\r\n *\r\n * Internal hook for the DataGrid + DataGridVirtualized reorder\r\n * feature. NOT exported from the patterns barrel.\r\n *\r\n *   const { cellHandlers, cellSx, isReordering, moveEarlier, moveLater, handleKeyDown } =\r\n *     useColumnReorder(\r\n *       columns,                 // for fallback order resolution\r\n *       columnOrder,             // host-controlled Array<key> | undefined\r\n *       onColumnOrderChange,     // host-controlled setter\r\n *       { resizeIsActive }       // cross-hook signal from useColumnResize\r\n *     );\r\n *\r\n * Drop semantics (pointer):\r\n *   The dragged column is INSERTED AT the target column's position.\r\n *   The remaining columns shift to accommodate. This is the standard\r\n *   Linear / Asana / GitHub Projects UX — the user thinks \"move\r\n *   column X to where Y is\", not \"swap X and Y\".\r\n *\r\n * Keyboard (DG-R1 / WCAG 2.1.1):\r\n *   moveEarlier(key) / moveLater(key) swap the column with its neighbour\r\n *   toward the start / end of the order (edge-safe, no-op at the ends).\r\n *   handleKeyDown(key) is meant for a focusable reorder control in the\r\n *   header: ArrowLeft/ArrowRight move the column (RTL-aware, so the motion\r\n *   matches the physical arrow), Home/End send it to the first/last slot.\r\n *   Every move commits immediately via onColumnOrderChange (no grab/drop\r\n *   mode). Direction-neutral names (earlier/later = toward index 0 / end)\r\n *   keep the API unambiguous under RTL; the physical-arrow mapping lives in\r\n *   handleKeyDown.\r\n *\r\n * Visual feedback during drag:\r\n *   - Dragged column header: opacity 0.5\r\n *   - Drop target column header: 2px inset accent outline\r\n *   These are returned via cellSx; the host applies them as sx\r\n *   fragments on each `<th>`.\r\n *\r\n * onDragOver MUST e.preventDefault() to allow drop. This is the\r\n * single most-forgotten step of HTML5 native drag — without it,\r\n * onDrop never fires.\r\n */\r\n\r\nexport interface UseColumnReorderOptions {\r\n  resizeIsActive?: boolean | undefined;\r\n}\r\n\r\nexport interface ColumnReorderCellHandlers {\r\n  draggable: boolean;\r\n  onDragStart: (e: React.DragEvent) => void;\r\n  onDragOver: (e: React.DragEvent) => void;\r\n  onDragLeave: () => void;\r\n  onDrop: (e: React.DragEvent) => void;\r\n  onDragEnd: () => void;\r\n}\r\n\r\nexport interface UseColumnReorderResult {\r\n  cellHandlers: (key: string) => ColumnReorderCellHandlers;\r\n  cellSx: (key: string) => SxProps<Theme> | undefined;\r\n  isReordering: boolean;\r\n  /** Move the column one slot toward the start of the order (edge-safe). */\r\n  moveEarlier: (key: string) => void;\r\n  /** Move the column one slot toward the end of the order (edge-safe). */\r\n  moveLater: (key: string) => void;\r\n  /** onKeyDown for a focusable reorder control: Arrow (RTL-aware) / Home / End. */\r\n  handleKeyDown: (key: string) => (e: React.KeyboardEvent) => void;\r\n}\r\n\r\nexport default function useColumnReorder(\r\n  columns: ReadonlyArray<{ key: string }>,\r\n  columnOrder: string[] | undefined,\r\n  onColumnOrderChange: ((order: string[]) => void) | undefined,\r\n  options: UseColumnReorderOptions = {}\r\n): UseColumnReorderResult {\r\n  const { resizeIsActive } = options;\r\n\r\n  // Effective order = host order, or fallback to the natural columns\r\n  // sequence. Memoised on the input shapes; no allocation when both\r\n  // refs are stable.\r\n  const effectiveOrder = React.useMemo(\r\n    () => columnOrder || columns.map((c) => c.key),\r\n    [columnOrder, columns]\r\n  );\r\n\r\n  const [dragKey, setDragKey] = React.useState<string | null>(null);\r\n  const [overKey, setOverKey] = React.useState<string | null>(null);\r\n\r\n  // Refs mirror state for use inside fresh-closure handlers\r\n  // (the onDragEnd inside cellHandlers needs the latest dragKey\r\n  // even if React hasn't yet re-rendered).\r\n  const dragKeyRef = React.useRef<string | null>(null);\r\n\r\n  const reset = React.useCallback(() => {\r\n    dragKeyRef.current = null;\r\n    setDragKey(null);\r\n    setOverKey(null);\r\n  }, []);\r\n\r\n  const onDragStart = React.useCallback(\r\n    (key: string) => (e: React.DragEvent) => {\r\n      // Cross-hook: if resize is active, abort the drag. Resize fires\r\n      // first via mousedown; this handler runs later via dragstart.\r\n      if (resizeIsActive) {\r\n        e.preventDefault();\r\n        return;\r\n      }\r\n      dragKeyRef.current = key;\r\n      setDragKey(key);\r\n      // Mark the data transfer with the source key. Some browsers\r\n      // require a non-empty payload to allow drop (Firefox).\r\n      try {\r\n        e.dataTransfer.effectAllowed = \"move\";\r\n        e.dataTransfer.setData(\"text/plain\", key);\r\n      } catch {\r\n        // Older Safari throws on certain MIME types; ignored.\r\n      }\r\n    },\r\n    [resizeIsActive]\r\n  );\r\n\r\n  const onDragOver = React.useCallback(\r\n    (key: string) => (e: React.DragEvent) => {\r\n      // CRITICAL — without preventDefault, the browser refuses the\r\n      // drop and onDrop never fires.\r\n      e.preventDefault();\r\n      try {\r\n        e.dataTransfer.dropEffect = \"move\";\r\n      } catch {\r\n        // Some browsers throw outside a trusted dragstart→drop chain.\r\n      }\r\n      if (overKey !== key) setOverKey(key);\r\n    },\r\n    [overKey]\r\n  );\r\n\r\n  const onDragLeave = React.useCallback(\r\n    (key: string) => () => {\r\n      // Only clear when leaving the same key we'd entered. Without\r\n      // this guard, fast moves between cells flicker the highlight.\r\n      if (overKey === key) setOverKey(null);\r\n    },\r\n    [overKey]\r\n  );\r\n\r\n  const onDrop = React.useCallback(\r\n    (targetKey: string) => (e: React.DragEvent) => {\r\n      e.preventDefault();\r\n      const sourceKey =\r\n        (e.dataTransfer && e.dataTransfer.getData(\"text/plain\")) ||\r\n        dragKeyRef.current;\r\n\r\n      if (!sourceKey || sourceKey === targetKey) {\r\n        reset();\r\n        return;\r\n      }\r\n\r\n      const sourceIdx = effectiveOrder.indexOf(sourceKey);\r\n      const targetIdx = effectiveOrder.indexOf(targetKey);\r\n      if (sourceIdx < 0 || targetIdx < 0) {\r\n        reset();\r\n        return;\r\n      }\r\n\r\n      const newOrder = [...effectiveOrder];\r\n      newOrder.splice(sourceIdx, 1);\r\n      // After splice the target index may shift by 1 if source was\r\n      // before target. Recompute against the post-splice array.\r\n      const insertIdx = newOrder.indexOf(targetKey);\r\n      newOrder.splice(insertIdx, 0, sourceKey);\r\n\r\n      if (onColumnOrderChange) onColumnOrderChange(newOrder);\r\n      reset();\r\n    },\r\n    [effectiveOrder, onColumnOrderChange, reset]\r\n  );\r\n\r\n  const onDragEnd = React.useCallback(() => {\r\n    // Fires whether the drop succeeded or the user cancelled (Esc /\r\n    // drop on a non-target). Belt-and-suspenders cleanup.\r\n    reset();\r\n  }, [reset]);\r\n\r\n  const cellHandlers = React.useCallback(\r\n    (key: string): ColumnReorderCellHandlers => ({\r\n      draggable: true,\r\n      onDragStart: onDragStart(key),\r\n      onDragOver:  onDragOver(key),\r\n      onDragLeave: onDragLeave(key),\r\n      onDrop:      onDrop(key),\r\n      onDragEnd,\r\n    }),\r\n    [onDragStart, onDragOver, onDragLeave, onDrop, onDragEnd]\r\n  );\r\n\r\n  const cellSx = React.useCallback(\r\n    (key: string): SxProps<Theme> | undefined => {\r\n      const isDragSource = dragKey === key;\r\n      const isDropTarget = overKey === key && dragKey !== key;\r\n      if (!isDragSource && !isDropTarget) return undefined;\r\n      return {\r\n        ...(isDragSource && { opacity: 0.5 }),\r\n        ...(isDropTarget && {\r\n          // Inset accent outline = \"drop here\" visual. boxShadow not\r\n          // outline so it doesn't extend beyond the cell border.\r\n          boxShadow: \"inset 0 0 0 2px var(--accent)\",\r\n        }),\r\n      };\r\n    },\r\n    [dragKey, overKey]\r\n  );\r\n\r\n  // ── Keyboard reorder (DG-R1) ───────────────────────────────────\r\n  // Commit a reordered copy of effectiveOrder. All keyboard moves route\r\n  // through here; edge/no-op cases are filtered by the callers.\r\n  const commitOrder = React.useCallback(\r\n    (newOrder: string[]) => {\r\n      if (onColumnOrderChange) onColumnOrderChange(newOrder);\r\n    },\r\n    [onColumnOrderChange]\r\n  );\r\n\r\n  // Adjacent swap toward the start (dir=-1) / end (dir=+1) of the order.\r\n  const swap = React.useCallback(\r\n    (key: string, dir: -1 | 1) => {\r\n      const idx = effectiveOrder.indexOf(key);\r\n      if (idx < 0) return;\r\n      const target = idx + dir;\r\n      if (target < 0 || target >= effectiveOrder.length) return; // at edge\r\n      const newOrder = [...effectiveOrder];\r\n      const a = newOrder[idx] as string;\r\n      const b = newOrder[target] as string;\r\n      newOrder[idx] = b;\r\n      newOrder[target] = a;\r\n      commitOrder(newOrder);\r\n    },\r\n    [effectiveOrder, commitOrder]\r\n  );\r\n\r\n  const moveEarlier = React.useCallback((key: string) => swap(key, -1), [swap]);\r\n  const moveLater = React.useCallback((key: string) => swap(key, 1), [swap]);\r\n\r\n  // Send the column to the first / last slot (Home / End).\r\n  const moveToEdge = React.useCallback(\r\n    (key: string, edge: \"start\" | \"end\") => {\r\n      const idx = effectiveOrder.indexOf(key);\r\n      if (idx < 0) return;\r\n      if (edge === \"start\" && idx === 0) return;\r\n      if (edge === \"end\" && idx === effectiveOrder.length - 1) return;\r\n      const newOrder = [...effectiveOrder];\r\n      const moved = newOrder.splice(idx, 1)[0] as string;\r\n      if (edge === \"start\") newOrder.unshift(moved);\r\n      else newOrder.push(moved);\r\n      commitOrder(newOrder);\r\n    },\r\n    [effectiveOrder, commitOrder]\r\n  );\r\n\r\n  const handleKeyDown = React.useCallback(\r\n    (key: string) => (e: React.KeyboardEvent) => {\r\n      if (resizeIsActive) return;\r\n      const isLeft = e.key === \"ArrowLeft\";\r\n      const isRight = e.key === \"ArrowRight\";\r\n      const isHome = e.key === \"Home\";\r\n      const isEnd = e.key === \"End\";\r\n      if (!isLeft && !isRight && !isHome && !isEnd) return;\r\n\r\n      e.preventDefault();\r\n      e.stopPropagation();\r\n\r\n      if (isHome) {\r\n        moveToEdge(key, \"start\");\r\n        return;\r\n      }\r\n      if (isEnd) {\r\n        moveToEdge(key, \"end\");\r\n        return;\r\n      }\r\n\r\n      // RTL-aware physical-arrow mapping: in RTL the visual order is\r\n      // reversed, so ArrowLeft advances toward the end of the order.\r\n      const cell = (e.currentTarget as HTMLElement).closest(\"th\");\r\n      const isRtl =\r\n        !!cell &&\r\n        typeof window !== \"undefined\" &&\r\n        typeof window.getComputedStyle === \"function\" &&\r\n        window.getComputedStyle(cell).direction === \"rtl\";\r\n\r\n      const goLater = isRtl ? isLeft : isRight;\r\n      if (goLater) moveLater(key);\r\n      else moveEarlier(key);\r\n    },\r\n    [resizeIsActive, moveToEdge, moveEarlier, moveLater]\r\n  );\r\n\r\n  return {\r\n    cellHandlers,\r\n    cellSx,\r\n    isReordering: dragKey != null,\r\n    moveEarlier,\r\n    moveLater,\r\n    handleKeyDown,\r\n  };\r\n}\r\n"],"mappings":";;;;;;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;;AAG9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AA2BA,eAAe,SAASC,gBAAgBA,CACtCC,OAAuC,EACvCC,WAAiC,EACjCC,mBAA4D,EAEpC;EAAA,IADxBC,OAAgC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EAErC,IAAQG,cAAc,GAAKJ,OAAO,CAA1BI,cAAc;;EAEtB;EACA;EACA;EACA,IAAMC,cAAc,GAAGV,KAAK,CAACW,OAAO,CAClC;IAAA,OAAMR,WAAW,IAAID,OAAO,CAACU,GAAG,CAAC,UAACC,CAAC;MAAA,OAAKA,CAAC,CAACC,GAAG;IAAA,EAAC;EAAA,GAC9C,CAACX,WAAW,EAAED,OAAO,CACvB,CAAC;EAED,IAAAa,eAAA,GAA8Bf,KAAK,CAACgB,QAAQ,CAAgB,IAAI,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAA1DI,OAAO,GAAAF,gBAAA;IAAEG,UAAU,GAAAH,gBAAA;EAC1B,IAAAI,gBAAA,GAA8BrB,KAAK,CAACgB,QAAQ,CAAgB,IAAI,CAAC;IAAAM,gBAAA,GAAAJ,cAAA,CAAAG,gBAAA;IAA1DE,OAAO,GAAAD,gBAAA;IAAEE,UAAU,GAAAF,gBAAA;;EAE1B;EACA;EACA;EACA,IAAMG,UAAU,GAAGzB,KAAK,CAAC0B,MAAM,CAAgB,IAAI,CAAC;EAEpD,IAAMC,KAAK,GAAG3B,KAAK,CAAC4B,WAAW,CAAC,YAAM;IACpCH,UAAU,CAACI,OAAO,GAAG,IAAI;IACzBT,UAAU,CAAC,IAAI,CAAC;IAChBI,UAAU,CAAC,IAAI,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAMM,WAAW,GAAG9B,KAAK,CAAC4B,WAAW,CACnC,UAACd,GAAW;IAAA,OAAK,UAACiB,CAAkB,EAAK;MACvC;MACA;MACA,IAAItB,cAAc,EAAE;QAClBsB,CAAC,CAACC,cAAc,CAAC,CAAC;QAClB;MACF;MACAP,UAAU,CAACI,OAAO,GAAGf,GAAG;MACxBM,UAAU,CAACN,GAAG,CAAC;MACf;MACA;MACA,IAAI;QACFiB,CAAC,CAACE,YAAY,CAACC,aAAa,GAAG,MAAM;QACrCH,CAAC,CAACE,YAAY,CAACE,OAAO,CAAC,YAAY,EAAErB,GAAG,CAAC;MAC3C,CAAC,CAAC,OAAAsB,OAAA,EAAM;QACN;MAAA;IAEJ,CAAC;EAAA,GACD,CAAC3B,cAAc,CACjB,CAAC;EAED,IAAM4B,UAAU,GAAGrC,KAAK,CAAC4B,WAAW,CAClC,UAACd,GAAW;IAAA,OAAK,UAACiB,CAAkB,EAAK;MACvC;MACA;MACAA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClB,IAAI;QACFD,CAAC,CAACE,YAAY,CAACK,UAAU,GAAG,MAAM;MACpC,CAAC,CAAC,OAAAC,QAAA,EAAM;QACN;MAAA;MAEF,IAAIhB,OAAO,KAAKT,GAAG,EAAEU,UAAU,CAACV,GAAG,CAAC;IACtC,CAAC;EAAA,GACD,CAACS,OAAO,CACV,CAAC;EAED,IAAMiB,WAAW,GAAGxC,KAAK,CAAC4B,WAAW,CACnC,UAACd,GAAW;IAAA,OAAK,YAAM;MACrB;MACA;MACA,IAAIS,OAAO,KAAKT,GAAG,EAAEU,UAAU,CAAC,IAAI,CAAC;IACvC,CAAC;EAAA,GACD,CAACD,OAAO,CACV,CAAC;EAED,IAAMkB,MAAM,GAAGzC,KAAK,CAAC4B,WAAW,CAC9B,UAACc,SAAiB;IAAA,OAAK,UAACX,CAAkB,EAAK;MAC7CA,CAAC,CAACC,cAAc,CAAC,CAAC;MAClB,IAAMW,SAAS,GACZZ,CAAC,CAACE,YAAY,IAAIF,CAAC,CAACE,YAAY,CAACW,OAAO,CAAC,YAAY,CAAC,IACvDnB,UAAU,CAACI,OAAO;MAEpB,IAAI,CAACc,SAAS,IAAIA,SAAS,KAAKD,SAAS,EAAE;QACzCf,KAAK,CAAC,CAAC;QACP;MACF;MAEA,IAAMkB,SAAS,GAAGnC,cAAc,CAACoC,OAAO,CAACH,SAAS,CAAC;MACnD,IAAMI,SAAS,GAAGrC,cAAc,CAACoC,OAAO,CAACJ,SAAS,CAAC;MACnD,IAAIG,SAAS,GAAG,CAAC,IAAIE,SAAS,GAAG,CAAC,EAAE;QAClCpB,KAAK,CAAC,CAAC;QACP;MACF;MAEA,IAAMqB,QAAQ,GAAAC,kBAAA,CAAOvC,cAAc,CAAC;MACpCsC,QAAQ,CAACE,MAAM,CAACL,SAAS,EAAE,CAAC,CAAC;MAC7B;MACA;MACA,IAAMM,SAAS,GAAGH,QAAQ,CAACF,OAAO,CAACJ,SAAS,CAAC;MAC7CM,QAAQ,CAACE,MAAM,CAACC,SAAS,EAAE,CAAC,EAAER,SAAS,CAAC;MAExC,IAAIvC,mBAAmB,EAAEA,mBAAmB,CAAC4C,QAAQ,CAAC;MACtDrB,KAAK,CAAC,CAAC;IACT,CAAC;EAAA,GACD,CAACjB,cAAc,EAAEN,mBAAmB,EAAEuB,KAAK,CAC7C,CAAC;EAED,IAAMyB,SAAS,GAAGpD,KAAK,CAAC4B,WAAW,CAAC,YAAM;IACxC;IACA;IACAD,KAAK,CAAC,CAAC;EACT,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,IAAM0B,YAAY,GAAGrD,KAAK,CAAC4B,WAAW,CACpC,UAACd,GAAW;IAAA,OAAiC;MAC3CwC,SAAS,EAAE,IAAI;MACfxB,WAAW,EAAEA,WAAW,CAAChB,GAAG,CAAC;MAC7BuB,UAAU,EAAGA,UAAU,CAACvB,GAAG,CAAC;MAC5B0B,WAAW,EAAEA,WAAW,CAAC1B,GAAG,CAAC;MAC7B2B,MAAM,EAAOA,MAAM,CAAC3B,GAAG,CAAC;MACxBsC,SAAS,EAATA;IACF,CAAC;EAAA,CAAC,EACF,CAACtB,WAAW,EAAEO,UAAU,EAAEG,WAAW,EAAEC,MAAM,EAAEW,SAAS,CAC1D,CAAC;EAED,IAAMG,MAAM,GAAGvD,KAAK,CAAC4B,WAAW,CAC9B,UAACd,GAAW,EAAiC;IAC3C,IAAM0C,YAAY,GAAGrC,OAAO,KAAKL,GAAG;IACpC,IAAM2C,YAAY,GAAGlC,OAAO,KAAKT,GAAG,IAAIK,OAAO,KAAKL,GAAG;IACvD,IAAI,CAAC0C,YAAY,IAAI,CAACC,YAAY,EAAE,OAAOjD,SAAS;IACpD,OAAAkD,aAAA,CAAAA,aAAA,KACMF,YAAY,IAAI;MAAEG,OAAO,EAAE;IAAI,CAAC,GAChCF,YAAY,IAAI;MAClB;MACA;MACAG,SAAS,EAAE;IACb,CAAC;EAEL,CAAC,EACD,CAACzC,OAAO,EAAEI,OAAO,CACnB,CAAC;;EAED;EACA;EACA;EACA,IAAMsC,WAAW,GAAG7D,KAAK,CAAC4B,WAAW,CACnC,UAACoB,QAAkB,EAAK;IACtB,IAAI5C,mBAAmB,EAAEA,mBAAmB,CAAC4C,QAAQ,CAAC;EACxD,CAAC,EACD,CAAC5C,mBAAmB,CACtB,CAAC;;EAED;EACA,IAAM0D,IAAI,GAAG9D,KAAK,CAAC4B,WAAW,CAC5B,UAACd,GAAW,EAAEiD,GAAW,EAAK;IAC5B,IAAMC,GAAG,GAAGtD,cAAc,CAACoC,OAAO,CAAChC,GAAG,CAAC;IACvC,IAAIkD,GAAG,GAAG,CAAC,EAAE;IACb,IAAMC,MAAM,GAAGD,GAAG,GAAGD,GAAG;IACxB,IAAIE,MAAM,GAAG,CAAC,IAAIA,MAAM,IAAIvD,cAAc,CAACH,MAAM,EAAE,OAAO,CAAC;IAC3D,IAAMyC,QAAQ,GAAAC,kBAAA,CAAOvC,cAAc,CAAC;IACpC,IAAMwD,CAAC,GAAGlB,QAAQ,CAACgB,GAAG,CAAW;IACjC,IAAMG,CAAC,GAAGnB,QAAQ,CAACiB,MAAM,CAAW;IACpCjB,QAAQ,CAACgB,GAAG,CAAC,GAAGG,CAAC;IACjBnB,QAAQ,CAACiB,MAAM,CAAC,GAAGC,CAAC;IACpBL,WAAW,CAACb,QAAQ,CAAC;EACvB,CAAC,EACD,CAACtC,cAAc,EAAEmD,WAAW,CAC9B,CAAC;EAED,IAAMO,WAAW,GAAGpE,KAAK,CAAC4B,WAAW,CAAC,UAACd,GAAW;IAAA,OAAKgD,IAAI,CAAChD,GAAG,EAAE,CAAC,CAAC,CAAC;EAAA,GAAE,CAACgD,IAAI,CAAC,CAAC;EAC7E,IAAMO,SAAS,GAAGrE,KAAK,CAAC4B,WAAW,CAAC,UAACd,GAAW;IAAA,OAAKgD,IAAI,CAAChD,GAAG,EAAE,CAAC,CAAC;EAAA,GAAE,CAACgD,IAAI,CAAC,CAAC;;EAE1E;EACA,IAAMQ,UAAU,GAAGtE,KAAK,CAAC4B,WAAW,CAClC,UAACd,GAAW,EAAEyD,IAAqB,EAAK;IACtC,IAAMP,GAAG,GAAGtD,cAAc,CAACoC,OAAO,CAAChC,GAAG,CAAC;IACvC,IAAIkD,GAAG,GAAG,CAAC,EAAE;IACb,IAAIO,IAAI,KAAK,OAAO,IAAIP,GAAG,KAAK,CAAC,EAAE;IACnC,IAAIO,IAAI,KAAK,KAAK,IAAIP,GAAG,KAAKtD,cAAc,CAACH,MAAM,GAAG,CAAC,EAAE;IACzD,IAAMyC,QAAQ,GAAAC,kBAAA,CAAOvC,cAAc,CAAC;IACpC,IAAM8D,KAAK,GAAGxB,QAAQ,CAACE,MAAM,CAACc,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,CAAW;IAClD,IAAIO,IAAI,KAAK,OAAO,EAAEvB,QAAQ,CAACyB,OAAO,CAACD,KAAK,CAAC,CAAC,KACzCxB,QAAQ,CAAC0B,IAAI,CAACF,KAAK,CAAC;IACzBX,WAAW,CAACb,QAAQ,CAAC;EACvB,CAAC,EACD,CAACtC,cAAc,EAAEmD,WAAW,CAC9B,CAAC;EAED,IAAMc,aAAa,GAAG3E,KAAK,CAAC4B,WAAW,CACrC,UAACd,GAAW;IAAA,OAAK,UAACiB,CAAsB,EAAK;MAC3C,IAAItB,cAAc,EAAE;MACpB,IAAMmE,MAAM,GAAG7C,CAAC,CAACjB,GAAG,KAAK,WAAW;MACpC,IAAM+D,OAAO,GAAG9C,CAAC,CAACjB,GAAG,KAAK,YAAY;MACtC,IAAMgE,MAAM,GAAG/C,CAAC,CAACjB,GAAG,KAAK,MAAM;MAC/B,IAAMiE,KAAK,GAAGhD,CAAC,CAACjB,GAAG,KAAK,KAAK;MAC7B,IAAI,CAAC8D,MAAM,IAAI,CAACC,OAAO,IAAI,CAACC,MAAM,IAAI,CAACC,KAAK,EAAE;MAE9ChD,CAAC,CAACC,cAAc,CAAC,CAAC;MAClBD,CAAC,CAACiD,eAAe,CAAC,CAAC;MAEnB,IAAIF,MAAM,EAAE;QACVR,UAAU,CAACxD,GAAG,EAAE,OAAO,CAAC;QACxB;MACF;MACA,IAAIiE,KAAK,EAAE;QACTT,UAAU,CAACxD,GAAG,EAAE,KAAK,CAAC;QACtB;MACF;;MAEA;MACA;MACA,IAAMmE,IAAI,GAAIlD,CAAC,CAACmD,aAAa,CAAiBC,OAAO,CAAC,IAAI,CAAC;MAC3D,IAAMC,KAAK,GACT,CAAC,CAACH,IAAI,IACN,OAAOI,MAAM,KAAK,WAAW,IAC7B,OAAOA,MAAM,CAACC,gBAAgB,KAAK,UAAU,IAC7CD,MAAM,CAACC,gBAAgB,CAACL,IAAI,CAAC,CAACM,SAAS,KAAK,KAAK;MAEnD,IAAMC,OAAO,GAAGJ,KAAK,GAAGR,MAAM,GAAGC,OAAO;MACxC,IAAIW,OAAO,EAAEnB,SAAS,CAACvD,GAAG,CAAC,CAAC,KACvBsD,WAAW,CAACtD,GAAG,CAAC;IACvB,CAAC;EAAA,GACD,CAACL,cAAc,EAAE6D,UAAU,EAAEF,WAAW,EAAEC,SAAS,CACrD,CAAC;EAED,OAAO;IACLhB,YAAY,EAAZA,YAAY;IACZE,MAAM,EAANA,MAAM;IACNkC,YAAY,EAAEtE,OAAO,IAAI,IAAI;IAC7BiD,WAAW,EAAXA,WAAW;IACXC,SAAS,EAATA,SAAS;IACTM,aAAa,EAAbA;EACF,CAAC;AACH","ignoreList":[]}

package/dist/esm/v2/patterns/_useColumnResize.js

@@ -0,0 +1,191 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0) { ; } } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import * as React from "react";
+
+/**
+ * useColumnResize — Portnet UI v2 (private)
+ *
+ * Internal hook for the DataGrid + DataGridVirtualized resize
+ * feature. NOT exported from the patterns barrel; underscore filename
+ * prefix is the convention.
+ *
+ *   const { handleMouseDown, handleKeyDown, liveWidths, isResizing, minWidth } =
+ *     useColumnResize(
+ *       columnWidths,            // controlled
+ *       onColumnWidthsChange,    // controlled
+ *       { minWidth: 50 }
+ *     );
+ *
+ * Behaviour (pointer):
+ *   - handleMouseDown(key) returns an onMouseDown handler. Attach to
+ *     the grip element on each `<th>` border.
+ *   - On mousedown: captures starting clientX + current width + the
+ *     direction of the cell's writing mode (LTR vs RTL). Sets
+ *     `isResizing = true` so callers (e.g. the reorder hook) can
+ *     short-circuit.
+ *   - On mousemove (window-bound): computes the resize delta
+ *     respecting RTL and updates a local "live" width via state.
+ *     Floors at `minWidth`.
+ *   - On mouseup (window-bound): commits the live width to the host
+ *     via `onColumnWidthsChange`. Clears all internal state.
+ *
+ * Behaviour (keyboard, DG-2 / WCAG 2.1.1):
+ *   - handleKeyDown(key) returns an onKeyDown handler for the SAME grip
+ *     (the grip is a focusable role="separator"). ArrowRight / ArrowLeft
+ *     nudge the width by KEYBOARD_STEP px, RTL-aware so the direction
+ *     matches a rightward drag; Home resets to `minWidth`. Each press
+ *     commits immediately via `onColumnWidthsChange` (no drag session).
+ *   - `minWidth` is returned so the separator can advertise aria-valuemin.
+ */
+
+/** Width delta (px) applied per Arrow key press in keyboard resize. */
+var KEYBOARD_STEP = 16;
+export default function useColumnResize(columnWidths, onColumnWidthsChange) {
+  var _options$minWidth;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var minWidth = (_options$minWidth = options.minWidth) !== null && _options$minWidth !== void 0 ? _options$minWidth : 50;
+
+  // React state for "draggingKey" + "liveWidth" drives the rendered
+  // width during drag. Refs carry the latest values across the
+  // mouseup closure (avoids the stale-closure bug).
+  var _React$useState = React.useState(null),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    draggingKey = _React$useState2[0],
+    setDraggingKey = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    liveWidth = _React$useState4[0],
+    setLiveWidth = _React$useState4[1];
+  var liveWidthRef = React.useRef(null);
+  var dragStateRef = React.useRef(null);
+
+  // Keep the latest columnWidths reference reachable from the
+  // mouseup closure without re-binding listeners on every prop
+  // change. Avoids tearing down + re-adding the window listeners
+  // on each parent re-render that ships a fresh widths object.
+  var columnWidthsRef = React.useRef(columnWidths);
+  React.useEffect(function () {
+    columnWidthsRef.current = columnWidths;
+  }, [columnWidths]);
+
+  // Shared RTL probe for a grip's owning <th>: -1 in RTL, 1 otherwise.
+  var cellDirection = function cellDirection(grip) {
+    var cell = grip.closest("th");
+    return cell && typeof window !== "undefined" && typeof window.getComputedStyle === "function" && window.getComputedStyle(cell).direction === "rtl" ? -1 : 1;
+  };
+  var handleMouseDown = React.useCallback(function (key) {
+    return function (e) {
+      var _ref;
+      // Block native browser drag (text selection, image drag, the
+      // ancestor `<th draggable>` if reorder is also on) and the
+      // sortable-header click that lives next door in the same `<th>`.
+      e.preventDefault();
+      e.stopPropagation();
+      var grip = e.currentTarget;
+      var cell = grip.closest("th");
+      if (!cell) return;
+
+      // RTL detection at the cell level — most accurate (a `dir`
+      // attribute may be set anywhere up the ancestor chain).
+      var direction = cellDirection(grip);
+
+      // Starting width: prefer the host-controlled value, fall back to
+      // the rendered offsetWidth for a column the host hasn't sized.
+      var currentWidth = (_ref = columnWidthsRef.current && columnWidthsRef.current[key]) !== null && _ref !== void 0 ? _ref : cell.offsetWidth;
+      dragStateRef.current = {
+        x: e.clientX,
+        width: currentWidth,
+        key: key,
+        direction: direction
+      };
+      liveWidthRef.current = currentWidth;
+      setLiveWidth(currentWidth);
+      setDraggingKey(key);
+    };
+  }, []);
+
+  // DG-2 — keyboard resize on the focusable grip. Commits immediately;
+  // no drag session / window listeners involved.
+  var handleKeyDown = React.useCallback(function (key) {
+    return function (e) {
+      var _ref2;
+      var isLeft = e.key === "ArrowLeft";
+      var isRight = e.key === "ArrowRight";
+      var isHome = e.key === "Home";
+      if (!isLeft && !isRight && !isHome) return;
+      e.preventDefault();
+      e.stopPropagation();
+      var grip = e.currentTarget;
+      var cell = grip.closest("th");
+      var direction = cellDirection(grip);
+      var current = (_ref2 = columnWidthsRef.current && columnWidthsRef.current[key]) !== null && _ref2 !== void 0 ? _ref2 : cell ? cell.offsetWidth : minWidth;
+
+      // RTL-aware so ArrowRight matches a rightward drag (which grows the
+      // column in LTR and shrinks it in RTL, the grip being on the
+      // inline-end edge).
+      var next = isHome ? minWidth : current + (isRight ? 1 : -1) * KEYBOARD_STEP * direction;
+      var clamped = Math.max(minWidth, Math.round(next));
+      if (onColumnWidthsChange) {
+        onColumnWidthsChange(_objectSpread(_objectSpread({}, columnWidthsRef.current || {}), {}, _defineProperty({}, key, clamped)));
+      }
+    };
+  }, [minWidth, onColumnWidthsChange]);
+  React.useEffect(function () {
+    if (!draggingKey) return undefined;
+    var onMove = function onMove(e) {
+      var start = dragStateRef.current;
+      if (!start) return;
+      var delta = (e.clientX - start.x) * start.direction;
+      var next = Math.max(minWidth, start.width + delta);
+      liveWidthRef.current = next;
+      setLiveWidth(next);
+    };
+    var onUp = function onUp() {
+      var _liveWidthRef$current;
+      var start = dragStateRef.current;
+      var finalWidth = (_liveWidthRef$current = liveWidthRef.current) !== null && _liveWidthRef$current !== void 0 ? _liveWidthRef$current : start ? start.width : null;
+      if (start && finalWidth != null && onColumnWidthsChange) {
+        onColumnWidthsChange(_objectSpread(_objectSpread({}, columnWidthsRef.current || {}), {}, _defineProperty({}, start.key, finalWidth)));
+      }
+      dragStateRef.current = null;
+      liveWidthRef.current = null;
+      setLiveWidth(null);
+      setDraggingKey(null);
+    };
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+    return function () {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+    // onColumnWidthsChange is intentionally listed — re-creates the
+    // mouseup closure with the latest setter ref. minWidth is rare
+    // to change but listed for correctness.
+  }, [draggingKey, onColumnWidthsChange, minWidth]);
+
+  // Live widths map = host columnWidths with the in-flight drag value
+  // patched in. Memoised on [draggingKey, liveWidth, columnWidths] so
+  // the reference is stable when nothing is dragging.
+  var liveWidths = React.useMemo(function () {
+    if (!draggingKey || liveWidth == null) return columnWidths;
+    return _objectSpread(_objectSpread({}, columnWidths || {}), {}, _defineProperty({}, draggingKey, liveWidth));
+  }, [draggingKey, liveWidth, columnWidths]);
+  return {
+    handleMouseDown: handleMouseDown,
+    handleKeyDown: handleKeyDown,
+    liveWidths: liveWidths,
+    isResizing: draggingKey != null,
+    minWidth: minWidth
+  };
+}
+//# sourceMappingURL=_useColumnResize.js.map