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

package/lib/TreeDeskStructure.js

@@ -1,3 +1,25 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PublishIcon } from '@sanity/icons';
 import { useDocumentOperation, useEditState } from '@sanity/react-hooks';
@@ -6,42 +28,44 @@ import React from 'react';
 import DeskWarning from './components/DeskWarning';
 import TreeEditor from './components/TreeEditor';
 import { toGradient } from './utils/gradientPatchAdapter';
-const DEFAULT_TREE_FIELD_KEY = 'tree';
-const DEFAULT_TREE_DOC_TYPE = 'hierarchy.tree';
-const TreeDeskStructure = (props) => {
-    const treeDocType = props.options.documentType || DEFAULT_TREE_DOC_TYPE;
-    const treeFieldKey = props.options.fieldKeyInDocument || DEFAULT_TREE_FIELD_KEY;
-    const { published, draft, liveEdit } = useEditState(props.options.documentId, treeDocType);
-    const { patch, ...ops } = useDocumentOperation(props.options.documentId, treeDocType);
-    const { push } = useToast();
-    const treeValue = (published?.[treeFieldKey] || []);
-    const handleChange = React.useCallback((patchEvent) => {
-        if (!patch?.execute) {
+var DEFAULT_TREE_FIELD_KEY = 'tree';
+var DEFAULT_TREE_DOC_TYPE = 'hierarchy.tree';
+var TreeDeskStructure = function (props) {
+    var treeDocType = props.options.documentType || DEFAULT_TREE_DOC_TYPE;
+    var treeFieldKey = props.options.fieldKeyInDocument || DEFAULT_TREE_FIELD_KEY;
+    var _a = useEditState(props.options.documentId, treeDocType), published = _a.published, draft = _a.draft, liveEdit = _a.liveEdit;
+    var _b = useDocumentOperation(props.options.documentId, treeDocType), patch = _b.patch, ops = __rest(_b, ["patch"]);
+    var push = useToast().push;
+    var treeValue = ((published === null || published === void 0 ? void 0 : published[treeFieldKey]) || []);
+    var handleChange = React.useCallback(function (patchEvent) {
+        if (!(patch === null || patch === void 0 ? void 0 : patch.execute)) {
             return;
         }
         patch.execute(toGradient(patchEvent.patches));
     }, [patch]);
-    React.useEffect(() => {
-        if (!published?._id && patch?.execute && !patch?.disabled) {
+    React.useEffect(function () {
+        var _a;
+        if (!(published === null || published === void 0 ? void 0 : published._id) && (patch === null || patch === void 0 ? void 0 : patch.execute) && !(patch === null || patch === void 0 ? void 0 : patch.disabled)) {
             // If no published document, create it
-            patch.execute([{ setIfMissing: { [treeFieldKey]: [] } }]);
+            patch.execute([{ setIfMissing: (_a = {}, _a[treeFieldKey] = [], _a) }]);
         }
-    }, [published?._id, patch]);
+    }, [published === null || published === void 0 ? void 0 : published._id, patch]);
     if (!liveEdit) {
         return (_jsx(DeskWarning, { title: "Invalid configuration", subtitle: "The `documentType` passed to `createDeskHiearchy` isn't live editable. \\nTo continue using this plugin, add `liveEdit: true` to your custom schema type or unset `documentType` in your hierarchy configuration." }, void 0));
     }
-    if (draft?._id) {
-        return (_jsx(DeskWarning, { title: "This hierarchy tree contains a draft", subtitle: "Click on the button below to publish your draft in order to continue editing the live\r\n      published document.", children: _jsx(Button, { fontSize: 1, tone: "positive", text: "Publish draft", icon: PublishIcon, onClick: () => {
-                    ops.publish?.execute?.();
+    if (draft === null || draft === void 0 ? void 0 : draft._id) {
+        return (_jsx(DeskWarning, __assign({ title: "This hierarchy tree contains a draft", subtitle: "Click on the button below to publish your draft in order to continue editing the live\r\n      published document." }, { children: _jsx(Button, { fontSize: 1, tone: "positive", text: "Publish draft", icon: PublishIcon, onClick: function () {
+                    var _a, _b;
+                    (_b = (_a = ops.publish) === null || _a === void 0 ? void 0 : _a.execute) === null || _b === void 0 ? void 0 : _b.call(_a);
                     push({
                         status: 'info',
                         title: 'Publishing draft...'
                     });
-                } }, void 0) }, void 0));
+                } }, void 0) }), void 0));
     }
-    if (!published?._id) {
-        return (_jsx(Flex, { padding: 5, align: 'center', justify: 'center', height: 'fill', children: _jsx(Spinner, { width: 4, muted: true }, void 0) }, void 0));
+    if (!(published === null || published === void 0 ? void 0 : published._id)) {
+        return (_jsx(Flex, __assign({ padding: 5, align: 'center', justify: 'center', height: 'fill' }, { children: _jsx(Spinner, { width: 4, muted: true }, void 0) }), void 0));
     }
-    return (_jsx(Box, { paddingBottom: 5, paddingRight: 2, children: _jsx(TreeEditor, { options: props.options, tree: treeValue, onChange: handleChange, patchPrefix: treeFieldKey }, void 0) }, void 0));
+    return (_jsx(Box, __assign({ paddingBottom: 5, paddingRight: 2 }, { children: _jsx(TreeEditor, { options: props.options, tree: treeValue, onChange: handleChange, patchPrefix: treeFieldKey }, void 0) }), void 0));
 };
 export default TreeDeskStructure;

package/lib/TreeInputComponent.js

@@ -1,10 +1,21 @@
+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 } from "react/jsx-runtime";
 import React from 'react';
 import { FormField } from '@sanity/base/components';
 import TreeEditor from './components/TreeEditor';
-const TreeInputComponent = React.forwardRef((props, _ref) => {
-    return (_jsx(FormField, { description: props.type.description, title: props.type.title, __unstable_markers: props.markers, __unstable_presence: props.presence, 
+var TreeInputComponent = React.forwardRef(function (props, _ref) {
+    return (_jsx(FormField, __assign({ description: props.type.description, title: props.type.title, __unstable_markers: props.markers, __unstable_presence: props.presence, 
         // @ts-expect-error FormField's TS definitions are off - it doesn't include compareValue
-        compareValue: props.compareValue, children: _jsx(TreeEditor, { options: props.type.options, tree: props.value || [], onChange: props.onChange }, void 0) }, void 0));
+        compareValue: props.compareValue }, { children: _jsx(TreeEditor, { options: props.type.options, tree: props.value || [], onChange: props.onChange }, void 0) }), void 0));
 });
 export default TreeInputComponent;

package/lib/components/DeskWarning.js

@@ -1,12 +1,25 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Card, Container, Heading, Stack, Text } from '@sanity/ui';
 import React from 'react';
 // React component that wraps text between two delimiters in a <pre> tag
-const WrapCodeBlocks = ({ text }) => {
-    return (_jsx(_Fragment, { children: text.split('`').map((part, i) => (_jsx(React.Fragment, { children: i % 2 === 0 ? part : _jsx("code", { children: part }, void 0) }, i))) }, void 0));
+var WrapCodeBlocks = function (_a) {
+    var text = _a.text;
+    return (_jsx(_Fragment, { children: text.split('`').map(function (part, i) { return (_jsx(React.Fragment, { children: i % 2 === 0 ? part : _jsx("code", { children: part }, void 0) }, i)); }) }, void 0));
 };
-const DeskWarning = ({ subtitle, title, children }) => {
-    return (_jsx(Container, { padding: 5, style: { maxWidth: '25rem' }, sizing: 'content', children: _jsx(Card, { padding: 4, border: true, radius: 2, width: 0, tone: "caution", children: _jsxs(Stack, { space: 3, children: [_jsx(Heading, { size: 1, children: title }, void 0), subtitle &&
-                        subtitle.split('\\n').map((line) => (_jsx(Text, { size: 1, children: _jsx(WrapCodeBlocks, { text: line }, void 0) }, void 0))), children && _jsx(Box, { marginTop: 2, children: children }, void 0)] }, void 0) }, void 0) }, void 0));
+var DeskWarning = function (_a) {
+    var subtitle = _a.subtitle, title = _a.title, children = _a.children;
+    return (_jsx(Container, __assign({ padding: 5, style: { maxWidth: '25rem' }, sizing: 'content' }, { children: _jsx(Card, __assign({ padding: 4, border: true, radius: 2, width: 0, tone: "caution" }, { children: _jsxs(Stack, __assign({ space: 3 }, { children: [_jsx(Heading, __assign({ size: 1 }, { children: title }), void 0), subtitle &&
+                        subtitle.split('\\n').map(function (line) { return (_jsx(Text, __assign({ size: 1 }, { children: _jsx(WrapCodeBlocks, { text: line }, void 0) }), void 0)); }), children && _jsx(Box, __assign({ marginTop: 2 }, { children: children }), void 0)] }), void 0) }), void 0) }), void 0));
 };
 export default DeskWarning;

package/lib/components/DocumentInNode.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextWithTone } from '@sanity/base/components';
 import { usePaneRouter } from '@sanity/desk-tool';
@@ -12,35 +23,36 @@ import DocumentPreviewStatus from './DocumentPreviewStatus';
  * Renders a preview for each referenced document.
  * Nested inside TreeNode.tsx
  */
-const DocumentInNode = (props) => {
-    const { value: { reference, docType } = {}, draftId, publishedId } = props.item;
-    const { routerPanesState, ChildLink } = usePaneRouter();
-    const { allItemsStatus } = useTreeOperations();
-    const isActive = React.useMemo(() => {
+var DocumentInNode = function (props) {
+    var _a = props.item, _b = _a.value, _c = _b === void 0 ? {} : _b, reference = _c.reference, docType = _c.docType, draftId = _a.draftId, publishedId = _a.publishedId;
+    var _d = usePaneRouter(), routerPanesState = _d.routerPanesState, ChildLink = _d.ChildLink;
+    var allItemsStatus = useTreeOperations().allItemsStatus;
+    var isActive = React.useMemo(function () {
         // If some pane is active with the current document `_id`, it's active
-        return routerPanesState.some((pane) => pane.some((group) => group.id === reference?._ref));
+        return routerPanesState.some(function (pane) { return pane.some(function (group) { return group.id === (reference === null || reference === void 0 ? void 0 : reference._ref); }); });
     }, [routerPanesState]);
-    const schemaType = React.useMemo(() => schema.get(docType), [docType]);
-    const LinkComponent = React.useMemo(() => 
-    // eslint-disable-next-line @typescript-eslint/no-shadow
-    React.forwardRef((linkProps, ref) => (_jsx(ChildLink, { ...linkProps, childId: reference?._ref, ref: ref, childParameters: {
-            type: docType
-        } }, void 0))), [ChildLink, reference?._ref]);
-    if (!reference?._ref) {
+    var schemaType = React.useMemo(function () { return schema.get(docType); }, [docType]);
+    var LinkComponent = React.useMemo(function () {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        return React.forwardRef(function (linkProps, ref) { return (_jsx(ChildLink, __assign({}, linkProps, { childId: reference === null || reference === void 0 ? void 0 : reference._ref, ref: ref, childParameters: {
+                type: docType
+            } }), void 0)); });
+    }, [ChildLink, reference === null || reference === void 0 ? void 0 : reference._ref]);
+    if (!(reference === null || reference === void 0 ? void 0 : reference._ref)) {
         return null;
     }
-    return (_jsxs(Flex, { gap: 2, align: "center", style: { flex: 1 }, children: [publishedId || allItemsStatus !== 'success' ? (
+    return (_jsxs(Flex, __assign({ gap: 2, align: "center", style: { flex: 1 } }, { children: [publishedId || allItemsStatus !== 'success' ? (
             /* Card loosely copied from @sanity/desk-tool's PaneItem.tsx */
-            _jsx(Card, { __unstable_focusRing: true, as: LinkComponent, tone: isActive ? 'primary' : 'default', padding: 1, radius: 2, flex: 1, "data-as": "a", "data-ui": "PaneItem", children: _jsx(Preview, { layout: "default", type: schemaType, value: { _ref: draftId || reference?._ref }, status: _jsx(DocumentPreviewStatus, { draft: draftId
+            _jsx(Card, __assign({ __unstable_focusRing: true, as: LinkComponent, tone: isActive ? 'primary' : 'default', padding: 1, radius: 2, flex: 1, "data-as": "a", "data-ui": "PaneItem" }, { children: _jsx(Preview, { layout: "default", type: schemaType, value: { _ref: draftId || (reference === null || reference === void 0 ? void 0 : reference._ref) }, status: _jsx(DocumentPreviewStatus, { draft: draftId
                             ? {
                                 _id: draftId,
                                 _type: docType,
                                 _updatedAt: props.item.draftUpdatedAt
                             }
                             : undefined, published: {
-                            _id: reference?._ref,
+                            _id: reference === null || reference === void 0 ? void 0 : reference._ref,
                             _type: docType,
                             _updatedAt: props.item.publishedUpdatedAt
-                        } }, void 0) }, void 0) }, void 0)) : (_jsx(Card, { padding: 3, radius: 1, flex: 1, children: _jsxs(Flex, { align: "center", children: [_jsx(Text, { size: 2, muted: true, style: { flex: 1 }, children: "Invalid document" }, void 0), _jsx(Tooltip, { placement: "left", portal: true, content: _jsx(Box, { padding: 3, children: _jsxs(Flex, { align: "flex-start", gap: 3, children: [_jsx(TextWithTone, { tone: "default", size: 3, children: _jsx(HelpCircleIcon, {}, void 0) }, void 0), _jsxs(Stack, { space: 3, children: [_jsx(Text, { as: "h2", size: 1, weight: "semibold", children: "This document is not valid" }, void 0), _jsxs(Text, { size: 1, children: ["ID: ", reference?._ref] }, void 0)] }, void 0)] }, void 0) }, void 0), children: _jsx(TextWithTone, { tone: "default", size: 2, children: _jsx(HelpCircleIcon, {}, void 0) }, void 0) }, void 0)] }, void 0) }, void 0)), props.action] }, void 0));
+                        } }, void 0) }, void 0) }), void 0)) : (_jsx(Card, __assign({ padding: 3, radius: 1, flex: 1 }, { children: _jsxs(Flex, __assign({ align: "center" }, { children: [_jsx(Text, __assign({ size: 2, muted: true, style: { flex: 1 } }, { children: "Invalid document" }), void 0), _jsx(Tooltip, __assign({ placement: "left", portal: true, content: _jsx(Box, __assign({ padding: 3 }, { children: _jsxs(Flex, __assign({ align: "flex-start", gap: 3 }, { children: [_jsx(TextWithTone, __assign({ tone: "default", size: 3 }, { children: _jsx(HelpCircleIcon, {}, void 0) }), void 0), _jsxs(Stack, __assign({ space: 3 }, { children: [_jsx(Text, __assign({ as: "h2", size: 1, weight: "semibold" }, { children: "This document is not valid" }), void 0), _jsxs(Text, __assign({ size: 1 }, { children: ["ID: ", reference === null || reference === void 0 ? void 0 : reference._ref] }), void 0)] }), void 0)] }), void 0) }), void 0) }, { children: _jsx(TextWithTone, __assign({ tone: "default", size: 2 }, { children: _jsx(HelpCircleIcon, {}, void 0) }), void 0) }), void 0)] }), void 0) }), void 0)), props.action] }), void 0));
 };
 export default DocumentInNode;

package/lib/components/DocumentPreviewStatus.js

@@ -1,16 +1,35 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { 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));
+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));
 }
-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));
+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
-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 (_jsxs(Inline, __assign({ space: 4 }, { children: [_jsx(PublishedStatus, { document: published }, void 0), _jsx(DraftStatus, { document: draft }, void 0)] }), void 0));
 };
 export default DocumentPreviewStatus;

package/lib/components/NodeActions.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IntentLink } from '@sanity/base/components';
 import { CopyIcon, EllipsisVerticalIcon, LaunchIcon, RemoveCircleIcon } from '@sanity/icons';
@@ -8,17 +19,19 @@ import useTreeOperations from '../utils/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 = 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
-    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 (_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;

package/lib/components/NodeContentRenderer.js

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

package/lib/components/PlaceholderDropzone.js

@@ -1,17 +1,28 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { 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';
+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 (_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, { 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: _jsxs(Stack, __assign({ space: 2, style: { textAlign: 'center' } }, { children: [_jsxs(Text, __assign({ size: 2, as: "h2", muted: true }, { children: [!props.isOver && props.title, isValid && 'Drop here', isInvalid && 'Invalid location or element'] }), void 0), props.subtitle && _jsx(Text, __assign({ size: 1 }, { children: props.subtitle }), void 0), props.children] }), void 0) }), void 0) }), void 0));
 };
 export default PlaceholderDropzone;

package/lib/components/TreeEditor.js

@@ -1,3 +1,14 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { AddCircleIcon } from '@sanity/icons';
 import { Box, Button, Card, Flex, Spinner, Stack, Text, Tooltip } from '@sanity/ui';
@@ -14,28 +25,30 @@ import TreeEditorErrorBoundary from './TreeEditorErrorBoundary';
 /**
  * The loaded tree users interact with
  */
-const TreeEditor = (props) => {
-    const { status: allItemsStatus, allItems } = useAllItems(props.options);
-    const unaddedItems = getUnaddedItems({ tree: props.tree, allItems });
-    const { localTree, handleVisibilityToggle } = useLocalTree({
+var TreeEditor = function (props) {
+    var _a = useAllItems(props.options), allItemsStatus = _a.status, allItems = _a.allItems;
+    var unaddedItems = getUnaddedItems({ tree: props.tree, allItems: allItems });
+    var _b = useLocalTree({
         tree: props.tree,
-        allItems
-    });
-    const operations = useTreeOperationsProvider({
+        allItems: allItems
+    }), localTree = _b.localTree, handleVisibilityToggle = _b.handleVisibilityToggle;
+    var operations = useTreeOperationsProvider({
         patchPrefix: props.patchPrefix,
         onChange: props.onChange,
-        localTree
+        localTree: localTree
     });
-    return (_jsx(TreeEditorErrorBoundary, { children: _jsx(TreeOperationsContext.Provider, { value: { ...operations, allItemsStatus }, children: _jsxs(Stack, { space: 4, paddingTop: 4, children: [_jsx(Card, { style: { minHeight: getTreeHeight(localTree) }, 
+    return (_jsx(TreeEditorErrorBoundary, { children: _jsx(TreeOperationsContext.Provider, __assign({ value: __assign(__assign({}, operations), { allItemsStatus: allItemsStatus }) }, { children: _jsxs(Stack, __assign({ space: 4, paddingTop: 4 }, { children: [_jsx(Card, __assign({ style: { minHeight: getTreeHeight(localTree) }, 
                         // Only include borderBottom if there's something to show in unadded items
-                        borderBottom: allItemsStatus !== 'success' || unaddedItems?.length > 0, children: _jsx(SortableTree, { maxDepth: props.options.maxDepth, onChange: () => {
+                        borderBottom: allItemsStatus !== 'success' || (unaddedItems === null || unaddedItems === void 0 ? void 0 : unaddedItems.length) > 0 }, { children: _jsx(SortableTree, __assign({ maxDepth: props.options.maxDepth, onChange: function () {
                                 // Do nothing. onMoveNode will do all the work
-                            }, onVisibilityToggle: handleVisibilityToggle, onMoveNode: (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 }, getCommonTreeProps({
+                            placeholder: {
+                                title: 'Add items from the list below'
+                            }
+                        })), void 0) }), void 0), allItemsStatus === 'success' && (unaddedItems === null || unaddedItems === void 0 ? void 0 : unaddedItems.length) > 0 && (_jsxs(Stack, __assign({ space: 1, paddingX: 2, paddingTop: 3 }, { children: [_jsxs(Stack, __assign({ space: 2, paddingX: 2, paddingBottom: 3 }, { children: [_jsx(Text, __assign({ size: 2, as: "h2", weight: "semibold" }, { children: "Add more items" }), void 0), _jsx(Text, __assign({ size: 1, muted: true }, { children: "Only published documents are shown." }), void 0)] }), void 0), unaddedItems.map(function (item) { return (_jsx(DocumentInNode, { item: item, action: _jsx(Tooltip, __assign({ portal: true, placement: "left", content: _jsx(Box, __assign({ padding: 2 }, { children: _jsx(Text, __assign({ size: 1 }, { children: "Add to list" }), void 0) }), void 0) }, { children: _jsx(Button, { onClick: function () {
                                             operations.addItem(item);
-                                        }, mode: "bleed", icon: AddCircleIcon, style: { cursor: 'pointer' } }, void 0) }, void 0) }, item.publishedId || item.draftId)))] }, void 0)), allItemsStatus === 'loading' && (_jsx(Flex, { padding: 4, align: 'center', justify: 'center', children: _jsx(Spinner, { size: 3, muted: true }, void 0) }, void 0)), allItemsStatus === 'error' && (_jsx(Flex, { padding: 4, align: 'center', justify: 'center', children: _jsx(Text, { size: 2, weight: "semibold", children: "Something went wrong when loading documents" }, void 0) }, void 0))] }, void 0) }, void 0) }, void 0));
+                                        }, mode: "bleed", icon: AddCircleIcon, style: { cursor: 'pointer' } }, void 0) }), void 0) }, item.publishedId || item.draftId)); })] }), void 0)), allItemsStatus === 'loading' && (_jsx(Flex, __assign({ padding: 4, align: 'center', justify: 'center' }, { children: _jsx(Spinner, { size: 3, muted: true }, void 0) }), void 0)), allItemsStatus === 'error' && (_jsx(Flex, __assign({ padding: 4, align: 'center', justify: 'center' }, { children: _jsx(Text, __assign({ size: 2, weight: "semibold" }, { children: "Something went wrong when loading documents" }), void 0) }), void 0))] }), void 0) }), void 0) }, void 0));
 };
 export default TreeEditor;