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

package/README.md

@@ -6,6 +6,8 @@ Plugin for editing hierarchical references in the [Sanity studio](https://www.sa
 
 ⚠️ **Compatibility:** This plugin requires Sanity Studio [version 2.25.0](https://github.com/sanity-io/sanity/releases/tag/v2.25.0) or higher.
 
+If you're looking for a way to order documents on a flat list, refer to [@sanity/orderable-document-list](https://github.com/sanity-io/orderable-document-list).
+
 ## Getting started
 
 ```bash

package/lib/TreeDeskStructure.js

@@ -31,7 +31,7 @@ const TreeDeskStructure = (props) => {
         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(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: () => {
+        return (_jsx(DeskWarning, { title: "This hierarchy tree contains a draft", subtitle: "Click on the button below to publish your draft in order to continue editing the live\r\n      published document.", children: _jsx(Button, { fontSize: 1, tone: "positive", text: "Publish draft", icon: PublishIcon, onClick: () => {
                     ops.publish?.execute?.();
                     push({
                         status: 'info',

package/lib/components/DocumentPreviewStatus.js

@@ -5,10 +5,10 @@ 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);
+    return (_jsxs("span", { title: timeAgo, children: [timeAgo, timeAgo.toLowerCase().trim().startsWith('just now') ? '' : ' ago'] }, void 0));
 }
-const PublishedStatus = ({ document }) => (_jsx(Tooltip, { content: _jsx(Box, { padding: 2, children: _jsx(Text, { size: 1, children: document ? (_jsxs(_Fragment, { children: ["Published ", document._updatedAt && _jsx(TimeAgo, { time: document._updatedAt }, void 0)] }, void 0)) : (_jsx(_Fragment, { children: "Not published" }, void 0)) }, void 0) }, void 0), children: _jsx(TextWithTone, { tone: "positive", dimmed: !document, muted: !document, size: 1, children: _jsx(PublishIcon, {}, void 0) }, void 0) }, void 0));
-const DraftStatus = ({ document }) => (_jsx(Tooltip, { content: _jsx(Box, { padding: 2, children: _jsx(Text, { size: 1, children: document ? (_jsxs(_Fragment, { children: ["Edited ", document?._updatedAt && _jsx(TimeAgo, { time: document?._updatedAt }, void 0)] }, void 0)) : (_jsx(_Fragment, { children: "No unpublished edits" }, void 0)) }, void 0) }, void 0), children: _jsx(TextWithTone, { tone: "caution", dimmed: !document, muted: !document, size: 1, children: _jsx(EditIcon, {}, void 0) }, void 0) }, void 0));
+const PublishedStatus = ({ document }) => (_jsx(Tooltip, { portal: true, 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, { portal: true, 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));

package/lib/components/NodeActions.js

@@ -19,6 +19,6 @@ const NodeActions = ({ nodeProps }) => {
         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));
+    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 item", 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/PlaceholderDropzone.js

@@ -1,5 +1,5 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Card, Stack, Text } from '@sanity/ui';
+import { Box, Card, Stack, Text } from '@sanity/ui';
 const PlaceholderDropzone = (props) => {
     const isValid = props.isOver && props.canDrop;
     const isInvalid = props.isOver && !props.canDrop;
@@ -10,8 +10,8 @@ const PlaceholderDropzone = (props) => {
     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));
+    return (_jsx(Box, { padding: 3, children: _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) }, void 0));
 };
 export default PlaceholderDropzone;

package/lib/components/TreeEditor.js

@@ -32,9 +32,9 @@ const TreeEditor = (props) => {
                                 // Do nothing. onMoveNode will do all the work
                             }, onVisibilityToggle: handleVisibilityToggle, onMoveNode: (data) => operations.handleMovedNode(data), treeData: localTree, ...getCommonTreeProps({
                                 placeholder: {
-                                    title: 'Add items by dragging them here'
+                                    title: 'Add items from the list below'
                                 }
-                            }) }, 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: () => {
+                            }) }, 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, { portal: true, 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));
 };

package/lib/createDeskHierarchy.js

@@ -48,6 +48,7 @@ export default function createDeskHierarchy(props) {
         .child(Object.assign(mainList.serialize(), {
         type: 'component',
         component: deskTreeValidator(props),
-        options: props
+        options: props,
+        __preserveInstance: true
     }, props.title ? { title: props.title } : {}));
 }

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

@@ -11,7 +11,7 @@ export default {
             name: 'tree',
             title: 'Tree',
             options: {
-                referenceTo: ['document']
+                referenceTo: ['image']
             }
         })
     ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/hierarchical-document-list",
-  "version": "0.1.0-next.2",
+  "version": "0.1.0-next.3",
   "author": "Sanity <hello@sanity.io>",
   "license": "MIT",
   "main": "lib/index.js",

package/lib/types.d.ts

@@ -1,122 +0,0 @@
-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

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