@sanity/hierarchical-document-list 1.0.0 → 1.1.0

package/lib/components/TreeEditorErrorBoundary.js

@@ -1,59 +1,74 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var ui_1 = require("@sanity/ui");
-var React = __importStar(require("react"));
-var DISPLAY_ERROR = false;
-var ErrorToast = function (_a) {
-    var error = _a.error;
-    var push = (0, ui_1.useToast)().push;
-    React.useEffect(function () {
-        if ((error === null || error === void 0 ? void 0 : error.error) && DISPLAY_ERROR) {
-            push({
-                title: error.error.name,
-                description: error.error.message,
-                closable: true,
-                status: 'error',
-                id: 'hierarchical-error'
-            });
-        }
-    }, [error]);
-    return null;
-};
-var TreeEditorErrorBoundary = function (props) {
-    var _a = React.useState(undefined), exception = _a[0], setException = _a[1];
-    return ((0, jsx_runtime_1.jsxs)(ui_1.ErrorBoundary, __assign({ onCatch: function (newException) {
-            setException(newException);
-        } }, { children: [(0, jsx_runtime_1.jsx)(ErrorToast, { error: exception }, void 0), props.children] }), void 0));
-};
-exports.default = TreeEditorErrorBoundary;
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeEditorErrorBoundary = void 0;
+var React = __importStar(require("react"));
+/**
+ * react-sortable-tree emits a lot of random errors when dragging to invalid states,
+ * even when drag-targets are disabled.
+ *
+ * This boundary is a workaround so users are not pestered with error-toasts for things
+ * that have no functional impact.
+ *
+ * This boundry does NOT handle errors that happen in the React dnd
+ * event handlers, so there is addtional workarounds in the
+ * DnDManager.
+ *  */
+var TreeEditorErrorBoundary = /** @class */ (function (_super) {
+    __extends(TreeEditorErrorBoundary, _super);
+    function TreeEditorErrorBoundary() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    // eslint-disable-next-line class-methods-use-this
+    Object.defineProperty(TreeEditorErrorBoundary.prototype, "componentDidCatch", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            // do nothing
+        }
+    });
+    Object.defineProperty(TreeEditorErrorBoundary.prototype, "render", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function () {
+            return this.props.children;
+        }
+    });
+    return TreeEditorErrorBoundary;
+}(React.Component));
+exports.TreeEditorErrorBoundary = TreeEditorErrorBoundary;

package/lib/components/TreeNodeRenderer.d.ts

@@ -1,3 +1,3 @@
-import { TreeRenderer } from 'react-sortable-tree';
-declare const TreeNodeRenderer: TreeRenderer;
-export default TreeNodeRenderer;
+import { TreeRenderer } from 'react-sortable-tree';
+declare const TreeNodeRenderer: TreeRenderer;
+export default TreeNodeRenderer;

package/lib/components/TreeNodeRenderer.js

@@ -1,59 +1,59 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var React = __importStar(require("react"));
-var TreeNodeRendererScaffold_1 = __importDefault(require("./TreeNodeRendererScaffold"));
-/**
- * To prevent expand buttons from overflowing on the left, we add a minimum left padding to all entries
- */
-var BASE_LEFT_PADDING = 10;
-var NESTING_PADDING = 14;
-var TreeNodeRenderer = function (props) {
-    var children = props.children, lowerSiblingCounts = props.lowerSiblingCounts, connectDropTarget = props.connectDropTarget, isOver = props.isOver, draggedNode = props.draggedNode, canDrop = props.canDrop;
-    // Construct the scaffold representing the structure of the tree
-    var scaffoldBlockCount = lowerSiblingCounts.length;
-    return connectDropTarget((0, jsx_runtime_1.jsxs)("div", __assign({ style: props.style }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: {
-                    // prettier-ignore
-                    paddingLeft: "".concat(BASE_LEFT_PADDING + (NESTING_PADDING * scaffoldBlockCount), "px")
-                } }, { children: React.Children.map(children, function (child) {
-                    return React.cloneElement(child, {
-                        isOver: isOver,
-                        canDrop: canDrop,
-                        draggedNode: draggedNode
-                    });
-                }) }), void 0), (0, jsx_runtime_1.jsx)(TreeNodeRendererScaffold_1.default, __assign({}, props), void 0)] }), void 0));
-};
-exports.default = TreeNodeRenderer;
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var TreeNodeRendererScaffold_1 = __importDefault(require("./TreeNodeRendererScaffold"));
+/**
+ * To prevent expand buttons from overflowing on the left, we add a minimum left padding to all entries
+ */
+var BASE_LEFT_PADDING = 10;
+var NESTING_PADDING = 14;
+var TreeNodeRenderer = function (props) {
+    var children = props.children, lowerSiblingCounts = props.lowerSiblingCounts, connectDropTarget = props.connectDropTarget, isOver = props.isOver, draggedNode = props.draggedNode, canDrop = props.canDrop;
+    // Construct the scaffold representing the structure of the tree
+    var scaffoldBlockCount = lowerSiblingCounts.length;
+    return connectDropTarget((0, jsx_runtime_1.jsxs)("div", __assign({ style: props.style }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                    // prettier-ignore
+                    paddingLeft: "".concat(BASE_LEFT_PADDING + (NESTING_PADDING * scaffoldBlockCount), "px")
+                } }, { children: React.Children.map(children, function (child) {
+                    return React.cloneElement(child, {
+                        isOver: isOver,
+                        canDrop: canDrop,
+                        draggedNode: draggedNode
+                    });
+                }) }), void 0), (0, jsx_runtime_1.jsx)(TreeNodeRendererScaffold_1.default, __assign({}, props), void 0)] }), void 0));
+};
+exports.default = TreeNodeRenderer;

package/lib/components/TreeNodeRendererScaffold.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
-import { TreeRendererProps } from 'react-sortable-tree';
-declare const TreeNodeRendererScaffold: React.FC<TreeRendererProps>;
-export default TreeNodeRendererScaffold;
+import * as React from 'react';
+import { TreeRendererProps } from 'react-sortable-tree';
+declare const TreeNodeRendererScaffold: React.FC<TreeRendererProps>;
+export default TreeNodeRendererScaffold;

package/lib/components/TreeNodeRendererScaffold.js

@@ -1,44 +1,44 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var color_1 = require("@sanity/color");
-var styled_components_1 = require("styled-components");
-// Adapted from react-sortable-tree/src/tree-node.js
-var ScaffoldStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .rst__lineBlock,\n  .rst__absoluteLineBlock {\n    height: 100%;\n    position: relative;\n    display: inline-block;\n    --stroke-width: 3px;\n  }\n\n  .rst__absoluteLineBlock {\n    position: absolute;\n    top: 0;\n  }\n\n  /* Highlight line for pointing to dragged row destination\n   ========================================================================== */\n  /**\n * +--+--+\n * |  |  |\n * |  |  |\n * |  |  |\n * +--+--+\n */\n  .rst__highlightLineVertical {\n    z-index: 3;\n  }\n  .rst__highlightLineVertical::before {\n    position: absolute;\n    content: '';\n    background-color: ", ";\n    width: calc(var(--stroke-width) * 2);\n    margin-left: calc(var(--stroke-width) * -1);\n    left: 50%;\n    top: 0;\n    height: 100%;\n  }\n\n  @keyframes arrow-pulse {\n    0% {\n      transform: translate(0, 0);\n      opacity: 0;\n    }\n    30% {\n      transform: translate(0, 300%);\n      opacity: 1;\n    }\n    70% {\n      transform: translate(0, 700%);\n      opacity: 1;\n    }\n    100% {\n      transform: translate(0, 1000%);\n      opacity: 0;\n    }\n  }\n  .rst__highlightLineVertical::after {\n    content: '';\n    position: absolute;\n    height: 0;\n    margin-left: calc(var(--stroke-width) * -1);\n    left: 50%;\n    top: 0;\n    border-left: var(--stroke-width) solid transparent;\n    border-right: var(--stroke-width) solid transparent;\n    border-top: var(--stroke-width) solid white;\n    animation: arrow-pulse 1s infinite linear both;\n  }\n\n  /**\n * +-----+\n * |     |\n * |  +--+\n * |  |  |\n * +--+--+\n */\n  .rst__highlightTopLeftCorner::before {\n    z-index: 3;\n    content: '';\n    position: absolute;\n    border-top: solid calc(var(--stroke-width) * 2) ", ";\n    border-left: solid calc(var(--stroke-width) * 2) ", ";\n    box-sizing: border-box;\n    height: calc(50% + var(--stroke-width));\n    top: 50%;\n    margin-top: calc(var(--stroke-width) * -1);\n    right: 0;\n    width: calc(50% + var(--stroke-width));\n  }\n\n  /**\n * +--+--+\n * |  |  |\n * |  |  |\n * |  +->|\n * +-----+\n */\n  .rst__highlightBottomLeftCorner {\n    z-index: 3;\n  }\n  .rst__highlightBottomLeftCorner::before {\n    content: '';\n    position: absolute;\n    border-bottom: solid calc(var(--stroke-width) * 2) ", ";\n    border-left: solid calc(var(--stroke-width) * 2) ", ";\n    box-sizing: border-box;\n    height: calc(100% + var(--stroke-width));\n    top: 0;\n    right: calc(var(--stroke-width) * 3);\n    width: calc(50% - calc(var(--stroke-width) * 2));\n  }\n\n  .rst__highlightBottomLeftCorner::after {\n    content: '';\n    position: absolute;\n    height: 0;\n    right: 0;\n    top: 100%;\n    margin-top: calc(var(--stroke-width) * -3);\n    border-top: calc(var(--stroke-width) * 3) solid transparent;\n    border-bottom: calc(var(--stroke-width) * 3) solid transparent;\n    border-left: calc(var(--stroke-width) * 3) solid ", ";\n  }\n\n  .rst__unclickable {\n    pointer-events: none;\n    margin-top: -calc(var(--stroke-width) * 3);\n  }\n"], ["\n  .rst__lineBlock,\n  .rst__absoluteLineBlock {\n    height: 100%;\n    position: relative;\n    display: inline-block;\n    --stroke-width: 3px;\n  }\n\n  .rst__absoluteLineBlock {\n    position: absolute;\n    top: 0;\n  }\n\n  /* Highlight line for pointing to dragged row destination\n   ========================================================================== */\n  /**\n * +--+--+\n * |  |  |\n * |  |  |\n * |  |  |\n * +--+--+\n */\n  .rst__highlightLineVertical {\n    z-index: 3;\n  }\n  .rst__highlightLineVertical::before {\n    position: absolute;\n    content: '';\n    background-color: ", ";\n    width: calc(var(--stroke-width) * 2);\n    margin-left: calc(var(--stroke-width) * -1);\n    left: 50%;\n    top: 0;\n    height: 100%;\n  }\n\n  @keyframes arrow-pulse {\n    0% {\n      transform: translate(0, 0);\n      opacity: 0;\n    }\n    30% {\n      transform: translate(0, 300%);\n      opacity: 1;\n    }\n    70% {\n      transform: translate(0, 700%);\n      opacity: 1;\n    }\n    100% {\n      transform: translate(0, 1000%);\n      opacity: 0;\n    }\n  }\n  .rst__highlightLineVertical::after {\n    content: '';\n    position: absolute;\n    height: 0;\n    margin-left: calc(var(--stroke-width) * -1);\n    left: 50%;\n    top: 0;\n    border-left: var(--stroke-width) solid transparent;\n    border-right: var(--stroke-width) solid transparent;\n    border-top: var(--stroke-width) solid white;\n    animation: arrow-pulse 1s infinite linear both;\n  }\n\n  /**\n * +-----+\n * |     |\n * |  +--+\n * |  |  |\n * +--+--+\n */\n  .rst__highlightTopLeftCorner::before {\n    z-index: 3;\n    content: '';\n    position: absolute;\n    border-top: solid calc(var(--stroke-width) * 2) ", ";\n    border-left: solid calc(var(--stroke-width) * 2) ", ";\n    box-sizing: border-box;\n    height: calc(50% + var(--stroke-width));\n    top: 50%;\n    margin-top: calc(var(--stroke-width) * -1);\n    right: 0;\n    width: calc(50% + var(--stroke-width));\n  }\n\n  /**\n * +--+--+\n * |  |  |\n * |  |  |\n * |  +->|\n * +-----+\n */\n  .rst__highlightBottomLeftCorner {\n    z-index: 3;\n  }\n  .rst__highlightBottomLeftCorner::before {\n    content: '';\n    position: absolute;\n    border-bottom: solid calc(var(--stroke-width) * 2) ", ";\n    border-left: solid calc(var(--stroke-width) * 2) ", ";\n    box-sizing: border-box;\n    height: calc(100% + var(--stroke-width));\n    top: 0;\n    right: calc(var(--stroke-width) * 3);\n    width: calc(50% - calc(var(--stroke-width) * 2));\n  }\n\n  .rst__highlightBottomLeftCorner::after {\n    content: '';\n    position: absolute;\n    height: 0;\n    right: 0;\n    top: 100%;\n    margin-top: calc(var(--stroke-width) * -3);\n    border-top: calc(var(--stroke-width) * 3) solid transparent;\n    border-bottom: calc(var(--stroke-width) * 3) solid transparent;\n    border-left: calc(var(--stroke-width) * 3) solid ", ";\n  }\n\n  .rst__unclickable {\n    pointer-events: none;\n    margin-top: -calc(var(--stroke-width) * 3);\n  }\n"])), color_1.blue[400].hex, color_1.blue[400].hex, color_1.blue[400].hex, color_1.blue[400].hex, color_1.blue[400].hex, color_1.blue[400].hex);
-var TreeNodeRendererScaffold = function (props) {
-    var lowerSiblingCounts = props.lowerSiblingCounts, scaffoldBlockPxWidth = props.scaffoldBlockPxWidth, listIndex = props.listIndex, swapDepth = props.swapDepth, swapFrom = props.swapFrom, swapLength = props.swapLength, treeIndex = props.treeIndex;
-    // Construct the scaffold representing the structure of the tree
-    var scaffold = lowerSiblingCounts.map(function (lowerSiblingCount, i) {
-        if (lowerSiblingCount < 0 || treeIndex === listIndex || i !== swapDepth) {
-            return null;
-        }
-        // This row has been shifted, and is at the depth of
-        // the line pointing to the new destination
-        var highlightLineClass = '';
-        if (listIndex === (swapFrom || 0) + (swapLength || 0) - 1) {
-            // This block is on the bottom (target) line
-            // This block points at the target block (where the row will go when released)
-            highlightLineClass = 'rst__highlightBottomLeftCorner';
-        }
-        else if (treeIndex === swapFrom) {
-            // This block is on the top (source) line
-            highlightLineClass = 'rst__highlightTopLeftCorner';
-        }
-        else {
-            // This block is between the bottom and top
-            highlightLineClass = 'rst__highlightLineVertical';
-        }
-        var style = {
-            width: scaffoldBlockPxWidth,
-            left: scaffoldBlockPxWidth * i
-        };
-        return ((0, jsx_runtime_1.jsx)("div", { style: style, className: "rst__unclickable rst__absoluteLineBlock ".concat(highlightLineClass || ''), tabIndex: -1 }, i));
-    });
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [scaffold, (0, jsx_runtime_1.jsx)(ScaffoldStyles, {}, void 0)] }, void 0));
-};
-exports.default = TreeNodeRendererScaffold;
-var templateObject_1;
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var color_1 = require("@sanity/color");
+var styled_components_1 = require("styled-components");
+// Adapted from react-sortable-tree/src/tree-node.js
+var ScaffoldStyles = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .rst__lineBlock,\n  .rst__absoluteLineBlock {\n    height: 100%;\n    position: relative;\n    display: inline-block;\n    --stroke-width: 3px;\n  }\n\n  .rst__absoluteLineBlock {\n    position: absolute;\n    top: 0;\n  }\n\n  /* Highlight line for pointing to dragged row destination\n   ========================================================================== */\n  /**\n * +--+--+\n * |  |  |\n * |  |  |\n * |  |  |\n * +--+--+\n */\n  .rst__highlightLineVertical {\n    z-index: 3;\n  }\n  .rst__highlightLineVertical::before {\n    position: absolute;\n    content: '';\n    background-color: ", ";\n    width: calc(var(--stroke-width) * 2);\n    margin-left: calc(var(--stroke-width) * -1);\n    left: 50%;\n    top: 0;\n    height: 100%;\n  }\n\n  @keyframes arrow-pulse {\n    0% {\n      transform: translate(0, 0);\n      opacity: 0;\n    }\n    30% {\n      transform: translate(0, 300%);\n      opacity: 1;\n    }\n    70% {\n      transform: translate(0, 700%);\n      opacity: 1;\n    }\n    100% {\n      transform: translate(0, 1000%);\n      opacity: 0;\n    }\n  }\n  .rst__highlightLineVertical::after {\n    content: '';\n    position: absolute;\n    height: 0;\n    margin-left: calc(var(--stroke-width) * -1);\n    left: 50%;\n    top: 0;\n    border-left: var(--stroke-width) solid transparent;\n    border-right: var(--stroke-width) solid transparent;\n    border-top: var(--stroke-width) solid white;\n    animation: arrow-pulse 1s infinite linear both;\n  }\n\n  /**\n * +-----+\n * |     |\n * |  +--+\n * |  |  |\n * +--+--+\n */\n  .rst__highlightTopLeftCorner::before {\n    z-index: 3;\n    content: '';\n    position: absolute;\n    border-top: solid calc(var(--stroke-width) * 2) ", ";\n    border-left: solid calc(var(--stroke-width) * 2) ", ";\n    box-sizing: border-box;\n    height: calc(50% + var(--stroke-width));\n    top: 50%;\n    margin-top: calc(var(--stroke-width) * -1);\n    right: 0;\n    width: calc(50% + var(--stroke-width));\n  }\n\n  /**\n * +--+--+\n * |  |  |\n * |  |  |\n * |  +->|\n * +-----+\n */\n  .rst__highlightBottomLeftCorner {\n    z-index: 3;\n  }\n  .rst__highlightBottomLeftCorner::before {\n    content: '';\n    position: absolute;\n    border-bottom: solid calc(var(--stroke-width) * 2) ", ";\n    border-left: solid calc(var(--stroke-width) * 2) ", ";\n    box-sizing: border-box;\n    height: calc(100% + var(--stroke-width));\n    top: 0;\n    right: calc(var(--stroke-width) * 3);\n    width: calc(50% - calc(var(--stroke-width) * 2));\n  }\n\n  .rst__highlightBottomLeftCorner::after {\n    content: '';\n    position: absolute;\n    height: 0;\n    right: 0;\n    top: 100%;\n    margin-top: calc(var(--stroke-width) * -3);\n    border-top: calc(var(--stroke-width) * 3) solid transparent;\n    border-bottom: calc(var(--stroke-width) * 3) solid transparent;\n    border-left: calc(var(--stroke-width) * 3) solid ", ";\n  }\n\n  .rst__unclickable {\n    pointer-events: none;\n    margin-top: -calc(var(--stroke-width) * 3);\n  }\n"], ["\n  .rst__lineBlock,\n  .rst__absoluteLineBlock {\n    height: 100%;\n    position: relative;\n    display: inline-block;\n    --stroke-width: 3px;\n  }\n\n  .rst__absoluteLineBlock {\n    position: absolute;\n    top: 0;\n  }\n\n  /* Highlight line for pointing to dragged row destination\n   ========================================================================== */\n  /**\n * +--+--+\n * |  |  |\n * |  |  |\n * |  |  |\n * +--+--+\n */\n  .rst__highlightLineVertical {\n    z-index: 3;\n  }\n  .rst__highlightLineVertical::before {\n    position: absolute;\n    content: '';\n    background-color: ", ";\n    width: calc(var(--stroke-width) * 2);\n    margin-left: calc(var(--stroke-width) * -1);\n    left: 50%;\n    top: 0;\n    height: 100%;\n  }\n\n  @keyframes arrow-pulse {\n    0% {\n      transform: translate(0, 0);\n      opacity: 0;\n    }\n    30% {\n      transform: translate(0, 300%);\n      opacity: 1;\n    }\n    70% {\n      transform: translate(0, 700%);\n      opacity: 1;\n    }\n    100% {\n      transform: translate(0, 1000%);\n      opacity: 0;\n    }\n  }\n  .rst__highlightLineVertical::after {\n    content: '';\n    position: absolute;\n    height: 0;\n    margin-left: calc(var(--stroke-width) * -1);\n    left: 50%;\n    top: 0;\n    border-left: var(--stroke-width) solid transparent;\n    border-right: var(--stroke-width) solid transparent;\n    border-top: var(--stroke-width) solid white;\n    animation: arrow-pulse 1s infinite linear both;\n  }\n\n  /**\n * +-----+\n * |     |\n * |  +--+\n * |  |  |\n * +--+--+\n */\n  .rst__highlightTopLeftCorner::before {\n    z-index: 3;\n    content: '';\n    position: absolute;\n    border-top: solid calc(var(--stroke-width) * 2) ", ";\n    border-left: solid calc(var(--stroke-width) * 2) ", ";\n    box-sizing: border-box;\n    height: calc(50% + var(--stroke-width));\n    top: 50%;\n    margin-top: calc(var(--stroke-width) * -1);\n    right: 0;\n    width: calc(50% + var(--stroke-width));\n  }\n\n  /**\n * +--+--+\n * |  |  |\n * |  |  |\n * |  +->|\n * +-----+\n */\n  .rst__highlightBottomLeftCorner {\n    z-index: 3;\n  }\n  .rst__highlightBottomLeftCorner::before {\n    content: '';\n    position: absolute;\n    border-bottom: solid calc(var(--stroke-width) * 2) ", ";\n    border-left: solid calc(var(--stroke-width) * 2) ", ";\n    box-sizing: border-box;\n    height: calc(100% + var(--stroke-width));\n    top: 0;\n    right: calc(var(--stroke-width) * 3);\n    width: calc(50% - calc(var(--stroke-width) * 2));\n  }\n\n  .rst__highlightBottomLeftCorner::after {\n    content: '';\n    position: absolute;\n    height: 0;\n    right: 0;\n    top: 100%;\n    margin-top: calc(var(--stroke-width) * -3);\n    border-top: calc(var(--stroke-width) * 3) solid transparent;\n    border-bottom: calc(var(--stroke-width) * 3) solid transparent;\n    border-left: calc(var(--stroke-width) * 3) solid ", ";\n  }\n\n  .rst__unclickable {\n    pointer-events: none;\n    margin-top: -calc(var(--stroke-width) * 3);\n  }\n"])), color_1.blue[400].hex, color_1.blue[400].hex, color_1.blue[400].hex, color_1.blue[400].hex, color_1.blue[400].hex, color_1.blue[400].hex);
+var TreeNodeRendererScaffold = function (props) {
+    var lowerSiblingCounts = props.lowerSiblingCounts, scaffoldBlockPxWidth = props.scaffoldBlockPxWidth, listIndex = props.listIndex, swapDepth = props.swapDepth, swapFrom = props.swapFrom, swapLength = props.swapLength, treeIndex = props.treeIndex;
+    // Construct the scaffold representing the structure of the tree
+    var scaffold = lowerSiblingCounts.map(function (lowerSiblingCount, i) {
+        if (lowerSiblingCount < 0 || treeIndex === listIndex || i !== swapDepth) {
+            return null;
+        }
+        // This row has been shifted, and is at the depth of
+        // the line pointing to the new destination
+        var highlightLineClass = '';
+        if (listIndex === (swapFrom || 0) + (swapLength || 0) - 1) {
+            // This block is on the bottom (target) line
+            // This block points at the target block (where the row will go when released)
+            highlightLineClass = 'rst__highlightBottomLeftCorner';
+        }
+        else if (treeIndex === swapFrom) {
+            // This block is on the top (source) line
+            highlightLineClass = 'rst__highlightTopLeftCorner';
+        }
+        else {
+            // This block is between the bottom and top
+            highlightLineClass = 'rst__highlightLineVertical';
+        }
+        var style = {
+            width: scaffoldBlockPxWidth,
+            left: scaffoldBlockPxWidth * i
+        };
+        return ((0, jsx_runtime_1.jsx)("div", { style: style, className: "rst__unclickable rst__absoluteLineBlock ".concat(highlightLineClass || ''), tabIndex: -1 }, i));
+    });
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [scaffold, (0, jsx_runtime_1.jsx)(ScaffoldStyles, {}, void 0)] }, void 0));
+};
+exports.default = TreeNodeRendererScaffold;
+var templateObject_1;

package/lib/createDeskHierarchy.d.ts

@@ -1,14 +1,14 @@
-import { TreeDeskStructureProps } from './types';
-interface TreeProps extends TreeDeskStructureProps {
-    /**
-     * Visible title above the tree.
-     * Also used as the label in the desk list item.
-     */
-    title: string;
-    /**
-     * Optional icon for rendering the item in the desk structure.
-     */
-    icon?: any;
-}
-export default function createDeskHierarchy(props: TreeProps): import("@sanity/structure/dist/dts/ListItem").ListItemBuilder;
-export {};
+import { TreeDeskStructureProps } from './types';
+interface TreeProps extends TreeDeskStructureProps {
+    /**
+     * Visible title above the tree.
+     * Also used as the label in the desk list item.
+     */
+    title: string;
+    /**
+     * Optional icon for rendering the item in the desk structure.
+     */
+    icon?: any;
+}
+export default function createDeskHierarchy(props: TreeProps): import("@sanity/structure/dist/dts/ListItem").ListItemBuilder;
+export {};

package/lib/createDeskHierarchy.js

@@ -1,85 +1,84 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var jsx_runtime_1 = require("react/jsx-runtime");
-var structure_builder_1 = __importDefault(require("@sanity/desk-tool/structure-builder"));
-var icons_1 = require("@sanity/icons");
-var schema_1 = __importDefault(require("part:@sanity/base/schema"));
-var TreeDeskStructure_1 = __importDefault(require("./TreeDeskStructure"));
-var throwError_1 = __importDefault(require("./utils/throwError"));
-var deskTreeValidator = function (props) {
-    var documentId = props.documentId, referenceTo = props.referenceTo;
-    if (typeof documentId !== 'string' && !documentId) {
-        (0, throwError_1.default)('invalidDocumentId');
-    }
-    if (!Array.isArray(referenceTo)) {
-        (0, throwError_1.default)('invalidReferenceTo', "(documentId \"".concat(documentId, "\")"));
-    }
-    return function (deskProps) { return (0, jsx_runtime_1.jsx)(TreeDeskStructure_1.default, __assign({}, deskProps, { options: props }), void 0); };
-};
-function createDeskHierarchy(props) {
-    var documentId = props.documentId, referenceTo = props.referenceTo, referenceOptions = props.referenceOptions;
-    // @TODO: allow creating all types once upstream desk fix is shipped
-    /**
-     * Context: With multiple referenced document types we can’t set S.documentList().schemaType(),
-     * which only accepts one type. So the desk doesn’t have an expanded schemaType to access and
-     * try creating a new document without that, which breaks resolveEnabledActions (and probably more)
-     * in packages\@sanity\base\src\actions\utils\legacy_documentActionUtils.js
-     */
-    var safelyCreatableTypes = referenceTo.slice(0, 1);
-    var mainList = ((safelyCreatableTypes === null || safelyCreatableTypes === void 0 ? void 0 : safelyCreatableTypes.length) === 1
-        ? structure_builder_1.default.documentTypeList(safelyCreatableTypes[0]).schemaType(safelyCreatableTypes[0])
-        : structure_builder_1.default.documentList().filter('_type in $types').params({ types: safelyCreatableTypes }))
-        .id(documentId)
-        .menuItems((safelyCreatableTypes || []).map(function (schemaType) {
-        var _a, _b;
-        return structure_builder_1.default.menuItem()
-            .intent({
-            type: 'create',
-            params: { type: schemaType }
-        })
-            .title("Create ".concat((_a = schema_1.default.get(schemaType)) === null || _a === void 0 ? void 0 : _a.title))
-            .icon(((_b = schema_1.default.get(schemaType)) === null || _b === void 0 ? void 0 : _b.icon) || icons_1.AddIcon);
-    }))
-        .canHandleIntent(function (intent, context) {
-        // Can edit itself
-        if (intent === 'edit' && context.id === props.documentId) {
-            return true;
-        }
-        // Can create & edit referenced document types
-        if (safelyCreatableTypes.includes(context.type)) {
-            return true;
-        }
-        return false;
-    });
-    if (referenceOptions === null || referenceOptions === void 0 ? void 0 : referenceOptions.filter) {
-        mainList = mainList.filter(referenceOptions.filter);
-    }
-    if (referenceOptions === null || referenceOptions === void 0 ? void 0 : referenceOptions.filterParams) {
-        mainList = mainList.params(referenceOptions.filterParams);
-    }
-    return structure_builder_1.default.listItem()
-        .id(documentId)
-        .title(props.title || documentId)
-        .icon(props.icon)
-        .child(Object.assign(mainList.serialize(), {
-        type: 'component',
-        component: deskTreeValidator(props),
-        options: props,
-        __preserveInstance: true
-    }, props.title ? { title: props.title } : {}));
-}
-exports.default = createDeskHierarchy;
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var structure_builder_1 = __importDefault(require("@sanity/desk-tool/structure-builder"));
+var icons_1 = require("@sanity/icons");
+var schema_1 = __importDefault(require("part:@sanity/base/schema"));
+var TreeDeskStructure_1 = __importDefault(require("./TreeDeskStructure"));
+var throwError_1 = __importDefault(require("./utils/throwError"));
+var deskTreeValidator = function (props) {
+    var documentId = props.documentId, referenceTo = props.referenceTo;
+    if (typeof documentId !== 'string' && !documentId) {
+        (0, throwError_1.default)('invalidDocumentId');
+    }
+    if (!Array.isArray(referenceTo)) {
+        (0, throwError_1.default)('invalidReferenceTo', "(documentId \"".concat(documentId, "\")"));
+    }
+    return function (deskProps) { return (0, jsx_runtime_1.jsx)(TreeDeskStructure_1.default, __assign({}, deskProps, { options: props }), void 0); };
+};
+function createDeskHierarchy(props) {
+    var documentId = props.documentId, referenceTo = props.referenceTo, referenceOptions = props.referenceOptions;
+    /**
+     * Context: With multiple referenced document types we can’t set S.documentList().schemaType(),
+     * which only accepts one type. So the desk doesn’t have an expanded schemaType to access and
+     * try creating a new document without that, which breaks resolveEnabledActions (and probably more)
+     * in packages\@sanity\base\src\actions\utils\legacy_documentActionUtils.js
+     */
+    var safelyCreatableTypes = referenceTo.slice(0, 1);
+    var mainList = ((safelyCreatableTypes === null || safelyCreatableTypes === void 0 ? void 0 : safelyCreatableTypes.length) === 1
+        ? structure_builder_1.default.documentTypeList(safelyCreatableTypes[0]).schemaType(safelyCreatableTypes[0])
+        : structure_builder_1.default.documentList().filter('_type in $types').params({ types: safelyCreatableTypes }))
+        .id(documentId)
+        .menuItems((safelyCreatableTypes || []).map(function (schemaType) {
+        var _a, _b;
+        return structure_builder_1.default.menuItem()
+            .intent({
+            type: 'create',
+            params: { type: schemaType }
+        })
+            .title("Create ".concat((_a = schema_1.default.get(schemaType)) === null || _a === void 0 ? void 0 : _a.title))
+            .icon(((_b = schema_1.default.get(schemaType)) === null || _b === void 0 ? void 0 : _b.icon) || icons_1.AddIcon);
+    }))
+        .canHandleIntent(function (intent, context) {
+        // Can edit itself
+        if (intent === 'edit' && context.id === props.documentId) {
+            return true;
+        }
+        // Can create & edit referenced document types
+        if (safelyCreatableTypes.includes(context.type)) {
+            return true;
+        }
+        return false;
+    });
+    if (referenceOptions === null || referenceOptions === void 0 ? void 0 : referenceOptions.filter) {
+        mainList = mainList.filter(referenceOptions.filter);
+    }
+    if (referenceOptions === null || referenceOptions === void 0 ? void 0 : referenceOptions.filterParams) {
+        mainList = mainList.params(referenceOptions.filterParams);
+    }
+    return structure_builder_1.default.listItem()
+        .id(documentId)
+        .title(props.title || documentId)
+        .icon(props.icon)
+        .child(Object.assign(mainList.serialize(), {
+        type: 'component',
+        component: deskTreeValidator(props),
+        options: props,
+        __preserveInstance: true
+    }, props.title ? { title: props.title } : {}));
+}
+exports.default = createDeskHierarchy;