@payloadcms/ui 4.0.0-internal.af6aad0 → 4.0.0-internal.b8e7c89

package/dist/elements/Hierarchy/Tree/TreeNode/index.css

@@ -2,66 +2,49 @@
 
 @layer payload-default {
   .tree-node {
+    border-radius: var(--button-radius);
+
+    .tree-node {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
     &:focus-visible {
       outline: none;
     }
   }
 
-  .tree-node:focus-visible > .tree-node__content-wrapper > .tree-node__content::before {
+  .tree-node:focus-visible > .tree-node__content-wrapper > .tree-node__content {
     outline: var(--accessibility-outline);
     outline-offset: var(--accessibility-outline-offset);
   }
 
+  .tree-node__content-wrapper {
+    margin-left: calc(
+      (var(--tree-depth, 0) * var(--tree-indent)) + (var(--spacer-1) * var(--tree-depth))
+    );
+    margin-bottom: var(--tree-row-gap);
+  }
+
   .tree-node__content {
-    position: relative;
-    isolation: isolate;
     display: flex;
     align-items: center;
-    height: var(--spacer-5);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--tree-font-size);
-    font-weight: var(--text-body-medium-font-weight);
     line-height: var(--tree-node-content-height);
-    cursor: pointer;
-    user-select: none;
-
-    &::before {
-      content: '';
-      position: absolute;
-      inset-block: var(--spacer-1);
-      inset-inline: var(--spacer-2);
-      border-radius: var(--button-radius);
-      z-index: -1;
-    }
-
-    &:hover:not(.tree-node__content--selected)::before {
-      background: var(--color-bg-secondary);
-    }
-  }
-
-  .tree-node__content--selected {
-    font-weight: var(--text-body-medium-strong-font-weight);
-
-    &::before {
-      background: var(--color-bg-selected);
-    }
   }
 
   .tree-node__toggle {
-    position: absolute;
-    inset-block: 0;
-    inset-inline-start: calc((var(--tree-depth, 0) * var(--tree-indent)) + var(--spacer-3));
-    z-index: 1;
-    width: var(--tree-chevron-width);
     background: none;
     border: none;
-    padding: 0;
+    padding-block: var(--spacer-1);
+    padding-inline-start: var(--spacer-1);
     margin: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: default;
     color: var(--color-icon-tertiary);
+    flex-shrink: 0;
     border-radius: var(--button-radius);
 
     &:hover {
@@ -70,48 +53,35 @@
   }
 
   .tree-node__node-trigger {
-    position: absolute;
-    inset: 0;
     border: none;
     background: none;
     margin: 0;
+    padding: 0;
     color: inherit;
     font: inherit;
-    text-align: left;
-    cursor: pointer;
     min-width: 0;
+    flex: 1;
     display: flex;
     align-items: center;
-    padding-block: 0;
-    padding-inline: calc(
-        (var(--tree-depth, 0) * var(--tree-indent)) + var(--spacer-3) + var(--tree-chevron-width) +
-          var(--tree-chevron-spacing)
-      )
-      var(--spacer-3);
+    gap: var(--spacer-1);
+    text-align: left;
+    cursor: pointer;
+    padding-block: var(--spacer-1);
+    padding-inline-end: var(--spacer-1);
   }
 
   .tree-node__title {
     padding-left: 0;
+    margin-left: var(--spacer-1);
   }
 
   .tree-node__loading {
-    position: relative;
-    z-index: 1;
-    margin-inline: auto var(--spacer-3);
+    margin-left: auto;
     display: inline-flex;
     align-items: center;
   }
 
-  /*
-   * Drop invitation. An inset ring rather than an outset one, because tree rows are full-bleed and
-   * an outset ring would be clipped by the sidebar's own overflow.
-   */
-  .tree-node__content--drop-over {
-    background: color-mix(in srgb, var(--color-border-selected) 8%, transparent);
-    box-shadow: inset 0 0 0 var(--stroke-width-medium) var(--color-border-selected);
-  }
-
-  .tree-node__content--drop-invalid {
-    cursor: not-allowed;
+  .tree-node__children {
+    /* Children are rendered with depth variable set */
   }
 }

package/dist/elements/Hierarchy/Tree/TreeNode/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { TreeNodeProps } from '../types.js';
 import './index.css';
-export declare const TreeNode: ({ allPossibleTypeValues, ancestorIds, baseFilter, cache, collectionSlug, depth, dropParentFieldName, expandedNodes, filterByCollections, limit, node, onSelect, onToggle, parentFieldName, selected, selectedNodeId, typeFieldName, useAsTitle, }: TreeNodeProps) => React.JSX.Element;
+export declare const TreeNode: ({ allPossibleTypeValues, baseFilter, cache, collectionSlug, depth, expandedNodes, filterByCollections, icon, limit, node, onSelect, onToggle, parentFieldName, selected, selectedNodeId, typeFieldName, useAsTitle, }: TreeNodeProps) => React.JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/Hierarchy/Tree/TreeNode/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/Tree/TreeNode/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAGtE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAShD,OAAO,aAAa,CAAA;AA2BpB,eAAO,MAAM,QAAQ,sPAmBlB,aAAa,sBA8Pf,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/Tree/TreeNode/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAQhD,OAAO,aAAa,CAAA;AAqBpB,eAAO,MAAM,QAAQ,0NAkBlB,aAAa,sBAgNf,CAAA"}

package/dist/elements/Hierarchy/Tree/TreeNode/index.js

@@ -1,22 +1,15 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useDroppable } from '@dnd-kit/core';
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { Spinner } from '../../../../elements/Spinner/index.js';
 import { ChevronIcon } from '../../../../icons/Chevron/index.js';
-import { useHierarchyDnd } from '../../../../providers/HierarchyDnd/index.js';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import { LoadMore } from '../LoadMore/index.js';
 import { useFocusableItem, useTreeFocus } from '../TreeFocusContext.js';
 import { useChildren } from '../useChildren.js';
 import './index.css';
 const DEFAULT_TREE_LIMIT = 10;
-/**
- * How long a drag has to hover a collapsed node before it springs open, so a drag can drill into the
- * tree without being dropped and restarted.
- */
-const SPRING_LOAD_DELAY = 600;
 const baseClass = 'tree-node';
 const getDocumentTitle = (doc, useAsTitle) => {
   const docId = doc.id;
@@ -32,14 +25,13 @@ const getDocumentTitle = (doc, useAsTitle) => {
 };
 export const TreeNode = ({
   allPossibleTypeValues,
-  ancestorIds,
   baseFilter,
   cache,
   collectionSlug,
   depth = 0,
-  dropParentFieldName,
   expandedNodes,
   filterByCollections,
+  icon,
   limit = DEFAULT_TREE_LIMIT,
   node,
   onSelect,
@@ -108,48 +100,11 @@ export const TreeNode = ({
       id: node.id
     });
   }, [load, node.id, onToggle]);
-  const {
-    canDrop
-  } = useHierarchyDnd();
-  const childAncestorIds = useMemo(() => [...(ancestorIds ?? []), node.id], [ancestorIds, node.id]);
-  const dropData = useMemo(() => dropParentFieldName ? {
-    type: 'hierarchy-folder',
-    // Tree nodes carry only id/title/hasChildren, not the folder's collectionSpecific value,
-    // so type acceptance is left to the server validator here. The self/descendant check
-    // below still runs, since that only needs ids.
-    ancestorIds: ancestorIds ?? [],
-    folderId: node.id,
-    hierarchySlug: collectionSlug,
-    parentFieldName: dropParentFieldName,
-    title: node.title
-  } : undefined, [ancestorIds, collectionSlug, dropParentFieldName, node.id, node.title]);
-  const {
-    isOver,
-    setNodeRef: setDropRef
-  } = useDroppable({
-    id: `tree-node-drop-${collectionSlug}-${node.id}`,
-    data: dropData,
-    disabled: !dropData
-  });
-  const dropState = isOver && dropData ? canDrop(dropData) ? 'over' : 'invalid' : undefined;
   const handleSelectClick = useCallback(() => {
     onSelect?.({
       id: node.id
     });
   }, [node.id, onSelect]);
-  /**
-  * Hovering a collapsed node mid-drag opens it after a beat. The timer is cleared when the drag
-  * leaves, so a pass-over on the way somewhere else doesn't expand the whole tree.
-  */
-  useEffect(() => {
-    if (!isOver || expanded || !hasChildren) {
-      return;
-    }
-    const timeout = setTimeout(() => {
-      handleToggle();
-    }, SPRING_LOAD_DELAY);
-    return () => clearTimeout(timeout);
-  }, [expanded, handleToggle, hasChildren, isOver]);
   const handleKeyDown = useCallback(e_0 => {
     if (e_0.target !== e_0.currentTarget) {
       return;
@@ -199,8 +154,7 @@ export const TreeNode = ({
     children: [/*#__PURE__*/_jsx("div", {
       className: `${baseClass}__content-wrapper`,
       children: /*#__PURE__*/_jsxs("div", {
-        className: [`${baseClass}__content`, selected && `${baseClass}__content--selected`, dropState && `${baseClass}__content--drop-${dropState}`].filter(Boolean).join(' '),
-        ref: setDropRef,
+        className: [`${baseClass}__content`, 'sidebar-row', selected && `${baseClass}__content--selected`, selected && 'sidebar-row--selected'].filter(Boolean).join(' '),
         children: [hasChildren && /*#__PURE__*/_jsx("button", {
           "aria-label": expanded ? t('general:collapse') : t('general:open'),
           className: `${baseClass}__toggle`,
@@ -212,17 +166,20 @@ export const TreeNode = ({
             direction: expanded ? 'down' : 'right',
             size: 16
           })
-        }), /*#__PURE__*/_jsx("button", {
+        }), /*#__PURE__*/_jsxs("button", {
           className: [`${baseClass}__node-trigger`, selected && `${baseClass}__node-trigger--selected`].filter(Boolean).join(' '),
           onClick: handleSelectClick,
           onMouseDown: e_3 => e_3.preventDefault(),
           tabIndex: -1,
           title: node.title,
           type: "button",
-          children: /*#__PURE__*/_jsx("span", {
+          children: [Boolean(icon) && /*#__PURE__*/_jsx("span", {
+            className: "sidebar-row__icon",
+            children: icon
+          }), /*#__PURE__*/_jsx("span", {
             className: `${baseClass}__title sidebar-row__title`,
             children: node.title
-          })
+          })]
         }), isLoading && expanded && /*#__PURE__*/_jsx("span", {
           className: `${baseClass}__loading`,
           children: /*#__PURE__*/_jsx(Spinner, {
@@ -241,14 +198,13 @@ export const TreeNode = ({
           const childTitle = getDocumentTitle(child, useAsTitle);
           return /*#__PURE__*/_jsx(TreeNode, {
             allPossibleTypeValues: allPossibleTypeValues,
-            ancestorIds: childAncestorIds,
             baseFilter: baseFilter,
             cache: cache,
             collectionSlug: collectionSlug,
             depth: depth + 1,
-            dropParentFieldName: dropParentFieldName,
             expandedNodes: expandedNodes,
             filterByCollections: filterByCollections,
+            icon: icon,
             limit: limit,
             node: {
               id: childId,

package/dist/elements/Hierarchy/Tree/TreeNode/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useDroppable","React","useCallback","useEffect","useMemo","useRef","Spinner","ChevronIcon","useHierarchyDnd","useTranslation","LoadMore","useFocusableItem","useTreeFocus","useChildren","DEFAULT_TREE_LIMIT","SPRING_LOAD_DELAY","baseClass","getDocumentTitle","doc","useAsTitle","docId","id","idStr","String","value","TreeNode","allPossibleTypeValues","ancestorIds","baseFilter","cache","collectionSlug","depth","dropParentFieldName","expandedNodes","filterByCollections","limit","node","onSelect","onToggle","parentFieldName","selected","selectedNodeId","typeFieldName","t","expanded","has","nodeRef","setFocusedId","children","hasMore","isLoading","load","loadMore","loadMoreFromHook","totalDocs","enabled","parentId","handleLoadMore","newDocs","length","firstNewDoc","window","requestAnimationFrame","handleFocus","tabIndex","type","ref","hasChildren","handleToggle","e","stopPropagation","canDrop","childAncestorIds","dropData","folderId","hierarchySlug","title","undefined","isOver","setNodeRef","setDropRef","data","disabled","dropState","handleSelectClick","timeout","setTimeout","clearTimeout","handleKeyDown","target","currentTarget","key","preventDefault","_jsxs","className","onFocus","onKeyDown","role","style","_jsx","filter","Boolean","join","onClick","onMouseDown","direction","size","loadingText","_Fragment","map","child","childData","childId","childTitle","currentCount","onLoadMore"],"sources":["../../../../../src/elements/Hierarchy/Tree/TreeNode/index.tsx"],"sourcesContent":["'use client'\n\nimport { useDroppable } from '@dnd-kit/core'\nimport React, { useCallback, useEffect, useMemo, useRef } from 'react'\n\nimport type { HierarchyDropData } from '../../../../providers/HierarchyDnd/types.js'\nimport type { TreeNodeProps } from '../types.js'\n\nimport { Spinner } from '../../../../elements/Spinner/index.js'\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { useHierarchyDnd } from '../../../../providers/HierarchyDnd/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { LoadMore } from '../LoadMore/index.js'\nimport { useFocusableItem, useTreeFocus } from '../TreeFocusContext.js'\nimport { useChildren } from '../useChildren.js'\nimport './index.css'\n\nconst DEFAULT_TREE_LIMIT = 10\n\n/**\n * How long a drag has to hover a collapsed node before it springs open, so a drag can drill into the\n * tree without being dropped and restarted.\n */\nconst SPRING_LOAD_DELAY = 600\n\nconst baseClass = 'tree-node'\n\nconst getDocumentTitle = (doc: Record<string, unknown>, useAsTitle: string | undefined): string => {\n  const docId: number | string = doc.id as number | string\n  const idStr = typeof docId === 'number' ? String(docId) : docId\n\n  if (!useAsTitle) {\n    return idStr\n  }\n\n  const value = doc[useAsTitle]\n  if (value && (typeof value === 'string' || typeof value === 'number')) {\n    return String(value)\n  }\n  return idStr\n}\n\nexport const TreeNode = ({\n  allPossibleTypeValues,\n  ancestorIds,\n  baseFilter,\n  cache,\n  collectionSlug,\n  depth = 0,\n  dropParentFieldName,\n  expandedNodes,\n  filterByCollections,\n  limit = DEFAULT_TREE_LIMIT,\n  node,\n  onSelect,\n  onToggle,\n  parentFieldName,\n  selected,\n  selectedNodeId,\n  typeFieldName,\n  useAsTitle,\n}: TreeNodeProps) => {\n  const { t } = useTranslation()\n  const expanded = expandedNodes.has(node.id)\n  const nodeRef = useRef<HTMLDivElement>(null)\n  const { setFocusedId } = useTreeFocus()\n\n  const {\n    children,\n    hasMore,\n    isLoading,\n    load,\n    loadMore: loadMoreFromHook,\n    totalDocs,\n  } = useChildren({\n    allPossibleTypeValues,\n    baseFilter,\n    cache,\n    collectionSlug,\n    enabled: expanded,\n    filterByCollections,\n    limit,\n    parentFieldName,\n    parentId: node.id,\n    typeFieldName,\n    useAsTitle,\n  })\n\n  const handleLoadMore = React.useCallback(async () => {\n    const newDocs = await loadMoreFromHook()\n\n    if (newDocs && newDocs.length > 0) {\n      const firstNewDoc = newDocs[0]\n      const docId: number | string = (firstNewDoc as { id: number | string }).id\n      window.requestAnimationFrame(() => {\n        setFocusedId(`node-${docId}`)\n      })\n    }\n  }, [loadMoreFromHook, setFocusedId])\n\n  const { handleFocus, tabIndex } = useFocusableItem({\n    id: `node-${node.id}`,\n    type: 'node',\n    ref: nodeRef,\n  })\n\n  // Determine if node has children:\n  // - If explicitly set in data, use that\n  // - If expanded and loaded, check the actual children\n  // - Otherwise, assume it might have children (show chevron until proven otherwise)\n  const hasChildren =\n    node.hasChildren === true || (expanded && children !== null ? children.length > 0 : true)\n\n  const handleToggle = useCallback(\n    (e?: React.SyntheticEvent) => {\n      e?.stopPropagation()\n      void load()\n      onToggle({ id: node.id })\n    },\n    [load, node.id, onToggle],\n  )\n\n  const { canDrop } = useHierarchyDnd()\n\n  const childAncestorIds = useMemo(() => [...(ancestorIds ?? []), node.id], [ancestorIds, node.id])\n\n  const dropData = useMemo<HierarchyDropData | undefined>(\n    () =>\n      dropParentFieldName\n        ? {\n            type: 'hierarchy-folder',\n            // Tree nodes carry only id/title/hasChildren, not the folder's collectionSpecific value,\n            // so type acceptance is left to the server validator here. The self/descendant check\n            // below still runs, since that only needs ids.\n            ancestorIds: ancestorIds ?? [],\n            folderId: node.id,\n            hierarchySlug: collectionSlug,\n            parentFieldName: dropParentFieldName,\n            title: node.title,\n          }\n        : undefined,\n    [ancestorIds, collectionSlug, dropParentFieldName, node.id, node.title],\n  )\n\n  const { isOver, setNodeRef: setDropRef } = useDroppable({\n    id: `tree-node-drop-${collectionSlug}-${node.id}`,\n    data: dropData,\n    disabled: !dropData,\n  })\n\n  const dropState = isOver && dropData ? (canDrop(dropData) ? 'over' : 'invalid') : undefined\n\n  const handleSelectClick = useCallback(() => {\n    onSelect?.({ id: node.id })\n  }, [node.id, onSelect])\n\n  /**\n   * Hovering a collapsed node mid-drag opens it after a beat. The timer is cleared when the drag\n   * leaves, so a pass-over on the way somewhere else doesn't expand the whole tree.\n   */\n  useEffect(() => {\n    if (!isOver || expanded || !hasChildren) {\n      return\n    }\n\n    const timeout = setTimeout(() => {\n      handleToggle()\n    }, SPRING_LOAD_DELAY)\n\n    return () => clearTimeout(timeout)\n  }, [expanded, handleToggle, hasChildren, isOver])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.target !== e.currentTarget) {\n        return\n      }\n      switch (e.key) {\n        case ' ':\n        case 'Enter':\n          e.preventDefault()\n          e.stopPropagation()\n          handleSelectClick()\n          break\n        case 'ArrowLeft':\n          e.preventDefault()\n          e.stopPropagation()\n          if (hasChildren && expanded) {\n            onToggle({ id: node.id })\n          }\n          break\n        case 'ArrowRight':\n          e.preventDefault()\n          e.stopPropagation()\n          if (hasChildren && !expanded) {\n            handleToggle()\n          }\n          break\n      }\n    },\n    [expanded, handleSelectClick, handleToggle, hasChildren, node.id, onToggle],\n  )\n\n  return (\n    <div\n      aria-expanded={hasChildren ? expanded : undefined}\n      aria-level={depth + 1}\n      aria-selected={selected}\n      className={baseClass}\n      onFocus={(e) => {\n        if (e.target === e.currentTarget) {\n          handleFocus()\n        }\n      }}\n      onKeyDown={handleKeyDown}\n      ref={nodeRef}\n      role=\"treeitem\"\n      style={{ '--tree-depth': depth } as React.CSSProperties}\n      tabIndex={tabIndex}\n    >\n      <div className={`${baseClass}__content-wrapper`}>\n        <div\n          className={[\n            `${baseClass}__content`,\n            selected && `${baseClass}__content--selected`,\n            dropState && `${baseClass}__content--drop-${dropState}`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          ref={setDropRef}\n        >\n          {hasChildren && (\n            <button\n              aria-label={expanded ? t('general:collapse') : t('general:open')}\n              className={`${baseClass}__toggle`}\n              onClick={handleToggle}\n              onMouseDown={(e) => e.preventDefault()}\n              tabIndex={-1}\n              type=\"button\"\n            >\n              <ChevronIcon direction={expanded ? 'down' : 'right'} size={16} />\n            </button>\n          )}\n          <button\n            className={[\n              `${baseClass}__node-trigger`,\n              selected && `${baseClass}__node-trigger--selected`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={handleSelectClick}\n            onMouseDown={(e) => e.preventDefault()}\n            tabIndex={-1}\n            title={node.title}\n            type=\"button\"\n          >\n            <span className={`${baseClass}__title sidebar-row__title`}>{node.title}</span>\n          </button>\n          {isLoading && expanded && (\n            <span className={`${baseClass}__loading`}>\n              <Spinner loadingText={null} size=\"sm\" />\n            </span>\n          )}\n        </div>\n      </div>\n\n      {expanded && children && children.length > 0 && (\n        <>\n          <div className={`${baseClass}__children`} role=\"group\">\n            {children.map((child) => {\n              const childData = child as { id: number | string }\n              const childId = childData.id\n              const childTitle = getDocumentTitle(child, useAsTitle)\n              return (\n                <TreeNode\n                  allPossibleTypeValues={allPossibleTypeValues}\n                  ancestorIds={childAncestorIds}\n                  baseFilter={baseFilter}\n                  cache={cache}\n                  collectionSlug={collectionSlug}\n                  depth={depth + 1}\n                  dropParentFieldName={dropParentFieldName}\n                  expandedNodes={expandedNodes}\n                  filterByCollections={filterByCollections}\n                  key={String(childId)}\n                  limit={limit}\n                  node={{\n                    id: childId,\n                    hasChildren: true,\n                    title: childTitle,\n                  }}\n                  onSelect={onSelect}\n                  onToggle={onToggle}\n                  parentFieldName={parentFieldName}\n                  selected={String(childId) === String(selectedNodeId)}\n                  selectedNodeId={selectedNodeId}\n                  typeFieldName={typeFieldName}\n                  useAsTitle={useAsTitle}\n                />\n              )\n            })}\n          </div>\n          {hasMore && (\n            <LoadMore\n              currentCount={children.length}\n              depth={depth + 1}\n              id={`load-more-${node.id}`}\n              onLoadMore={handleLoadMore}\n              totalDocs={totalDocs}\n            />\n          )}\n        </>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useRef","Spinner","ChevronIcon","useTranslation","LoadMore","useFocusableItem","useTreeFocus","useChildren","DEFAULT_TREE_LIMIT","baseClass","getDocumentTitle","doc","useAsTitle","docId","id","idStr","String","value","TreeNode","allPossibleTypeValues","baseFilter","cache","collectionSlug","depth","expandedNodes","filterByCollections","icon","limit","node","onSelect","onToggle","parentFieldName","selected","selectedNodeId","typeFieldName","t","expanded","has","nodeRef","setFocusedId","children","hasMore","isLoading","load","loadMore","loadMoreFromHook","totalDocs","enabled","parentId","handleLoadMore","newDocs","length","firstNewDoc","window","requestAnimationFrame","handleFocus","tabIndex","type","ref","hasChildren","handleToggle","e","stopPropagation","handleSelectClick","handleKeyDown","target","currentTarget","key","preventDefault","_jsxs","undefined","className","onFocus","onKeyDown","role","style","_jsx","filter","Boolean","join","onClick","onMouseDown","direction","size","title","loadingText","_Fragment","map","child","childData","childId","childTitle","currentCount","onLoadMore"],"sources":["../../../../../src/elements/Hierarchy/Tree/TreeNode/index.tsx"],"sourcesContent":["'use client'\n\nimport React, { useCallback, useRef } from 'react'\n\nimport type { TreeNodeProps } from '../types.js'\n\nimport { Spinner } from '../../../../elements/Spinner/index.js'\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { LoadMore } from '../LoadMore/index.js'\nimport { useFocusableItem, useTreeFocus } from '../TreeFocusContext.js'\nimport { useChildren } from '../useChildren.js'\nimport './index.css'\n\nconst DEFAULT_TREE_LIMIT = 10\n\nconst baseClass = 'tree-node'\n\nconst getDocumentTitle = (doc: Record<string, unknown>, useAsTitle: string | undefined): string => {\n  const docId: number | string = doc.id as number | string\n  const idStr = typeof docId === 'number' ? String(docId) : docId\n\n  if (!useAsTitle) {\n    return idStr\n  }\n\n  const value = doc[useAsTitle]\n  if (value && (typeof value === 'string' || typeof value === 'number')) {\n    return String(value)\n  }\n  return idStr\n}\n\nexport const TreeNode = ({\n  allPossibleTypeValues,\n  baseFilter,\n  cache,\n  collectionSlug,\n  depth = 0,\n  expandedNodes,\n  filterByCollections,\n  icon,\n  limit = DEFAULT_TREE_LIMIT,\n  node,\n  onSelect,\n  onToggle,\n  parentFieldName,\n  selected,\n  selectedNodeId,\n  typeFieldName,\n  useAsTitle,\n}: TreeNodeProps) => {\n  const { t } = useTranslation()\n  const expanded = expandedNodes.has(node.id)\n  const nodeRef = useRef<HTMLDivElement>(null)\n  const { setFocusedId } = useTreeFocus()\n\n  const {\n    children,\n    hasMore,\n    isLoading,\n    load,\n    loadMore: loadMoreFromHook,\n    totalDocs,\n  } = useChildren({\n    allPossibleTypeValues,\n    baseFilter,\n    cache,\n    collectionSlug,\n    enabled: expanded,\n    filterByCollections,\n    limit,\n    parentFieldName,\n    parentId: node.id,\n    typeFieldName,\n    useAsTitle,\n  })\n\n  const handleLoadMore = React.useCallback(async () => {\n    const newDocs = await loadMoreFromHook()\n\n    if (newDocs && newDocs.length > 0) {\n      const firstNewDoc = newDocs[0]\n      const docId: number | string = (firstNewDoc as { id: number | string }).id\n      window.requestAnimationFrame(() => {\n        setFocusedId(`node-${docId}`)\n      })\n    }\n  }, [loadMoreFromHook, setFocusedId])\n\n  const { handleFocus, tabIndex } = useFocusableItem({\n    id: `node-${node.id}`,\n    type: 'node',\n    ref: nodeRef,\n  })\n\n  // Determine if node has children:\n  // - If explicitly set in data, use that\n  // - If expanded and loaded, check the actual children\n  // - Otherwise, assume it might have children (show chevron until proven otherwise)\n  const hasChildren =\n    node.hasChildren === true || (expanded && children !== null ? children.length > 0 : true)\n\n  const handleToggle = useCallback(\n    (e?: React.SyntheticEvent) => {\n      e?.stopPropagation()\n      void load()\n      onToggle({ id: node.id })\n    },\n    [load, node.id, onToggle],\n  )\n\n  const handleSelectClick = useCallback(() => {\n    onSelect?.({ id: node.id })\n  }, [node.id, onSelect])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.target !== e.currentTarget) {\n        return\n      }\n      switch (e.key) {\n        case ' ':\n        case 'Enter':\n          e.preventDefault()\n          e.stopPropagation()\n          handleSelectClick()\n          break\n        case 'ArrowLeft':\n          e.preventDefault()\n          e.stopPropagation()\n          if (hasChildren && expanded) {\n            onToggle({ id: node.id })\n          }\n          break\n        case 'ArrowRight':\n          e.preventDefault()\n          e.stopPropagation()\n          if (hasChildren && !expanded) {\n            handleToggle()\n          }\n          break\n      }\n    },\n    [expanded, handleSelectClick, handleToggle, hasChildren, node.id, onToggle],\n  )\n\n  return (\n    <div\n      aria-expanded={hasChildren ? expanded : undefined}\n      aria-level={depth + 1}\n      aria-selected={selected}\n      className={baseClass}\n      onFocus={(e) => {\n        if (e.target === e.currentTarget) {\n          handleFocus()\n        }\n      }}\n      onKeyDown={handleKeyDown}\n      ref={nodeRef}\n      role=\"treeitem\"\n      style={{ '--tree-depth': depth } as React.CSSProperties}\n      tabIndex={tabIndex}\n    >\n      <div className={`${baseClass}__content-wrapper`}>\n        <div\n          className={[\n            `${baseClass}__content`,\n            'sidebar-row',\n            selected && `${baseClass}__content--selected`,\n            selected && 'sidebar-row--selected',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {hasChildren && (\n            <button\n              aria-label={expanded ? t('general:collapse') : t('general:open')}\n              className={`${baseClass}__toggle`}\n              onClick={handleToggle}\n              onMouseDown={(e) => e.preventDefault()}\n              tabIndex={-1}\n              type=\"button\"\n            >\n              <ChevronIcon direction={expanded ? 'down' : 'right'} size={16} />\n            </button>\n          )}\n          <button\n            className={[\n              `${baseClass}__node-trigger`,\n              selected && `${baseClass}__node-trigger--selected`,\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            onClick={handleSelectClick}\n            onMouseDown={(e) => e.preventDefault()}\n            tabIndex={-1}\n            title={node.title}\n            type=\"button\"\n          >\n            {Boolean(icon) && <span className=\"sidebar-row__icon\">{icon}</span>}\n            <span className={`${baseClass}__title sidebar-row__title`}>{node.title}</span>\n          </button>\n          {isLoading && expanded && (\n            <span className={`${baseClass}__loading`}>\n              <Spinner loadingText={null} size=\"sm\" />\n            </span>\n          )}\n        </div>\n      </div>\n\n      {expanded && children && children.length > 0 && (\n        <>\n          <div className={`${baseClass}__children`} role=\"group\">\n            {children.map((child) => {\n              const childData = child as { id: number | string }\n              const childId = childData.id\n              const childTitle = getDocumentTitle(child, useAsTitle)\n              return (\n                <TreeNode\n                  allPossibleTypeValues={allPossibleTypeValues}\n                  baseFilter={baseFilter}\n                  cache={cache}\n                  collectionSlug={collectionSlug}\n                  depth={depth + 1}\n                  expandedNodes={expandedNodes}\n                  filterByCollections={filterByCollections}\n                  icon={icon}\n                  key={String(childId)}\n                  limit={limit}\n                  node={{\n                    id: childId,\n                    hasChildren: true,\n                    title: childTitle,\n                  }}\n                  onSelect={onSelect}\n                  onToggle={onToggle}\n                  parentFieldName={parentFieldName}\n                  selected={String(childId) === String(selectedNodeId)}\n                  selectedNodeId={selectedNodeId}\n                  typeFieldName={typeFieldName}\n                  useAsTitle={useAsTitle}\n                />\n              )\n            })}\n          </div>\n          {hasMore && (\n            <LoadMore\n              currentCount={children.length}\n              depth={depth + 1}\n              id={`load-more-${node.id}`}\n              onLoadMore={handleLoadMore}\n              totalDocs={totalDocs}\n            />\n          )}\n        </>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Hierarchy/Tree/index.css

@@ -3,29 +3,29 @@
   .hierarchy-sidebar-tab {
     display: flex;
     flex-direction: column;
+    gap: var(--spacer-2);
   }
 
   .tree {
     --tree-indent: var(--spacer-3);
     --tree-chevron-width: var(--spacer-3);
-    --tree-chevron-spacing: var(--spacer-1);
+    --tree-chevron-spacing: var(--spacer-2);
     --tree-node-content-height: var(--text-body-medium-line-height);
     --tree-row-gap: var(--spacer-1);
     --tree-font-size: var(--text-body-medium-font-size);
 
-    padding: var(--spacer-1) 0;
+    padding: 0;
     margin: 0;
   }
 
   .tree__all-option-wrapper {
     display: grid;
-    padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-2-5);
     gap: var(--spacer-1);
-    grid-template-columns: auto auto;
+    grid-template-columns: 1fr auto;
     align-items: center;
-    justify-content: space-between;
+    margin-bottom: var(--spacer-2);
 
-    .tree__collapse-all-button {
+    .tree__create-button {
       padding: 0;
 
       &:hover {
@@ -35,8 +35,9 @@
   }
 
   .tree__all-option {
-    gap: 0;
-    padding-inline-end: var(--spacer-2);
+    gap: var(--spacer-1);
+    padding-left: var(--spacer-2);
+    padding-block: var(--spacer-1);
 
     .sidebar-row__title {
       font-weight: var(--text-body-medium-strong-font-weight);

package/dist/elements/Hierarchy/Tree/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Tree/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAElE,OAAO,KAAK,EAAkB,kBAAkB,EAAgB,MAAM,YAAY,CAAA;AAclF,OAAO,aAAa,CAAA;AA4XpB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAMtD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Tree/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAwD,MAAM,OAAO,CAAA;AAE5E,OAAO,KAAK,EAAkB,kBAAkB,EAAgB,MAAM,YAAY,CAAA;AAgBlF,OAAO,aAAa,CAAA;AAsYpB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAMtD,CAAA"}

package/dist/elements/Hierarchy/Tree/index.js

@@ -1,10 +1,12 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
 import { DEFAULT_HIERARCHY_TREE_LIMIT } from 'payload/shared';
-import React, { useCallback, useId, useMemo, useRef } from 'react';
-import { CollapseLayersIcon } from '../../../icons/CollapseLayers/index.js';
+import React, { useCallback, useId, useMemo, useRef, useState } from 'react';
+import { PlusIcon } from '../../../icons/Plus/index.js';
+import { useAuth } from '../../../providers/Auth/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useHierarchy } from '../../../providers/Hierarchy/index.js';
 import { useRouter } from '../../../providers/RouterAdapter/index.js';
@@ -12,14 +14,13 @@ import { useTranslation } from '../../../providers/Translation/index.js';
 import { Button } from '../../Button/index.js';
 import { CreateDocumentButton } from '../../CreateDocumentButton/index.js';
 import { DelayedSpinner } from '../../DelayedSpinner/index.js';
+import { DocumentDrawer } from '../../DocumentDrawer/index.js';
 import { LoadMore } from './LoadMore/index.js';
 import { TreeFocusProvider, useTreeFocus } from './TreeFocusContext.js';
 import { TreeNode } from './TreeNode/index.js';
 import { useChildren } from './useChildren.js';
 import './index.css';
 const baseClass = 'tree';
-/** Root nodes have no ancestors; hoisted so the reference stays stable across renders. */
-const ROOT_ANCESTOR_IDS = [];
 const getDocumentTitle = (doc, useAsTitle) => {
   const docId = doc.id;
   const idStr = typeof docId === 'number' ? String(docId) : docId;
@@ -53,12 +54,19 @@ const HierarchyTreeInner = ({
     i18n,
     t
   } = useTranslation();
+  const {
+    permissions
+  } = useAuth();
   const {
     getEntityConfig
   } = useConfig();
+  const {
+    closeModal,
+    openModal
+  } = useModal();
   const createDrawerSlug = `tree-create-${useId()}`;
+  const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false);
   const {
-    collapseAllForCollection,
     getExpandedNodesForCollection,
     getTreeDataForCollection,
     toggleNodeForCollection,
@@ -71,6 +79,7 @@ const HierarchyTreeInner = ({
   const parentFieldName = hierarchyConfig?.parentFieldName;
   const treeLimit = hierarchyConfig?.admin?.treeLimit ?? DEFAULT_HIERARCHY_TREE_LIMIT;
   const useAsTitle = useAsTitleProp ?? collectionConfig.admin?.useAsTitle;
+  const canCreate = Boolean(permissions?.collections?.[collectionSlug]?.create);
   const allPossibleTypeValues = useMemo(() => hierarchyConfig?.relatedCollections ? Object.keys(hierarchyConfig.relatedCollections) : undefined, [hierarchyConfig?.relatedCollections]);
   const contextData = getTreeDataForCollection(collectionSlug);
   const baseFilterKey = baseFilter ? JSON.stringify(baseFilter) : '';
@@ -123,12 +132,6 @@ const HierarchyTreeInner = ({
     }
     toggleNodeForCollection(collectionSlug, id);
   }, [collectionSlug, getExpandedNodesForCollection, initialExpandedNodesProp, toggleNodeForCollection]);
-  const handleCollapseAll = useCallback(() => {
-    // Mark context as seeded so the expandedNodes memo trusts the now-empty context
-    // rather than falling back to the server-provided initial nodes.
-    contextSeededRef.current = true;
-    collapseAllForCollection(collectionSlug);
-  }, [collapseAllForCollection, collectionSlug]);
   // Pre-populate cache with initialData synchronously before first render
   const childrenCache = useRef(new Map());
   const prevBaseFilterKeyRef = useRef(baseFilterKey);
@@ -266,7 +269,7 @@ const HierarchyTreeInner = ({
     tabIndex: -1,
     children: [/*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__all-option-wrapper`,
-      children: [/*#__PURE__*/_jsxs("div", {
+      children: [/*#__PURE__*/_jsx("div", {
         "aria-selected": isAllSelected,
         className: [`${baseClass}__all-option`, 'sidebar-row', isAllSelected && `${baseClass}__all-option--selected`, isAllSelected && 'sidebar-row--selected'].filter(Boolean).join(' '),
         onClick: handleAllClick,
@@ -278,23 +281,39 @@ const HierarchyTreeInner = ({
         },
         role: "treeitem",
         tabIndex: 0,
-        children: [Boolean(icon) && /*#__PURE__*/_jsx("span", {
-          className: "sidebar-row__icon",
-          children: icon
-        }), /*#__PURE__*/_jsx("span", {
+        children: /*#__PURE__*/_jsxs("span", {
           className: "sidebar-row__title",
-          children: getTranslation(getEntityConfig({
+          children: [t('general:all'), ' ', getTranslation(getEntityConfig({
             collectionSlug
-          })?.labels?.plural, i18n)
+          })?.labels?.plural, i18n)]
+        })
+      }), canCreate && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Button, {
+          "aria-label": t('general:createNew'),
+          buttonStyle: "ghost",
+          className: `${baseClass}__create-button`,
+          margin: false,
+          onClick: () => {
+            setIsCreateDrawerOpen(true);
+            openModal(createDrawerSlug);
+          },
+          children: /*#__PURE__*/_jsx(PlusIcon, {
+            size: 24
+          })
+        }), isCreateDrawerOpen && /*#__PURE__*/_jsx(DocumentDrawer, {
+          collectionSlug: collectionSlug,
+          drawerSlug: createDrawerSlug,
+          initialData: parentFieldName ? {
+            [parentFieldName]: null
+          } : undefined,
+          onSave: async () => {
+            closeModal(createDrawerSlug);
+            setIsCreateDrawerOpen(false);
+            await refresh();
+            router.refresh();
+          },
+          redirectAfterCreate: false
         })]
-      }), expandedNodes.size > 0 && /*#__PURE__*/_jsx(Button, {
-        "aria-label": t('fields:collapseAll'),
-        buttonStyle: "ghost",
-        className: `${baseClass}__collapse-all-button`,
-        margin: false,
-        onClick: handleCollapseAll,
-        tooltip: t('fields:collapseAll'),
-        children: /*#__PURE__*/_jsx(CollapseLayersIcon, {})
       })]
     }), rootNodes.map(node_0 => {
       const nodeId_0 = node_0.id;
@@ -302,14 +321,13 @@ const HierarchyTreeInner = ({
       const nodeTitle = getDocumentTitle(node_0, useAsTitle);
       return /*#__PURE__*/_jsx(TreeNode, {
         allPossibleTypeValues: allPossibleTypeValues,
-        ancestorIds: ROOT_ANCESTOR_IDS,
         baseFilter: baseFilter,
         cache: childrenCache,
         collectionSlug: collectionSlug,
         depth: 0,
-        dropParentFieldName: parentFieldName,
         expandedNodes: expandedNodes,
         filterByCollections: filterByCollections,
+        icon: icon,
         limit: treeLimit,
         node: {
           id: nodeId_0,