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

package/README.md

@@ -1,9 +1,17 @@
 # sanity-plugin-hierarchical-document-list
 
-Plugin for editing hierarchical references in the [Sanity studio](https://www.sanity.io/docs/sanity-studio).
+Plugin for visually organizing documents as hierarchies in the [Sanity studio](https://www.sanity.io/docs/sanity-studio). Applications include:
+
+- Tables of content - such as a book's sections and chapters
+- Navigational structure & menus - a website mega-menu with multiple levels, for example
+- Taxonomy inheritance - "_Carbs_ is a parent of _Legumes_ which is a parent of _Beans_"
 
 ![Screenshot of the plugin](/screenshot-1.jpg)
 
+⚠️ **Compatibility:** This plugin requires Sanity Studio [version 2.25.0](https://github.com/sanity-io/sanity/releases/tag/v2.25.0) or higher.
+
+If you're looking for a way to order documents on a flat list, refer to [@sanity/orderable-document-list](https://github.com/sanity-io/orderable-document-list).
+
 ## Getting started
 
 ```bash
@@ -11,9 +19,9 @@ Plugin for editing hierarchical references in the [Sanity studio](https://www.sa
 sanity install @sanity/hierarchical-document-list
 ```
 
-With the plugin installed, you'll add the following to your Desk Structure:
+Once you've installed the plugin the next step is to add one or more hierarchy documents to your Structure Builder.
 
-💡 _If you don't have a custom desk structure, refer to the [Structure Builder docs](https://www.sanity.io/docs/overview-structure-builder) to learn how to do so._
+💡 _To learn about custom desk structures, refer to the [Structure Builder docs](https://www.sanity.io/docs/overview-structure-builder)._
 
 ```js
 // deskStructure.js
@@ -28,7 +36,7 @@ export default () => {
       createDeskHierarchy({
         title: 'Main table of contents',
 
-        // The hiearchy will be stored in this document ID 👇
+        // The hierarchy will be stored in this document ID 👇
         documentId: 'main-table-of-contents',
 
         // Document types editors should be able to include in the hierarchy
@@ -48,13 +56,15 @@ export default () => {
 
 ## How it works
 
-The hierarchical data is stored in the document specified by the `documentId` of your choosing. As compared to storing `parent` fields in each individual document in the hierarchy, this makes it easier to implement different hierarchies for the same content according to the context, and also simplifies querying the full structure - as you'll see in [Querying data](#querying-data) below.
+The hierarchical data is stored in a centralized document with the `documentId` of your choosing. As compared to storing parent/child relationships in each individual document in the hierarchy, this makes it easier to implement different hierarchies for the same content according to the context.
 
-Keep in mind that **this document is live-edited**, meaning it has no draft and every change by editors will directly affect its published version.
+This approach also simplifies querying the full structure - as you'll see in [querying data](#querying-data) below.
 
-Instead of manually adding items one-by-one, the plugin will create a [GROQ](https://www.sanity.io/docs/overview-groq) query that matches all documents with a `_type` in `referenceTo`, that also match the optional `referenceOptions.filter`. From these documents, editors are able to drag, nest and re-order them at will from the "Items not added" list.
+Keep in mind that this specified **document is live-edited**, meaning it has no draft and every change by editors will directly affect its published version.
 
-If a document in the tree doesn't match the filters set, it'll still exist in the tree. This can happen if the document has a new, unfitting value, the configuration changed or it was deleted. Although the tree will still be publishable, editors will get a warning and won't be able to drag these entries around.
+Instead of requiring editors to manually add items one-by-one, the plugin will create a [GROQ](https://www.sanity.io/docs/overview-groq) query that matches all documents with a `_type` in the `referenceTo` option you specify, that also match the optional `referenceOptions.filter`. From these documents, editors are able to drag, nest and re-order them at will from the "Add more items" list.
+
+If a document in the tree doesn't match the filters set, it'll keep existing in the data. This can happen if the document has a new, unfitting value, the configuration changed or it was deleted. Although the tree will still be publishable, editors will get a warning and won't be able to drag these faulty entries around.
 
 ## Querying data
 
@@ -65,20 +75,26 @@ The plugin stores flat arrays which represent your hierarchical data through `pa
   {
     "_key": "741b9edde2ba",
     "_type": "hierarchy.node",
-    "node": {
-      "_ref": "75c47994-e6bb-487a-b8c9-b283f2436031",
-      "_type": "reference",
-      "_weak": true // This plugin includes weak references by default
+    "value": {
+      "reference": {
+        "_ref": "75c47994-e6bb-487a-b8c9-b283f2436031",
+        "_type": "reference",
+        "_weak": true // This plugin includes weak references by default
+      },
+      "docType": "docs.article"
     }
     // no `parent`, this item is top-level
   },
   {
     "_key": "f92eaeec96f7",
     "_type": "hierarchy.node",
-    "node": {
-      "_ref": "7ad60a02-5d6e-47d8-92e2-6724cc130058",
-      "_type": "reference",
-      "_weak": true
+    "value": {
+      "reference": {
+        "_ref": "7ad60a02-5d6e-47d8-92e2-6724cc130058",
+        "_type": "reference",
+        "_weak": true
+      },
+      "docType": "site.post"
     },
     // The `parent` property points to the _key of the parent node where this one is nested
     "parent": "741b9edde2ba"
@@ -98,10 +114,12 @@ From the the above, we know how to expand referenced documents in GROQ:
     parent,
 
     // "Expand" the reference to the node
-    node->{
-      // Get whatever property you need from your documents
-      title,
-      slug,
+    value {
+      reference->{
+        // Get whatever property you need from your documents
+        title,
+        slug,
+      }
     }
   }
 }
@@ -119,13 +137,13 @@ Find a given document in a hierarchy and get its parent - useful for rendering b
   // From the tree, get the 1st node that references a given document _id
   tree[node._ref == "my-book-section"][0] {
     _key,
-    "section": node->{
+    "section": node.reference->{
       title,
     },
     // Then, from the tree get the element matching the `parent` _key of the found node
     "parentChapter": ^.tree[_key == ^.parent][0]{
       _key,
-      "chapter": node->{
+      "chapter": node.reference->{
         title,
         contributors,
       }
@@ -148,14 +166,47 @@ const hierarchyDocument = await client.fetch(`*[_id == "book-v3-review-a"][0]{
     // Make sure you include each item's _key and parent
     _key,
     parent,
-    node->{
-      title,
-      slug,
-      content,
+    value {
+      reference->{
+        title,
+        slug,
+        content,
+      }
     }
   }
 }`)
 const tree = flatDataToTree(data.tree)
+
+/* Results in a recursively nested structure. Using the example data above:
+{
+  "_key": "741b9edde2ba",
+  "_type": "hierarchy.node",
+  "value": {
+    "reference": {
+      "_ref": "75c47994-e6bb-487a-b8c9-b283f2436031",
+      "_type": "reference",
+      "_weak": true
+    },
+    "docType": "docs.article"
+  },
+  "parent": null,
+  "children": [
+    {
+      "_key": "f92eaeec96f7",
+      "_type": "hierarchy.node",
+      "value": {
+        "reference": {
+          "_ref": "7ad60a02-5d6e-47d8-92e2-6724cc130058",
+          "_type": "reference",
+          "_weak": true
+        },
+        "docType": "site.post"
+      },
+      "parent": "741b9edde2ba"
+    }
+  ]
+}
+*/
 ```
 
 After the transformation above, nodes with nested entries will include a `children` array. This data structure is recursive.
@@ -173,9 +224,10 @@ export default {
   name: 'myCustomHierarchicalType',
   title: 'Custom document type for holding hierarchical data',
   type: 'document',
+  liveEdit: true, // 👉 Important: set liveEdit to `true` to ensure the UI works properly
   fields: [
     createHierarchicalField({
-      name: 'treeData', // custom key for
+      name: 'customTreeDataKey', // key for the tree field in the document
       title: 'Custom tree',
       options: {
         referenceTo: ['category']
@@ -185,26 +237,25 @@ export default {
 }
 ```
 
----
-
-📌 **Note:** you can also use the method above to add hierarchies inside the schema of documents and objects. We're considering adapting this input to support any type of nest-able data, not only references. Until then, avoid `createHierarchicalField` for fields in nested schemas as, in these contexts, it lacks the necessary affordances for a good editing experience.
-
----
-
 Then, in your desk structure where you added the hierarchical document(s), include the right `documentType` and `fieldKeyInDocument` properties:
 
 ```js
 createDeskHierarchy({
-  title: 'Hierarchies',
-  referenceTo: ['product', 'collection'],
-  documentId: 'hierarchies',
-
-  // Include whatever values you defined in your schema
-  documentType: 'myCustomHierarchicalType',
-  fieldKeyInDocument: 'treeData'
+  // Include whatever values you defined in your schema in the step above
+  documentType: 'myCustomHierarchicalType', // the name of your document type
+  fieldKeyInDocument: 'customTreeDataKey' // the name of the hierarchical field
+  // ...
 })
 ```
 
+---
+
+📌 **Note:** you can also use the method above to add hierarchies inside the schema of documents and objects, which would be editable outside the desk structure.
+
+We're considering adapting this input to support any type of nest-able data, not only references. Until then, avoid `createHierarchicalField` for fields in nested schemas as, in these contexts, it lacks the necessary affordances for a good editing experience.
+
+---
+
 ## License
 
 MIT-licensed. See LICENSE.

package/lib/TreeDeskStructure.js

@@ -1,43 +1,71 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
-import { Box, Button, Card, Container, Flex, Heading, Spinner, Stack, Text, useToast } from '@sanity/ui';
+import { Box, Button, Flex, Spinner, useToast } from '@sanity/ui';
 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 } = 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]);
-    if (draft?._id) {
-        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: "This hierarchy tree contains a draft" }, void 0), _jsx(Text, { size: 1, children: "Click on the button below to publish your draft in order to continue editing the live published document." }, void 0), _jsx(Box, { marginTop: 2, children: _jsx(Button, { fontSize: 1, tone: "positive", text: "Publish draft", icon: PublishIcon, onClick: () => {
-                                    ops.publish?.execute?.();
-                                    push({
-                                        status: 'info',
-                                        title: 'Publishing draft...'
-                                    });
-                                } }, void 0) }, void 0)] }, void 0) }, void 0) }, void 0));
+    }, [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 === 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));
     }
-    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.d.ts

@@ -1,11 +1,11 @@
 import { FormFieldPresence } from '@sanity/base/presence';
 import { Marker, Path } from '@sanity/types';
 import React from 'react';
-import { SanityTreeItem, TreeFieldSchema } from './types';
+import { StoredTreeItem, TreeFieldSchema } from './types';
 export interface TreeInputComponentProps {
     type: TreeFieldSchema;
-    value: SanityTreeItem[];
-    compareValue: SanityTreeItem[];
+    value: StoredTreeItem[];
+    compareValue: StoredTreeItem[];
     markers: Marker[];
     level: number;
     onChange: (event: unknown) => void;

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.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const DeskWarning: React.FC<{
+    title: string;
+    subtitle?: string;
+}>;
+export default DeskWarning;

package/lib/components/DeskWarning.js

@@ -0,0 +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
+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));
+};
+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.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { SanityTreeItem } from '../types';
+import { LocalTreeItem } from '../types';
 /**
  * Renders a preview for each referenced document.
  * Nested inside TreeNode.tsx
  */
 declare const DocumentInNode: React.FC<{
-    item: SanityTreeItem;
+    item: LocalTreeItem;
     action?: React.ReactNode;
 }>;
 export default DocumentInNode;

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, " 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, { 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, { 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.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import { NodeRendererProps } from 'react-sortable-tree';
+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: NodeRendererProps;
+    nodeProps: NodeProps;
 }>;
 export default NodeActions;

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,16 +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;
+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: node.node?._ref, type: node.nodeDocType }, target: "_blank", rel: "noopener noreferrer", ref: _ref }, void 0));
-    }), [node.node?._ref, node?.nodeDocType]);
-    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", 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;