@sanity/hierarchical-document-list 0.1.0 → 1.1.0

package/lib/components/TreeEditor.js

@@ -1,54 +1,74 @@
-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);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AddCircleIcon } from '@sanity/icons';
-import { Box, Button, Card, Flex, Spinner, Stack, Text, Tooltip } from '@sanity/ui';
-import SortableTree from 'react-sortable-tree';
-import getCommonTreeProps from '../utils/getCommonTreeProps';
-import getTreeHeight from '../utils/getTreeHeight';
-import { getUnaddedItems } from '../utils/treeData';
-import useAllItems from '../utils/useAllItems';
-import useLocalTree from '../utils/useLocalTree';
-import { TreeOperationsContext } from '../utils/useTreeOperations';
-import useTreeOperationsProvider from '../utils/useTreeOperationsProvider';
-import DocumentInNode from './DocumentInNode';
-import TreeEditorErrorBoundary from './TreeEditorErrorBoundary';
-/**
- * The loaded tree users interact with
- */
-var TreeEditor = function (props) {
-    var _a = useAllItems(props.options), allItemsStatus = _a.status, allItems = _a.allItems;
-    var unaddedItems = getUnaddedItems({ tree: props.tree, allItems: allItems });
-    var _b = useLocalTree({
-        tree: props.tree,
-        allItems: allItems
-    }), localTree = _b.localTree, handleVisibilityToggle = _b.handleVisibilityToggle;
-    var operations = useTreeOperationsProvider({
-        patchPrefix: props.patchPrefix,
-        onChange: props.onChange,
-        localTree: localTree
-    });
-    return (_jsx(TreeEditorErrorBoundary, { children: _jsx(TreeOperationsContext.Provider, __assign({ value: __assign(__assign({}, operations), { allItemsStatus: allItemsStatus }) }, { children: _jsxs(Stack, __assign({ space: 4, paddingTop: 4 }, { children: [_jsx(Card, __assign({ style: { minHeight: getTreeHeight(localTree) }, 
-                        // Only include borderBottom if there's something to show in unadded items
-                        borderBottom: allItemsStatus !== 'success' || (unaddedItems === null || unaddedItems === void 0 ? void 0 : unaddedItems.length) > 0 }, { children: _jsx(SortableTree, __assign({ maxDepth: props.options.maxDepth, onChange: function () {
-                                // Do nothing. onMoveNode will do all the work
-                            }, onVisibilityToggle: handleVisibilityToggle, onMoveNode: function (data) {
-                                return operations.handleMovedNode(data);
-                            }, treeData: localTree }, getCommonTreeProps({
-                            placeholder: {
-                                title: 'Add items from the list below'
-                            }
-                        })), void 0) }), void 0), allItemsStatus === 'success' && (unaddedItems === null || unaddedItems === void 0 ? void 0 : unaddedItems.length) > 0 && (_jsxs(Stack, __assign({ space: 1, paddingX: 2, paddingTop: 3 }, { children: [_jsxs(Stack, __assign({ space: 2, paddingX: 2, paddingBottom: 3 }, { children: [_jsx(Text, __assign({ size: 2, as: "h2", weight: "semibold" }, { children: "Add more items" }), void 0), _jsx(Text, __assign({ size: 1, muted: true }, { children: "Only published documents are shown." }), void 0)] }), void 0), unaddedItems.map(function (item) { return (_jsx(DocumentInNode, { item: item, action: _jsx(Tooltip, __assign({ portal: true, placement: "left", content: _jsx(Box, __assign({ padding: 2 }, { children: _jsx(Text, __assign({ size: 1 }, { children: "Add to list" }), void 0) }), void 0) }, { children: _jsx(Button, { onClick: function () {
-                                            operations.addItem(item);
-                                        }, mode: "bleed", icon: AddCircleIcon, style: { cursor: 'pointer' } }, void 0) }), void 0) }, item.publishedId || item.draftId)); })] }), void 0)), allItemsStatus === 'loading' && (_jsx(Flex, __assign({ padding: 4, align: 'center', justify: 'center' }, { children: _jsx(Spinner, { size: 3, muted: true }, void 0) }), void 0)), allItemsStatus === 'error' && (_jsx(Flex, __assign({ padding: 4, align: 'center', justify: 'center' }, { children: _jsx(Text, __assign({ size: 2, weight: "semibold" }, { children: "Something went wrong when loading documents" }), void 0) }), void 0))] }), void 0) }), void 0) }, void 0));
-};
-export default TreeEditor;
+"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 icons_1 = require("@sanity/icons");
+var ui_1 = require("@sanity/ui");
+var react_1 = require("react");
+var react_sortable_tree_1 = require("react-sortable-tree");
+var getCommonTreeProps_1 = __importDefault(require("../utils/getCommonTreeProps"));
+var getTreeHeight_1 = __importDefault(require("../utils/getTreeHeight"));
+var treeData_1 = require("../utils/treeData");
+var useAllItems_1 = __importDefault(require("../hooks/useAllItems"));
+var useLocalTree_1 = __importDefault(require("../hooks/useLocalTree"));
+var useTreeOperations_1 = require("../hooks/useTreeOperations");
+var useTreeOperationsProvider_1 = __importDefault(require("../hooks/useTreeOperationsProvider"));
+var DocumentInNode_1 = __importDefault(require("./DocumentInNode"));
+var react_dnd_1 = require("react-dnd");
+var TreeEditorErrorBoundary_1 = require("./TreeEditorErrorBoundary");
+var SuppressedDnDManager_1 = require("./SuppressedDnDManager");
+/**
+ * The loaded tree users interact with
+ */
+var TreeEditor = function (props) {
+    var _a = (0, useAllItems_1.default)(props.options), allItemsStatus = _a.status, allItems = _a.allItems;
+    var unaddedItems = (0, treeData_1.getUnaddedItems)({ tree: props.tree, allItems: allItems });
+    var _b = (0, useLocalTree_1.default)({
+        tree: props.tree,
+        allItems: allItems
+    }), localTree = _b.localTree, handleVisibilityToggle = _b.handleVisibilityToggle;
+    var operations = (0, useTreeOperationsProvider_1.default)({
+        patchPrefix: props.patchPrefix,
+        onChange: props.onChange,
+        localTree: localTree
+    });
+    var onMoveNode = (0, react_1.useCallback)(function (data) {
+        return operations.handleMovedNode(data);
+    }, [operations]);
+    var treeProps = (0, react_1.useMemo)(function () {
+        return (0, getCommonTreeProps_1.default)({
+            placeholder: {
+                title: 'Add items from the list below'
+            }
+        });
+    }, []);
+    var operationContext = (0, react_1.useMemo)(function () { return (__assign(__assign({}, operations), { allItemsStatus: allItemsStatus })); }, [operations, allItemsStatus]);
+    return ((0, jsx_runtime_1.jsx)(TreeEditorErrorBoundary_1.TreeEditorErrorBoundary, { children: (0, jsx_runtime_1.jsx)(react_dnd_1.DndProvider, __assign({ manager: SuppressedDnDManager_1.suppressedDnDManager }, { children: (0, jsx_runtime_1.jsx)(useTreeOperations_1.TreeOperationsContext.Provider, __assign({ value: operationContext }, { children: (0, jsx_runtime_1.jsxs)(ui_1.Stack, __assign({ space: 4, paddingTop: 4 }, { children: [(0, jsx_runtime_1.jsx)(ui_1.Card, __assign({ style: { minHeight: (0, getTreeHeight_1.default)(localTree) }, 
+                            // Only include borderBottom if there's something to show in unadded items
+                            borderBottom: allItemsStatus !== 'success' || (unaddedItems === null || unaddedItems === void 0 ? void 0 : unaddedItems.length) > 0 }, { children: (0, jsx_runtime_1.jsx)(react_sortable_tree_1.SortableTreeWithoutDndContext, __assign({ maxDepth: props.options.maxDepth, onChange: doNothingOnChange, onVisibilityToggle: handleVisibilityToggle, canDrop: canDrop, onMoveNode: onMoveNode, treeData: localTree }, treeProps), void 0) }), void 0), allItemsStatus === 'success' && (unaddedItems === null || unaddedItems === void 0 ? void 0 : unaddedItems.length) > 0 && ((0, jsx_runtime_1.jsxs)(ui_1.Stack, __assign({ space: 1, paddingX: 2, paddingTop: 3 }, { children: [(0, jsx_runtime_1.jsxs)(ui_1.Stack, __assign({ space: 2, paddingX: 2, paddingBottom: 3 }, { children: [(0, jsx_runtime_1.jsx)(ui_1.Text, __assign({ size: 2, as: "h2", weight: "semibold" }, { children: "Add more items" }), void 0), (0, jsx_runtime_1.jsx)(ui_1.Text, __assign({ size: 1, muted: true }, { children: "Only published documents are shown." }), void 0)] }), void 0), unaddedItems.map(function (item) { return ((0, jsx_runtime_1.jsx)(DocumentInNode_1.default, { item: item, action: (0, jsx_runtime_1.jsx)(ui_1.Tooltip, __assign({ portal: true, placement: "left", content: (0, jsx_runtime_1.jsx)(ui_1.Box, __assign({ padding: 2 }, { children: (0, jsx_runtime_1.jsx)(ui_1.Text, __assign({ size: 1 }, { children: "Add to list" }), void 0) }), void 0) }, { children: (0, jsx_runtime_1.jsx)(ui_1.Button, { onClick: function () {
+                                                operations.addItem(item);
+                                            }, mode: "bleed", icon: icons_1.AddCircleIcon, style: { cursor: 'pointer' } }, void 0) }), void 0) }, item.publishedId || item.draftId)); })] }), void 0)), allItemsStatus === 'loading' && ((0, jsx_runtime_1.jsx)(ui_1.Flex, __assign({ padding: 4, align: 'center', justify: 'center' }, { children: (0, jsx_runtime_1.jsx)(ui_1.Spinner, { size: 3, muted: true }, void 0) }), void 0)), allItemsStatus === 'error' && ((0, jsx_runtime_1.jsx)(ui_1.Flex, __assign({ padding: 4, align: 'center', justify: 'center' }, { children: (0, jsx_runtime_1.jsx)(ui_1.Text, __assign({ size: 2, weight: "semibold" }, { children: "Something went wrong when loading documents" }), void 0) }), void 0))] }), void 0) }), void 0) }), void 0) }, void 0));
+};
+function canDrop(_a) {
+    var nextPath = _a.nextPath, prevPath = _a.prevPath;
+    var insideItself = nextPath.length >= prevPath.length &&
+        prevPath.every(function (pathIndex, index) { return nextPath[index] === pathIndex; });
+    return !insideItself;
+}
+var doNothingOnChange = function () {
+    // Do nothing. onMoveNode will do all the work
+};
+exports.default = TreeEditor;

package/lib/components/TreeEditorErrorBoundary.d.ts

@@ -1,17 +1,16 @@
-import React from 'react';
-interface ErrorInfo {
-    title: string;
-    description?: string;
-}
-declare class TreeEditorErrorBoundary extends React.Component<any, {
-    error?: ErrorInfo;
-}> {
-    constructor(props: any);
-    static getDerivedStateFromError(error: unknown): {
-        error: undefined;
-    } | {
-        error: ErrorInfo;
-    };
-    render(): JSX.Element;
-}
-export default TreeEditorErrorBoundary;
+import * as React from '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.
+ *  */
+export declare class TreeEditorErrorBoundary extends React.Component {
+    componentDidCatch(): void;
+    render(): React.ReactNode;
+}

package/lib/components/TreeEditorErrorBoundary.js

@@ -1,69 +1,74 @@
-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 __());
-    };
-})();
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useToast } from '@sanity/ui';
-import React from 'react';
-var ErrorToast = function (_a) {
-    var error = _a.error;
-    var push = useToast().push;
-    React.useEffect(function () {
-        if (error === null || error === void 0 ? void 0 : error.title) {
-            push({
-                title: error.title,
-                description: error.description,
-                closable: true,
-                status: 'error',
-                id: 'hierarchical-error'
-            });
-        }
-    }, [error]);
-    return null;
-};
-var TreeEditorErrorBoundary = /** @class */ (function (_super) {
-    __extends(TreeEditorErrorBoundary, _super);
-    function TreeEditorErrorBoundary(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = { error: undefined };
-        return _this;
-    }
-    Object.defineProperty(TreeEditorErrorBoundary, "getDerivedStateFromError", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function (error) {
-            if (!error) {
-                return {
-                    error: undefined
-                };
-            }
-            return {
-                error: {
-                    title: 'Something went wrong'
-                }
-            };
-        }
-    });
-    Object.defineProperty(TreeEditorErrorBoundary.prototype, "render", {
-        enumerable: false,
-        configurable: true,
-        writable: true,
-        value: function () {
-            return (_jsxs(React.Fragment, { children: [_jsx(ErrorToast, { error: this.state.error }, void 0), this.props.children] }, void 0));
-        }
-    });
-    return TreeEditorErrorBoundary;
-}(React.Component));
-export 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,35 +1,59 @@
-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);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import TreeNodeRendererScaffold from './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(_jsxs("div", __assign({ style: props.style }, { children: [_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), _jsx(TreeNodeRendererScaffold, __assign({}, props), void 0)] }), void 0));
-};
-export 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 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,42 +1,44 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { blue } from '@sanity/color';
-import { createGlobalStyle } from 'styled-components';
-// Adapted from react-sortable-tree/src/tree-node.js
-var ScaffoldStyles = 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"])), blue[400].hex, blue[400].hex, blue[400].hex, blue[400].hex, blue[400].hex, 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 (_jsx("div", { style: style, className: "rst__unclickable rst__absoluteLineBlock ".concat(highlightLineClass || ''), tabIndex: -1 }, i));
-    });
-    return (_jsxs(_Fragment, { children: [scaffold, _jsx(ScaffoldStyles, {}, void 0)] }, void 0));
-};
-export 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 {};