@sanity/hierarchical-document-list 0.1.0-next.3 → 1.0.0

package/lib/components/DocumentPreviewStatus.js

@@ -1,16 +1,39 @@
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { TextWithTone } from '@sanity/base/components';
-import { useTimeAgo } from '@sanity/base/hooks';
-import { EditIcon, PublishIcon } from '@sanity/icons';
-import { Box, Inline, Text, Tooltip } from '@sanity/ui';
-export function TimeAgo({ time }) {
-    const timeAgo = useTimeAgo(time);
-    return (_jsxs("span", { title: timeAgo, children: [timeAgo, timeAgo.toLowerCase().trim().startsWith('just now') ? '' : ' ago'] }, void 0));
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeAgo = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@sanity/base/components");
+var hooks_1 = require("@sanity/base/hooks");
+var icons_1 = require("@sanity/icons");
+var ui_1 = require("@sanity/ui");
+function TimeAgo(_a) {
+    var time = _a.time;
+    var timeAgo = (0, hooks_1.useTimeAgo)(time);
+    return ((0, jsx_runtime_1.jsxs)("span", __assign({ title: timeAgo }, { children: [timeAgo, timeAgo.toLowerCase().trim().startsWith('just now') ? '' : ' ago'] }), void 0));
 }
-const PublishedStatus = ({ document }) => (_jsx(Tooltip, { portal: true, content: _jsx(Box, { padding: 2, children: _jsx(Text, { size: 1, children: document ? (_jsxs(_Fragment, { children: ["Published ", document._updatedAt && _jsx(TimeAgo, { time: document._updatedAt }, void 0)] }, void 0)) : (_jsx(_Fragment, { children: "Not published" }, void 0)) }, void 0) }, void 0), children: _jsx(TextWithTone, { tone: "positive", dimmed: !document, muted: !document, size: 1, children: _jsx(PublishIcon, {}, void 0) }, void 0) }, void 0));
-const DraftStatus = ({ document }) => (_jsx(Tooltip, { portal: true, content: _jsx(Box, { padding: 2, children: _jsx(Text, { size: 1, children: document ? (_jsxs(_Fragment, { children: ["Edited ", document?._updatedAt && _jsx(TimeAgo, { time: document?._updatedAt }, void 0)] }, void 0)) : (_jsx(_Fragment, { children: "No unpublished edits" }, void 0)) }, void 0) }, void 0), children: _jsx(TextWithTone, { tone: "caution", dimmed: !document, muted: !document, size: 1, children: _jsx(EditIcon, {}, void 0) }, void 0) }, void 0));
+exports.TimeAgo = TimeAgo;
+var PublishedStatus = function (_a) {
+    var document = _a.document;
+    return ((0, jsx_runtime_1.jsx)(ui_1.Tooltip, __assign({ portal: true, 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: document ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Published ", document._updatedAt && (0, jsx_runtime_1.jsx)(TimeAgo, { time: document._updatedAt }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Not published" }, void 0)) }), void 0) }), void 0) }, { children: (0, jsx_runtime_1.jsx)(components_1.TextWithTone, __assign({ tone: "positive", dimmed: !document, muted: !document, size: 1 }, { children: (0, jsx_runtime_1.jsx)(icons_1.PublishIcon, {}, void 0) }), void 0) }), void 0));
+};
+var DraftStatus = function (_a) {
+    var document = _a.document;
+    return ((0, jsx_runtime_1.jsx)(ui_1.Tooltip, __assign({ portal: true, 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: document ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["Edited ", (document === null || document === void 0 ? void 0 : document._updatedAt) && (0, jsx_runtime_1.jsx)(TimeAgo, { time: document === null || document === void 0 ? void 0 : document._updatedAt }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "No unpublished edits" }, void 0)) }), void 0) }), void 0) }, { children: (0, jsx_runtime_1.jsx)(components_1.TextWithTone, __assign({ tone: "caution", dimmed: !document, muted: !document, size: 1 }, { children: (0, jsx_runtime_1.jsx)(icons_1.EditIcon, {}, void 0) }), void 0) }), void 0));
+};
 // Adapted from @sanity\desk-tool\src\components\paneItem\helpers.tsx
-const DocumentPreviewStatus = ({ draft, published }) => {
-    return (_jsxs(Inline, { space: 4, children: [_jsx(PublishedStatus, { document: published }, void 0), _jsx(DraftStatus, { document: draft }, void 0)] }, void 0));
+var DocumentPreviewStatus = function (_a) {
+    var draft = _a.draft, published = _a.published;
+    return ((0, jsx_runtime_1.jsxs)(ui_1.Inline, __assign({ space: 4 }, { children: [(0, jsx_runtime_1.jsx)(PublishedStatus, { document: published }, void 0), (0, jsx_runtime_1.jsx)(DraftStatus, { document: draft }, void 0)] }), void 0));
 };
-export default DocumentPreviewStatus;
+exports.default = DocumentPreviewStatus;

package/lib/components/NodeActions.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { NodeProps } from '../types';
 /**
  * Applicable only to nodes inside the main tree.

package/lib/components/NodeActions.js

@@ -1,24 +1,61 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IntentLink } from '@sanity/base/components';
-import { CopyIcon, EllipsisVerticalIcon, LaunchIcon, RemoveCircleIcon } from '@sanity/icons';
-import { Button, Menu, MenuButton, MenuDivider, MenuItem } from '@sanity/ui';
-import React from 'react';
-import useTreeOperations from '../utils/useTreeOperations';
+"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 components_1 = require("@sanity/base/components");
+var icons_1 = require("@sanity/icons");
+var ui_1 = require("@sanity/ui");
+var React = __importStar(require("react"));
+var useTreeOperations_1 = __importDefault(require("../hooks/useTreeOperations"));
 /**
  * Applicable only to nodes inside the main tree.
  * Unadded items have their actions defined in TreeEditor.
  */
-const NodeActions = ({ nodeProps }) => {
-    const operations = useTreeOperations();
-    const { node } = nodeProps;
-    const { reference, docType } = node?.value || {};
+var NodeActions = function (_a) {
+    var nodeProps = _a.nodeProps;
+    var operations = (0, useTreeOperations_1.default)();
+    var node = nodeProps.node;
+    var _b = (node === null || node === void 0 ? void 0 : node.value) || {}, reference = _b.reference, docType = _b.docType;
     // Adapted from @sanity\form-builder\src\inputs\ReferenceInput\ArrayItemReferenceInput.tsx
-    const OpenLink = React.useMemo(() => 
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    React.forwardRef(function OpenLinkInner(restProps, _ref) {
-        return (_jsx(IntentLink, { ...restProps, intent: "edit", params: { id: reference?._ref, type: docType }, target: "_blank", rel: "noopener noreferrer", ref: _ref }, void 0));
-    }), [reference?._ref, docType]);
-    const isValid = !!node.publishedId;
-    return (_jsx(MenuButton, { button: _jsx(Button, { padding: 2, mode: "bleed", icon: EllipsisVerticalIcon }, void 0), id: `hiearchical-doc-list--${node._key}-menuButton`, menu: _jsxs(Menu, { children: [_jsx(MenuItem, { text: "Remove from list", tone: "critical", icon: RemoveCircleIcon, onClick: () => operations.removeItem(nodeProps) }, void 0), _jsx(MenuItem, { text: "Duplicate item", icon: CopyIcon, disabled: !isValid, onClick: () => operations.duplicateItem(nodeProps) }, void 0), _jsx(MenuDivider, {}, void 0), _jsx(MenuItem, { text: "Open in new tab", icon: LaunchIcon, disabled: !isValid, as: OpenLink, "data-as": "a" }, void 0)] }, void 0), placement: "right", popover: { portal: true, tone: 'default' } }, void 0));
+    var OpenLink = React.useMemo(function () {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        return React.forwardRef(function OpenLinkInner(restProps, _ref) {
+            return ((0, jsx_runtime_1.jsx)(components_1.IntentLink, __assign({}, restProps, { intent: "edit", params: { id: reference === null || reference === void 0 ? void 0 : reference._ref, type: docType }, target: "_blank", rel: "noopener noreferrer", ref: _ref }), void 0));
+        });
+    }, [reference === null || reference === void 0 ? void 0 : reference._ref, docType]);
+    var isValid = !!node.publishedId;
+    return ((0, jsx_runtime_1.jsx)(ui_1.MenuButton, { button: (0, jsx_runtime_1.jsx)(ui_1.Button, { padding: 2, mode: "bleed", icon: icons_1.EllipsisVerticalIcon }, void 0), id: "hiearchical-doc-list--".concat(node._key, "-menuButton"), menu: (0, jsx_runtime_1.jsxs)(ui_1.Menu, { children: [(0, jsx_runtime_1.jsx)(ui_1.MenuItem, { text: "Remove from list", tone: "critical", icon: icons_1.RemoveCircleIcon, onClick: function () { return operations.removeItem(nodeProps); } }, void 0), (0, jsx_runtime_1.jsx)(ui_1.MenuItem, { text: "Duplicate item", icon: icons_1.CopyIcon, disabled: !isValid, onClick: function () { return operations.duplicateItem(nodeProps); } }, void 0), (0, jsx_runtime_1.jsx)(ui_1.MenuDivider, {}, void 0), (0, jsx_runtime_1.jsx)(ui_1.MenuItem, { text: "Open in new tab", icon: icons_1.LaunchIcon, disabled: !isValid, as: OpenLink, "data-as": "a" }, void 0)] }, void 0), placement: "right", popover: { portal: true, tone: 'default' } }, void 0));
 };
-export default NodeActions;
+exports.default = NodeActions;

package/lib/components/NodeContentRenderer.js

@@ -1,55 +1,77 @@
-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';
-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};
-  }
-`;
+"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;
+};
+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 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
+     */
+])), 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.
  * 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;
         }
         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);
         }
-        const BtnElement = (_jsx("div", { children: _jsx(Button, { 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;
@@ -59,21 +81,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 && (0, react_sortable_tree_1.isDescendant)(props.draggedNode, node);
+    var isLandingPadActive = !props.didDrop && props.isDragging;
+    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", { 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: () => 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: (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((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, { 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,17 +1,30 @@
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Box, Card, Stack, Text } from '@sanity/ui';
-const PlaceholderDropzone = (props) => {
-    const isValid = props.isOver && props.canDrop;
-    const isInvalid = props.isOver && !props.canDrop;
-    let tone = 'transparent';
+"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);
+};
+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;
+    var tone = 'transparent';
     if (isValid) {
         tone = 'positive';
     }
     if (isInvalid) {
         tone = 'caution';
     }
-    return (_jsx(Box, { padding: 3, children: _jsx(Card, { 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, { 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) }, 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,41 +1,59 @@
-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';
+"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_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
  */
-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 = (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
-    });
-    const operations = useTreeOperationsProvider({
+        allItems: allItems
+    }), localTree = _b.localTree, handleVisibilityToggle = _b.handleVisibilityToggle;
+    var operations = (0, useTreeOperationsProvider_1.default)({
         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 ((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?.length > 0, children: _jsx(SortableTree, { maxDepth: props.options.maxDepth, onChange: () => {
+                        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: (data) => operations.handleMovedNode(data), treeData: localTree, ...getCommonTreeProps({
-                                placeholder: {
-                                    title: 'Add items from the list below'
-                                }
-                            }) }, 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, { portal: true, 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 }, (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 && ((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, { 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: 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,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;
-}
+import * as React from 'react';
+declare const TreeEditorErrorBoundary: React.FC;
 export default TreeEditorErrorBoundary;

package/lib/components/TreeEditorErrorBoundary.js

@@ -1,13 +1,47 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useToast } from '@sanity/ui';
-import React from 'react';
-const ErrorToast = ({ error }) => {
-    const { push } = useToast();
-    React.useEffect(() => {
-        if (error?.title) {
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ui_1 = require("@sanity/ui");
+var React = __importStar(require("react"));
+var DISPLAY_ERROR = false;
+var ErrorToast = function (_a) {
+    var error = _a.error;
+    var push = (0, ui_1.useToast)().push;
+    React.useEffect(function () {
+        if ((error === null || error === void 0 ? void 0 : error.error) && DISPLAY_ERROR) {
             push({
-                title: error.title,
-                description: error.description,
+                title: error.error.name,
+                description: error.error.message,
                 closable: true,
                 status: 'error',
                 id: 'hierarchical-error'
@@ -16,25 +50,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));
-    }
-}
-export default TreeEditorErrorBoundary;
+var TreeEditorErrorBoundary = function (props) {
+    var _a = React.useState(undefined), exception = _a[0], setException = _a[1];
+    return ((0, jsx_runtime_1.jsxs)(ui_1.ErrorBoundary, __assign({ onCatch: function (newException) {
+            setException(newException);
+        } }, { children: [(0, jsx_runtime_1.jsx)(ErrorToast, { error: exception }, void 0), props.children] }), void 0));
+};
+exports.default = TreeEditorErrorBoundary;