@payloadcms/ui 3.80.0-internal.21e9c47 → 3.80.0-internal.52ab774

package/dist/elements/Hierarchy/Tree/TreeFocusContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeFocusContext.js","names":["c","_c","createContext","use","useCallback","useEffect","useRef","useState","TreeFocusContext","undefined","TreeFocusProvider","children","focusedId","setFocusedId","itemsRef","Map","registerItem","item","current","set","id","unregisterItem","delete","moveFocus","direction","items","Array","from","values","length","sortedItems","filter","ref","sort","a","b","aElement","bElement","position","compareDocumentPosition","Node","DOCUMENT_POSITION_FOLLOWING","DOCUMENT_POSITION_PRECEDING","currentIndex","findIndex","nextIndex","Math","min","max","nextItem","focus","_jsx","value","useTreeFocus","context","Error","useFocusableItem","t0","$","type","isFocused","isFirstItemEver","t1","t2","t3","handleFocus","tabIndex","t4"],"sources":["../../../../src/elements/Hierarchy/Tree/TreeFocusContext.tsx"],"sourcesContent":["'use client'\n\nimport type React from 'react'\n\nimport { createContext, use, useCallback, useEffect, useRef, useState } from 'react'\n\ntype FocusableItem = {\n  id: string\n  ref: React.RefObject<HTMLElement>\n  type: 'load-more' | 'node'\n}\n\ntype TreeFocusContextType = {\n  focusedId: null | string\n  moveFocus: (direction: 'down' | 'up') => void\n  registerItem: (item: FocusableItem) => void\n  setFocusedId: (id: null | string) => void\n  unregisterItem: (id: string) => void\n}\n\nconst TreeFocusContext = createContext<TreeFocusContextType | undefined>(undefined)\n\nexport const TreeFocusProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const [focusedId, setFocusedId] = useState<null | string>(null)\n  const itemsRef = useRef<Map<string, FocusableItem>>(new Map())\n\n  const registerItem = useCallback((item: FocusableItem) => {\n    itemsRef.current.set(item.id, item)\n  }, [])\n\n  const unregisterItem = useCallback((id: string) => {\n    itemsRef.current.delete(id)\n  }, [])\n\n  const moveFocus = useCallback(\n    (direction: 'down' | 'up') => {\n      const items = Array.from(itemsRef.current.values())\n      if (items.length === 0) {\n        return\n      }\n\n      // Sort items by their DOM position to ensure correct navigation order\n      const sortedItems = items\n        .filter((item) => item.ref.current)\n        .sort((a, b) => {\n          const aElement = a.ref.current\n          const bElement = b.ref.current\n          if (!aElement || !bElement) {\n            return 0\n          }\n\n          const position = aElement.compareDocumentPosition(bElement)\n          if (position & Node.DOCUMENT_POSITION_FOLLOWING) {\n            return -1\n          }\n          if (position & Node.DOCUMENT_POSITION_PRECEDING) {\n            return 1\n          }\n          return 0\n        })\n\n      const currentIndex = focusedId ? sortedItems.findIndex((item) => item.id === focusedId) : -1\n\n      let nextIndex: number\n      if (direction === 'down') {\n        nextIndex = currentIndex === -1 ? 0 : Math.min(currentIndex + 1, sortedItems.length - 1)\n      } else {\n        nextIndex = Math.max(currentIndex - 1, 0)\n      }\n\n      const nextItem = sortedItems[nextIndex]\n      if (nextItem && nextItem.ref.current) {\n        nextItem.ref.current.focus()\n        setFocusedId(nextItem.id)\n      }\n    },\n    [focusedId],\n  )\n\n  return (\n    <TreeFocusContext\n      value={{\n        focusedId,\n        moveFocus,\n        registerItem,\n        setFocusedId,\n        unregisterItem,\n      }}\n    >\n      {children}\n    </TreeFocusContext>\n  )\n}\n\nexport const useTreeFocus = () => {\n  const context = use(TreeFocusContext)\n  if (!context) {\n    throw new Error('useTreeFocus must be used within TreeFocusProvider')\n  }\n  return context\n}\n\nexport const useFocusableItem = ({\n  id,\n  type,\n  ref,\n}: {\n  id: string\n  ref: React.RefObject<HTMLElement>\n  type: 'load-more' | 'node'\n}) => {\n  const { focusedId, registerItem, setFocusedId, unregisterItem } = useTreeFocus()\n  const isFocused = focusedId === id\n  const isFirstItemEver = focusedId === null\n\n  useEffect(() => {\n    registerItem({ id, type, ref })\n    return () => {\n      unregisterItem(id)\n    }\n  }, [id, ref, type, registerItem, unregisterItem])\n\n  const handleFocus = useCallback(() => {\n    setFocusedId(id)\n  }, [id, setFocusedId])\n\n  // Roving tabindex: focused item gets 0, first item (when nothing focused) gets 0, all others get -1\n  const tabIndex = isFocused ? 0 : isFirstItemEver ? 0 : -1\n\n  return {\n    handleFocus,\n    isFocused,\n    tabIndex,\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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.scss';
+export declare const TreeNode: ({ allPossibleTypeValues, baseFilter, cache, collectionSlug, depth, expandedNodes, filterByCollections, 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,cAAc,CAAA;AAqBrB,eAAO,MAAM,QAAQ,oNAiBlB,aAAa,sBAoMf,CAAA"}

package/dist/elements/{Tree → Hierarchy/Tree}/TreeNode/index.js

@@ -2,9 +2,9 @@
 
 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 { 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';
@@ -25,6 +25,7 @@ const getDocumentTitle = (doc, useAsTitle) => {
 };
 export const TreeNode = ({
   allPossibleTypeValues,
+  baseFilter,
   cache,
   collectionSlug,
   depth = 0,
@@ -52,10 +53,12 @@ export const TreeNode = ({
     children,
     hasMore,
     isLoading,
+    load,
     loadMore: loadMoreFromHook,
     totalDocs
   } = useChildren({
     allPossibleTypeValues,
+    baseFilter,
     cache,
     collectionSlug,
     enabled: expanded,
@@ -96,10 +99,13 @@ export const TreeNode = ({
   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]);
+  }, [node.id, onToggle, expanded, load]);
   const handleSelectClick = useCallback(() => {
     onSelect?.({
       id: node.id
@@ -185,6 +191,7 @@ export const TreeNode = ({
           const childTitle = getDocumentTitle(child, useAsTitle);
           return /*#__PURE__*/_jsx(TreeNode, {
             allPossibleTypeValues: allPossibleTypeValues,
+            baseFilter: baseFilter,
             cache: cache,
             collectionSlug: collectionSlug,
             depth: depth + 1,

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","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","useEffect","current","document","activeElement","focus","hasChildren","handleToggleClick","e","stopPropagation","handleSelectClick","handleKeyDown","key","preventDefault","_jsxs","undefined","className","onFocus","onKeyDown","role","style","filter","Boolean","join","_jsx","onClick","onMouseDown","direction","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.scss'\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  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  // When focusedId points to this node, actually call .focus()\n  React.useEffect(() => {\n    if (isFocused && nodeRef.current && document.activeElement !== nodeRef.current) {\n      nodeRef.current.focus()\n    }\n  }, [isFocused])\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={[`${baseClass}__content`, selected && `${baseClass}__content--selected`]\n          .filter(Boolean)\n          .join(' ')}\n      >\n        <div className={`${baseClass}__indicator`} />\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'} />\n          </button>\n        ) : (\n          <div className={`${baseClass}__toggle-spacer`} />\n        )}\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`}\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                  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/{Tree → Hierarchy/Tree}/TreeNode/index.scss

@@ -1,4 +1,4 @@
-@import '../../../scss/styles.scss';
+@import '../../../../scss/styles.scss';
 
 .tree-node {
   // Remove default focus outline from treeitem - we style the content instead

package/dist/elements/{HierarchyTree → Hierarchy/Tree}/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import type { HierarchyTreeProps } from './types.js';
+import './index.scss';
 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":"AAKA,OAAO,KAA8C,MAAM,OAAO,CAAA;AAElE,OAAO,KAAK,EAAkB,kBAAkB,EAAgB,MAAM,YAAY,CAAA;AAYlF,OAAO,cAAc,CAAA;AAkUrB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAMtD,CAAA"}

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

@@ -0,0 +1,305 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 } from 'react';
+import { TagIcon } from '../../../icons/Tag/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useHierarchy } from '../../../providers/Hierarchy/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { CreateDocumentButton } from '../../CreateDocumentButton/index.js';
+import { DelayedSpinner } from '../../DelayedSpinner/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.scss';
+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 {
+    getEntityConfig
+  } = useConfig();
+  const createDrawerSlug = `tree-create-${useId()}`;
+  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 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", {
+      "aria-selected": isAllSelected,
+      className: [`${baseClass}__all-option`, isAllSelected && `${baseClass}__all-option--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: [icon || /*#__PURE__*/_jsx(TagIcon, {
+        color: "muted"
+      }), /*#__PURE__*/_jsxs("span", {
+        children: [t('general:all'), ' ', getTranslation(getEntityConfig({
+          collectionSlug
+        })?.labels?.plural, i18n)]
+      })]
+    }), 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,
+        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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["getTranslation","useRouter","DEFAULT_HIERARCHY_TREE_LIMIT","React","useCallback","useId","useMemo","useRef","TagIcon","useConfig","useHierarchy","useTranslation","CreateDocumentButton","DelayedSpinner","LoadMore","TreeFocusProvider","useTreeFocus","TreeNode","useChildren","baseClass","getDocumentTitle","doc","useAsTitle","docId","id","idStr","String","value","HierarchyTreeInner","baseFilter","collectionSlug","filterByCollections","icon","initialData","initialDataProp","initialExpandedNodes","initialExpandedNodesProp","onNodeClick","selectedNodeId","useAsTitleProp","moveFocus","router","i18n","t","getEntityConfig","createDrawerSlug","getExpandedNodesForCollection","getTreeDataForCollection","toggleNodeForCollection","typeFieldName","collectionConfig","hierarchyConfig","hierarchy","undefined","parentFieldName","treeLimit","admin","allPossibleTypeValues","relatedCollections","Object","keys","contextData","baseFilterKey","JSON","stringify","contextBaseFilterKey","contextSeededRef","lastInitialExpandedRef","current","expandedNodes","contextExpanded","size","Set","handleToggleNode","wasSeeded","length","initialSet","map","isCurrentlyExpanded","has","nodeId","childrenCache","Map","prevBaseFilterKeyRef","clear","docs","docsByParent","parentId","parentKey","set","get","push","filterKey","slice","sort","join","cacheKey","parentMeta","loadedParents","loadedCount","children","hasMore","page","Math","ceil","totalDocs","treeRef","rootNodes","isLoading","loadMore","loadMoreFromHook","refresh","cache","enabled","limit","handleLoadMore","handleNodeClick","handleTreeKeyDown","e","key","preventDefault","_jsx","className","collectionLabel","buttonStyle","collections","drawerSlug","label","labels","singular","onSave","isAllSelected","handleAllClick","_jsxs","onKeyDown","ref","role","tabIndex","filter","Boolean","onClick","color","plural","node","nodeIdStr","nodeTitle","depth","hasChildren","title","onSelect","onToggle","selected","currentCount","onLoadMore","HierarchyTree","props"],"sources":["../../../../src/elements/Hierarchy/Tree/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport { DEFAULT_HIERARCHY_TREE_LIMIT } from 'payload/shared'\nimport React, { useCallback, useId, useMemo, useRef } from 'react'\n\nimport type { CachedChildren, HierarchyTreeProps, TreeDocument } from './types.js'\n\nimport { TagIcon } from '../../../icons/Tag/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useHierarchy } from '../../../providers/Hierarchy/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { CreateDocumentButton } from '../../CreateDocumentButton/index.js'\nimport { DelayedSpinner } from '../../DelayedSpinner/index.js'\nimport { LoadMore } from './LoadMore/index.js'\nimport { TreeFocusProvider, useTreeFocus } from './TreeFocusContext.js'\nimport { TreeNode } from './TreeNode/index.js'\nimport { useChildren } from './useChildren.js'\nimport './index.scss'\n\nconst baseClass = 'tree'\n\nconst getDocumentTitle = (doc: TreeDocument, useAsTitle: string | undefined): string => {\n  const docId: number | string = doc.id\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\nconst HierarchyTreeInner: React.FC<HierarchyTreeProps> = ({\n  baseFilter,\n  collectionSlug,\n  filterByCollections,\n  icon,\n  initialData: initialDataProp,\n  initialExpandedNodes: initialExpandedNodesProp,\n  onNodeClick,\n  selectedNodeId,\n  useAsTitle: useAsTitleProp,\n}) => {\n  const { moveFocus } = useTreeFocus()\n  const router = useRouter()\n  const { i18n, t } = useTranslation()\n  const { getEntityConfig } = useConfig()\n  const createDrawerSlug = `tree-create-${useId()}`\n\n  const {\n    getExpandedNodesForCollection,\n    getTreeDataForCollection,\n    toggleNodeForCollection,\n    typeFieldName,\n  } = useHierarchy()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n  const hierarchyConfig =\n    collectionConfig.hierarchy && typeof collectionConfig.hierarchy === 'object'\n      ? collectionConfig.hierarchy\n      : undefined\n  const parentFieldName = hierarchyConfig?.parentFieldName\n  const treeLimit = hierarchyConfig?.admin?.treeLimit ?? DEFAULT_HIERARCHY_TREE_LIMIT\n  const useAsTitle = useAsTitleProp ?? collectionConfig.admin?.useAsTitle\n\n  const allPossibleTypeValues = useMemo(\n    () =>\n      hierarchyConfig?.relatedCollections\n        ? Object.keys(hierarchyConfig.relatedCollections)\n        : undefined,\n    [hierarchyConfig?.relatedCollections],\n  )\n\n  const contextData = getTreeDataForCollection(collectionSlug)\n  const baseFilterKey = baseFilter ? JSON.stringify(baseFilter) : ''\n  const contextBaseFilterKey = contextData?.baseFilter ? JSON.stringify(contextData.baseFilter) : ''\n  const initialData =\n    baseFilterKey === contextBaseFilterKey ? (contextData ?? initialDataProp) : initialDataProp\n  // Tracks whether context has been seeded at least once since the last navigation.\n  // Resets when initialExpandedNodesProp changes (new array reference = navigation).\n  // Allows the memo to distinguish \"not yet seeded\" (fall back to prop) from\n  // \"user collapsed all nodes\" (trust empty context).\n  const contextSeededRef = useRef(false)\n  const lastInitialExpandedRef = useRef(initialExpandedNodesProp)\n  if (lastInitialExpandedRef.current !== initialExpandedNodesProp) {\n    lastInitialExpandedRef.current = initialExpandedNodesProp\n    contextSeededRef.current = false\n  }\n\n  const expandedNodes = useMemo(() => {\n    const contextExpanded = getExpandedNodesForCollection(collectionSlug)\n    if (contextExpanded.size > 0) {\n      contextSeededRef.current = true\n      return contextExpanded\n    }\n    if (contextSeededRef.current) {\n      // Context was seeded (had nodes since last navigation) — trust empty set as \"all collapsed\"\n      return contextExpanded\n    }\n    return initialExpandedNodesProp ? new Set(initialExpandedNodesProp) : contextExpanded\n  }, [collectionSlug, getExpandedNodesForCollection, initialExpandedNodesProp])\n\n  const handleToggleNode = useCallback(\n    ({ id }: { id: number | string }) => {\n      // Mark context as seeded so the memo never falls back to the prop after this interaction.\n      // Capture the previous value first — seeding is only needed on the very first interaction.\n      const wasSeeded = contextSeededRef.current\n      contextSeededRef.current = true\n      const contextExpanded = getExpandedNodesForCollection(collectionSlug)\n      if (!wasSeeded && contextExpanded.size === 0 && initialExpandedNodesProp?.length) {\n        // Context not yet seeded. Seed it with all initial nodes, applying the toggle correctly:\n        // exclude the target if collapsing, include it if expanding.\n        const initialSet = new Set(initialExpandedNodesProp.map(String))\n        const isCurrentlyExpanded = initialSet.has(String(id))\n        for (const nodeId of initialExpandedNodesProp) {\n          if (!isCurrentlyExpanded || String(nodeId) !== String(id)) {\n            toggleNodeForCollection(collectionSlug, nodeId)\n          }\n        }\n        if (!isCurrentlyExpanded) {\n          toggleNodeForCollection(collectionSlug, id)\n        }\n        return\n      }\n      toggleNodeForCollection(collectionSlug, id)\n    },\n    [\n      collectionSlug,\n      getExpandedNodesForCollection,\n      initialExpandedNodesProp,\n      toggleNodeForCollection,\n    ],\n  )\n\n  // Pre-populate cache with initialData synchronously before first render\n  const childrenCache = useRef<Map<string, CachedChildren>>(new Map())\n\n  const prevBaseFilterKeyRef = useRef(baseFilterKey)\n  if (prevBaseFilterKeyRef.current !== baseFilterKey) {\n    prevBaseFilterKeyRef.current = baseFilterKey\n    childrenCache.current.clear()\n  }\n\n  useMemo(() => {\n    if (!initialData || initialData.docs.length === 0) {\n      return\n    }\n\n    const docsByParent = new Map<string, TreeDocument[]>()\n    for (const doc of initialData.docs) {\n      const parentId = doc[parentFieldName] || 'null'\n      const parentKey = String(parentId)\n      if (!docsByParent.has(parentKey)) {\n        docsByParent.set(parentKey, [])\n      }\n      docsByParent.get(parentKey).push(doc)\n    }\n\n    const filterKey = filterByCollections?.length\n      ? filterByCollections.slice().sort().join(',')\n      : ''\n    for (const [parentKey, docs] of docsByParent) {\n      const cacheKey = `${collectionSlug}-${parentKey}-${filterKey}-${baseFilterKey}`\n      const parentMeta = initialData.loadedParents[parentKey]\n\n      if (parentMeta) {\n        const loadedCount = parentMeta.loadedCount ?? docs.length\n        childrenCache.current.set(cacheKey, {\n          children: docs,\n          hasMore: parentMeta.hasMore,\n          page: Math.ceil(loadedCount / treeLimit) || 1,\n          totalDocs: parentMeta.totalDocs,\n        })\n      } else {\n        childrenCache.current.set(cacheKey, {\n          children: docs,\n          hasMore: false,\n          page: 1,\n          totalDocs: docs.length,\n        })\n      }\n    }\n  }, [initialData, filterByCollections, parentFieldName, collectionSlug, treeLimit, baseFilterKey])\n\n  const treeRef = useRef<HTMLDivElement>(null)\n\n  const {\n    children: rootNodes,\n    hasMore,\n    isLoading,\n    loadMore: loadMoreFromHook,\n    refresh,\n    totalDocs,\n  } = useChildren({\n    allPossibleTypeValues,\n    baseFilter,\n    cache: childrenCache,\n    collectionSlug,\n    enabled: true,\n    filterByCollections,\n    initialData,\n    limit: treeLimit,\n    parentFieldName,\n    parentId: 'null',\n    typeFieldName,\n    useAsTitle,\n  })\n\n  const handleLoadMore = useCallback(async () => {\n    await loadMoreFromHook()\n  }, [loadMoreFromHook])\n\n  const handleNodeClick = useCallback(\n    ({ id }: { id: number | string }) => {\n      onNodeClick?.({ id })\n    },\n    [onNodeClick],\n  )\n\n  const handleTreeKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'ArrowDown') {\n        e.preventDefault()\n        moveFocus('down')\n      } else if (e.key === 'ArrowUp') {\n        e.preventDefault()\n        moveFocus('up')\n      }\n    },\n    [moveFocus],\n  )\n\n  if (isLoading && !rootNodes) {\n    return (\n      <div className={baseClass}>\n        <DelayedSpinner baseClass={baseClass} isLoading={true} />\n      </div>\n    )\n  }\n\n  if (!rootNodes || rootNodes.length === 0) {\n    const collectionLabel = getEntityConfig({ collectionSlug })\n    return (\n      <div className={baseClass}>\n        <CreateDocumentButton\n          buttonStyle=\"primary\"\n          collections={[{ collectionSlug }]}\n          drawerSlug={createDrawerSlug}\n          label={t('general:createNewLabel', {\n            label: getTranslation(collectionLabel.labels.singular, i18n),\n          })}\n          onSave={async () => {\n            await refresh()\n            router.refresh()\n          }}\n        />\n      </div>\n    )\n  }\n\n  const isAllSelected = selectedNodeId === null\n  const handleAllClick = () => onNodeClick?.({ id: null })\n\n  return (\n    <div\n      className={baseClass}\n      onKeyDown={handleTreeKeyDown}\n      ref={treeRef}\n      role=\"tree\"\n      tabIndex={-1}\n    >\n      <div\n        aria-selected={isAllSelected}\n        className={[\n          `${baseClass}__all-option`,\n          isAllSelected && `${baseClass}__all-option--selected`,\n        ]\n          .filter(Boolean)\n          .join(' ')}\n        onClick={handleAllClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault()\n            handleAllClick()\n          }\n        }}\n        role=\"treeitem\"\n        tabIndex={0}\n      >\n        {icon || <TagIcon color=\"muted\" />}\n        <span>\n          {t('general:all')}{' '}\n          {getTranslation(getEntityConfig({ collectionSlug })?.labels?.plural, i18n)}\n        </span>\n      </div>\n      {rootNodes.map((node) => {\n        const nodeId: number | string = node.id\n        const nodeIdStr = typeof nodeId === 'number' ? String(nodeId) : nodeId\n        const nodeTitle = getDocumentTitle(node, useAsTitle)\n\n        return (\n          <TreeNode\n            allPossibleTypeValues={allPossibleTypeValues}\n            baseFilter={baseFilter}\n            cache={childrenCache}\n            collectionSlug={collectionSlug}\n            depth={0}\n            expandedNodes={expandedNodes}\n            filterByCollections={filterByCollections}\n            key={nodeIdStr}\n            limit={treeLimit}\n            node={{ id: nodeId, hasChildren: true, title: nodeTitle }}\n            onSelect={handleNodeClick}\n            onToggle={handleToggleNode}\n            parentFieldName={parentFieldName}\n            selected={nodeIdStr === String(selectedNodeId)}\n            selectedNodeId={selectedNodeId}\n            typeFieldName={typeFieldName}\n            useAsTitle={useAsTitle}\n          />\n        )\n      })}\n      {hasMore && (\n        <LoadMore\n          currentCount={rootNodes.length}\n          depth={0}\n          id=\"load-more-root\"\n          onLoadMore={handleLoadMore}\n          totalDocs={totalDocs}\n        />\n      )}\n    </div>\n  )\n}\n\nexport const HierarchyTree: React.FC<HierarchyTreeProps> = (props) => {\n  return (\n    <TreeFocusProvider>\n      <HierarchyTreeInner {...props} />\n    </TreeFocusProvider>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/{Tree → Hierarchy/Tree}/index.scss

@@ -1,11 +1,10 @@
-@import '../../scss/styles.scss';
+@import '../../../scss/styles.scss';
 
 .tree {
-  // CSS variables for customization - defined once at the top level
   --tree-indent: 20px;
   --tree-chevron-width: 16px;
   --tree-chevron-spacing: 8px;
-  --tree-node-padding-y: calc(var(--base) / 4); // 4px
+  --tree-node-padding-y: calc(var(--base) / 4);
   --tree-node-content-height: 24px;
   --tree-row-gap: 8px;
   --tree-font-size: 13px;
@@ -31,11 +30,9 @@
     &:hover {
       text-decoration: underline;
     }
-
     &:focus-visible {
       outline: var(--accessibility-outline);
     }
-
     &--selected {
       font-weight: 600;
     }

package/dist/elements/{Tree → Hierarchy/Tree}/types.d.ts

@@ -1,4 +1,32 @@
-import type { MutableRefObject, ReactNode } from 'react';
+import type { TypeWithID, Where } from 'payload';
+import type { ReactNode, RefObject } from 'react';
+export type HierarchyDocument = {
+    [key: string]: unknown;
+} & TypeWithID;
+export type HierarchyInitialData = {
+    baseFilter?: null | Where;
+    docs: HierarchyDocument[];
+    loadedParents: Record<string, {
+        hasMore: boolean;
+        loadedCount?: number;
+        totalDocs: number;
+    }>;
+};
+export type HierarchyTreeProps = {
+    baseFilter?: null | Where;
+    collectionSlug: string;
+    filterByCollections?: string[];
+    icon?: ReactNode;
+    /** Initial data for first render (before context hydration). After hydration, context data takes precedence. */
+    initialData?: HierarchyInitialData | null;
+    /** Initial expanded nodes for first render (before context hydration). After hydration, context takes precedence. */
+    initialExpandedNodes?: (number | string)[];
+    onNodeClick?: ({ id }: {
+        id: null | number | string;
+    }) => void;
+    selectedNodeId?: null | number | string;
+    useAsTitle?: string;
+};
 export type TreeDocument = {
     [key: string]: unknown;
     id: number | string;
@@ -14,7 +42,7 @@ export type CachedChildren = {
     page: number;
     totalDocs: number;
 };
-export type TreeCache = MutableRefObject<Map<string, CachedChildren>>;
+export type TreeCache = RefObject<Map<string, CachedChildren>>;
 export type TreeInitialData = {
     docs: TreeDocument[];
     loadedParents: Record<string, {
@@ -23,28 +51,9 @@ export type TreeInitialData = {
         totalDocs: number;
     }>;
 };
-export type TreeProps = {
-    allPossibleTypeValues?: string[];
-    collectionSlug: string;
-    expandedNodes: Set<number | string>;
-    filterByCollections?: string[];
-    icon?: ReactNode;
-    initialData?: null | TreeInitialData;
-    onNodeClick?: ({ id }: {
-        id: null | number | string;
-    }) => void;
-    parentFieldName: string;
-    selectedNodeId?: null | number | string;
-    showAllOption?: boolean;
-    toggleNode: ({ id }: {
-        id: number | string;
-    }) => void;
-    treeLimit?: number;
-    typeFieldName?: string;
-    useAsTitle?: string;
-};
 export type TreeNodeProps = {
     allPossibleTypeValues?: string[];
+    baseFilter?: null | Where;
     cache: TreeCache;
     collectionSlug: string;
     depth: number;

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Tree/types.ts"],"names":[],"mappings":"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"}

package/dist/elements/Hierarchy/Tree/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/Hierarchy/Tree/types.ts"],"sourcesContent":["import type { TypeWithID, Where } from 'payload'\nimport type { ReactNode, RefObject } from 'react'\n\nexport type HierarchyDocument = {\n  [key: string]: unknown\n} & TypeWithID\n\nexport type HierarchyInitialData = {\n  baseFilter?: null | Where\n  docs: HierarchyDocument[]\n  // Metadata about what was loaded - keyed by parent ID ('null' for root)\n  loadedParents: Record<string, { hasMore: boolean; loadedCount?: number; totalDocs: number }>\n}\n\nexport type HierarchyTreeProps = {\n  baseFilter?: null | Where\n  collectionSlug: string\n  filterByCollections?: string[]\n  icon?: ReactNode\n  /** Initial data for first render (before context hydration). After hydration, context data takes precedence. */\n  initialData?: HierarchyInitialData | null\n  /** Initial expanded nodes for first render (before context hydration). After hydration, context takes precedence. */\n  initialExpandedNodes?: (number | string)[]\n  onNodeClick?: ({ id }: { id: null | number | string }) => void\n  selectedNodeId?: null | number | string\n  useAsTitle?: string\n}\n\n// Tree primitive types (used by TreeNode, useChildren, HierarchyTree)\n\nexport type TreeDocument = {\n  [key: string]: unknown\n  id: number | string\n}\n\nexport type TreeNodeData = {\n  hasChildren: boolean\n  id: number | string\n  title: string\n}\n\nexport type CachedChildren = {\n  children: TreeDocument[]\n  hasMore: boolean\n  page: number\n  totalDocs: number\n}\n\nexport type TreeCache = RefObject<Map<string, CachedChildren>>\n\nexport type TreeInitialData = {\n  docs: TreeDocument[]\n  loadedParents: Record<string, { hasMore: boolean; loadedCount?: number; totalDocs: number }>\n}\n\nexport type TreeNodeProps = {\n  allPossibleTypeValues?: string[]\n  baseFilter?: null | Where\n  cache: TreeCache\n  collectionSlug: string\n  depth: number\n  expandedNodes: Set<number | string>\n  filterByCollections?: string[]\n  limit: number\n  node: TreeNodeData\n  onSelect?: ({ id }: { id: number | string }) => void\n  onToggle: ({ id }: { id: number | string }) => void\n  parentFieldName: string\n  selected?: boolean\n  selectedNodeId?: number | string\n  typeFieldName?: null | string\n  useAsTitle?: string\n}\n"],"mappings":"AAuDA","ignoreList":[]}

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

@@ -0,0 +1,32 @@
+import type { Where } from 'payload';
+import type { TreeCache, TreeDocument, TreeInitialData } from './types.js';
+type UseChildrenArgs = {
+    allPossibleTypeValues?: string[];
+    /** Base filter to apply to all queries (e.g., tenant filter) */
+    baseFilter?: null | Where;
+    cache?: TreeCache;
+    /** Pre-computed cache key to ensure consistency with cache population */
+    cacheKey?: string;
+    collectionSlug: string;
+    enabled?: boolean;
+    filterByCollections?: string[];
+    initialData?: null | TreeInitialData;
+    limit?: number;
+    parentFieldName: string;
+    parentId: number | string;
+    typeFieldName?: null | string;
+    useAsTitle?: string;
+};
+type UseChildrenReturn = {
+    children: null | TreeDocument[];
+    hasMore: boolean;
+    isLoading: boolean;
+    /** Explicitly load children. Safe to call multiple times — no-ops if already loaded. */
+    load: () => Promise<TreeDocument[]>;
+    loadMore: () => Promise<TreeDocument[]>;
+    refresh: () => Promise<TreeDocument[]>;
+    totalDocs: number;
+};
+export declare const useChildren: ({ allPossibleTypeValues, baseFilter, cache, cacheKey: cacheKeyProp, collectionSlug, enabled, filterByCollections, initialData, limit, parentFieldName, parentId, typeFieldName, useAsTitle, }: UseChildrenArgs) => UseChildrenReturn;
+export {};
+//# sourceMappingURL=useChildren.d.ts.map