@payloadcms/ui 4.0.0-internal.5b1e7cd → 4.0.0-internal.d28e9fb

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TreeNodeProps } from '../types.js';
+import './index.css';
+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

@@ -0,0 +1 @@
+{"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,sBAmMf,CAAA"}

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

@@ -0,0 +1,223 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useRef } from 'react';
+import { Spinner } from '../../../../elements/Spinner/index.js';
+import { ChevronIcon } from '../../../../icons/Chevron/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;
+const baseClass = 'tree-node';
+const getDocumentTitle = (doc, useAsTitle) => {
+  const docId = doc.id;
+  const idStr = typeof docId === 'number' ? String(docId) : docId;
+  if (!useAsTitle) {
+    return idStr;
+  }
+  const value = doc[useAsTitle];
+  if (value && (typeof value === 'string' || typeof value === 'number')) {
+    return String(value);
+  }
+  return idStr;
+};
+export const TreeNode = ({
+  allPossibleTypeValues,
+  baseFilter,
+  cache,
+  collectionSlug,
+  depth = 0,
+  expandedNodes,
+  filterByCollections,
+  icon,
+  limit = DEFAULT_TREE_LIMIT,
+  node,
+  onSelect,
+  onToggle,
+  parentFieldName,
+  selected,
+  selectedNodeId,
+  typeFieldName,
+  useAsTitle
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const expanded = expandedNodes.has(node.id);
+  const nodeRef = useRef(null);
+  const {
+    setFocusedId
+  } = useTreeFocus();
+  const {
+    children,
+    hasMore,
+    isLoading,
+    load,
+    loadMore: loadMoreFromHook,
+    totalDocs
+  } = useChildren({
+    allPossibleTypeValues,
+    baseFilter,
+    cache,
+    collectionSlug,
+    enabled: expanded,
+    filterByCollections,
+    limit,
+    parentFieldName,
+    parentId: node.id,
+    typeFieldName,
+    useAsTitle
+  });
+  const handleLoadMore = React.useCallback(async () => {
+    const newDocs = await loadMoreFromHook();
+    if (newDocs && newDocs.length > 0) {
+      const firstNewDoc = newDocs[0];
+      const docId = firstNewDoc.id;
+      setFocusedId(`node-${docId}`);
+    }
+  }, [loadMoreFromHook, setFocusedId]);
+  const {
+    handleFocus,
+    isFocused,
+    tabIndex
+  } = useFocusableItem({
+    id: `node-${node.id}`,
+    type: 'node',
+    ref: nodeRef
+  });
+  // Determine if node has children:
+  // - If explicitly set in data, use that
+  // - If expanded and loaded, check the actual children
+  // - Otherwise, assume it might have children (show chevron until proven otherwise)
+  const hasChildren = node.hasChildren === true || (expanded && children !== null ? children.length > 0 : true);
+  const handleToggleClick = useCallback(e => {
+    e.stopPropagation();
+    if (!expanded) {
+      void load();
+    }
+    onToggle({
+      id: node.id
+    });
+  }, [node.id, onToggle, expanded, load]);
+  const handleSelectClick = useCallback(() => {
+    onSelect?.({
+      id: node.id
+    });
+  }, [node.id, onSelect]);
+  const handleKeyDown = useCallback(e_0 => {
+    switch (e_0.key) {
+      case ' ':
+      case 'Enter':
+        e_0.preventDefault();
+        e_0.stopPropagation();
+        handleSelectClick();
+        break;
+      case 'ArrowLeft':
+        e_0.preventDefault();
+        e_0.stopPropagation();
+        if (hasChildren && expanded) {
+          onToggle({
+            id: node.id
+          });
+        }
+        break;
+      case 'ArrowRight':
+        e_0.preventDefault();
+        e_0.stopPropagation();
+        if (hasChildren && !expanded) {
+          onToggle({
+            id: node.id
+          });
+        }
+        break;
+    }
+  }, [hasChildren, expanded, handleSelectClick, onToggle, node.id]);
+  return /*#__PURE__*/_jsxs("div", {
+    "aria-expanded": hasChildren ? expanded : undefined,
+    "aria-level": depth + 1,
+    "aria-selected": selected,
+    className: baseClass,
+    onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
+    ref: nodeRef,
+    role: "treeitem",
+    style: {
+      '--tree-depth': depth
+    },
+    tabIndex: tabIndex,
+    children: [/*#__PURE__*/_jsxs("div", {
+      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`,
+        onClick: handleToggleClick,
+        onMouseDown: e_1 => e_1.preventDefault(),
+        tabIndex: -1,
+        type: "button",
+        children: /*#__PURE__*/_jsx(ChevronIcon, {
+          direction: expanded ? 'down' : 'right',
+          large: true
+        })
+      }) : /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__toggle-spacer`
+      }), Boolean(icon) && /*#__PURE__*/_jsx("span", {
+        className: "sidebar-row__icon",
+        children: icon
+      }), /*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__title sidebar-row__title`,
+        onClick: handleSelectClick,
+        onMouseDown: e_2 => e_2.preventDefault(),
+        title: node.title,
+        children: node.title
+      }), isLoading && expanded && /*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__loading`,
+        children: /*#__PURE__*/_jsx(Spinner, {
+          loadingText: null,
+          size: "small"
+        })
+      })]
+    }), expanded && children && children.length > 0 && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__children`,
+        role: "group",
+        children: children.map(child => {
+          const childData = child;
+          const childId = childData.id;
+          const childTitle = getDocumentTitle(child, useAsTitle);
+          return /*#__PURE__*/_jsx(TreeNode, {
+            allPossibleTypeValues: allPossibleTypeValues,
+            baseFilter: baseFilter,
+            cache: cache,
+            collectionSlug: collectionSlug,
+            depth: depth + 1,
+            expandedNodes: expandedNodes,
+            filterByCollections: filterByCollections,
+            icon: icon,
+            limit: limit,
+            node: {
+              id: childId,
+              hasChildren: true,
+              title: childTitle
+            },
+            onSelect: onSelect,
+            onToggle: onToggle,
+            parentFieldName: parentFieldName,
+            selected: String(childId) === String(selectedNodeId),
+            selectedNodeId: selectedNodeId,
+            typeFieldName: typeFieldName,
+            useAsTitle: useAsTitle
+          }, String(childId));
+        })
+      }), hasMore && /*#__PURE__*/_jsx(LoadMore, {
+        currentCount: children.length,
+        depth: depth + 1,
+        id: `load-more-${node.id}`,
+        onLoadMore: handleLoadMore,
+        totalDocs: totalDocs
+      })]
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"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","handleFocus","isFocused","tabIndex","type","ref","hasChildren","handleToggleClick","e","stopPropagation","handleSelectClick","handleKeyDown","key","preventDefault","_jsxs","undefined","className","onFocus","onKeyDown","role","style","filter","Boolean","join","_jsx","onClick","onMouseDown","direction","large","title","loadingText","size","_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      setFocusedId(`node-${docId}`)\n    }\n  }, [loadMoreFromHook, setFocusedId])\n\n  const { handleFocus, isFocused, 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 handleToggleClick = useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation()\n      if (!expanded) {\n        void load()\n      }\n      onToggle({ id: node.id })\n    },\n    [node.id, onToggle, expanded, load],\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      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            onToggle({ id: node.id })\n          }\n          break\n      }\n    },\n    [hasChildren, expanded, handleSelectClick, onToggle, node.id],\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={handleFocus}\n      onKeyDown={handleKeyDown}\n      ref={nodeRef}\n      role=\"treeitem\"\n      style={{ '--tree-depth': depth } as React.CSSProperties}\n      tabIndex={tabIndex}\n    >\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={handleToggleClick}\n            onMouseDown={(e) => e.preventDefault()}\n            tabIndex={-1}\n            type=\"button\"\n          >\n            <ChevronIcon direction={expanded ? 'down' : 'right'} large />\n          </button>\n        ) : (\n          <div className={`${baseClass}__toggle-spacer`} />\n        )}\n        {Boolean(icon) && <span className=\"sidebar-row__icon\">{icon}</span>}\n        {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- keyboard handled by parent */}\n        <span\n          className={`${baseClass}__title sidebar-row__title`}\n          onClick={handleSelectClick}\n          onMouseDown={(e) => e.preventDefault()}\n          title={node.title}\n        >\n          {node.title}\n        </span>\n        {isLoading && expanded && (\n          <span className={`${baseClass}__loading`}>\n            <Spinner loadingText={null} size=\"small\" />\n          </span>\n        )}\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

@@ -0,0 +1,60 @@
+@import '../../../elements/SidebarRow/index.css';
+@layer payload-default {
+  .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-2);
+    --tree-node-padding-y: var(--spacer-1);
+    --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: 0;
+    margin: 0;
+  }
+
+  .tree__all-option-wrapper {
+    display: grid;
+    gap: var(--spacer-1);
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    margin-bottom: var(--spacer-2);
+
+    .tree__create-button {
+      padding: 0;
+
+      &:hover {
+        color: var(--icon-default);
+      }
+    }
+  }
+
+  .tree__all-option {
+    gap: var(--spacer-1);
+    padding-left: var(--spacer-2);
+
+    .sidebar-row__title {
+      font-weight: var(--text-body-medium-strong-font-weight);
+    }
+  }
+
+  .tree__loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--spacer-3);
+    min-height: calc(var(--spacer-6) * 2.5);
+  }
+
+  .tree__empty {
+    padding: var(--spacer-2-5) var(--spacer-3);
+    color: var(--text-tertiary);
+    font-size: var(--tree-font-size);
+  }
+}

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { HierarchyTreeProps } from './types.js';
+import './index.css';
+export declare const HierarchyTree: React.FC<HierarchyTreeProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Tree/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAwD,MAAM,OAAO,CAAA;AAE5E,OAAO,KAAK,EAAkB,kBAAkB,EAAgB,MAAM,YAAY,CAAA;AAelF,OAAO,aAAa,CAAA;AAwWpB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAMtD,CAAA"}

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

@@ -0,0 +1,348 @@
+'use client';
+
+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 { useRouter } from 'next/navigation.js';
+import { DEFAULT_HIERARCHY_TREE_LIMIT } from 'payload/shared';
+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 { 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';
+const getDocumentTitle = (doc, useAsTitle) => {
+  const docId = doc.id;
+  const idStr = typeof docId === 'number' ? String(docId) : docId;
+  if (!useAsTitle) {
+    return idStr;
+  }
+  const value = doc[useAsTitle];
+  if (value && (typeof value === 'string' || typeof value === 'number')) {
+    return String(value);
+  }
+  return idStr;
+};
+const HierarchyTreeInner = ({
+  baseFilter,
+  collectionSlug,
+  filterByCollections,
+  icon,
+  initialData: initialDataProp,
+  initialExpandedNodes: initialExpandedNodesProp,
+  onNodeClick,
+  selectedNodeId,
+  useAsTitle: useAsTitleProp
+}) => {
+  const {
+    moveFocus
+  } = useTreeFocus();
+  const router = useRouter();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    permissions
+  } = useAuth();
+  const {
+    getEntityConfig
+  } = useConfig();
+  const {
+    closeModal,
+    openModal
+  } = useModal();
+  const createDrawerSlug = `tree-create-${useId()}`;
+  const [isCreateDrawerOpen, setIsCreateDrawerOpen] = useState(false);
+  const {
+    getExpandedNodesForCollection,
+    getTreeDataForCollection,
+    toggleNodeForCollection,
+    typeFieldName
+  } = useHierarchy();
+  const collectionConfig = getEntityConfig({
+    collectionSlug
+  });
+  const hierarchyConfig = collectionConfig.hierarchy && typeof collectionConfig.hierarchy === 'object' ? collectionConfig.hierarchy : undefined;
+  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) : '';
+  const contextBaseFilterKey = contextData?.baseFilter ? JSON.stringify(contextData.baseFilter) : '';
+  const initialData = baseFilterKey === contextBaseFilterKey ? contextData ?? initialDataProp : initialDataProp;
+  // Tracks whether context has been seeded at least once since the last navigation.
+  // Resets when initialExpandedNodesProp changes (new array reference = navigation).
+  // Allows the memo to distinguish "not yet seeded" (fall back to prop) from
+  // "user collapsed all nodes" (trust empty context).
+  const contextSeededRef = useRef(false);
+  const lastInitialExpandedRef = useRef(initialExpandedNodesProp);
+  if (lastInitialExpandedRef.current !== initialExpandedNodesProp) {
+    lastInitialExpandedRef.current = initialExpandedNodesProp;
+    contextSeededRef.current = false;
+  }
+  const expandedNodes = useMemo(() => {
+    const contextExpanded = getExpandedNodesForCollection(collectionSlug);
+    if (contextExpanded.size > 0) {
+      contextSeededRef.current = true;
+      return contextExpanded;
+    }
+    if (contextSeededRef.current) {
+      // Context was seeded (had nodes since last navigation) — trust empty set as "all collapsed"
+      return contextExpanded;
+    }
+    return initialExpandedNodesProp ? new Set(initialExpandedNodesProp) : contextExpanded;
+  }, [collectionSlug, getExpandedNodesForCollection, initialExpandedNodesProp]);
+  const handleToggleNode = useCallback(({
+    id
+  }) => {
+    // Mark context as seeded so the memo never falls back to the prop after this interaction.
+    // Capture the previous value first — seeding is only needed on the very first interaction.
+    const wasSeeded = contextSeededRef.current;
+    contextSeededRef.current = true;
+    const contextExpanded_0 = getExpandedNodesForCollection(collectionSlug);
+    if (!wasSeeded && contextExpanded_0.size === 0 && initialExpandedNodesProp?.length) {
+      // Context not yet seeded. Seed it with all initial nodes, applying the toggle correctly:
+      // exclude the target if collapsing, include it if expanding.
+      const initialSet = new Set(initialExpandedNodesProp.map(String));
+      const isCurrentlyExpanded = initialSet.has(String(id));
+      for (const nodeId of initialExpandedNodesProp) {
+        if (!isCurrentlyExpanded || String(nodeId) !== String(id)) {
+          toggleNodeForCollection(collectionSlug, nodeId);
+        }
+      }
+      if (!isCurrentlyExpanded) {
+        toggleNodeForCollection(collectionSlug, id);
+      }
+      return;
+    }
+    toggleNodeForCollection(collectionSlug, id);
+  }, [collectionSlug, getExpandedNodesForCollection, initialExpandedNodesProp, toggleNodeForCollection]);
+  // Pre-populate cache with initialData synchronously before first render
+  const childrenCache = useRef(new Map());
+  const prevBaseFilterKeyRef = useRef(baseFilterKey);
+  if (prevBaseFilterKeyRef.current !== baseFilterKey) {
+    prevBaseFilterKeyRef.current = baseFilterKey;
+    childrenCache.current.clear();
+  }
+  useMemo(() => {
+    if (!initialData || initialData.docs.length === 0) {
+      return;
+    }
+    const docsByParent = new Map();
+    for (const doc of initialData.docs) {
+      const parentId = doc[parentFieldName] || 'null';
+      const parentKey = String(parentId);
+      if (!docsByParent.has(parentKey)) {
+        docsByParent.set(parentKey, []);
+      }
+      docsByParent.get(parentKey).push(doc);
+    }
+    const filterKey = filterByCollections?.length ? filterByCollections.slice().sort().join(',') : '';
+    for (const [parentKey_0, docs] of docsByParent) {
+      const cacheKey = `${collectionSlug}-${parentKey_0}-${filterKey}-${baseFilterKey}`;
+      const parentMeta = initialData.loadedParents[parentKey_0];
+      if (parentMeta) {
+        const loadedCount = parentMeta.loadedCount ?? docs.length;
+        childrenCache.current.set(cacheKey, {
+          children: docs,
+          hasMore: parentMeta.hasMore,
+          page: Math.ceil(loadedCount / treeLimit) || 1,
+          totalDocs: parentMeta.totalDocs
+        });
+      } else {
+        childrenCache.current.set(cacheKey, {
+          children: docs,
+          hasMore: false,
+          page: 1,
+          totalDocs: docs.length
+        });
+      }
+    }
+  }, [initialData, filterByCollections, parentFieldName, collectionSlug, treeLimit, baseFilterKey]);
+  const treeRef = useRef(null);
+  const {
+    children: rootNodes,
+    hasMore,
+    isLoading,
+    loadMore: loadMoreFromHook,
+    refresh,
+    totalDocs
+  } = useChildren({
+    allPossibleTypeValues,
+    baseFilter,
+    cache: childrenCache,
+    collectionSlug,
+    enabled: true,
+    filterByCollections,
+    initialData,
+    limit: treeLimit,
+    parentFieldName,
+    parentId: 'null',
+    typeFieldName,
+    useAsTitle
+  });
+  const handleLoadMore = useCallback(async () => {
+    await loadMoreFromHook();
+  }, [loadMoreFromHook]);
+  const handleNodeClick = useCallback(({
+    id: id_0
+  }) => {
+    onNodeClick?.({
+      id: id_0
+    });
+  }, [onNodeClick]);
+  const handleTreeKeyDown = useCallback(e => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      moveFocus('down');
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      moveFocus('up');
+    }
+  }, [moveFocus]);
+  if (isLoading && !rootNodes) {
+    return /*#__PURE__*/_jsx("div", {
+      className: baseClass,
+      children: /*#__PURE__*/_jsx(DelayedSpinner, {
+        baseClass: baseClass,
+        isLoading: true
+      })
+    });
+  }
+  if (!rootNodes || rootNodes.length === 0) {
+    const collectionLabel = getEntityConfig({
+      collectionSlug
+    });
+    return /*#__PURE__*/_jsx("div", {
+      className: baseClass,
+      children: /*#__PURE__*/_jsx(CreateDocumentButton, {
+        buttonStyle: "primary",
+        collections: [{
+          collectionSlug
+        }],
+        drawerSlug: createDrawerSlug,
+        label: t('general:createNewLabel', {
+          label: getTranslation(collectionLabel.labels.singular, i18n)
+        }),
+        onSave: async () => {
+          await refresh();
+          router.refresh();
+        }
+      })
+    });
+  }
+  const isAllSelected = selectedNodeId === null;
+  const handleAllClick = () => onNodeClick?.({
+    id: null
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    onKeyDown: handleTreeKeyDown,
+    ref: treeRef,
+    role: "tree",
+    tabIndex: -1,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__all-option-wrapper`,
+      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,
+        onKeyDown: e_0 => {
+          if (e_0.key === 'Enter' || e_0.key === ' ') {
+            e_0.preventDefault();
+            handleAllClick();
+          }
+        },
+        role: "treeitem",
+        tabIndex: 0,
+        children: /*#__PURE__*/_jsxs("span", {
+          className: "sidebar-row__title",
+          children: [t('general:all'), ' ', getTranslation(getEntityConfig({
+            collectionSlug
+          })?.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
+        })]
+      })]
+    }), rootNodes.map(node => {
+      const nodeId_0 = node.id;
+      const nodeIdStr = typeof nodeId_0 === 'number' ? String(nodeId_0) : nodeId_0;
+      const nodeTitle = getDocumentTitle(node, useAsTitle);
+      return /*#__PURE__*/_jsx(TreeNode, {
+        allPossibleTypeValues: allPossibleTypeValues,
+        baseFilter: baseFilter,
+        cache: childrenCache,
+        collectionSlug: collectionSlug,
+        depth: 0,
+        expandedNodes: expandedNodes,
+        filterByCollections: filterByCollections,
+        icon: icon,
+        limit: treeLimit,
+        node: {
+          id: nodeId_0,
+          hasChildren: true,
+          title: nodeTitle
+        },
+        onSelect: handleNodeClick,
+        onToggle: handleToggleNode,
+        parentFieldName: parentFieldName,
+        selected: nodeIdStr === String(selectedNodeId),
+        selectedNodeId: selectedNodeId,
+        typeFieldName: typeFieldName,
+        useAsTitle: useAsTitle
+      }, nodeIdStr);
+    }), hasMore && /*#__PURE__*/_jsx(LoadMore, {
+      currentCount: rootNodes.length,
+      depth: 0,
+      id: "load-more-root",
+      onLoadMore: handleLoadMore,
+      totalDocs: totalDocs
+    })]
+  });
+};
+export const HierarchyTree = props => {
+  return /*#__PURE__*/_jsx(TreeFocusProvider, {
+    children: /*#__PURE__*/_jsx(HierarchyTreeInner, {
+      ...props
+    })
+  });
+};
+//# sourceMappingURL=index.js.map