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

package/README.md

@@ -1,6 +1,10 @@
 # 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)
 
@@ -15,9 +19,9 @@ If you're looking for a way to order documents on a flat list, refer to [@sanity
 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
@@ -44,7 +48,10 @@ export default () => {
           filterParams: {
             acceptedStatuses: ['published', 'approved']
           }
-        }
+        },
+
+        // ❓ Optional: limit the depth of your hierarachies
+        maxDept: 3
       })
     ])
 }
@@ -52,13 +59,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
 
@@ -170,6 +179,37 @@ const hierarchyDocument = await client.fetch(`*[_id == "book-v3-review-a"][0]{
   }
 }`)
 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.
@@ -178,26 +218,51 @@ After the transformation above, nodes with nested entries will include a `childr
 
 By default, this plugin will create and update documents of `_type: hierarchy.tree`, with a `tree` field holding the hierarchical data. When deploying a [GraphQL Sanity endpoint](https://www.sanity.io/docs/graphql), however, you'll need an explicit document type in your schema so that you get the proper types for querying.
 
-To add this document type, create a new document schema similar to the following:
+To add this document type, create a set of schemas with the `createHierarchicalSchemas`:
 
 ```js
-import {createHierarchicalField} from '@sanity/hierarchical-document-list'
-
-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: 'customTreeDataKey', // key for the tree field in the document
-      title: 'Custom tree',
-      options: {
-        referenceTo: ['category']
-      }
-    })
-  ]
+// hierarchicalSchemas.js
+import {createHierarchicalSchemas} from '@sanity/hierarchical-document-list'
+
+export const hierarchicalOptions = {
+  // choose the document type name that suits you best
+  documentType: 'myCustomHierarchicalType',
+
+  // key for the tree field in the document - "tree" by default
+  fieldKeyInDocument: 'customTreeDataKey',
+
+  // Document types editors should be able to include in the hierarchy
+  referenceTo: ['site.page', 'site.post', 'docs.article', 'social.youtubeVideo'],
+
+  // ❓ Optional: provide filters and/or parameters for narrowing which documents can be added
+  referenceOptions: {
+    filter: 'status in $acceptedStatuses',
+    filterParams: {
+      acceptedStatuses: ['published', 'approved']
+    }
+  },
+
+  // ❓ Optional: limit the depth of your hierarachies
+  maxDept: 3
 }
+
+export default createHierarchicalSchemas(hierarchicalOptions)
+```
+
+And add these schemas to your studio:
+
+```js
+import createSchema from 'part:@sanity/base/schema-creator'
+import schemaTypes from 'all:part:@sanity/base/schema-type'
+import hierarchicalSchemas from './hierarchicalSchemas'
+
+export default createSchema({
+  name: 'default',
+  types: schemaTypes.concat([
+    // ...Other schemas
+    ...hierarchicalSchemas // add all items in the array of hierarchical schemas
+  ])
+})
 ```
 
 Then, in your desk structure where you added the hierarchical document(s), include the right `documentType` and `fieldKeyInDocument` properties:
@@ -209,13 +274,21 @@ createDeskHierarchy({
   fieldKeyInDocument: 'customTreeDataKey' // the name of the hierarchical field
   // ...
 })
+
+// Ideally, use the same configuration object you defined in your schemas:
+import {hierarchicalOptions} from './hierarchicalSchemas'
+
+createDeskHierarchy({
+  ...hierarchicalOptions
+  // ...
+})
 ```
 
 ---
 
 📌 **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.
+We're considering adapting this input to support any type of nest-able data, not only references. Until then, avoid using the generated schemas in nested schemas as, in these contexts, it lacks the necessary affordances for a good editing experience.
 
 ---
 

package/lib/TreeDeskStructure.d.ts

@@ -1,7 +1,8 @@
-import React from 'react';
+import * as React from 'react';
 import { TreeDeskStructureProps } from './types';
 interface ComponentProps {
     options: TreeDeskStructureProps;
 }
+export declare const DEFAULT_FIELD_KEY = "tree";
 declare const TreeDeskStructure: React.FC<ComponentProps>;
 export default TreeDeskStructure;

package/lib/TreeDeskStructure.js

@@ -1,47 +1,96 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { PublishIcon } from '@sanity/icons';
-import { useDocumentOperation, useEditState } from '@sanity/react-hooks';
-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, 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) {
+"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 __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_FIELD_KEY = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var icons_1 = require("@sanity/icons");
+var react_hooks_1 = require("@sanity/react-hooks");
+var ui_1 = require("@sanity/ui");
+var React = __importStar(require("react"));
+var DeskWarning_1 = __importDefault(require("./components/DeskWarning"));
+var TreeEditor_1 = __importDefault(require("./components/TreeEditor"));
+var gradientPatchAdapter_1 = require("./utils/gradientPatchAdapter");
+var injectNodeTypeInPatches_1 = __importStar(require("./utils/injectNodeTypeInPatches"));
+exports.DEFAULT_FIELD_KEY = 'tree';
+var TreeDeskStructure = function (props) {
+    var treeDocType = props.options.documentType || injectNodeTypeInPatches_1.DEFAULT_DOC_TYPE;
+    var treeFieldKey = props.options.fieldKeyInDocument || exports.DEFAULT_FIELD_KEY;
+    var _a = (0, react_hooks_1.useEditState)(props.options.documentId, treeDocType), published = _a.published, draft = _a.draft, liveEdit = _a.liveEdit;
+    var _b = (0, react_hooks_1.useDocumentOperation)(props.options.documentId, treeDocType), patch = _b.patch, ops = __rest(_b, ["patch"]);
+    var push = (0, ui_1.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.execute((0, gradientPatchAdapter_1.toGradient)((0, injectNodeTypeInPatches_1.default)(patchEvent.patches, treeDocType)));
     }, [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));
+        return ((0, jsx_runtime_1.jsx)(DeskWarning_1.default, { 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 ((0, jsx_runtime_1.jsx)(DeskWarning_1.default, __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\n      published document." }, { children: (0, jsx_runtime_1.jsx)(ui_1.Button, { fontSize: 1, tone: "positive", text: "Publish draft", icon: icons_1.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 ((0, jsx_runtime_1.jsx)(ui_1.Flex, __assign({ padding: 5, align: 'center', justify: 'center', height: 'fill' }, { children: (0, jsx_runtime_1.jsx)(ui_1.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 ((0, jsx_runtime_1.jsx)(ui_1.Box, __assign({ paddingBottom: 5, paddingRight: 2 }, { children: (0, jsx_runtime_1.jsx)(TreeEditor_1.default, { options: props.options, tree: treeValue, onChange: handleChange, patchPrefix: treeFieldKey }, void 0) }), void 0));
 };
-export default TreeDeskStructure;
+exports.default = TreeDeskStructure;

package/lib/TreeInputComponent.d.ts

@@ -1,6 +1,6 @@
 import { FormFieldPresence } from '@sanity/base/presence';
 import { Marker, Path } from '@sanity/types';
-import React from 'react';
+import * as React from 'react';
 import { StoredTreeItem, TreeFieldSchema } from './types';
 export interface TreeInputComponentProps {
     type: TreeFieldSchema;

package/lib/TreeInputComponent.js

@@ -1,10 +1,52 @@
-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, 
+"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 PatchEvent_1 = __importDefault(require("@sanity/form-builder/PatchEvent"));
+var React = __importStar(require("react"));
+var TreeEditor_1 = __importDefault(require("./components/TreeEditor"));
+var injectNodeTypeInPatches_1 = __importStar(require("./utils/injectNodeTypeInPatches"));
+var TreeInputComponent = React.forwardRef(function (props) {
+    var documentType = props.type.options.documentType || injectNodeTypeInPatches_1.DEFAULT_DOC_TYPE;
+    var onChange = React.useCallback(function (patch) {
+        var patches = (0, injectNodeTypeInPatches_1.default)(patch === null || patch === void 0 ? void 0 : patch.patches, documentType);
+        props.onChange(new PatchEvent_1.default(patches));
+    }, [props.onChange]);
+    return ((0, jsx_runtime_1.jsx)(components_1.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: (0, jsx_runtime_1.jsx)(TreeEditor_1.default, { options: props.type.options, tree: props.value || [], onChange: onChange }, void 0) }), void 0));
 });
-export default TreeInputComponent;
+exports.default = TreeInputComponent;

package/lib/components/DeskWarning.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 declare const DeskWarning: React.FC<{
     title: string;
     subtitle?: string;

package/lib/components/DeskWarning.js

@@ -1,12 +1,46 @@
-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';
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ui_1 = require("@sanity/ui");
+var React = __importStar(require("react"));
 // 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 ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: text.split('`').map(function (part, i) { return ((0, jsx_runtime_1.jsx)(React.Fragment, { children: i % 2 === 0 ? part : (0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsx)(ui_1.Container, __assign({ padding: 5, style: { maxWidth: '25rem' }, sizing: 'content' }, { children: (0, jsx_runtime_1.jsx)(ui_1.Card, __assign({ padding: 4, border: true, radius: 2, width: 0, tone: "caution" }, { children: (0, jsx_runtime_1.jsxs)(ui_1.Stack, __assign({ space: 3 }, { children: [(0, jsx_runtime_1.jsx)(ui_1.Heading, __assign({ size: 1 }, { children: title }), void 0), subtitle &&
+                        subtitle.split('\\n').map(function (line) { return ((0, jsx_runtime_1.jsx)(ui_1.Text, __assign({ size: 1 }, { children: (0, jsx_runtime_1.jsx)(WrapCodeBlocks, { text: line }, void 0) }), void 0)); }), children && (0, jsx_runtime_1.jsx)(ui_1.Box, __assign({ marginTop: 2 }, { children: children }), void 0)] }), void 0) }), void 0) }), void 0));
 };
-export default DeskWarning;
+exports.default = DeskWarning;

package/lib/components/DocumentInNode.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { LocalTreeItem } from '../types';
 /**
  * Renders a preview for each referenced document.

package/lib/components/DocumentInNode.js

@@ -1,46 +1,82 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TextWithTone } from '@sanity/base/components';
-import { usePaneRouter } from '@sanity/desk-tool';
-import { HelpCircleIcon } from '@sanity/icons';
-import { Box, Card, Flex, Stack, Text, Tooltip } from '@sanity/ui';
-import Preview from 'part:@sanity/base/preview';
-import schema from 'part:@sanity/base/schema';
-import React from 'react';
-import useTreeOperations from '../utils/useTreeOperations';
-import DocumentPreviewStatus from './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);
+};
+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 desk_tool_1 = require("@sanity/desk-tool");
+var icons_1 = require("@sanity/icons");
+var ui_1 = require("@sanity/ui");
+var preview_1 = __importDefault(require("part:@sanity/base/preview"));
+var schema_1 = __importDefault(require("part:@sanity/base/schema"));
+var React = __importStar(require("react"));
+var useTreeOperations_1 = __importDefault(require("../hooks/useTreeOperations"));
+var DocumentPreviewStatus_1 = __importDefault(require("./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 = (0, desk_tool_1.usePaneRouter)(), routerPanesState = _d.routerPanesState, ChildLink = _d.ChildLink;
+    var allItemsStatus = (0, useTreeOperations_1.default)().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_1.default.get(docType); }, [docType]);
+    var LinkComponent = React.useMemo(function () {
+        // eslint-disable-next-line @typescript-eslint/no-shadow
+        return React.forwardRef(function (linkProps, ref) { return ((0, jsx_runtime_1.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 ((0, jsx_runtime_1.jsxs)(ui_1.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
+            (0, jsx_runtime_1.jsx)(ui_1.Card, __assign({ __unstable_focusRing: true, as: LinkComponent, tone: isActive ? 'primary' : 'default', padding: 1, radius: 2, flex: 1, "data-as": "a", "data-ui": "PaneItem" }, { children: (0, jsx_runtime_1.jsx)(preview_1.default, { layout: "default", type: schemaType, value: { _ref: draftId || (reference === null || reference === void 0 ? void 0 : reference._ref) }, status: (0, jsx_runtime_1.jsx)(DocumentPreviewStatus_1.default, { 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)) : ((0, jsx_runtime_1.jsx)(ui_1.Card, __assign({ padding: 3, radius: 1, flex: 1 }, { children: (0, jsx_runtime_1.jsxs)(ui_1.Flex, __assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsx)(ui_1.Text, __assign({ size: 2, muted: true, style: { flex: 1 } }, { children: "Invalid document" }), void 0), (0, jsx_runtime_1.jsx)(ui_1.Tooltip, __assign({ placement: "left", portal: true, content: (0, jsx_runtime_1.jsx)(ui_1.Box, __assign({ padding: 3 }, { children: (0, jsx_runtime_1.jsxs)(ui_1.Flex, __assign({ align: "flex-start", gap: 3 }, { children: [(0, jsx_runtime_1.jsx)(components_1.TextWithTone, __assign({ tone: "default", size: 3 }, { children: (0, jsx_runtime_1.jsx)(icons_1.HelpCircleIcon, {}, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(ui_1.Stack, __assign({ space: 3 }, { children: [(0, jsx_runtime_1.jsx)(ui_1.Text, __assign({ as: "h2", size: 1, weight: "semibold" }, { children: "This document is not valid" }), void 0), (0, jsx_runtime_1.jsxs)(ui_1.Text, __assign({ size: 1 }, { children: ["ID: ", reference === null || reference === void 0 ? void 0 : reference._ref] }), void 0)] }), void 0)] }), void 0) }), void 0) }, { children: (0, jsx_runtime_1.jsx)(components_1.TextWithTone, __assign({ tone: "default", size: 2 }, { children: (0, jsx_runtime_1.jsx)(icons_1.HelpCircleIcon, {}, void 0) }), void 0) }), void 0)] }), void 0) }), void 0)), props.action] }), void 0));
 };
-export default DocumentInNode;
+exports.default = DocumentInNode;

package/lib/components/DocumentPreviewStatus.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { DocumentPair } from '../types';
 export declare function TimeAgo({ time }: {
     time: string | Date;