@sanity/hierarchical-document-list 0.1.0-next.1 → 0.1.1

package/lib/components/NodeContentRenderer.js

@@ -1,3 +1,18 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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 { cyan, gray, red } from '@sanity/color';
 import { ChevronDownIcon, ChevronRightIcon, DragHandleIcon } from '@sanity/icons';
@@ -5,39 +20,22 @@ import { Box, Button, Flex, Spinner } from '@sanity/ui';
 import React from 'react';
 import { isDescendant } from 'react-sortable-tree';
 import styled from 'styled-components';
-const Root = styled.div `
-  // Adapted from react-sortable-tree/style.css
-  &[data-landing='true'] > *,
-  &[data-cancel='true'] > * {
-    opacity: 0 !important;
-  }
-  &[data-landing='true']::before,
-  &[data-cancel='true']::before {
-    background-color: ${cyan[50].hex};
-    border: 2px dashed ${gray[400].hex};
-    border-radius: 3px;
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: -1;
-  }
-
-  &[data-cancel='true']::before {
-    background-color: ${red[50].hex};
-  }
-`;
+var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  // Adapted from react-sortable-tree/style.css\n  &[data-landing='true'] > *,\n  &[data-cancel='true'] > * {\n    opacity: 0 !important;\n  }\n  &[data-landing='true']::before,\n  &[data-cancel='true']::before {\n    background-color: ", ";\n    border: 2px dashed ", ";\n    border-radius: 3px;\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: -1;\n  }\n\n  &[data-cancel='true']::before {\n    background-color: ", ";\n  }\n"], ["\n  // Adapted from react-sortable-tree/style.css\n  &[data-landing='true'] > *,\n  &[data-cancel='true'] > * {\n    opacity: 0 !important;\n  }\n  &[data-landing='true']::before,\n  &[data-cancel='true']::before {\n    background-color: ", ";\n    border: 2px dashed ", ";\n    border-radius: 3px;\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: -1;\n  }\n\n  &[data-cancel='true']::before {\n    background-color: ", ";\n  }\n"
+    /**
+     * Customization of react-sortable-tree's default node.
+     * Created in order to use Sanity UI for styles.
+     * Reference: https://github.com/frontend-collective/react-sortable-tree/blob/master/src/node-renderer-default.js
+     */
+])), cyan[50].hex, gray[400].hex, red[50].hex);
 /**
  * Customization of react-sortable-tree's default node.
  * Created in order to use Sanity UI for styles.
  * Reference: https://github.com/frontend-collective/react-sortable-tree/blob/master/src/node-renderer-default.js
  */
-const NodeContentRenderer = (props) => {
-    const { node, path, treeIndex, canDrag = false } = props;
-    const nodeTitle = node.title;
-    const Handle = React.useMemo(() => {
+var NodeContentRenderer = function (props) {
+    var node = props.node, path = props.path, treeIndex = props.treeIndex, _a = props.canDrag, canDrag = _a === void 0 ? false : _a;
+    var nodeTitle = node.title;
+    var Handle = React.useMemo(function () {
         if (!canDrag) {
             return null;
         }
@@ -46,10 +44,10 @@ const NodeContentRenderer = (props) => {
             //  and yet still defined by a function (a callback to fetch the children)
             return _jsx(Spinner, {}, void 0);
         }
-        const BtnElement = (_jsx("div", { children: _jsx(Button, { mode: "bleed", paddingX: 0, paddingY: 1, style: {
+        var BtnElement = (_jsx("div", { children: _jsx(Button, __assign({ mode: "bleed", paddingX: 0, paddingY: 1, style: {
                     cursor: node.publishedId ? 'grab' : 'default',
                     fontSize: '1.5625rem'
-                }, "data-ui": "DragHandleButton", "data-drag-handle": canDrag, disabled: !node.publishedId, children: _jsx(DragHandleIcon, { style: { marginBottom: '-0.1em' } }, void 0) }, void 0) }, void 0));
+                }, "data-ui": "DragHandleButton", "data-drag-handle": canDrag, disabled: !node.publishedId }, { children: _jsx(DragHandleIcon, { style: { marginBottom: '-0.1em' } }, void 0) }), void 0) }, void 0));
         // Don't allow editors to drag invalid documents
         if (!node.publishedId) {
             return BtnElement;
@@ -59,21 +57,25 @@ const NodeContentRenderer = (props) => {
             dropEffect: 'copy'
         });
     }, [canDrag, node, typeof node.children === 'function']);
-    const isDraggedDescendant = props.draggedNode && isDescendant(props.draggedNode, node);
-    const isLandingPadActive = !props.didDrop && props.isDragging;
-    return (_jsxs(Box, { style: { position: 'relative' }, children: [props.toggleChildrenVisibility &&
+    var isDraggedDescendant = props.draggedNode && isDescendant(props.draggedNode, node);
+    var isLandingPadActive = !props.didDrop && props.isDragging;
+    return (_jsxs(Box, __assign({ style: { position: 'relative' } }, { children: [props.toggleChildrenVisibility &&
                 node.children &&
-                (node.children.length > 0 || typeof node.children === 'function') && (_jsx("div", { style: {
+                (node.children.length > 0 || typeof node.children === 'function') && (_jsx("div", __assign({ style: {
                     position: 'absolute',
                     left: '-2px',
                     top: '40%',
                     transform: 'translate(-100%, -50%)'
-                }, children: _jsx(Button, { "aria-label": node.expanded ? 'Collapse' : 'Expand', icon: node.expanded ? (_jsx(ChevronDownIcon, { color: gray[200].hex }, void 0)) : (_jsx(ChevronRightIcon, { color: gray[200].hex }, void 0)), mode: "bleed", fontSize: 2, padding: 1, type: "button", onClick: () => props.toggleChildrenVisibility?.({
-                        node,
-                        path,
-                        treeIndex
-                    }) }, void 0) }, void 0)), props.connectDragPreview(_jsx("div", { children: _jsx(Root, { "data-landing": isLandingPadActive, "data-cancel": isLandingPadActive && !props.canDrop, style: {
+                } }, { children: _jsx(Button, { "aria-label": node.expanded ? 'Collapse' : 'Expand', icon: node.expanded ? (_jsx(ChevronDownIcon, { color: gray[200].hex }, void 0)) : (_jsx(ChevronRightIcon, { color: gray[200].hex }, void 0)), mode: "bleed", fontSize: 2, padding: 1, type: "button", onClick: function () {
+                        var _a;
+                        return (_a = props.toggleChildrenVisibility) === null || _a === void 0 ? void 0 : _a.call(props, {
+                            node: node,
+                            path: path,
+                            treeIndex: treeIndex
+                        });
+                    } }, void 0) }), void 0)), props.connectDragPreview(_jsx("div", { children: _jsx(Root, __assign({ "data-landing": isLandingPadActive, "data-cancel": isLandingPadActive && !props.canDrop, style: {
                         opacity: isDraggedDescendant ? 0.5 : 1
-                    }, children: _jsxs(Flex, { align: "center", children: [Handle, typeof nodeTitle === 'function' ? nodeTitle(props) : nodeTitle] }, void 0) }, void 0) }, void 0))] }, void 0));
+                    } }, { children: _jsxs(Flex, __assign({ align: "center" }, { children: [Handle, typeof nodeTitle === 'function' ? nodeTitle(props) : nodeTitle] }), void 0) }), void 0) }, void 0))] }), void 0));
 };
 export default NodeContentRenderer;
+var templateObject_1;

package/lib/components/PlaceholderDropzone.js

@@ -1,17 +1,28 @@
+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 { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Card, Stack, Text } from '@sanity/ui';
-const PlaceholderDropzone = (props) => {
-    const isValid = props.isOver && props.canDrop;
-    const isInvalid = props.isOver && !props.canDrop;
-    let tone = 'transparent';
+import { Box, Card, Stack, Text } from '@sanity/ui';
+var PlaceholderDropzone = function (props) {
+    var isValid = props.isOver && props.canDrop;
+    var isInvalid = props.isOver && !props.canDrop;
+    var tone = 'transparent';
     if (isValid) {
         tone = 'positive';
     }
     if (isInvalid) {
         tone = 'caution';
     }
-    return (_jsx(Card, { padding: 5, radius: 2, border: true, tone: tone, style: {
-            borderStyle: props.isOver ? undefined : 'dashed'
-        }, children: _jsxs(Stack, { space: 2, style: { textAlign: 'center' }, children: [_jsxs(Text, { size: 2, as: "h2", muted: true, children: [!props.isOver && props.title, isValid && 'Drop here', isInvalid && 'Invalid location or element'] }, void 0), props.subtitle && _jsx(Text, { size: 1, children: props.subtitle }, void 0), props.children] }, void 0) }, void 0));
+    return (_jsx(Box, __assign({ padding: 3 }, { children: _jsx(Card, __assign({ padding: 5, radius: 2, border: true, tone: tone, style: {
+                borderStyle: props.isOver ? undefined : 'dashed'
+            } }, { children: _jsxs(Stack, __assign({ space: 2, style: { textAlign: 'center' } }, { children: [_jsxs(Text, __assign({ size: 2, as: "h2", muted: true }, { children: [!props.isOver && props.title, isValid && 'Drop here', isInvalid && 'Invalid location or element'] }), void 0), props.subtitle && _jsx(Text, __assign({ size: 1 }, { children: props.subtitle }), void 0), props.children] }), void 0) }), void 0) }), void 0));
 };
 export default PlaceholderDropzone;

package/lib/components/TreeEditor.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { SanityTreeItem, TreeInputOptions } from '../types';
+import { StoredTreeItem, TreeInputOptions } from '../types';
 /**
  * The loaded tree users interact with
  */
 declare const TreeEditor: React.FC<{
-    tree: SanityTreeItem[];
+    tree: StoredTreeItem[];
     onChange: (patch: unknown) => void;
     options: TreeInputOptions;
     patchPrefix?: string;

package/lib/components/TreeEditor.js

@@ -1,3 +1,14 @@
+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';
@@ -14,28 +25,30 @@ import TreeEditorErrorBoundary from './TreeEditorErrorBoundary';
 /**
  * The loaded tree users interact with
  */
-const TreeEditor = (props) => {
-    const { status: allItemsStatus, allItems } = useAllItems(props.options);
-    const unaddedItems = getUnaddedItems({ tree: props.tree, allItems });
-    const { localTree, handleVisibilityToggle } = useLocalTree({
+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
-    });
-    const operations = useTreeOperationsProvider({
+        allItems: allItems
+    }), localTree = _b.localTree, handleVisibilityToggle = _b.handleVisibilityToggle;
+    var operations = useTreeOperationsProvider({
         patchPrefix: props.patchPrefix,
         onChange: props.onChange,
-        localTree
+        localTree: localTree
     });
-    return (_jsx(TreeEditorErrorBoundary, { children: _jsx(TreeOperationsContext.Provider, { value: { ...operations, allItemsStatus }, children: _jsxs(Stack, { space: 4, paddingTop: 4, children: [_jsx(Card, { style: { minHeight: getTreeHeight(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?.length > 0, children: _jsx(SortableTree, { maxDepth: props.options.maxDepth, onChange: () => {
+                        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: operations.handleMovedNode, treeData: localTree, ...getCommonTreeProps({
-                                placeholder: {
-                                    title: 'Add items by dragging them here'
-                                }
-                            }) }, void 0) }, void 0), allItemsStatus === 'success' && unaddedItems?.length > 0 && (_jsxs(Stack, { space: 1, paddingX: 2, paddingTop: 3, children: [_jsxs(Stack, { space: 2, paddingX: 2, paddingBottom: 3, children: [_jsx(Text, { size: 2, as: "h2", weight: "semibold", children: "Add more items" }, void 0), _jsx(Text, { size: 1, muted: true, children: "Only published documents are shown." }, void 0)] }, void 0), unaddedItems.map((item) => (_jsx(DocumentInNode, { item: item, action: _jsx(Tooltip, { placement: "left", content: _jsx(Box, { padding: 2, children: _jsx(Text, { size: 1, children: "Add to list" }, void 0) }, void 0), children: _jsx(Button, { onClick: () => {
+                            }, 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, { padding: 4, align: 'center', justify: 'center', children: _jsx(Spinner, { size: 3, muted: true }, void 0) }, void 0)), allItemsStatus === 'error' && (_jsx(Flex, { padding: 4, align: 'center', justify: 'center', children: _jsx(Text, { size: 2, weight: "semibold", children: "Something went wrong when loading documents" }, void 0) }, void 0))] }, void 0) }, void 0) }, void 0));
+                                        }, 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;

package/lib/components/TreeEditorErrorBoundary.d.ts

@@ -1,17 +1,3 @@
 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;
-}
+declare const TreeEditorErrorBoundary: React.FC;
 export default TreeEditorErrorBoundary;

package/lib/components/TreeEditorErrorBoundary.js

@@ -1,13 +1,26 @@
+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 { useToast } from '@sanity/ui';
+import { ErrorBoundary, useToast } from '@sanity/ui';
 import React from 'react';
-const ErrorToast = ({ error }) => {
-    const { push } = useToast();
-    React.useEffect(() => {
-        if (error?.title) {
+var DISPLAY_ERROR = false;
+var ErrorToast = function (_a) {
+    var error = _a.error;
+    var push = useToast().push;
+    React.useEffect(function () {
+        if ((error === null || error === void 0 ? void 0 : error.error) && DISPLAY_ERROR) {
             push({
-                title: error.title,
-                description: error.description,
+                title: error.error.name,
+                description: error.error.message,
                 closable: true,
                 status: 'error',
                 id: 'hierarchical-error'
@@ -16,25 +29,10 @@ const ErrorToast = ({ error }) => {
     }, [error]);
     return null;
 };
-class TreeEditorErrorBoundary extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = { error: undefined };
-    }
-    static getDerivedStateFromError(error) {
-        if (!error) {
-            return {
-                error: undefined
-            };
-        }
-        return {
-            error: {
-                title: 'Something went wrong'
-            }
-        };
-    }
-    render() {
-        return (_jsxs(React.Fragment, { children: [_jsx(ErrorToast, { error: this.state.error }, void 0), this.props.children] }, void 0));
-    }
-}
+var TreeEditorErrorBoundary = function (props) {
+    var _a = React.useState(undefined), exception = _a[0], setException = _a[1];
+    return (_jsxs(ErrorBoundary, __assign({ onCatch: function (newException) {
+            setException(newException);
+        } }, { children: [_jsx(ErrorToast, { error: exception }, void 0), props.children] }), void 0));
+};
 export default TreeEditorErrorBoundary;

package/lib/components/TreeNodeRenderer.js

@@ -1,22 +1,35 @@
+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
  */
-const BASE_LEFT_PADDING = 10;
-const NESTING_PADDING = 14;
-const TreeNodeRenderer = (props) => {
-    const { children, lowerSiblingCounts, connectDropTarget, isOver, draggedNode, canDrop } = props;
+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
-    const scaffoldBlockCount = lowerSiblingCounts.length;
-    return connectDropTarget(_jsxs("div", { style: props.style, children: [_jsx("div", { style: {
+    var scaffoldBlockCount = lowerSiblingCounts.length;
+    return connectDropTarget(_jsxs("div", __assign({ style: props.style }, { children: [_jsx("div", __assign({ style: {
                     // prettier-ignore
-                    paddingLeft: `${BASE_LEFT_PADDING + (NESTING_PADDING * scaffoldBlockCount)}px`
-                }, children: React.Children.map(children, (child) => React.cloneElement(child, {
-                    isOver,
-                    canDrop,
-                    draggedNode
-                })) }, void 0), _jsx(TreeNodeRendererScaffold, { ...props }, void 0)] }, void 0));
+                    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;

package/lib/components/TreeNodeRendererScaffold.js

@@ -1,145 +1,22 @@
+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
-const ScaffoldStyles = createGlobalStyle `
-  .rst__lineBlock,
-  .rst__absoluteLineBlock {
-    height: 100%;
-    position: relative;
-    display: inline-block;
-    --stroke-width: 3px;
-  }
-
-  .rst__absoluteLineBlock {
-    position: absolute;
-    top: 0;
-  }
-
-  /* Highlight line for pointing to dragged row destination
-   ========================================================================== */
-  /**
- * +--+--+
- * |  |  |
- * |  |  |
- * |  |  |
- * +--+--+
- */
-  .rst__highlightLineVertical {
-    z-index: 3;
-  }
-  .rst__highlightLineVertical::before {
-    position: absolute;
-    content: '';
-    background-color: ${blue[400].hex};
-    width: calc(var(--stroke-width) * 2);
-    margin-left: calc(var(--stroke-width) * -1);
-    left: 50%;
-    top: 0;
-    height: 100%;
-  }
-
-  @keyframes arrow-pulse {
-    0% {
-      transform: translate(0, 0);
-      opacity: 0;
-    }
-    30% {
-      transform: translate(0, 300%);
-      opacity: 1;
-    }
-    70% {
-      transform: translate(0, 700%);
-      opacity: 1;
-    }
-    100% {
-      transform: translate(0, 1000%);
-      opacity: 0;
-    }
-  }
-  .rst__highlightLineVertical::after {
-    content: '';
-    position: absolute;
-    height: 0;
-    margin-left: calc(var(--stroke-width) * -1);
-    left: 50%;
-    top: 0;
-    border-left: var(--stroke-width) solid transparent;
-    border-right: var(--stroke-width) solid transparent;
-    border-top: var(--stroke-width) solid white;
-    animation: arrow-pulse 1s infinite linear both;
-  }
-
-  /**
- * +-----+
- * |     |
- * |  +--+
- * |  |  |
- * +--+--+
- */
-  .rst__highlightTopLeftCorner::before {
-    z-index: 3;
-    content: '';
-    position: absolute;
-    border-top: solid calc(var(--stroke-width) * 2) ${blue[400].hex};
-    border-left: solid calc(var(--stroke-width) * 2) ${blue[400].hex};
-    box-sizing: border-box;
-    height: calc(50% + var(--stroke-width));
-    top: 50%;
-    margin-top: calc(var(--stroke-width) * -1);
-    right: 0;
-    width: calc(50% + var(--stroke-width));
-  }
-
-  /**
- * +--+--+
- * |  |  |
- * |  |  |
- * |  +->|
- * +-----+
- */
-  .rst__highlightBottomLeftCorner {
-    z-index: 3;
-  }
-  .rst__highlightBottomLeftCorner::before {
-    content: '';
-    position: absolute;
-    border-bottom: solid calc(var(--stroke-width) * 2) ${blue[400].hex};
-    border-left: solid calc(var(--stroke-width) * 2) ${blue[400].hex};
-    box-sizing: border-box;
-    height: calc(100% + var(--stroke-width));
-    top: 0;
-    right: calc(var(--stroke-width) * 3);
-    width: calc(50% - calc(var(--stroke-width) * 2));
-  }
-
-  .rst__highlightBottomLeftCorner::after {
-    content: '';
-    position: absolute;
-    height: 0;
-    right: 0;
-    top: 100%;
-    margin-top: calc(var(--stroke-width) * -3);
-    border-top: calc(var(--stroke-width) * 3) solid transparent;
-    border-bottom: calc(var(--stroke-width) * 3) solid transparent;
-    border-left: calc(var(--stroke-width) * 3) solid ${blue[400].hex};
-  }
-
-  .rst__unclickable {
-    pointer-events: none;
-    margin-top: -calc(var(--stroke-width) * 3);
-  }
-`;
-const TreeNodeRendererScaffold = (props) => {
-    const { lowerSiblingCounts, scaffoldBlockPxWidth, listIndex, swapDepth, swapFrom, swapLength, treeIndex } = props;
+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
-    const scaffold = lowerSiblingCounts.map((lowerSiblingCount, i) => {
+    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
-        let highlightLineClass = '';
+        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)
@@ -153,12 +30,13 @@ const TreeNodeRendererScaffold = (props) => {
             // This block is between the bottom and top
             highlightLineClass = 'rst__highlightLineVertical';
         }
-        const style = {
+        var style = {
             width: scaffoldBlockPxWidth,
             left: scaffoldBlockPxWidth * i
         };
-        return (_jsx("div", { style: style, className: `rst__unclickable rst__absoluteLineBlock ${highlightLineClass || ''}`, tabIndex: -1 }, 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;

package/lib/createDeskHierarchy.d.ts

@@ -5,6 +5,10 @@ interface TreeProps extends TreeDeskStructureProps {
      * 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 {};