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

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

@@ -0,0 +1,28 @@
+import type React from 'react';
+type FocusableItem = {
+    id: string;
+    ref: React.RefObject<HTMLElement>;
+    type: 'load-more' | 'node';
+};
+type TreeFocusContextType = {
+    focusedId: null | string;
+    moveFocus: (direction: 'down' | 'up') => void;
+    registerItem: (item: FocusableItem) => void;
+    setFocusedId: (id: null | string) => void;
+    unregisterItem: (id: string) => void;
+};
+export declare const TreeFocusProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useTreeFocus: () => TreeFocusContextType;
+export declare const useFocusableItem: ({ id, type, ref, }: {
+    id: string;
+    ref: React.RefObject<HTMLElement>;
+    type: "load-more" | "node";
+}) => {
+    handleFocus: () => void;
+    isFocused: boolean;
+    tabIndex: number;
+};
+export {};
+//# sourceMappingURL=TreeFocusContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeFocusContext.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Tree/TreeFocusContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,KAAK,aAAa,GAAG;IACnB,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IACjC,IAAI,EAAE,WAAW,GAAG,MAAM,CAAA;CAC3B,CAAA;AAED,KAAK,oBAAoB,GAAG;IAC1B,SAAS,EAAE,IAAI,GAAG,MAAM,CAAA;IACxB,SAAS,EAAE,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C,YAAY,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;IAC3C,YAAY,EAAE,CAAC,EAAE,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAA;IACzC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACrC,CAAA;AAID,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,CAgFrE,CAAA;AAED,eAAO,MAAM,YAAY,4BAMxB,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,oBAI9B;IACD,EAAE,EAAE,MAAM,CAAA;IACV,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IACjC,IAAI,EAAE,WAAW,GAAG,MAAM,CAAA;CAC3B;;;;CAwBA,CAAA"}

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

@@ -0,0 +1,149 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use, useCallback, useEffect, useRef, useState } from 'react';
+const TreeFocusContext = /*#__PURE__*/createContext(undefined);
+export const TreeFocusProvider = ({
+  children
+}) => {
+  const [focusedId, setFocusedIdState] = useState(null);
+  const itemsRef = useRef(new Map());
+  const setFocusedId = useCallback(id => {
+    setFocusedIdState(id);
+    if (id) {
+      const item = itemsRef.current.get(id);
+      if (item?.ref.current && document.activeElement !== item.ref.current) {
+        item.ref.current.focus();
+      }
+    }
+  }, []);
+  const registerItem = useCallback(item_0 => {
+    itemsRef.current.set(item_0.id, item_0);
+  }, []);
+  const unregisterItem = useCallback(id_0 => {
+    itemsRef.current.delete(id_0);
+  }, []);
+  const moveFocus = useCallback(direction => {
+    const items = Array.from(itemsRef.current.values());
+    if (items.length === 0) {
+      return;
+    }
+    // Sort items by their DOM position to ensure correct navigation order
+    const sortedItems = items.filter(item_1 => item_1.ref.current).sort((a, b) => {
+      const aElement = a.ref.current;
+      const bElement = b.ref.current;
+      if (!aElement || !bElement) {
+        return 0;
+      }
+      const position = aElement.compareDocumentPosition(bElement);
+      if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+        return -1;
+      }
+      if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+        return 1;
+      }
+      return 0;
+    });
+    const currentIndex = focusedId ? sortedItems.findIndex(item_2 => item_2.id === focusedId) : -1;
+    let nextIndex;
+    if (direction === 'down') {
+      nextIndex = currentIndex === -1 ? 0 : Math.min(currentIndex + 1, sortedItems.length - 1);
+    } else {
+      nextIndex = Math.max(currentIndex - 1, 0);
+    }
+    const nextItem = sortedItems[nextIndex];
+    if (nextItem && nextItem.ref.current) {
+      nextItem.ref.current.focus();
+      setFocusedId(nextItem.id);
+    }
+  }, [focusedId, setFocusedId]);
+  return /*#__PURE__*/_jsx(TreeFocusContext, {
+    value: {
+      focusedId,
+      moveFocus,
+      registerItem,
+      setFocusedId,
+      unregisterItem
+    },
+    children: children
+  });
+};
+export const useTreeFocus = () => {
+  const context = use(TreeFocusContext);
+  if (!context) {
+    throw new Error('useTreeFocus must be used within TreeFocusProvider');
+  }
+  return context;
+};
+export const useFocusableItem = t0 => {
+  const $ = _c(14);
+  const {
+    id,
+    type,
+    ref
+  } = t0;
+  const {
+    focusedId,
+    registerItem,
+    setFocusedId,
+    unregisterItem
+  } = useTreeFocus();
+  const isFocused = focusedId === id;
+  const isFirstItemEver = focusedId === null;
+  let t1;
+  let t2;
+  if ($[0] !== id || $[1] !== ref || $[2] !== registerItem || $[3] !== type || $[4] !== unregisterItem) {
+    t1 = () => {
+      registerItem({
+        id,
+        type,
+        ref
+      });
+      return () => {
+        unregisterItem(id);
+      };
+    };
+    t2 = [id, ref, type, registerItem, unregisterItem];
+    $[0] = id;
+    $[1] = ref;
+    $[2] = registerItem;
+    $[3] = type;
+    $[4] = unregisterItem;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t1 = $[5];
+    t2 = $[6];
+  }
+  useEffect(t1, t2);
+  let t3;
+  if ($[7] !== id || $[8] !== setFocusedId) {
+    t3 = () => {
+      setFocusedId(id);
+    };
+    $[7] = id;
+    $[8] = setFocusedId;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  const handleFocus = t3;
+  const tabIndex = isFocused ? 0 : isFirstItemEver ? 0 : -1;
+  let t4;
+  if ($[10] !== handleFocus || $[11] !== isFocused || $[12] !== tabIndex) {
+    t4 = {
+      handleFocus,
+      isFocused,
+      tabIndex
+    };
+    $[10] = handleFocus;
+    $[11] = isFocused;
+    $[12] = tabIndex;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  return t4;
+};
+//# sourceMappingURL=TreeFocusContext.js.map

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","setFocusedIdState","itemsRef","Map","setFocusedId","id","item","current","get","ref","document","activeElement","focus","registerItem","set","unregisterItem","delete","moveFocus","direction","items","Array","from","values","length","sortedItems","filter","sort","a","b","aElement","bElement","position","compareDocumentPosition","Node","DOCUMENT_POSITION_FOLLOWING","DOCUMENT_POSITION_PRECEDING","currentIndex","findIndex","nextIndex","Math","min","max","nextItem","_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, setFocusedIdState] = useState<null | string>(null)\n  const itemsRef = useRef<Map<string, FocusableItem>>(new Map())\n\n  const setFocusedId = useCallback((id: null | string) => {\n    setFocusedIdState(id)\n    if (id) {\n      const item = itemsRef.current.get(id)\n      if (item?.ref.current && document.activeElement !== item.ref.current) {\n        item.ref.current.focus()\n      }\n    }\n  }, [])\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, setFocusedId],\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.css

@@ -0,0 +1,63 @@
+@import '../../../../elements/SidebarRow/index.css';
+
+@layer payload-default {
+  .tree-node {
+    border-radius: var(--button-radius);
+
+    .tree-node {
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  .tree-node__content {
+    padding: var(--tree-node-padding-y) var(--spacer-2);
+    padding-left: calc(
+      (var(--tree-depth, 0) * var(--tree-indent)) + (var(--spacer-1) * var(--tree-depth)) +
+        var(--spacer-1)
+    );
+    transition: background-color 100ms ease;
+    font-size: var(--tree-font-size);
+    line-height: var(--tree-node-content-height);
+    margin-bottom: var(--tree-row-gap);
+  }
+
+  .tree-node__toggle {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
+    color: var(--color-icon-tertiary);
+    width: var(--tree-chevron-width);
+    height: var(--tree-chevron-width);
+    flex-shrink: 0;
+    border-radius: var(--button-radius);
+
+    &:hover {
+      color: var(--color-icon);
+    }
+  }
+
+  .tree-node__toggle-spacer {
+    width: calc(var(--tree-chevron-width) + var(--tree-chevron-spacing));
+    flex-shrink: 0;
+  }
+
+  .tree-node__title {
+    padding-left: var(--spacer-1);
+  }
+
+  .tree-node__loading {
+    margin-left: auto;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .tree-node__children {
+    /* Children are rendered with depth variable set */
+  }
+}

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,GAAI,uNAkBtB,aAAa,sBAmMf,CAAA"}

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

@@ -0,0 +1,222 @@
+'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'
+        })
+      }) : /*#__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: "sm"
+        })
+      })]
+    }), 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","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'} />\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=\"sm\" />\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(--color-icon);
+      }
+    }
+  }
+
+  .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(--color-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":"AAKA,OAAO,KAAwD,MAAM,OAAO,CAAA;AAE5E,OAAO,KAAK,EAAkB,kBAAkB,EAAgB,MAAM,YAAY,CAAA;AAgBlF,OAAO,aAAa,CAAA;AAwWpB,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAMtD,CAAA"}