@sanity/hierarchical-document-list 0.1.1 → 1.0.0

package/README.md

@@ -48,7 +48,10 @@ export default () => {
           filterParams: {
             acceptedStatuses: ['published', 'approved']
           }
-        }
+        },
+
+        // ❓ Optional: limit the depth of your hierarachies
+        maxDept: 3
       })
     ])
 }
@@ -215,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:
@@ -246,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,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,6 +10,25 @@ var __assign = (this && this.__assign) || function () {
     };
     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)
@@ -20,28 +40,33 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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, 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';
-var DEFAULT_TREE_FIELD_KEY = 'tree';
-var DEFAULT_TREE_DOC_TYPE = 'hierarchy.tree';
+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 || 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 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(function () {
         var _a;
@@ -51,10 +76,10 @@ var TreeDeskStructure = function (props) {
         }
     }, [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 === 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 () {
+        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({
@@ -64,8 +89,8 @@ var TreeDeskStructure = function (props) {
                 } }, 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 ((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, __assign({ 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,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,13 +10,43 @@ var __assign = (this && this.__assign) || function () {
     };
     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';
-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, 
+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,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,17 +10,37 @@ var __assign = (this && this.__assign) || function () {
     };
     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';
+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
 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));
+    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));
 };
 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));
+    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,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,41 +10,64 @@ var __assign = (this && this.__assign) || function () {
     };
     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';
-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';
+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
  */
 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 _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(function (pane) { return pane.some(function (group) { return group.id === (reference === null || reference === void 0 ? void 0 : reference._ref); }); });
     }, [routerPanesState]);
-    var schemaType = React.useMemo(function () { return schema.get(docType); }, [docType]);
+    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 (_jsx(ChildLink, __assign({}, linkProps, { childId: reference === null || reference === void 0 ? void 0 : reference._ref, ref: ref, childParameters: {
+        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, __assign({ 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, __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
+            (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,
@@ -53,6 +77,6 @@ var DocumentInNode = function (props) {
                             _id: reference === null || reference === void 0 ? void 0 : reference._ref,
                             _type: docType,
                             _updatedAt: props.item.publishedUpdatedAt
-                        } }, 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));
+                        } }, 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;

package/lib/components/DocumentPreviewStatus.js

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

package/lib/components/NodeActions.d.ts

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

package/lib/components/NodeActions.js

@@ -1,3 +1,4 @@
+"use strict";
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -9,29 +10,52 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IntentLink } from '@sanity/base/components';
-import { CopyIcon, EllipsisVerticalIcon, LaunchIcon, RemoveCircleIcon } from '@sanity/icons';
-import { Button, Menu, MenuButton, MenuDivider, MenuItem } from '@sanity/ui';
-import React from 'react';
-import useTreeOperations from '../utils/useTreeOperations';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var components_1 = require("@sanity/base/components");
+var icons_1 = require("@sanity/icons");
+var ui_1 = require("@sanity/ui");
+var React = __importStar(require("react"));
+var useTreeOperations_1 = __importDefault(require("../hooks/useTreeOperations"));
 /**
  * Applicable only to nodes inside the main tree.
  * Unadded items have their actions defined in TreeEditor.
  */
 var NodeActions = function (_a) {
     var nodeProps = _a.nodeProps;
-    var operations = useTreeOperations();
+    var operations = (0, useTreeOperations_1.default)();
     var node = nodeProps.node;
     var _b = (node === null || node === void 0 ? void 0 : node.value) || {}, reference = _b.reference, docType = _b.docType;
     // Adapted from @sanity\form-builder\src\inputs\ReferenceInput\ArrayItemReferenceInput.tsx
     var OpenLink = React.useMemo(function () {
         // eslint-disable-next-line @typescript-eslint/no-shadow
         return React.forwardRef(function OpenLinkInner(restProps, _ref) {
-            return (_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));
+            return ((0, jsx_runtime_1.jsx)(components_1.IntentLink, __assign({}, restProps, { intent: "edit", params: { id: reference === null || reference === void 0 ? void 0 : reference._ref, type: docType }, target: "_blank", rel: "noopener noreferrer", ref: _ref }), void 0));
         });
     }, [reference === null || reference === void 0 ? void 0 : reference._ref, docType]);
     var isValid = !!node.publishedId;
-    return (_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));
+    return ((0, jsx_runtime_1.jsx)(ui_1.MenuButton, { button: (0, jsx_runtime_1.jsx)(ui_1.Button, { padding: 2, mode: "bleed", icon: icons_1.EllipsisVerticalIcon }, void 0), id: "hiearchical-doc-list--".concat(node._key, "-menuButton"), menu: (0, jsx_runtime_1.jsxs)(ui_1.Menu, { children: [(0, jsx_runtime_1.jsx)(ui_1.MenuItem, { text: "Remove from list", tone: "critical", icon: icons_1.RemoveCircleIcon, onClick: function () { return operations.removeItem(nodeProps); } }, void 0), (0, jsx_runtime_1.jsx)(ui_1.MenuItem, { text: "Duplicate item", icon: icons_1.CopyIcon, disabled: !isValid, onClick: function () { return operations.duplicateItem(nodeProps); } }, void 0), (0, jsx_runtime_1.jsx)(ui_1.MenuDivider, {}, void 0), (0, jsx_runtime_1.jsx)(ui_1.MenuItem, { text: "Open in new tab", icon: icons_1.LaunchIcon, disabled: !isValid, as: OpenLink, "data-as": "a" }, void 0)] }, void 0), placement: "right", popover: { portal: true, tone: 'default' } }, void 0));
 };
-export default NodeActions;
+exports.default = NodeActions;