@sanity/hierarchical-document-list 0.1.0 → 1.1.0

package/lib/components/DocumentPreviewStatus.js

@@ -1,35 +1,39 @@
-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, 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(_a) {
-    var time = _a.time;
-    var timeAgo = useTimeAgo(time);
-    return (_jsxs("span", __assign({ title: timeAgo }, { children: [timeAgo, timeAgo.toLowerCase().trim().startsWith('just now') ? '' : ' ago'] }), void 0));
-}
-var PublishedStatus = function (_a) {
-    var document = _a.document;
-    return (_jsx(Tooltip, __assign({ portal: true, content: _jsx(Box, __assign({ padding: 2 }, { children: _jsx(Text, __assign({ 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, __assign({ tone: "positive", dimmed: !document, muted: !document, size: 1 }, { children: _jsx(PublishIcon, {}, void 0) }), void 0) }), void 0));
-};
-var DraftStatus = function (_a) {
-    var document = _a.document;
-    return (_jsx(Tooltip, __assign({ portal: true, content: _jsx(Box, __assign({ padding: 2 }, { children: _jsx(Text, __assign({ size: 1 }, { children: document ? (_jsxs(_Fragment, { children: ["Edited ", (document === null || document === void 0 ? void 0 : document._updatedAt) && _jsx(TimeAgo, { time: document === null || document === void 0 ? void 0 : document._updatedAt }, void 0)] }, void 0)) : (_jsx(_Fragment, { children: "No unpublished edits" }, void 0)) }), void 0) }), void 0) }, { children: _jsx(TextWithTone, __assign({ tone: "caution", dimmed: !document, muted: !document, size: 1 }, { children: _jsx(EditIcon, {}, void 0) }), void 0) }), void 0));
-};
-// Adapted from @sanity\desk-tool\src\components\paneItem\helpers.tsx
-var DocumentPreviewStatus = function (_a) {
-    var draft = _a.draft, published = _a.published;
-    return (_jsxs(Inline, __assign({ space: 4 }, { children: [_jsx(PublishedStatus, { document: published }, void 0), _jsx(DraftStatus, { document: draft }, void 0)] }), void 0));
-};
-export default DocumentPreviewStatus;
+"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));
+}
+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
+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));
+};
+exports.default = DocumentPreviewStatus;

package/lib/components/NodeActions.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import { NodeProps } from '../types';
-/**
- * Applicable only to nodes inside the main tree.
- * Unadded items have their actions defined in TreeEditor.
- */
-declare const NodeActions: React.FC<{
-    nodeProps: NodeProps;
-}>;
-export default NodeActions;
+import * as React from 'react';
+import { NodeProps } from '../types';
+/**
+ * Applicable only to nodes inside the main tree.
+ * Unadded items have their actions defined in TreeEditor.
+ */
+declare const NodeActions: React.FC<{
+    nodeProps: NodeProps;
+}>;
+export default NodeActions;

package/lib/components/NodeActions.js

@@ -1,37 +1,61 @@
-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 { 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';
-/**
- * Applicable only to nodes inside the main tree.
- * Unadded items have their actions defined in TreeEditor.
- */
-var NodeActions = function (_a) {
-    var nodeProps = _a.nodeProps;
-    var operations = useTreeOperations();
-    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
-    var OpenLink = React.useMemo(function () {
-        // eslint-disable-next-line @typescript-eslint/no-shadow
-        return React.forwardRef(function OpenLinkInner(restProps, _ref) {
-            return (_jsx(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 (_jsx(MenuButton, { button: _jsx(Button, { padding: 2, mode: "bleed", icon: EllipsisVerticalIcon }, void 0), id: "hiearchical-doc-list--".concat(node._key, "-menuButton"), menu: _jsxs(Menu, { children: [_jsx(MenuItem, { text: "Remove from list", tone: "critical", icon: RemoveCircleIcon, onClick: function () { return operations.removeItem(nodeProps); } }, void 0), _jsx(MenuItem, { text: "Duplicate item", icon: CopyIcon, disabled: !isValid, onClick: function () { return 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));
-};
-export default NodeActions;
+"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.
+ */
+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
+    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));
+};
+exports.default = NodeActions;

package/lib/components/NodeContentRenderer.d.ts

@@ -1,8 +1,8 @@
-import { NodeRenderer } from 'react-sortable-tree';
-/**
- * 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
- */
-declare const NodeContentRenderer: NodeRenderer;
-export default NodeContentRenderer;
+import { NodeRenderer } from 'react-sortable-tree';
+/**
+ * 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
+ */
+declare const NodeContentRenderer: NodeRenderer;
+export default NodeContentRenderer;

package/lib/components/NodeContentRenderer.js

@@ -1,81 +1,105 @@
-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';
-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"
-    /**
-     * 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
- */
-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);
-        }
-        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));
-        // Don't allow editors to drag invalid documents
-        if (!node.publishedId) {
-            return BtnElement;
-        }
-        // Show the handle used to initiate a drag-and-drop
-        return props.connectDragSource(BtnElement, {
-            dropEffect: 'copy'
-        });
-    }, [canDrag, node, typeof node.children === 'function']);
-    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", __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 () {
-                        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, __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;
+"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
+ */
+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 (0, jsx_runtime_1.jsx)(ui_1.Spinner, {}, void 0);
+        }
+        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: (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;
+        }
+        // Show the handle used to initiate a drag-and-drop
+        return props.connectDragSource(BtnElement, {
+            dropEffect: 'copy'
+        });
+    }, [canDrag, node, typeof node.children === 'function']);
+    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') && ((0, jsx_runtime_1.jsx)("div", __assign({ style: {
+                    position: 'absolute',
+                    left: '-2px',
+                    top: '40%',
+                    transform: 'translate(-100%, -50%)'
+                } }, { 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: (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));
+};
+exports.default = NodeContentRenderer;
+var templateObject_1;

package/lib/components/PlaceholderDropzone.d.ts

@@ -1,9 +1,9 @@
-import { CardTone } from '@sanity/ui';
-import React from 'react';
-import { PlaceholderRendererProps } from 'react-sortable-tree';
-declare const PlaceholderDropzone: React.FC<{
-    tone?: CardTone;
-    title: string;
-    subtitle?: string;
-} & PlaceholderRendererProps>;
-export default PlaceholderDropzone;
+import { CardTone } from '@sanity/ui';
+import * as React from 'react';
+import { PlaceholderRendererProps } from 'react-sortable-tree';
+declare const PlaceholderDropzone: React.FC<{
+    tone?: CardTone;
+    title: string;
+    subtitle?: string;
+} & PlaceholderRendererProps>;
+export default PlaceholderDropzone;

package/lib/components/PlaceholderDropzone.js

@@ -1,28 +1,30 @@
-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 { 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(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;
+"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 ((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: (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));
+};
+exports.default = PlaceholderDropzone;

package/lib/components/SuppressedDnDManager.d.ts

@@ -0,0 +1,2 @@
+import { DragDropManager } from 'dnd-core';
+export declare const suppressedDnDManager: DragDropManager;

package/lib/components/SuppressedDnDManager.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.suppressedDnDManager = void 0;
+var react_dnd_1 = require("react-dnd");
+var react_dnd_html5_backend_1 = require("react-dnd-html5-backend");
+/**
+ * Fix lifted from https://github.com/frontend-collective/react-sortable-tree/issues/510#issuecomment-731233436
+ * This DND context is used to resolve errors: "Error: Cannot have two HTML5 backends at the same time."
+ */
+var DnDContext = (0, react_dnd_1.createDndContext)(react_dnd_html5_backend_1.HTML5Backend);
+var manager = DnDContext.dragDropManager;
+var monitor = manager.getMonitor();
+/**
+ * The suppressing monitor (and manager that uses it),
+ * is an additional workaround to prevent non-functional errors in react-dnd from
+ * bubbling to the Sanity error handler (which will emit a toast that can be ignored by the user anyway).
+ */
+var suppressedMonitor = {
+    canDragSource: monitor.canDragSource.bind(monitor),
+    canDropOnTarget: function (targetId) {
+        try {
+            return monitor.canDropOnTarget(targetId);
+        }
+        catch (e) {
+            // suppress error
+            return false;
+        }
+    },
+    didDrop: monitor.didDrop.bind(monitor),
+    getClientOffset: monitor.getClientOffset.bind(monitor),
+    getDifferenceFromInitialOffset: monitor.getDifferenceFromInitialOffset.bind(monitor),
+    getDropResult: monitor.getDropResult.bind(monitor),
+    getInitialClientOffset: monitor.getInitialClientOffset.bind(monitor),
+    getInitialSourceClientOffset: monitor.getInitialSourceClientOffset.bind(monitor),
+    getItem: function () {
+        var _a;
+        // return empty instead of undefined to work around property access failing
+        return (_a = monitor.getItem()) !== null && _a !== void 0 ? _a : {};
+    },
+    getItemType: monitor.getItemType.bind(monitor),
+    getSourceClientOffset: monitor.getSourceClientOffset.bind(monitor),
+    getSourceId: monitor.getSourceId.bind(monitor),
+    getTargetIds: monitor.getTargetIds.bind(monitor),
+    isDragging: monitor.isDragging.bind(monitor),
+    isDraggingSource: monitor.isDraggingSource.bind(monitor),
+    isOverTarget: monitor.isOverTarget.bind(monitor),
+    isSourcePublic: monitor.isSourcePublic.bind(monitor),
+    subscribeToOffsetChange: monitor.subscribeToOffsetChange.bind(monitor),
+    subscribeToStateChange: monitor.subscribeToStateChange.bind(monitor)
+};
+exports.suppressedDnDManager = {
+    getMonitor: function () {
+        return suppressedMonitor;
+    },
+    getBackend: manager.getBackend.bind(manager),
+    getRegistry: manager.getRegistry.bind(manager),
+    getActions: manager.getActions.bind(manager),
+    dispatch: manager.dispatch.bind(manager)
+};

package/lib/components/TreeEditor.d.ts

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