@sanity/hierarchical-document-list 0.1.1 → 1.0.0

package/lib/components/NodeContentRenderer.js

@@ -1,3 +1,4 @@
+"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;
@@ -13,20 +14,43 @@ var __assign = (this && this.__assign) || function () {
     };
     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';
-import { Box, Button, Flex, Spinner } from '@sanity/ui';
-import React from 'react';
-import { isDescendant } from 'react-sortable-tree';
-import styled from 'styled-components';
-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"
+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 color_1 = require("@sanity/color");
+var icons_1 = require("@sanity/icons");
+var ui_1 = require("@sanity/ui");
+var React = __importStar(require("react"));
+var react_sortable_tree_1 = require("react-sortable-tree");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Root = styled_components_1.default.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);
+])), color_1.cyan[50].hex, color_1.gray[400].hex, color_1.red[50].hex);
 /**
  * Customization of react-sortable-tree's default node.
  * Created in order to use Sanity UI for styles.
@@ -42,12 +66,12 @@ var NodeContentRenderer = function (props) {
         if (typeof node.children === 'function' && node.expanded) {
             // Show a loading symbol on the handle when the children are expanded
             //  and yet still defined by a function (a callback to fetch the children)
-            return _jsx(Spinner, {}, void 0);
+            return (0, jsx_runtime_1.jsx)(ui_1.Spinner, {}, void 0);
         }
-        var BtnElement = (_jsx("div", { children: _jsx(Button, __assign({ mode: "bleed", paddingX: 0, paddingY: 1, style: {
+        var BtnElement = ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.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: (0, jsx_runtime_1.jsx)(icons_1.DragHandleIcon, { style: { marginBottom: '-0.1em' } }, void 0) }), void 0) }, void 0));
         // Don't allow editors to drag invalid documents
         if (!node.publishedId) {
             return BtnElement;
@@ -57,25 +81,25 @@ var NodeContentRenderer = function (props) {
             dropEffect: 'copy'
         });
     }, [canDrag, node, typeof node.children === 'function']);
-    var isDraggedDescendant = props.draggedNode && isDescendant(props.draggedNode, node);
+    var isDraggedDescendant = props.draggedNode && (0, react_sortable_tree_1.isDescendant)(props.draggedNode, node);
     var isLandingPadActive = !props.didDrop && props.isDragging;
-    return (_jsxs(Box, __assign({ style: { position: 'relative' } }, { children: [props.toggleChildrenVisibility &&
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Box, __assign({ style: { position: 'relative' } }, { children: [props.toggleChildrenVisibility &&
                 node.children &&
-                (node.children.length > 0 || typeof node.children === 'function') && (_jsx("div", __assign({ style: {
+                (node.children.length > 0 || typeof node.children === 'function') && ((0, jsx_runtime_1.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: function () {
+                } }, { children: (0, jsx_runtime_1.jsx)(ui_1.Button, { "aria-label": node.expanded ? 'Collapse' : 'Expand', icon: node.expanded ? ((0, jsx_runtime_1.jsx)(icons_1.ChevronDownIcon, { color: color_1.gray[200].hex }, void 0)) : ((0, jsx_runtime_1.jsx)(icons_1.ChevronRightIcon, { color: color_1.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: {
+                    } }, void 0) }), void 0)), props.connectDragPreview((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Root, __assign({ "data-landing": isLandingPadActive, "data-cancel": isLandingPadActive && !props.canDrop, style: {
                         opacity: isDraggedDescendant ? 0.5 : 1
-                    } }, { children: _jsxs(Flex, __assign({ align: "center" }, { children: [Handle, typeof nodeTitle === 'function' ? nodeTitle(props) : nodeTitle] }), void 0) }), void 0) }, void 0))] }), void 0));
+                    } }, { children: (0, jsx_runtime_1.jsxs)(ui_1.Flex, __assign({ align: "center" }, { children: [Handle, typeof nodeTitle === 'function' ? nodeTitle(props) : nodeTitle] }), void 0) }), void 0) }, void 0))] }), void 0));
 };
-export default NodeContentRenderer;
+exports.default = NodeContentRenderer;
 var templateObject_1;

package/lib/components/PlaceholderDropzone.d.ts

@@ -1,5 +1,5 @@
 import { CardTone } from '@sanity/ui';
-import React from 'react';
+import * as React from 'react';
 import { PlaceholderRendererProps } from 'react-sortable-tree';
 declare const PlaceholderDropzone: React.FC<{
     tone?: CardTone;

package/lib/components/PlaceholderDropzone.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,8 +10,9 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Box, Card, Stack, Text } from '@sanity/ui';
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ui_1 = require("@sanity/ui");
 var PlaceholderDropzone = function (props) {
     var isValid = props.isOver && props.canDrop;
     var isInvalid = props.isOver && !props.canDrop;
@@ -21,8 +23,8 @@ var PlaceholderDropzone = function (props) {
     if (isInvalid) {
         tone = 'caution';
     }
-    return (_jsx(Box, __assign({ padding: 3 }, { children: _jsx(Card, __assign({ padding: 5, radius: 2, border: true, tone: tone, style: {
+    return ((0, jsx_runtime_1.jsx)(ui_1.Box, __assign({ padding: 3 }, { children: (0, jsx_runtime_1.jsx)(ui_1.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));
+            } }, { children: (0, jsx_runtime_1.jsxs)(ui_1.Stack, __assign({ space: 2, style: { textAlign: 'center' } }, { children: [(0, jsx_runtime_1.jsxs)(ui_1.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 && (0, jsx_runtime_1.jsx)(ui_1.Text, __assign({ size: 1 }, { children: props.subtitle }), void 0), props.children] }), void 0) }), void 0) }), void 0));
 };
-export default PlaceholderDropzone;
+exports.default = PlaceholderDropzone;

package/lib/components/TreeEditor.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { StoredTreeItem, TreeInputOptions } from '../types';
 /**
  * The loaded tree users interact with

package/lib/components/TreeEditor.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,46 +10,50 @@ var __assign = (this && this.__assign) || function () {
     };
     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';
+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_sortable_tree_1 = __importDefault(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 TreeEditorErrorBoundary_1 = __importDefault(require("./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({
+    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 = useTreeOperationsProvider({
+    var operations = (0, useTreeOperationsProvider_1.default)({
         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) }, 
+    return ((0, jsx_runtime_1.jsx)(TreeEditorErrorBoundary_1.default, { children: (0, jsx_runtime_1.jsx)(useTreeOperations_1.TreeOperationsContext.Provider, __assign({ value: __assign(__assign({}, operations), { allItemsStatus: allItemsStatus }) }, { 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: _jsx(SortableTree, __assign({ maxDepth: props.options.maxDepth, onChange: function () {
+                        borderBottom: allItemsStatus !== 'success' || (unaddedItems === null || unaddedItems === void 0 ? void 0 : unaddedItems.length) > 0 }, { children: (0, jsx_runtime_1.jsx)(react_sortable_tree_1.default, __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({
+                            }, treeData: localTree }, (0, getCommonTreeProps_1.default)({
                             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 () {
+                        })), 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: 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));
+                                        }, 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));
 };
-export default TreeEditor;
+exports.default = TreeEditor;

package/lib/components/TreeEditorErrorBoundary.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import * as React from 'react';
 declare const TreeEditorErrorBoundary: React.FC;
 export default TreeEditorErrorBoundary;

package/lib/components/TreeEditorErrorBoundary.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,13 +10,33 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ErrorBoundary, useToast } from '@sanity/ui';
-import React from 'react';
+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 = useToast().push;
+    var push = (0, ui_1.useToast)().push;
     React.useEffect(function () {
         if ((error === null || error === void 0 ? void 0 : error.error) && DISPLAY_ERROR) {
             push({
@@ -31,8 +52,8 @@ var ErrorToast = function (_a) {
 };
 var TreeEditorErrorBoundary = function (props) {
     var _a = React.useState(undefined), exception = _a[0], setException = _a[1];
-    return (_jsxs(ErrorBoundary, __assign({ onCatch: function (newException) {
+    return ((0, jsx_runtime_1.jsxs)(ui_1.ErrorBoundary, __assign({ onCatch: function (newException) {
             setException(newException);
-        } }, { children: [_jsx(ErrorToast, { error: exception }, void 0), props.children] }), void 0));
+        } }, { children: [(0, jsx_runtime_1.jsx)(ErrorToast, { error: exception }, void 0), props.children] }), void 0));
 };
-export default TreeEditorErrorBoundary;
+exports.default = TreeEditorErrorBoundary;

package/lib/components/TreeNodeRenderer.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,9 +10,32 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import TreeNodeRendererScaffold from './TreeNodeRendererScaffold';
+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
  */
@@ -21,7 +45,7 @@ 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: {
+    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) {
@@ -30,6 +54,6 @@ var TreeNodeRenderer = function (props) {
                         canDrop: canDrop,
                         draggedNode: draggedNode
                     });
-                }) }), void 0), _jsx(TreeNodeRendererScaffold, __assign({}, props), void 0)] }), void 0));
+                }) }), void 0), (0, jsx_runtime_1.jsx)(TreeNodeRendererScaffold_1.default, __assign({}, props), void 0)] }), void 0));
 };
-export default TreeNodeRenderer;
+exports.default = TreeNodeRenderer;

package/lib/components/TreeNodeRendererScaffold.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+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,12 +1,14 @@
+"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;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { blue } from '@sanity/color';
-import { createGlobalStyle } from 'styled-components';
+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 = 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 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
@@ -34,9 +36,9 @@ var TreeNodeRendererScaffold = function (props) {
             width: scaffoldBlockPxWidth,
             left: scaffoldBlockPxWidth * i
         };
-        return (_jsx("div", { style: style, className: "rst__unclickable rst__absoluteLineBlock ".concat(highlightLineClass || ''), tabIndex: -1 }, i));
+        return ((0, jsx_runtime_1.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));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [scaffold, (0, jsx_runtime_1.jsx)(ScaffoldStyles, {}, void 0)] }, void 0));
 };
-export default TreeNodeRendererScaffold;
+exports.default = TreeNodeRendererScaffold;
 var templateObject_1;

package/lib/createDeskHierarchy.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,41 +10,57 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
-import S from '@sanity/desk-tool/structure-builder';
-import { AddIcon } from '@sanity/icons';
-import TreeDeskStructure from './TreeDeskStructure';
+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) {
-        throw new Error('[hierarchical input] Please add a documentId to your tree');
+        (0, throwError_1.default)('invalidDocumentId');
     }
     if (!Array.isArray(referenceTo)) {
-        throw new Error("[hierarchical input] Missing valid 'referenceTo' in createDeskHierarchy (documentId \"".concat(documentId, "\")"));
+        (0, throwError_1.default)('invalidReferenceTo', "(documentId \"".concat(documentId, "\")"));
     }
-    return function (deskProps) { return _jsx(TreeDeskStructure, __assign({}, deskProps, { options: props }), void 0); };
+    return function (deskProps) { return (0, jsx_runtime_1.jsx)(TreeDeskStructure_1.default, __assign({}, deskProps, { options: props }), void 0); };
 };
-export default function createDeskHierarchy(props) {
+function createDeskHierarchy(props) {
     var documentId = props.documentId, referenceTo = props.referenceTo, referenceOptions = props.referenceOptions;
-    var mainList = ((referenceTo === null || referenceTo === void 0 ? void 0 : referenceTo.length) === 1
-        ? S.documentTypeList(referenceTo[0]).schemaType(referenceTo[0])
-        : S.documentList().filter('_type in $types').params({ types: referenceTo }))
+    // @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((referenceTo || []).map(function (schemaType) {
-        return S.menuItem()
+        .menuItems((safelyCreatableTypes || []).map(function (schemaType) {
+        var _a, _b;
+        return structure_builder_1.default.menuItem()
             .intent({
             type: 'create',
-            params: { type: schemaType, template: schemaType }
+            params: { type: schemaType }
         })
-            // @TODO: get the title for each schema type
-            .title(schemaType)
-            .icon(AddIcon);
+            .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;
         }
-        if (intent === 'create' && referenceTo.includes(context.type)) {
+        // Can create & edit referenced document types
+        if (safelyCreatableTypes.includes(context.type)) {
             return true;
         }
         return false;
@@ -54,7 +71,7 @@ export default function createDeskHierarchy(props) {
     if (referenceOptions === null || referenceOptions === void 0 ? void 0 : referenceOptions.filterParams) {
         mainList = mainList.params(referenceOptions.filterParams);
     }
-    return S.listItem()
+    return structure_builder_1.default.listItem()
         .id(documentId)
         .title(props.title || documentId)
         .icon(props.icon)
@@ -65,3 +82,4 @@ export default function createDeskHierarchy(props) {
         __preserveInstance: true
     }, props.title ? { title: props.title } : {}));
 }
+exports.default = createDeskHierarchy;

package/lib/createHierarchicalSchemas.d.ts

@@ -0,0 +1,78 @@
+import { ArraySchemaType } from '@sanity/types';
+import * as React from 'react';
+import { TreeDeskStructureProps, TreeFieldSchema } from './types';
+declare type SchemaOptions = Omit<TreeDeskStructureProps, 'documentId' | 'maxDepth'>;
+export declare function createHierarchicalField({ name, title, options, ...rest }: TreeFieldSchema): Omit<ArraySchemaType, 'type' | 'jsonType' | 'of'> & {
+    type: string;
+    inputComponent: React.FC<any>;
+    of?: any[];
+};
+export default function createHierarchicalSchemas(options: SchemaOptions): ({
+    name: string;
+    title: string;
+    type: string;
+    fields: ({
+        name: string;
+        type: string;
+    } | {
+        name: string;
+        type: string;
+        title: string;
+        fields: ({
+            name: string;
+            type: string;
+            weak?: undefined;
+            to?: undefined;
+            options?: undefined;
+        } | {
+            name: string;
+            type: string;
+            weak: boolean;
+            to: {
+                type: string;
+            }[];
+            options: {
+                filter?: string | undefined;
+                filterParams?: Record<string, unknown> | undefined;
+            } | undefined;
+        })[];
+    })[];
+} | {
+    name: string;
+    title: string;
+    type: string;
+    of: ({
+        name: string;
+        title: string;
+        type: string;
+        fields: ({
+            name: string;
+            type: string;
+        } | {
+            name: string;
+            type: string;
+            title: string;
+            fields: ({
+                name: string;
+                type: string;
+                weak?: undefined;
+                to?: undefined;
+                options?: undefined;
+            } | {
+                name: string;
+                type: string;
+                weak: boolean;
+                to: {
+                    type: string;
+                }[];
+                options: {
+                    filter?: string | undefined;
+                    filterParams?: Record<string, unknown> | undefined;
+                } | undefined;
+            })[];
+        })[];
+    } | {
+        type: string;
+    })[];
+})[];
+export {};