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

package/README.md

@@ -4,6 +4,8 @@ Plugin for editing hierarchical references in the [Sanity studio](https://www.sa
 
 ![Screenshot of the plugin](/screenshot-1.jpg)
 
+⚠️ **Compatibility:** This plugin requires Sanity Studio [version 2.25.0](https://github.com/sanity-io/sanity/releases/tag/v2.25.0) or higher.
+
 ## Getting started
 
 ```bash
@@ -28,7 +30,7 @@ export default () => {
       createDeskHierarchy({
         title: 'Main table of contents',
 
-        // The hiearchy will be stored in this document ID 👇
+        // The hierarchy will be stored in this document ID 👇
         documentId: 'main-table-of-contents',
 
         // Document types editors should be able to include in the hierarchy
@@ -65,20 +67,26 @@ The plugin stores flat arrays which represent your hierarchical data through `pa
   {
     "_key": "741b9edde2ba",
     "_type": "hierarchy.node",
-    "node": {
-      "_ref": "75c47994-e6bb-487a-b8c9-b283f2436031",
-      "_type": "reference",
-      "_weak": true // This plugin includes weak references by default
+    "value": {
+      "reference": {
+        "_ref": "75c47994-e6bb-487a-b8c9-b283f2436031",
+        "_type": "reference",
+        "_weak": true // This plugin includes weak references by default
+      },
+      "docType": "docs.article"
     }
     // no `parent`, this item is top-level
   },
   {
     "_key": "f92eaeec96f7",
     "_type": "hierarchy.node",
-    "node": {
-      "_ref": "7ad60a02-5d6e-47d8-92e2-6724cc130058",
-      "_type": "reference",
-      "_weak": true
+    "value": {
+      "reference": {
+        "_ref": "7ad60a02-5d6e-47d8-92e2-6724cc130058",
+        "_type": "reference",
+        "_weak": true
+      },
+      "docType": "site.post"
     },
     // The `parent` property points to the _key of the parent node where this one is nested
     "parent": "741b9edde2ba"
@@ -98,10 +106,12 @@ From the the above, we know how to expand referenced documents in GROQ:
     parent,
 
     // "Expand" the reference to the node
-    node->{
-      // Get whatever property you need from your documents
-      title,
-      slug,
+    value {
+      reference->{
+        // Get whatever property you need from your documents
+        title,
+        slug,
+      }
     }
   }
 }
@@ -119,13 +129,13 @@ Find a given document in a hierarchy and get its parent - useful for rendering b
   // From the tree, get the 1st node that references a given document _id
   tree[node._ref == "my-book-section"][0] {
     _key,
-    "section": node->{
+    "section": node.reference->{
       title,
     },
     // Then, from the tree get the element matching the `parent` _key of the found node
     "parentChapter": ^.tree[_key == ^.parent][0]{
       _key,
-      "chapter": node->{
+      "chapter": node.reference->{
         title,
         contributors,
       }
@@ -148,10 +158,12 @@ const hierarchyDocument = await client.fetch(`*[_id == "book-v3-review-a"][0]{
     // Make sure you include each item's _key and parent
     _key,
     parent,
-    node->{
-      title,
-      slug,
-      content,
+    value {
+      reference->{
+        title,
+        slug,
+        content,
+      }
     }
   }
 }`)
@@ -173,9 +185,10 @@ export default {
   name: 'myCustomHierarchicalType',
   title: 'Custom document type for holding hierarchical data',
   type: 'document',
+  liveEdit: true, // 👉 Important: set liveEdit to `true` to ensure the UI works properly
   fields: [
     createHierarchicalField({
-      name: 'treeData', // custom key for
+      name: 'customTreeDataKey', // key for the tree field in the document
       title: 'Custom tree',
       options: {
         referenceTo: ['category']
@@ -185,26 +198,25 @@ export default {
 }
 ```
 
----
-
-📌 **Note:** you can also use the method above to add hierarchies inside the schema of documents and objects. We're considering adapting this input to support any type of nest-able data, not only references. Until then, avoid `createHierarchicalField` for fields in nested schemas as, in these contexts, it lacks the necessary affordances for a good editing experience.
-
----
-
 Then, in your desk structure where you added the hierarchical document(s), include the right `documentType` and `fieldKeyInDocument` properties:
 
 ```js
 createDeskHierarchy({
-  title: 'Hierarchies',
-  referenceTo: ['product', 'collection'],
-  documentId: 'hierarchies',
-
-  // Include whatever values you defined in your schema
-  documentType: 'myCustomHierarchicalType',
-  fieldKeyInDocument: 'treeData'
+  // Include whatever values you defined in your schema in the step above
+  documentType: 'myCustomHierarchicalType', // the name of your document type
+  fieldKeyInDocument: 'customTreeDataKey' // the name of the hierarchical field
+  // ...
 })
 ```
 
+---
+
+📌 **Note:** you can also use the method above to add hierarchies inside the schema of documents and objects, which would be editable outside the desk structure.
+
+We're considering adapting this input to support any type of nest-able data, not only references. Until then, avoid `createHierarchicalField` for fields in nested schemas as, in these contexts, it lacks the necessary affordances for a good editing experience.
+
+---
+
 ## License
 
 MIT-licensed. See LICENSE.

package/lib/TreeDeskStructure.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PublishIcon } from '@sanity/icons';
 import { useDocumentOperation, useEditState } from '@sanity/react-hooks';
-import { Box, Button, Card, Container, Flex, Heading, Spinner, Stack, Text, useToast } from '@sanity/ui';
+import { Box, Button, Flex, Spinner, useToast } from '@sanity/ui';
 import React from 'react';
+import DeskWarning from './components/DeskWarning';
 import TreeEditor from './components/TreeEditor';
 import { toGradient } from './utils/gradientPatchAdapter';
 const DEFAULT_TREE_FIELD_KEY = 'tree';
@@ -10,7 +11,7 @@ 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 { published, draft, liveEdit } = useEditState(props.options.documentId, treeDocType);
     const { patch, ...ops } = useDocumentOperation(props.options.documentId, treeDocType);
     const { push } = useToast();
     const treeValue = (published?.[treeFieldKey] || []);
@@ -26,14 +27,17 @@ const TreeDeskStructure = (props) => {
             patch.execute([{ setIfMissing: { [treeFieldKey]: [] } }]);
         }
     }, [published?._id, patch]);
+    if (!liveEdit) {
+        return (_jsx(DeskWarning, { title: "Invalid configuration", subtitle: "The `documentType` passed to `createDeskHiearchy` isn't live editable. \\nTo continue using this plugin, add `liveEdit: true` to your custom schema type or unset `documentType` in your hierarchy configuration." }, void 0));
+    }
     if (draft?._id) {
-        return (_jsx(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));
+        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\n      published document.", 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));
     }
     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));

package/lib/TreeInputComponent.d.ts

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

package/lib/components/DeskWarning.d.ts

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

package/lib/components/DeskWarning.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Card, Container, Heading, Stack, Text } from '@sanity/ui';
+import React from 'react';
+// React component that wraps text between two delimiters in a <pre> tag
+const WrapCodeBlocks = ({ text }) => {
+    return (_jsx(_Fragment, { children: text.split('`').map((part, i) => (_jsx(React.Fragment, { children: i % 2 === 0 ? part : _jsx("code", { children: part }, void 0) }, i))) }, void 0));
+};
+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));
+};
+export default DeskWarning;

package/lib/components/DocumentInNode.d.ts

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

package/lib/components/NodeActions.d.ts

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

package/lib/components/NodeActions.js

@@ -11,12 +11,13 @@ import useTreeOperations from '../utils/useTreeOperations';
 const NodeActions = ({ nodeProps }) => {
     const operations = useTreeOperations();
     const { node } = nodeProps;
+    const { reference, docType } = node?.value || {};
     // 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]);
+        return (_jsx(IntentLink, { ...restProps, intent: "edit", params: { id: reference?._ref, type: docType }, target: "_blank", rel: "noopener noreferrer", ref: _ref }, void 0));
+    }), [reference?._ref, docType]);
     const isValid = !!node.publishedId;
     return (_jsx(MenuButton, { button: _jsx(Button, { padding: 2, mode: "bleed", icon: EllipsisVerticalIcon }, void 0), id: `hiearchical-doc-list--${node._key}-menuButton`, menu: _jsxs(Menu, { children: [_jsx(MenuItem, { text: "Remove from list", tone: "critical", icon: RemoveCircleIcon, onClick: () => operations.removeItem(nodeProps) }, void 0), _jsx(MenuItem, { text: "Duplicate", 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));
 };

package/lib/components/TreeEditor.d.ts

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

package/lib/components/TreeEditor.js

@@ -30,7 +30,7 @@ const TreeEditor = (props) => {
                         // 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({
+                            }, onVisibilityToggle: handleVisibilityToggle, onMoveNode: (data) => operations.handleMovedNode(data), treeData: localTree, ...getCommonTreeProps({
                                 placeholder: {
                                     title: 'Add items by dragging them here'
                                 }

package/lib/createDeskHierarchy.d.ts

@@ -5,6 +5,10 @@ interface TreeProps extends TreeDeskStructureProps {
      * Also used as the label in the desk list item.
      */
     title: string;
+    /**
+     * Optional icon for rendering the item in the desk structure.
+     */
+    icon?: any;
 }
 export default function createDeskHierarchy(props: TreeProps): import("@sanity/structure/dist/dts/ListItem").ListItemBuilder;
 export {};

package/lib/createDeskHierarchy.js

@@ -16,7 +16,7 @@ export default function createDeskHierarchy(props) {
     const { documentId, referenceTo, referenceOptions } = props;
     let mainList = (referenceTo?.length === 1
         ? S.documentTypeList(referenceTo[0]).schemaType(referenceTo[0])
-        : S.documentList())
+        : S.documentList().filter('_type in $types').params({ types: referenceTo }))
         .id(documentId)
         .menuItems((referenceTo || []).map((schemaType) => S.menuItem()
         .intent({
@@ -44,6 +44,7 @@ export default function createDeskHierarchy(props) {
     return S.listItem()
         .id(documentId)
         .title(props.title || documentId)
+        .icon(props.icon)
         .child(Object.assign(mainList.serialize(), {
         type: 'component',
         component: deskTreeValidator(props),

package/lib/createHierarchicalField.js

@@ -14,13 +14,19 @@ export default function createHierarchicalField({ name, title, options, ...rest
                 type: 'object',
                 fields: [
                     { name: 'parent', type: 'string' },
-                    { name: 'nodeDocType', type: 'string' },
                     {
-                        name: 'node',
-                        type: 'reference',
-                        weak: true,
-                        to: options.referenceTo.map((type) => ({ type })),
-                        options: options.referenceOptions
+                        name: 'value',
+                        type: 'object',
+                        fields: [
+                            { name: 'docType', type: 'string' },
+                            {
+                                name: 'reference',
+                                type: 'reference',
+                                weak: true,
+                                to: options.referenceTo.map((type) => ({ type })),
+                                options: options.referenceOptions
+                            }
+                        ]
                     }
                 ]
             }

package/lib/{hiearchy.tree.js → schemas/hiearchy.tree.js}

@@ -1,8 +1,10 @@
-import createHierarchicalField from './createHierarchicalField';
+import createHierarchicalField from '../createHierarchicalField';
 export default {
     name: 'hierarchy.tree',
     title: 'Hierarchical tree',
     type: 'document',
+    // The plugin needs to define a `schemaType` with liveEdit enabled so that
+    // `useDocumentOperation` in TreeDeskStructure.tsx doesn't create drafts at every patch.
     liveEdit: true,
     fields: [
         createHierarchicalField({

package/lib/types.d.ts

@@ -0,0 +1,122 @@
+import { SanityDocument } from '@sanity/client';
+import { ArraySchemaType } from '@sanity/types';
+import { NodeRendererProps, TreeItem } from 'react-sortable-tree';
+interface SanityReference {
+    _type: 'reference';
+    _ref: string;
+    _weak?: boolean;
+}
+/**
+ * Objects saved to tree documents in Sanity's Content Lake
+ */
+export interface StoredTreeItem {
+    _key: string;
+    _type: 'hierarchy.node' | string;
+    value?: {
+        reference?: SanityReference;
+        docType?: string;
+    };
+    /**
+     * _key of parent node
+     */
+    parent?: string | null;
+}
+/**
+ * Tree items enhanced locally in the client with info from `allItems` and `visibilityMap`.
+ * `allItems` stop here and never become LocalTreeItems as they aren't added to react-sortable-tree.
+ *
+ * See `useLocalTree.ts` and `dataToEditorTree()`.
+ */
+export interface EnhancedTreeItem extends StoredTreeItem {
+    expanded?: boolean | undefined;
+    /**
+     * Used by DocumentInNode to render the preview for drafts if they exist.
+     * Also informs document status icons.
+     */
+    draftId?: string;
+    draftUpdatedAt?: string;
+    /**
+     * If not present, DocumentInNode will show up an error for invalid document.
+     *  - undefined `publishedId` could mean the document is either deleted, or it doesn't match GROQ filters anymore
+     */
+    publishedId?: string;
+    publishedUpdatedAt?: string;
+}
+/**
+ * Tree items as found in the sortable tree itself.
+ */
+export declare type LocalTreeItem = EnhancedTreeItem & Pick<TreeItem, 'title' | 'children'>;
+export interface TreeInputOptions {
+    /**
+     * What document types this hierarchy can refer to.
+     * Similar to the `to` property of the [reference field](https://www.sanity.io/docs/reference-type).
+     */
+    referenceTo: string[];
+    /**
+     * Used to provide fine-grained filtering for documents.
+     */
+    referenceOptions?: {
+        /**
+         * Static filter to apply to tree document queries.
+         */
+        filter?: string;
+        /**
+         * Parameters / variables to pass to the GROQ query ran to fetch documents.
+         */
+        filterParams?: Record<string, unknown>;
+    };
+    /**
+     * How deep should editors be allowed to nest items.
+     */
+    maxDepth?: number;
+}
+export interface TreeFieldSchema extends Omit<ArraySchemaType, 'of' | 'type' | 'inputComponent' | 'jsonType'> {
+    options: ArraySchemaType['options'] & TreeInputOptions;
+}
+export interface TreeDeskStructureProps extends TreeInputOptions {
+    /**
+     * _id of the document that will hold the tree data.
+     */
+    documentId: string;
+    /**
+     * (Optional)
+     * Schema type for your hierarchical documents.
+     * By default, the document will be of type `hierarchy.tree`, a type provided by the plugin.
+     */
+    documentType?: string;
+    /**
+     * (Optional)
+     * Key for the field representing the hierarchical tree inside the document.
+     * `tree` by default.
+     */
+    fieldKeyInDocument?: string;
+}
+export interface DocumentPair {
+    draft?: SanityDocument;
+    published?: SanityDocument;
+}
+export interface AllItems {
+    [publishedId: string]: DocumentPair | undefined;
+}
+declare type DocumentOperation<Payload = unknown> = {
+    execute?: (payload?: Payload) => void;
+    disabled?: boolean | string;
+};
+export interface DocumentOperations {
+    patch?: DocumentOperation<unknown[]>;
+    commit?: DocumentOperation;
+    del?: DocumentOperation;
+    delete?: DocumentOperation;
+    discardChanges?: DocumentOperation;
+    duplicate?: DocumentOperation;
+    restore?: DocumentOperation;
+    unpublish?: DocumentOperation;
+    publish?: DocumentOperation;
+}
+export interface VisibilityMap {
+    [_key: string]: boolean;
+}
+export interface NodeProps extends NodeRendererProps {
+    node: LocalTreeItem;
+}
+export {};

package/lib/types.js

@@ -0,0 +1 @@
+export {};

package/lib/utils/flatDataToTree.d.ts

@@ -1,6 +1,6 @@
-import { SanityTreeItem } from '../types';
-interface TreeItemWithChildren extends SanityTreeItem {
+import { StoredTreeItem } from '../types';
+interface TreeItemWithChildren extends StoredTreeItem {
     children?: TreeItemWithChildren[];
 }
-export default function flatDataToTree(data: SanityTreeItem[]): TreeItemWithChildren[];
+export default function flatDataToTree(data: StoredTreeItem[]): TreeItemWithChildren[];
 export {};

package/lib/utils/treeData.d.ts

@@ -1,18 +1,18 @@
 import { SanityDocument } from '@sanity/client';
 import { TreeItem } from 'react-sortable-tree';
-import { AllItems, SanityTreeItem, VisibilityMap } from '../types';
+import { AllItems, EnhancedTreeItem, LocalTreeItem, StoredTreeItem, VisibilityMap } from '../types';
 export declare const dataToEditorTree: ({ tree, allItems, visibilityMap }: {
-    tree: SanityTreeItem[];
+    tree: StoredTreeItem[];
     allItems: AllItems;
     visibilityMap: VisibilityMap;
-}) => TreeItem[];
+}) => LocalTreeItem[];
 export declare const flatTree: (tree: TreeItem[]) => TreeItem[];
 export interface FetchData {
-    mainTree?: SanityTreeItem[];
+    mainTree?: LocalTreeItem[];
     allItems?: SanityDocument[];
 }
 export declare const getUnaddedItems: (data: {
     allItems: AllItems;
-    tree: SanityTreeItem[];
-}) => SanityTreeItem[];
-export declare function normalizeNodeForStorage(item: TreeItem): SanityTreeItem;
+    tree: StoredTreeItem[];
+}) => EnhancedTreeItem[];
+export declare function normalizeNodeForStorage(item: LocalTreeItem): StoredTreeItem;

package/lib/utils/treePatches.d.ts

@@ -1,13 +1,15 @@
-import { FullTree, NodeData, NodeRendererProps, OnMovePreviousAndNextLocation, TreeItem } from 'react-sortable-tree';
-import { SanityTreeItem } from '../types';
-export declare type HandleMovedNodeData = Omit<NodeData & FullTree & OnMovePreviousAndNextLocation, 'prevPath' | 'prevTreeIndex' | 'path' | 'treeIndex'>;
+import { FullTree, NodeData, OnMovePreviousAndNextLocation, TreeItem } from 'react-sortable-tree';
+import { LocalTreeItem, NodeProps } from '../types';
+export declare type HandleMovedNodeData = Omit<NodeData & FullTree & OnMovePreviousAndNextLocation, 'prevPath' | 'prevTreeIndex' | 'path' | 'treeIndex' | 'node'> & {
+    node: LocalTreeItem;
+};
 export declare type HandleMovedNode = (moveData: HandleMovedNodeData) => void;
-export declare function getAddItemPatch(item: SanityTreeItem): unknown[];
-export declare function getDuplicateItemPatch(nodeProps: NodeRendererProps): unknown[];
-export declare function getRemoveItemPatch({ node }: Pick<NodeRendererProps, 'node'>): unknown[];
+export declare function getAddItemPatch(item: LocalTreeItem): unknown[];
+export declare function getDuplicateItemPatch(nodeProps: NodeProps): unknown[];
+export declare function getRemoveItemPatch({ node }: Pick<NodeProps, 'node'>): unknown[];
 export declare function getMovedNodePatch(data: HandleMovedNodeData): unknown[];
-export declare function getMoveItemPatch({ nodeProps: { node, treeIndex, parentNode }, localTree, direction }: {
-    nodeProps: NodeRendererProps;
+export declare function getMoveItemPatch({ nodeProps: { node, treeIndex }, localTree, direction }: {
+    nodeProps: NodeProps;
     localTree: TreeItem[];
     direction: 'up' | 'down';
 }): unknown[];

package/lib/utils/treePatches.js

@@ -61,9 +61,8 @@ export function getMovedNodePatch(data) {
             ? // After the sibling before it
                 Patch.insert([normalizedNode], 'after', [{ _key: leadingNode.node._key }])
             : // Or before the sibling right after it, in case there's no leading sibling node
-                Patch.insert([normalizedNode], 'before', [
-                    followingNode?.node?._key ? { _key: followingNode.node._key } : data.nextTreeIndex
-                ]),
+                // prettier-ignore
+                Patch.insert([normalizedNode], 'before', [followingNode?.node?._key ? { _key: followingNode.node._key } : data.nextTreeIndex]),
         // 3. Patch the new node with its new `parent`
         nextParentNode
             ? // If it has a parent node, set that parent's _key
@@ -80,7 +79,7 @@ function getChildrenPaths(node) {
         .reduce((keyPaths, child) => [...keyPaths, child._key, ...getChildrenPaths(child)], [])
         .filter(Boolean);
 }
-export function getMoveItemPatch({ nodeProps: { node, treeIndex, parentNode }, localTree, direction = 'up' }) {
+export function getMoveItemPatch({ nodeProps: { node, treeIndex }, localTree, direction = 'up' }) {
     const keyPath = { _key: node._key };
     const nextTreeIndex = treeIndex + (direction === 'up' ? -1 : 1);
     const flatTree = getFlatDataFromTree({
@@ -98,16 +97,6 @@ export function getMoveItemPatch({ nodeProps: { node, treeIndex, parentNode }, l
         treeIndex: nextTreeIndex
     });
     const normalizedNode = normalizeNodeForStorage(node);
-    console.log(`Move ${direction}`, {
-        node,
-        treeIndex,
-        parentNode,
-        nextFlatTree,
-        flatTree,
-        localTree,
-        leadingSibling: leadingNode,
-        followingSibling: followingNode
-    });
     // When moving up, look at following node to figure out what is the next parent.
     const nodeToInheritParent = direction === 'up' ? followingNode : leadingNode;
     const nextParentNode = nodeToInheritParent?.parentNode;

package/lib/utils/useLocalTree.d.ts

@@ -1,17 +1,17 @@
-import { OnVisibilityToggleData, TreeItem } from 'react-sortable-tree';
-import { AllItems, SanityTreeItem } from '../types';
+import { OnVisibilityToggleData } from 'react-sortable-tree';
+import { AllItems, LocalTreeItem, StoredTreeItem } from '../types';
 /**
  * Enhances tree data with information on:
  *   - `expanded` - native property of react-sortable-tree to determine collapsing & expanding of a node's children
- *   - `draftId` & `publishedId` - refer to SanityTreeItem's type annotations
+ *   - `draftId` & `publishedId` - refer to LocalTreeItem's type annotations
  *
  * Doesn't modify the main tree or has side-effects on data.
  * Has the added benefit of being local to the user, so external changes won't affect local visibility.
  */
 export default function useLocalTree({ tree, allItems }: {
-    tree: SanityTreeItem[];
+    tree: StoredTreeItem[];
     allItems: AllItems;
 }): {
     handleVisibilityToggle: (data: OnVisibilityToggleData) => void;
-    localTree: TreeItem[];
+    localTree: LocalTreeItem[];
 };

package/lib/utils/useLocalTree.js

@@ -3,7 +3,7 @@ import { dataToEditorTree } from './treeData';
 /**
  * Enhances tree data with information on:
  *   - `expanded` - native property of react-sortable-tree to determine collapsing & expanding of a node's children
- *   - `draftId` & `publishedId` - refer to SanityTreeItem's type annotations
+ *   - `draftId` & `publishedId` - refer to LocalTreeItem's type annotations
  *
  * Doesn't modify the main tree or has side-effects on data.
  * Has the added benefit of being local to the user, so external changes won't affect local visibility.

package/lib/utils/useTreeOperationsProvider.d.ts

@@ -1,15 +1,14 @@
-import { NodeRendererProps, TreeItem } from 'react-sortable-tree';
-import { SanityTreeItem } from '../types';
+import { LocalTreeItem, NodeProps } from '../types';
 import { HandleMovedNode } from './treePatches';
 export default function useTreeOperationsProvider(props: {
     patchPrefix?: string;
     onChange: (patch: unknown) => void;
-    localTree: TreeItem[];
+    localTree: LocalTreeItem[];
 }): {
     handleMovedNode: HandleMovedNode;
-    addItem: (item: SanityTreeItem) => void;
-    duplicateItem: (nodeProps: NodeRendererProps) => void;
-    removeItem: (nodeProps: NodeRendererProps) => void;
-    moveItemUp: (nodeProps: NodeRendererProps) => void;
-    moveItemDown: (nodeProps: NodeRendererProps) => void;
+    addItem: (item: LocalTreeItem) => void;
+    duplicateItem: (nodeProps: NodeProps) => void;
+    removeItem: (nodeProps: NodeProps) => void;
+    moveItemUp: (nodeProps: NodeProps) => void;
+    moveItemDown: (nodeProps: NodeProps) => void;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/hierarchical-document-list",
-  "version": "0.1.0-next.1",
+  "version": "0.1.0-next.2",
   "author": "Sanity <hello@sanity.io>",
   "license": "MIT",
   "main": "lib/index.js",
@@ -19,6 +19,12 @@
     "lint": "eslint src"
   },
   "devDependencies": {
+    "@sanity/base": ">= 2.25.0",
+    "@sanity/color": "^2.1.6",
+    "@sanity/desk-tool": ">= 2.25.0",
+    "@sanity/form-builder": "^2.25.0",
+    "@sanity/icons": ">= 1.2.0",
+    "@sanity/ui": ">= 0.37.0",
     "@types/assert": "^1.5.6",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
@@ -30,25 +36,21 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-config-sanity": "^5.1.0",
     "prettier": "^2.5.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "styled-components": "^5.3.3",
     "typescript": "^4.5.5"
   },
   "type": "module",
   "dependencies": {
-    "@sanity/base": ">= 2.25.0",
-    "@sanity/color": "^2.1.6",
-    "@sanity/desk-tool": ">= 2.25.0",
-    "@sanity/form-builder": "^2.25.0",
-    "@sanity/icons": ">= 1.2.0",
-    "@sanity/ui": ">= 0.37.0",
     "assert": "^2.0.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
     "react-sortable-tree": "^2.8.0"
   },
   "peerDependencies": {
     "@sanity/base": ">= 2.25.0",
     "@sanity/desk-tool": ">= 2.25.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "styled-components": ">= 5.2.0"
   }
 }

package/sanity.json

@@ -6,7 +6,7 @@
   "parts": [
     {
       "implements": "part:@sanity/base/schema-type",
-      "path": "hierarchy.tree.js"
+      "path": "schemas/hierarchy.tree.js"
     }
   ]
 }