@dreamtree-org/twreact-ui 2.0.3 → 2.0.5

package/dist/esm/hooks/useSortableGroup.js

@@ -0,0 +1,268 @@
+'use client';
+import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { useRef, useState, useMemo, createContext, useContext, useEffect, useLayoutEffect } from 'react';
+import { useLatestRef } from './useLatestRef.js';
+
+// Internal (not exported). Cross-list moves for Sortable lists inside a
+// SortableGroup. The group holds one "carry": the item on its way from one list
+// to another, the target `{ listId, index }` and whether `canDrop` allows it.
+// The target list draws a placeholder from it; nothing is committed until the
+// drop, so a refused target is never shown as a success.
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var SortableGroupContext = /*#__PURE__*/createContext(null);
+var documentOrder = function documentOrder(a, b) {
+  return a === b ? 0 : a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+};
+var contains = function contains(rect, point) {
+  return point.x >= rect.left && point.x <= rect.right && point.y >= rect.top && point.y <= rect.bottom;
+};
+/** Insertion index for `point` among the items of a list (midpoint hit-test). */
+function indexAt(list, point) {
+  var index = list.itemKeys.findIndex(function (k) {
+    var _list$nodeFor;
+    var rect = (_list$nodeFor = list.nodeFor(k)) === null || _list$nodeFor === void 0 ? void 0 : _list$nodeFor.getBoundingClientRect();
+    if (!rect) return false;
+    return list.orientation === "horizontal" ? point.x < rect.left + rect.width / 2 : point.y < rect.top + rect.height / 2;
+  });
+  return index === -1 ? list.itemKeys.length : index;
+}
+/** State + stable API behind <SortableGroup>. */
+function useSortableGroupState(_ref) {
+  var onMove = _ref.onMove,
+    canDrop = _ref.canDrop;
+  var lists = useRef(new Map());
+  var carryRef = useRef(null);
+  var focusRef = useRef(null);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    carry = _useState2[0],
+    setCarryState = _useState2[1];
+  var latest = useLatestRef({
+    onMove: onMove,
+    canDrop: canDrop
+  });
+  var api = useMemo(function () {
+    var setCarry = function setCarry(next) {
+      carryRef.current = next;
+      setCarryState(next);
+      return next;
+    };
+    var read = function read(id) {
+      var _lists$current$get;
+      return (_lists$current$get = lists.current.get(id)) === null || _lists$current$get === void 0 ? void 0 : _lists$current$get();
+    };
+    return {
+      pendingFocus: function pendingFocus() {
+        return focusRef.current;
+      },
+      clearFocus: function clearFocus() {
+        focusRef.current = null;
+      },
+      read: read,
+      current: function current() {
+        return carryRef.current;
+      },
+      register: function register(id, reader) {
+        lists.current.set(id, reader);
+        return function () {
+          if (lists.current.get(id) === reader) lists.current["delete"](id);
+        };
+      },
+      /** List ids in document order (only lists that are mounted). */
+      order: function order() {
+        return _toConsumableArray(lists.current.keys()).filter(function (id) {
+          var _read;
+          return (_read = read(id)) === null || _read === void 0 ? void 0 : _read.node;
+        }).sort(function (a, b) {
+          return documentOrder(read(a).node, read(b).node);
+        });
+      },
+      aim: function aim(from, item, target) {
+        var c = carryRef.current;
+        if (c && c.from.listId === from.listId && c.target.listId === target.listId && c.target.index === target.index) return c;
+        var test = latest.current.canDrop;
+        return setCarry({
+          from: from,
+          item: item,
+          target: target,
+          allowed: test ? Boolean(test(item, target, from)) : true
+        });
+      },
+      clear: function clear() {
+        if (carryRef.current) setCarry(null);
+      },
+      drop: function drop(c, focus) {
+        var _latest$current$onMov, _latest$current;
+        setCarry(null);
+        focusRef.current = focus || null;
+        (_latest$current$onMov = (_latest$current = latest.current).onMove) === null || _latest$current$onMov === void 0 || _latest$current$onMov.call(_latest$current, {
+          item: c.item,
+          from: c.from,
+          to: c.target
+        });
+      }
+    };
+  }, [latest]);
+  return useMemo(function () {
+    return {
+      api: api,
+      carry: carry
+    };
+  }, [api, carry]);
+}
+function makeCross(api, latest) {
+  var me = function me() {
+    return latest.current;
+  };
+  var origin = function origin(key) {
+    var m = me();
+    var index = m.itemKeys.indexOf(key);
+    return {
+      from: {
+        listId: m.listId,
+        index: index
+      },
+      item: m.items[index]
+    };
+  };
+  var say = function say(kind, key) {
+    var _me;
+    for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+      args[_key - 2] = arguments[_key];
+    }
+    return (_me = me()).announce.apply(_me, [kind, me().labelFor(key)].concat(args));
+  };
+  var aimAt = function aimAt(key, target) {
+    var _origin = origin(key),
+      from = _origin.from,
+      item = _origin.item;
+    var next = api.aim(from, item, target);
+    var list = api.read(target.listId);
+    if (next.allowed) say("movedToList", key, list.label, target.index + 1, list.items.length + 1);else say("refused", key, list.label);
+  };
+  return {
+    // Pointer: true while the pointer is over another list of the group.
+    over: function over(point, key) {
+      var id = api.order().find(function (other) {
+        return other !== me().listId && contains(api.read(other).node.getBoundingClientRect(), point);
+      });
+      if (id === undefined) {
+        api.clear();
+        return false;
+      }
+      var _origin2 = origin(key),
+        from = _origin2.from,
+        item = _origin2.item;
+      api.aim(from, item, {
+        listId: id,
+        index: indexAt(api.read(id), point)
+      });
+      return true;
+    },
+    // Pointer drop: true when the drop was handled here (moved, or refused and dropped nowhere).
+    release: function release() {
+      var c = api.current();
+      if (!c) return false;
+      if (c.allowed) api.drop(c);else api.clear();
+      return true;
+    },
+    // Keyboard: carry the item to the previous (-1) or next (1) list.
+    step: function step(key, dir) {
+      var m = me();
+      var ids = api.order();
+      var c = api.current();
+      var nextId = ids[ids.indexOf(c ? c.target.listId : m.listId) + dir];
+      if (nextId === undefined) return;
+      m.setDraft(null);
+      if (nextId === m.listId) {
+        api.clear();
+        say("moved", key, m.itemKeys.indexOf(key) + 1, m.itemKeys.length);
+        return;
+      }
+      var index = c ? c.target.index : m.keys.indexOf(key);
+      aimAt(key, {
+        listId: nextId,
+        index: Math.min(index, api.read(nextId).items.length)
+      });
+    },
+    // Keyboard: move within the target list; false when the item is still in its own list.
+    nudge: function nudge(key, delta) {
+      var c = api.current();
+      if (!c) return false;
+      var size = api.read(c.target.listId).items.length;
+      var index = Math.max(0, Math.min(size, c.target.index + delta));
+      if (index !== c.target.index) aimAt(key, {
+        listId: c.target.listId,
+        index: index
+      });
+      return true;
+    },
+    // Keyboard drop: "dropped", "refused" (keep carrying) or false (in-list drop).
+    drop: function drop(key) {
+      var c = api.current();
+      if (!c) return false;
+      var list = api.read(c.target.listId);
+      if (!c.allowed) {
+        say("refused", key, list.label);
+        return "refused";
+      }
+      api.drop(c, {
+        listId: c.target.listId,
+        key: list.getKey(c.item, c.target.index)
+      });
+      say("droppedInList", key, list.label, c.target.index + 1, list.items.length + 1);
+      return "dropped";
+    },
+    cancel: function cancel() {
+      return api.clear();
+    }
+  };
+}
+/**
+ * Wires one Sortable into the surrounding SortableGroup (if any). Outside a
+ * group, or without an `id`, it returns `{ cross: undefined }` and the list
+ * behaves exactly like a standalone Sortable.
+ */
+function useSortableGroupMember(options) {
+  var _group$api;
+  var group = useContext(SortableGroupContext);
+  var latest = useLatestRef(options);
+  var listId = options.listId,
+    itemKeys = options.itemKeys,
+    nodeFor = options.nodeFor;
+  var api = listId == null ? null : (_group$api = group === null || group === void 0 ? void 0 : group.api) !== null && _group$api !== void 0 ? _group$api : null;
+  useEffect(function () {
+    return api ? api.register(listId, function () {
+      return _objectSpread2(_objectSpread2({}, latest.current), {}, {
+        node: latest.current.listRef.current
+      });
+    }) : undefined;
+  }, [api, listId, latest]);
+  var cross = useMemo(function () {
+    return api ? makeCross(api, latest) : undefined;
+  }, [api, latest]);
+  // After a keyboard drop the moved item mounts here; keep focus on it.
+  var signature = itemKeys.join("\0");
+  useIsomorphicLayoutEffect(function () {
+    var pending = api === null || api === void 0 ? void 0 : api.pendingFocus();
+    if (!pending || pending.listId !== listId) return;
+    var node = nodeFor(pending.key);
+    if (node) {
+      api.clearFocus();
+      node.focus();
+    }
+  }, [api, listId, signature, nodeFor]);
+  var carry = api ? group.carry : null;
+  return {
+    cross: cross,
+    // Where another list's item would land in this list.
+    incoming: carry && carry.target.listId === listId ? {
+      index: carry.target.index,
+      allowed: carry.allowed
+    } : null,
+    // This list's item currently aimed at another list.
+    outgoing: carry && carry.from.listId === listId ? carry : null
+  };
+}
+
+export { SortableGroupContext, indexAt, useSortableGroupMember, useSortableGroupState };

package/dist/esm/index.js

@@ -57,6 +57,7 @@ export { default as FileUpload } from './components/utility/FileUpload.js';
 export { Condition } from './components/utility/Condition.js';
 export { Carousel } from './components/utility/Carousel.js';
 export { default as Sortable } from './components/utility/Sortable.js';
+export { default as SortableGroup } from './components/utility/SortableGroup.js';
 export { default as PullToRefresh } from './components/utility/PullToRefresh.js';
 export { default as AppShell } from './components/blocks/AppShell.js';
 export { default as PageHeader } from './components/blocks/PageHeader.js';

package/dist/hooks/useFocusTrap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.js"],"names":[],"mappings":"AAyDA;;;;GAIG;AACH;;;;;;SAmCC;AA3FD,wCAOY;AAEL,+CAKC"}
+{"version":3,"file":"useFocusTrap.d.ts","sourceRoot":"","sources":["../../src/hooks/useFocusTrap.js"],"names":[],"mappings":"AAoEA;;;;GAIG;AACH;;;;;;SAmCC;AAtGD,wCAOY;AAsBL,+CAKC"}

package/dist/hooks/useSortable.d.ts

@@ -1,39 +1,48 @@
+export function arrayMove(list: any, from: any, to: any): any;
 export function moveKey(keys: any, key: any, toIndex: any): any;
-export function useSortableKeyboard({ keys, setDraft, commit, announce, labelFor, orientation }: {
+export function useSortableKeyboard({ keys, setDraft, commit, announce, labelFor, orientation, cross }: {
     keys: any;
     setDraft: any;
     commit: any;
     announce: any;
     labelFor: any;
     orientation: any;
+    cross: any;
 }): {
     grabbed: null;
-    keyDownFor: (key: any) => (e: any) => void;
+    keyDownFor: (key: any) => (e: any) => any;
     cancel: () => void;
 };
 /** Nearest scrollable ancestor along `axis`, or `null` for the window. */
 export function getScrollParent(node: any, axis: any): any;
 /** Scroll speed (px/frame, signed) for a coordinate near the [start, end] edges. */
 export function edgeSpeed(pos: any, start: any, end: any, edge?: number): number;
-export function useSortablePointer({ keys, setDraft, commit, nodeFor, orientation, disabled }: {
+export function useSortablePointer({ keys, setDraft, commit, nodeFor, orientation, disabled, cross }: {
     keys: any;
     setDraft: any;
     commit: any;
     nodeFor: any;
     orientation: any;
     disabled: any;
+    cross: any;
 }): {
     dragging: null;
     startFor: (key: any, { longPress }?: {
         longPress?: boolean | undefined;
     }) => (e: any) => void;
 };
+export function defaultGetKey(item: any, index: any): any;
+export function defaultGetItemLabel(item: any, index: any): any;
 export namespace DEFAULT_SORTABLE_MESSAGES {
     let instructions: string;
     function grabbed(label: any, position: any, total: any): string;
     function moved(label: any, position: any, total: any): string;
     function dropped(label: any, position: any, total: any): string;
     function cancelled(label: any, position: any): string;
+    let groupInstructions: string;
+    function movedToList(label: any, list: any, position: any, total: any): string;
+    function droppedInList(label: any, list: any, position: any, total: any): string;
+    function refused(label: any, list: any): string;
 }
 export const DRAG_THRESHOLD: 4;
 export const LONG_PRESS_DELAY: 250;

package/dist/hooks/useSortable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSortable.d.ts","sourceRoot":"","sources":["../../src/hooks/useSortable.js"],"names":[],"mappings":"AAOA,gEAIC;AAcD;;;;;;;;;+BAK+B,MAAC;;EAqC/B;AAqBD,0EAA0E;AAC1E,2DAOC;AAED,oFAAoF;AACpF,iFAIC;AAOD;;;;;;;;;;;WAwByD,MAAC;EAgGzD;;;IAtNU,gEAAmF;IACrF,8DAAiF;IAC/E,gEAAmF;IACjF,sDAAoF;;AAoDjG,6BAA8B,CAAC,CAAC;AAGhC,+BAAgC,GAAG,CAAC;AACpC,mCAAoC,CAAC,CAAC;AAGtC,+BAAgC,EAAE,CAAC"}
+{"version":3,"file":"useSortable.d.ts","sourceRoot":"","sources":["../../src/hooks/useSortable.js"],"names":[],"mappings":"AAaA,8DAKC;AAED,gEAIC;AA0BD;;;;;;;;;;+BAK+B,MAAC;;EA4C/B;AAqBD,0EAA0E;AAC1E,2DAOC;AAED,oFAAoF;AACpF,iFAIC;AAOD;;;;;;;;;;;;WAwByD,MAAC;EAyGzD;AAtQM,0DAAqE;AACrE,gEACgI;;;IAkB5H,gEAAmF;IACrF,8DAAiF;IAC/E,gEAAmF;IACjF,sDAAoF;;IAGlF,+EAAgG;IAC9F,iFAAoG;IAC1G,gDAAyD;;AAkEpE,6BAA8B,CAAC,CAAC;AAGhC,+BAAgC,GAAG,CAAC;AACpC,mCAAoC,CAAC,CAAC;AAGtC,+BAAgC,EAAE,CAAC"}

package/dist/hooks/useSortableGroup.d.ts

@@ -0,0 +1,43 @@
+/** Insertion index for `point` among the items of a list (midpoint hit-test). */
+export function indexAt(list: any, point: any): any;
+/** State + stable API behind <SortableGroup>. */
+export function useSortableGroupState({ onMove, canDrop }: {
+    onMove: any;
+    canDrop: any;
+}): {
+    api: {
+        pendingFocus: () => null;
+        clearFocus: () => void;
+        read: (id: any) => any;
+        current: () => null;
+        register(id: any, reader: any): () => void;
+        /** List ids in document order (only lists that are mounted). */
+        order: () => any[];
+        aim(from: any, item: any, target: any): any;
+        clear: () => void;
+        drop(c: any, focus: any): void;
+    };
+    carry: null;
+};
+/**
+ * Wires one Sortable into the surrounding SortableGroup (if any). Outside a
+ * group, or without an `id`, it returns `{ cross: undefined }` and the list
+ * behaves exactly like a standalone Sortable.
+ */
+export function useSortableGroupMember(options: any): {
+    cross: {
+        over(point: any, key: any): boolean;
+        release(): boolean;
+        step(key: any, dir: any): void;
+        nudge(key: any, delta: any): boolean;
+        drop(key: any): false | "refused" | "dropped";
+        cancel: () => any;
+    } | undefined;
+    incoming: {
+        index: any;
+        allowed: any;
+    } | null;
+    outgoing: any;
+};
+export const SortableGroupContext: import("react").Context<null>;
+//# sourceMappingURL=useSortableGroup.d.ts.map

package/dist/hooks/useSortableGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSortableGroup.d.ts","sourceRoot":"","sources":["../../src/hooks/useSortableGroup.js"],"names":[],"mappings":"AAmBA,iFAAiF;AACjF,oDAOC;AAED,iDAAiD;AACjD;;;;;;;;;;QA2BM,gEAAgE;;;;;;;EAqBrE;AAgFD;;;;GAIG;AACH;;;;;;;;;;;;;;EAiCC;AAzLD,iEAAwD"}