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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Sanity.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,210 @@
+# sanity-plugin-hierarchical-document-list
+
+Plugin for editing hierarchical references in the [Sanity studio](https://www.sanity.io/docs/sanity-studio).
+
+![Screenshot of the plugin](/screenshot-1.jpg)
+
+## Getting started
+
+```bash
+# From the root of your sanity project
+sanity install @sanity/hierarchical-document-list
+```
+
+With the plugin installed, you'll add the following to your Desk Structure:
+
+💡 _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._
+
+```js
+// deskStructure.js
+import S from '@sanity/desk-tool/structure-builder'
+import {createDeskHierarchy} from '@sanity/hierarchical-document-list'
+
+export default () => {
+  return S.list()
+    .title('Content')
+    .items([
+      ...S.documentTypeListItems(), // or whatever other structure you have
+      createDeskHierarchy({
+        title: 'Main table of contents',
+
+        // The hiearchy will be stored in this document ID 👇
+        documentId: 'main-table-of-contents',
+
+        // 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']
+          }
+        }
+      })
+    ])
+}
+```
+
+## 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.
+
+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.
+
+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.
+
+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.
+
+## Querying data
+
+The plugin stores flat arrays which represent your hierarchical data through `parent` keys. Here's an example of one top-level item with one child:
+
+```json
+[
+  {
+    "_key": "741b9edde2ba",
+    "_type": "hierarchy.node",
+    "node": {
+      "_ref": "75c47994-e6bb-487a-b8c9-b283f2436031",
+      "_type": "reference",
+      "_weak": true // This plugin includes weak references by default
+    }
+    // no `parent`, this item is top-level
+  },
+  {
+    "_key": "f92eaeec96f7",
+    "_type": "hierarchy.node",
+    "node": {
+      "_ref": "7ad60a02-5d6e-47d8-92e2-6724cc130058",
+      "_type": "reference",
+      "_weak": true
+    },
+    // The `parent` property points to the _key of the parent node where this one is nested
+    "parent": "741b9edde2ba"
+  }
+]
+```
+
+📌 If using GraphQL, refer to [Usage with GraphQL](#usage-with-graphql).
+
+From the the above, we know how to expand referenced documents in GROQ:
+
+```groq
+*[_id == "main-table-of-contents"][0]{
+  tree[] {
+    // Make sure you include each item's _key and parent
+    _key,
+    parent,
+
+    // "Expand" the reference to the node
+    node->{
+      // Get whatever property you need from your documents
+      title,
+      slug,
+    }
+  }
+}
+```
+
+The query above will then need to be converted from flat data to a tree. Refer to [Using the data](#using-the-data).
+
+<!-- ### Other query scenarios
+
+Find a given document in a hierarchy and get its parent - useful for rendering breadcrumbs:
+
+```groq
+// Works starting from Content Lake V2021-03-25
+*[_id == "main-table-of-contents"][0]{
+  // From the tree, get the 1st node that references a given document _id
+  tree[node._ref == "my-book-section"][0] {
+    _key,
+    "section": node->{
+      title,
+    },
+    // Then, from the tree get the element matching the `parent` _key of the found node
+    "parentChapter": ^.tree[_key == ^.parent][0]{
+      _key,
+      "chapter": node->{
+        title,
+        contributors,
+      }
+    },
+  }
+}
+```
+
+---- -->
+
+## Using the data
+
+From the flat data queried, you'll need to convert it to a nested tree with `flatDataToTree`:
+
+```js
+import {flatDataToTree} from '@sanity/hierarchical-document-list'
+
+const hierarchyDocument = await client.fetch(`*[_id == "book-v3-review-a"][0]{
+  tree[] {
+    // Make sure you include each item's _key and parent
+    _key,
+    parent,
+    node->{
+      title,
+      slug,
+      content,
+    }
+  }
+}`)
+const tree = flatDataToTree(data.tree)
+```
+
+After the transformation above, nodes with nested entries will include a `children` array. This data structure is recursive.
+
+## Usage with GraphQL
+
+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:
+
+```js
+import {createHierarchicalField} from '@sanity/hierarchical-document-list'
+
+export default {
+  name: 'myCustomHierarchicalType',
+  title: 'Custom document type for holding hierarchical data',
+  type: 'document',
+  fields: [
+    createHierarchicalField({
+      name: 'treeData', // custom key for
+      title: 'Custom tree',
+      options: {
+        referenceTo: ['category']
+      }
+    })
+  ]
+}
+```
+
+---
+
+📌 **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'
+})
+```
+
+## License
+
+MIT-licensed. See LICENSE.

package/lib/TreeDeskStructure.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TreeDeskStructureProps } from './types';
+interface ComponentProps {
+    options: TreeDeskStructureProps;
+}
+declare const TreeDeskStructure: React.FC<ComponentProps>;
+export default TreeDeskStructure;

package/lib/TreeDeskStructure.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 React from 'react';
+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) {
+            return;
+        }
+        patch.execute(toGradient(patchEvent.patches));
+    }, [patch]);
+    React.useEffect(() => {
+        if (!published?._id && patch?.execute && !patch?.disabled) {
+            // If no published document, create it
+            patch.execute([{ setIfMissing: { [treeFieldKey]: [] } }]);
+        }
+    }, [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));
+    }
+    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));
+    }
+    return (_jsx(Box, { 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

@@ -0,0 +1,19 @@
+import { FormFieldPresence } from '@sanity/base/presence';
+import { Marker, Path } from '@sanity/types';
+import React from 'react';
+import { SanityTreeItem, TreeFieldSchema } from './types';
+export interface TreeInputComponentProps {
+    type: TreeFieldSchema;
+    value: SanityTreeItem[];
+    compareValue: SanityTreeItem[];
+    markers: Marker[];
+    level: number;
+    onChange: (event: unknown) => void;
+    onFocus: (path: Path) => void;
+    onBlur: () => void;
+    focusPath: Path;
+    readOnly: boolean;
+    presence: FormFieldPresence[];
+}
+declare const TreeInputComponent: React.FC<TreeInputComponentProps>;
+export default TreeInputComponent;

package/lib/TreeInputComponent.js

@@ -0,0 +1,10 @@
+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, 
+        // @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));
+});
+export default TreeInputComponent;

package/lib/components/DocumentInNode.d.ts

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

package/lib/components/DocumentInNode.js

@@ -0,0 +1,46 @@
+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';
+/**
+ * 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(() => {
+        // If some pane is active with the current document `_id`, it's active
+        return routerPanesState.some((pane) => pane.some((group) => group.id === 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) {
+        return null;
+    }
+    return (_jsxs(Flex, { 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
+                            ? {
+                                _id: draftId,
+                                _type: docType,
+                                _updatedAt: props.item.draftUpdatedAt
+                            }
+                            : undefined, published: {
+                            _id: 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));
+};
+export default DocumentInNode;

package/lib/components/DocumentPreviewStatus.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DocumentPair } from '../types';
+export declare function TimeAgo({ time }: {
+    time: string | Date;
+}): JSX.Element;
+declare const DocumentPreviewStatus: React.FC<DocumentPair>;
+export default DocumentPreviewStatus;

package/lib/components/DocumentPreviewStatus.js

@@ -0,0 +1,16 @@
+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);
+}
+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));
+// 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));
+};
+export default DocumentPreviewStatus;

package/lib/components/NodeActions.d.ts

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

package/lib/components/NodeActions.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IntentLink } from '@sanity/base/components';
+import { CopyIcon, EllipsisVerticalIcon, LaunchIcon, RemoveCircleIcon } from '@sanity/icons';
+import { Button, Menu, MenuButton, MenuDivider, MenuItem } from '@sanity/ui';
+import React from 'react';
+import useTreeOperations from '../utils/useTreeOperations';
+/**
+ * Applicable only to nodes inside the main tree.
+ * Unadded items have their actions defined in TreeEditor.
+ */
+const NodeActions = ({ nodeProps }) => {
+    const operations = useTreeOperations();
+    const { node } = nodeProps;
+    // 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));
+};
+export default NodeActions;

package/lib/components/NodeContentRenderer.d.ts

@@ -0,0 +1,8 @@
+import { NodeRenderer } from 'react-sortable-tree';
+/**
+ * Customization of react-sortable-tree's default node.
+ * Created in order to use Sanity UI for styles.
+ * Reference: https://github.com/frontend-collective/react-sortable-tree/blob/master/src/node-renderer-default.js
+ */
+declare const NodeContentRenderer: NodeRenderer;
+export default NodeContentRenderer;

package/lib/components/NodeContentRenderer.js

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

package/lib/components/PlaceholderDropzone.d.ts

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

package/lib/components/PlaceholderDropzone.js

@@ -0,0 +1,17 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Card, Stack, Text } from '@sanity/ui';
+const PlaceholderDropzone = (props) => {
+    const isValid = props.isOver && props.canDrop;
+    const isInvalid = props.isOver && !props.canDrop;
+    let tone = 'transparent';
+    if (isValid) {
+        tone = 'positive';
+    }
+    if (isInvalid) {
+        tone = 'caution';
+    }
+    return (_jsx(Card, { padding: 5, radius: 2, border: true, tone: tone, style: {
+            borderStyle: props.isOver ? undefined : 'dashed'
+        }, children: _jsxs(Stack, { space: 2, style: { textAlign: 'center' }, children: [_jsxs(Text, { size: 2, as: "h2", muted: true, children: [!props.isOver && props.title, isValid && 'Drop here', isInvalid && 'Invalid location or element'] }, void 0), props.subtitle && _jsx(Text, { size: 1, children: props.subtitle }, void 0), props.children] }, void 0) }, void 0));
+};
+export default PlaceholderDropzone;

package/lib/components/TreeEditor.d.ts

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

package/lib/components/TreeEditor.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AddCircleIcon } from '@sanity/icons';
+import { Box, Button, Card, Flex, Spinner, Stack, Text, Tooltip } from '@sanity/ui';
+import SortableTree from 'react-sortable-tree';
+import getCommonTreeProps from '../utils/getCommonTreeProps';
+import getTreeHeight from '../utils/getTreeHeight';
+import { getUnaddedItems } from '../utils/treeData';
+import useAllItems from '../utils/useAllItems';
+import useLocalTree from '../utils/useLocalTree';
+import { TreeOperationsContext } from '../utils/useTreeOperations';
+import useTreeOperationsProvider from '../utils/useTreeOperationsProvider';
+import DocumentInNode from './DocumentInNode';
+import TreeEditorErrorBoundary from './TreeEditorErrorBoundary';
+/**
+ * The loaded tree users interact with
+ */
+const TreeEditor = (props) => {
+    const { status: allItemsStatus, allItems } = useAllItems(props.options);
+    const unaddedItems = getUnaddedItems({ tree: props.tree, allItems });
+    const { localTree, handleVisibilityToggle } = useLocalTree({
+        tree: props.tree,
+        allItems
+    });
+    const operations = useTreeOperationsProvider({
+        patchPrefix: props.patchPrefix,
+        onChange: props.onChange,
+        localTree
+    });
+    return (_jsx(TreeEditorErrorBoundary, { children: _jsx(TreeOperationsContext.Provider, { value: { ...operations, allItemsStatus }, children: _jsxs(Stack, { space: 4, paddingTop: 4, children: [_jsx(Card, { style: { minHeight: getTreeHeight(localTree) }, 
+                        // Only include borderBottom if there's something to show in unadded items
+                        borderBottom: allItemsStatus !== 'success' || unaddedItems?.length > 0, children: _jsx(SortableTree, { maxDepth: props.options.maxDepth, onChange: () => {
+                                // Do nothing. onMoveNode will do all the work
+                            }, onVisibilityToggle: handleVisibilityToggle, onMoveNode: operations.handleMovedNode, treeData: localTree, ...getCommonTreeProps({
+                                placeholder: {
+                                    title: 'Add items by dragging them here'
+                                }
+                            }) }, void 0) }, void 0), allItemsStatus === 'success' && unaddedItems?.length > 0 && (_jsxs(Stack, { space: 1, paddingX: 2, paddingTop: 3, children: [_jsxs(Stack, { space: 2, paddingX: 2, paddingBottom: 3, children: [_jsx(Text, { size: 2, as: "h2", weight: "semibold", children: "Add more items" }, void 0), _jsx(Text, { size: 1, muted: true, children: "Only published documents are shown." }, void 0)] }, void 0), unaddedItems.map((item) => (_jsx(DocumentInNode, { item: item, action: _jsx(Tooltip, { placement: "left", content: _jsx(Box, { padding: 2, children: _jsx(Text, { size: 1, children: "Add to list" }, void 0) }, void 0), children: _jsx(Button, { onClick: () => {
+                                            operations.addItem(item);
+                                        }, mode: "bleed", icon: AddCircleIcon, style: { cursor: 'pointer' } }, void 0) }, void 0) }, item.publishedId || item.draftId)))] }, void 0)), allItemsStatus === 'loading' && (_jsx(Flex, { padding: 4, align: 'center', justify: 'center', children: _jsx(Spinner, { size: 3, muted: true }, void 0) }, void 0)), allItemsStatus === 'error' && (_jsx(Flex, { padding: 4, align: 'center', justify: 'center', children: _jsx(Text, { size: 2, weight: "semibold", children: "Something went wrong when loading documents" }, void 0) }, void 0))] }, void 0) }, void 0) }, void 0));
+};
+export default TreeEditor;

package/lib/components/TreeEditorErrorBoundary.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+interface ErrorInfo {
+    title: string;
+    description?: string;
+}
+declare class TreeEditorErrorBoundary extends React.Component<any, {
+    error?: ErrorInfo;
+}> {
+    constructor(props: any);
+    static getDerivedStateFromError(error: unknown): {
+        error: undefined;
+    } | {
+        error: ErrorInfo;
+    };
+    render(): JSX.Element;
+}
+export default TreeEditorErrorBoundary;