@payloadcms/ui 3.80.0-internal.60d6f94 → 3.80.0-internal.8d9ec7c

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

@@ -0,0 +1,221 @@
+'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.scss';
+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,
+  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,
+    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
+  });
+  // When focusedId points to this node, actually call .focus()
+  React.useEffect(() => {
+    if (isFocused && nodeRef.current && document.activeElement !== nodeRef.current) {
+      nodeRef.current.focus();
+    }
+  }, [isFocused]);
+  // 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();
+    onToggle({
+      id: node.id
+    });
+  }, [node.id, onToggle]);
+  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`, selected && `${baseClass}__content--selected`].filter(Boolean).join(' '),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__indicator`
+      }), 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`
+      }), /*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__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,
+            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/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","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/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    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      onToggle({ id: node.id })\n    },\n    [node.id, onToggle],\n  )\n\n  const handleSelectClick = useCallback(() => {\n    onSelect?.({ id: node.id })\n  }, [node.id, onSelect])\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      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/TreeNode/index.scss

@@ -0,0 +1,110 @@
+@import '../../../scss/styles.scss';
+
+.tree-node {
+  // Remove default focus outline from treeitem - we style the content instead
+  outline: none;
+
+  // When treeitem is keyboard-focused, highlight only the content row
+  &:focus-visible > .tree-node__content {
+    outline: var(--accessibility-outline);
+  }
+
+  .tree-node {
+    margin-left: 0;
+    margin-right: 0;
+  }
+  // Variables are inherited from parent .tree
+
+  &__indicator {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 2px;
+    height: 16px;
+    background-color: transparent;
+    border-start-end-radius: 2px;
+    border-end-end-radius: 2px;
+    left: calc(var(--nav-padding-inline-start) * -1);
+    top: 50%;
+    bottom: 50%;
+    transform: translateY(-50%);
+  }
+
+  &__content--selected {
+    font-weight: 600;
+
+    & > .tree-node__indicator {
+      background-color: var(--theme-text);
+    }
+
+    & > .tree-node__title {
+      color: var(--theme-text);
+    }
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+    padding: var(--tree-node-padding-y) 0px;
+    padding-left: calc(var(--tree-depth, 0) * var(--tree-indent));
+    user-select: none;
+    transition: background-color 100ms ease;
+    font-size: var(--tree-font-size);
+    line-height: var(--tree-node-content-height);
+    height: var(--tree-node-content-height);
+    position: relative;
+    margin-bottom: var(--tree-row-gap);
+    border-radius: var(--style-radius-s);
+  }
+
+  &__toggle {
+    background: none;
+    border: none;
+    padding: 0;
+    margin: 0;
+    margin-right: var(--tree-chevron-spacing);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: default;
+    color: var(--theme-elevation-400);
+    width: var(--tree-chevron-width);
+    height: var(--tree-chevron-width);
+    flex-shrink: 0;
+    border-radius: var(--style-radius-m);
+
+    &:hover {
+      border: 1px solid var(--theme-elevation-400);
+    }
+  }
+
+  &__toggle-spacer {
+    width: calc(var(--tree-chevron-width) + var(--tree-chevron-spacing));
+    flex-shrink: 0;
+  }
+
+  &__title {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: var(--tree-font-size);
+    color: var(--theme-elevation-650);
+    color: var(--theme-text);
+    cursor: pointer;
+    &:hover {
+      text-decoration: underline;
+      color: var(--theme-text);
+    }
+  }
+
+  &__loading {
+    margin-left: 8px;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &__children {
+    /* Children are rendered with depth variable set */
+  }
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Tree/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAiC,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAgC,SAAS,EAAE,MAAM,YAAY,CAAA;AASzE,OAAO,cAAc,CAAA;AA8QrB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAMpC,CAAA"}

package/dist/elements/Tree/index.js

@@ -0,0 +1,270 @@
+'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 React, { useId, useMemo, useRef } from 'react';
+import { CreateDocumentButton } from '../../elements/CreateDocumentButton/index.js';
+import { DelayedSpinner } from '../../elements/DelayedSpinner/index.js';
+import { TagIcon } from '../../icons/Tag/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { LoadMore } from './LoadMore/index.js';
+import { TreeFocusProvider, useTreeFocus } from './TreeFocusContext.js';
+import './index.scss';
+import { TreeNode } from './TreeNode/index.js';
+import { useChildren } from './useChildren.js';
+const baseClass = 'tree';
+const DEFAULT_TREE_LIMIT = 10;
+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 TreeInner = ({
+  allPossibleTypeValues,
+  baseFilter,
+  collectionSlug,
+  expandedNodes,
+  filterByCollections,
+  icon,
+  initialData,
+  onNodeClick,
+  parentFieldName,
+  selectedNodeId,
+  showAllOption = true,
+  toggleNode,
+  treeLimit = DEFAULT_TREE_LIMIT,
+  typeFieldName,
+  useAsTitle
+}) => {
+  const {
+    moveFocus
+  } = useTreeFocus();
+  const router = useRouter();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    getEntityConfig
+  } = useConfig();
+  const createDrawerSlug = `tree-create-${useId()}`;
+  // Pre-populate cache with initialData SYNCHRONOUSLY (before first render)
+  // This ensures expanded children find their data immediately without client-side fetch
+  const childrenCache = useRef(new Map());
+  // Track previous baseFilter to clear cache when tenant changes
+  // Use JSON string comparison since baseFilter is an object
+  const baseFilterKey = baseFilter ? JSON.stringify(baseFilter) : '';
+  const prevBaseFilterKeyRef = useRef(baseFilterKey);
+  if (prevBaseFilterKeyRef.current !== baseFilterKey) {
+    prevBaseFilterKeyRef.current = baseFilterKey;
+    childrenCache.current.clear();
+  }
+  // Populate cache from initialData
+  useMemo(() => {
+    if (!initialData || initialData.docs.length === 0) {
+      return;
+    }
+    // Group docs by parent to populate cache
+    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, []);
+      }
+      const parentDocs = docsByParent.get(parentKey);
+      if (parentDocs) {
+        parentDocs.push(doc);
+      }
+    }
+    // Populate cache with grouped docs and metadata from server
+    const filterKey = filterByCollections?.length ? filterByCollections.slice().sort().join(',') : '';
+    for (const [parentKey_0, docs] of docsByParent) {
+      const cacheKey = `${collectionSlug}-${parentKey_0}-${filterKey}`;
+      const parentMeta = initialData.loadedParents[parentKey_0];
+      if (parentMeta) {
+        // Calculate page number based on loaded count
+        // If server loaded multiple pages to find a selected node, loadedCount > treeLimit
+        const loadedCount = parentMeta.loadedCount ?? docs.length;
+        const currentPage = Math.ceil(loadedCount / treeLimit) || 1;
+        childrenCache.current.set(cacheKey, {
+          children: docs,
+          hasMore: parentMeta.hasMore,
+          page: currentPage,
+          totalDocs: parentMeta.totalDocs
+        });
+      } else {
+        // Shouldn't happen, but fallback to conservative estimate
+        childrenCache.current.set(cacheKey, {
+          children: docs,
+          hasMore: false,
+          page: 1,
+          totalDocs: docs.length
+        });
+      }
+    }
+  }, [initialData, filterByCollections, parentFieldName, collectionSlug, treeLimit]);
+  const treeRef = useRef(null);
+  // Fetch root nodes (items with no parent)
+  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
+  });
+  // Wrap loadMore - focusedId stays the same, tabindex handles the rest
+  const handleLoadMore = React.useCallback(async () => {
+    await loadMoreFromHook();
+  }, [loadMoreFromHook]);
+  const handleNodeClick = ({
+    id
+  }) => {
+    if (onNodeClick) {
+      onNodeClick({
+        id
+      });
+    }
+  };
+  // Show loading state with delay to prevent flash
+  if (isLoading && !rootNodes) {
+    return /*#__PURE__*/_jsx("div", {
+      className: baseClass,
+      children: /*#__PURE__*/_jsx(DelayedSpinner, {
+        baseClass: baseClass,
+        isLoading: true
+      })
+    });
+  }
+  // Show empty state after loading completes
+  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 handleTreeKeyDown = e => {
+    if (e.key === 'ArrowDown') {
+      e.preventDefault();
+      moveFocus('down');
+    } else if (e.key === 'ArrowUp') {
+      e.preventDefault();
+      moveFocus('up');
+    }
+  };
+  const isAllSelected = selectedNodeId === null;
+  const handleAllClick = () => {
+    if (onNodeClick) {
+      onNodeClick({
+        id: null
+      });
+    }
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    onKeyDown: handleTreeKeyDown,
+    ref: treeRef,
+    role: "tree",
+    tabIndex: -1,
+    children: [showAllOption && /*#__PURE__*/_jsxs("div", {
+      "aria-selected": isAllSelected,
+      className: `${baseClass}__all-option${isAllSelected ? ` ${baseClass}__all-option--selected` : ''}`,
+      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 = node.id;
+      const nodeIdStr = typeof nodeId === 'number' ? String(nodeId) : nodeId;
+      const nodeTitle = getDocumentTitle(node, useAsTitle);
+      const isSelected = nodeIdStr === String(selectedNodeId);
+      return /*#__PURE__*/_jsx(TreeNode, {
+        allPossibleTypeValues: allPossibleTypeValues,
+        baseFilter: baseFilter,
+        cache: childrenCache,
+        collectionSlug: collectionSlug,
+        depth: 0,
+        expandedNodes: expandedNodes,
+        filterByCollections: filterByCollections,
+        limit: treeLimit,
+        node: {
+          id: nodeId,
+          hasChildren: true,
+          title: nodeTitle
+        },
+        onSelect: handleNodeClick,
+        onToggle: toggleNode,
+        parentFieldName: parentFieldName,
+        selected: isSelected,
+        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 Tree = props => {
+  return /*#__PURE__*/_jsx(TreeFocusProvider, {
+    children: /*#__PURE__*/_jsx(TreeInner, {
+      ...props
+    })
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["getTranslation","useRouter","React","useId","useMemo","useRef","CreateDocumentButton","DelayedSpinner","TagIcon","useConfig","useTranslation","LoadMore","TreeFocusProvider","useTreeFocus","TreeNode","useChildren","baseClass","DEFAULT_TREE_LIMIT","getDocumentTitle","doc","useAsTitle","docId","id","idStr","String","value","TreeInner","allPossibleTypeValues","baseFilter","collectionSlug","expandedNodes","filterByCollections","icon","initialData","onNodeClick","parentFieldName","selectedNodeId","showAllOption","toggleNode","treeLimit","typeFieldName","moveFocus","router","i18n","t","getEntityConfig","createDrawerSlug","childrenCache","Map","baseFilterKey","JSON","stringify","prevBaseFilterKeyRef","current","clear","docs","length","docsByParent","parentId","parentKey","has","set","parentDocs","get","push","filterKey","slice","sort","join","cacheKey","parentMeta","loadedParents","loadedCount","currentPage","Math","ceil","children","hasMore","page","totalDocs","treeRef","rootNodes","isLoading","loadMore","loadMoreFromHook","refresh","cache","enabled","limit","handleLoadMore","useCallback","handleNodeClick","_jsx","className","collectionLabel","buttonStyle","collections","drawerSlug","label","labels","singular","onSave","handleTreeKeyDown","e","key","preventDefault","isAllSelected","handleAllClick","_jsxs","onKeyDown","ref","role","tabIndex","onClick","color","plural","map","node","nodeId","nodeIdStr","nodeTitle","isSelected","depth","hasChildren","title","onSelect","onToggle","selected","currentCount","onLoadMore","Tree","props"],"sources":["../../../src/elements/Tree/index.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport React, { useId, useMemo, useRef } from 'react'\n\nimport type { CachedChildren, TreeDocument, TreeProps } from './types.js'\n\nimport { CreateDocumentButton } from '../../elements/CreateDocumentButton/index.js'\nimport { DelayedSpinner } from '../../elements/DelayedSpinner/index.js'\nimport { TagIcon } from '../../icons/Tag/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { LoadMore } from './LoadMore/index.js'\nimport { TreeFocusProvider, useTreeFocus } from './TreeFocusContext.js'\nimport './index.scss'\nimport { TreeNode } from './TreeNode/index.js'\nimport { useChildren } from './useChildren.js'\n\nconst baseClass = 'tree'\nconst DEFAULT_TREE_LIMIT = 10\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 TreeInner: React.FC<TreeProps> = ({\n  allPossibleTypeValues,\n  baseFilter,\n  collectionSlug,\n  expandedNodes,\n  filterByCollections,\n  icon,\n  initialData,\n  onNodeClick,\n  parentFieldName,\n  selectedNodeId,\n  showAllOption = true,\n  toggleNode,\n  treeLimit = DEFAULT_TREE_LIMIT,\n  typeFieldName,\n  useAsTitle,\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  // Pre-populate cache with initialData SYNCHRONOUSLY (before first render)\n  // This ensures expanded children find their data immediately without client-side fetch\n  const childrenCache = useRef<Map<string, CachedChildren>>(new Map())\n\n  // Track previous baseFilter to clear cache when tenant changes\n  // Use JSON string comparison since baseFilter is an object\n  const baseFilterKey = baseFilter ? JSON.stringify(baseFilter) : ''\n\n  const prevBaseFilterKeyRef = useRef(baseFilterKey)\n  if (prevBaseFilterKeyRef.current !== baseFilterKey) {\n    prevBaseFilterKeyRef.current = baseFilterKey\n    childrenCache.current.clear()\n  }\n\n  // Populate cache from initialData\n  useMemo(() => {\n    if (!initialData || initialData.docs.length === 0) {\n      return\n    }\n\n    // Group docs by parent to populate cache\n    const docsByParent = new Map<string, TreeDocument[]>()\n\n    for (const doc of initialData.docs) {\n      const parentId = doc[parentFieldName] || 'null'\n      const parentKey = String(parentId)\n\n      if (!docsByParent.has(parentKey)) {\n        docsByParent.set(parentKey, [])\n      }\n      const parentDocs = docsByParent.get(parentKey)\n      if (parentDocs) {\n        parentDocs.push(doc)\n      }\n    }\n\n    // Populate cache with grouped docs and metadata from server\n    const filterKey = filterByCollections?.length\n      ? filterByCollections.slice().sort().join(',')\n      : ''\n    for (const [parentKey, docs] of docsByParent) {\n      const cacheKey = `${collectionSlug}-${parentKey}-${filterKey}`\n      const parentMeta = initialData.loadedParents[parentKey]\n\n      if (parentMeta) {\n        // Calculate page number based on loaded count\n        // If server loaded multiple pages to find a selected node, loadedCount > treeLimit\n        const loadedCount = parentMeta.loadedCount ?? docs.length\n        const currentPage = Math.ceil(loadedCount / treeLimit) || 1\n\n        childrenCache.current.set(cacheKey, {\n          children: docs,\n          hasMore: parentMeta.hasMore,\n          page: currentPage,\n          totalDocs: parentMeta.totalDocs,\n        })\n      } else {\n        // Shouldn't happen, but fallback to conservative estimate\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])\n  const treeRef = useRef<HTMLDivElement>(null)\n\n  // Fetch root nodes (items with no parent)\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', // Special value to query for null parent\n    typeFieldName,\n    useAsTitle,\n  })\n\n  // Wrap loadMore - focusedId stays the same, tabindex handles the rest\n  const handleLoadMore = React.useCallback(async () => {\n    await loadMoreFromHook()\n  }, [loadMoreFromHook])\n\n  const handleNodeClick = ({ id }: { id: number | string }) => {\n    if (onNodeClick) {\n      onNodeClick({ id })\n    }\n  }\n\n  // Show loading state with delay to prevent flash\n  if (isLoading && !rootNodes) {\n    return (\n      <div className={baseClass}>\n        <DelayedSpinner baseClass={baseClass} isLoading={true} />\n      </div>\n    )\n  }\n\n  // Show empty state after loading completes\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 handleTreeKeyDown = (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\n  const isAllSelected = selectedNodeId === null\n\n  const handleAllClick = () => {\n    if (onNodeClick) {\n      onNodeClick({ id: null })\n    }\n  }\n\n  return (\n    <div\n      className={baseClass}\n      onKeyDown={handleTreeKeyDown}\n      ref={treeRef}\n      role=\"tree\"\n      tabIndex={-1}\n    >\n      {showAllOption && (\n        <div\n          aria-selected={isAllSelected}\n          className={`${baseClass}__all-option${isAllSelected ? ` ${baseClass}__all-option--selected` : ''}`}\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      )}\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        const isSelected = nodeIdStr === String(selectedNodeId)\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={{\n              id: nodeId,\n              hasChildren: true,\n              title: nodeTitle,\n            }}\n            onSelect={handleNodeClick}\n            onToggle={toggleNode}\n            parentFieldName={parentFieldName}\n            selected={isSelected}\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 Tree: React.FC<TreeProps> = (props) => {\n  return (\n    <TreeFocusProvider>\n      <TreeInner {...props} />\n    </TreeFocusProvider>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,SAASA,cAAc,QAAQ;AAC/B,SAASC,SAAS,QAAQ;AAC1B,OAAOC,KAAA,IAASC,KAAK,EAAEC,OAAO,EAAEC,MAAM,QAAQ;AAI9C,SAASC,oBAAoB,QAAQ;AACrC,SAASC,cAAc,QAAQ;AAC/B,SAASC,OAAO,QAAQ;AACxB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,QAAQ,QAAQ;AACzB,SAASC,iBAAiB,EAAEC,YAAY,QAAQ;AAChD,OAAO;AACP,SAASC,QAAQ,QAAQ;AACzB,SAASC,WAAW,QAAQ;AAE5B,MAAMC,SAAA,GAAY;AAClB,MAAMC,kBAAA,GAAqB;AAE3B,MAAMC,gBAAA,GAAmBA,CAACC,GAAA,EAAmBC,UAAA;EAC3C,MAAMC,KAAA,GAAyBF,GAAA,CAAIG,EAAE;EACrC,MAAMC,KAAA,GAAQ,OAAOF,KAAA,KAAU,WAAWG,MAAA,CAAOH,KAAA,IAASA,KAAA;EAE1D,IAAI,CAACD,UAAA,EAAY;IACf,OAAOG,KAAA;EACT;EAEA,MAAME,KAAA,GAAQN,GAAG,CAACC,UAAA,CAAW;EAC7B,IAAIK,KAAA,KAAU,OAAOA,KAAA,KAAU,YAAY,OAAOA,KAAA,KAAU,QAAO,GAAI;IACrE,OAAOD,MAAA,CAAOC,KAAA;EAChB;EACA,OAAOF,KAAA;AACT;AAEA,MAAMG,SAAA,GAAiCA,CAAC;EACtCC,qBAAqB;EACrBC,UAAU;EACVC,cAAc;EACdC,aAAa;EACbC,mBAAmB;EACnBC,IAAI;EACJC,WAAW;EACXC,WAAW;EACXC,eAAe;EACfC,cAAc;EACdC,aAAA,GAAgB,IAAI;EACpBC,UAAU;EACVC,SAAA,GAAYtB,kBAAkB;EAC9BuB,aAAa;EACbpB;AAAU,CACX;EACC,MAAM;IAAEqB;EAAS,CAAE,GAAG5B,YAAA;EACtB,MAAM6B,MAAA,GAASzC,SAAA;EACf,MAAM;IAAE0C,IAAI;IAAEC;EAAC,CAAE,GAAGlC,cAAA;EACpB,MAAM;IAAEmC;EAAe,CAAE,GAAGpC,SAAA;EAC5B,MAAMqC,gBAAA,GAAmB,eAAe3C,KAAA,IAAS;EAEjD;EACA;EACA,MAAM4C,aAAA,GAAgB1C,MAAA,CAAoC,IAAI2C,GAAA;EAE9D;EACA;EACA,MAAMC,aAAA,GAAgBrB,UAAA,GAAasB,IAAA,CAAKC,SAAS,CAACvB,UAAA,IAAc;EAEhE,MAAMwB,oBAAA,GAAuB/C,MAAA,CAAO4C,aAAA;EACpC,IAAIG,oBAAA,CAAqBC,OAAO,KAAKJ,aAAA,EAAe;IAClDG,oBAAA,CAAqBC,OAAO,GAAGJ,aAAA;IAC/BF,aAAA,CAAcM,OAAO,CAACC,KAAK;EAC7B;EAEA;EACAlD,OAAA,CAAQ;IACN,IAAI,CAAC6B,WAAA,IAAeA,WAAA,CAAYsB,IAAI,CAACC,MAAM,KAAK,GAAG;MACjD;IACF;IAEA;IACA,MAAMC,YAAA,GAAe,IAAIT,GAAA;IAEzB,KAAK,MAAM7B,GAAA,IAAOc,WAAA,CAAYsB,IAAI,EAAE;MAClC,MAAMG,QAAA,GAAWvC,GAAG,CAACgB,eAAA,CAAgB,IAAI;MACzC,MAAMwB,SAAA,GAAYnC,MAAA,CAAOkC,QAAA;MAEzB,IAAI,CAACD,YAAA,CAAaG,GAAG,CAACD,SAAA,GAAY;QAChCF,YAAA,CAAaI,GAAG,CAACF,SAAA,EAAW,EAAE;MAChC;MACA,MAAMG,UAAA,GAAaL,YAAA,CAAaM,GAAG,CAACJ,SAAA;MACpC,IAAIG,UAAA,EAAY;QACdA,UAAA,CAAWE,IAAI,CAAC7C,GAAA;MAClB;IACF;IAEA;IACA,MAAM8C,SAAA,GAAYlC,mBAAA,EAAqByB,MAAA,GACnCzB,mBAAA,CAAoBmC,KAAK,GAAGC,IAAI,GAAGC,IAAI,CAAC,OACxC;IACJ,KAAK,MAAM,CAACT,WAAA,EAAWJ,IAAA,CAAK,IAAIE,YAAA,EAAc;MAC5C,MAAMY,QAAA,GAAW,GAAGxC,cAAA,IAAkB8B,WAAA,IAAaM,SAAA,EAAW;MAC9D,MAAMK,UAAA,GAAarC,WAAA,CAAYsC,aAAa,CAACZ,WAAA,CAAU;MAEvD,IAAIW,UAAA,EAAY;QACd;QACA;QACA,MAAME,WAAA,GAAcF,UAAA,CAAWE,WAAW,IAAIjB,IAAA,CAAKC,MAAM;QACzD,MAAMiB,WAAA,GAAcC,IAAA,CAAKC,IAAI,CAACH,WAAA,GAAcjC,SAAA,KAAc;QAE1DQ,aAAA,CAAcM,OAAO,CAACQ,GAAG,CAACQ,QAAA,EAAU;UAClCO,QAAA,EAAUrB,IAAA;UACVsB,OAAA,EAASP,UAAA,CAAWO,OAAO;UAC3BC,IAAA,EAAML,WAAA;UACNM,SAAA,EAAWT,UAAA,CAAWS;QACxB;MACF,OAAO;QACL;QACAhC,aAAA,CAAcM,OAAO,CAACQ,GAAG,CAACQ,QAAA,EAAU;UAClCO,QAAA,EAAUrB,IAAA;UACVsB,OAAA,EAAS;UACTC,IAAA,EAAM;UACNC,SAAA,EAAWxB,IAAA,CAAKC;QAClB;MACF;IACF;EACF,GAAG,CAACvB,WAAA,EAAaF,mBAAA,EAAqBI,eAAA,EAAiBN,cAAA,EAAgBU,SAAA,CAAU;EACjF,MAAMyC,OAAA,GAAU3E,MAAA,CAAuB;EAEvC;EACA,MAAM;IACJuE,QAAA,EAAUK,SAAS;IACnBJ,OAAO;IACPK,SAAS;IACTC,QAAA,EAAUC,gBAAgB;IAC1BC,OAAO;IACPN;EAAS,CACV,GAAGhE,WAAA,CAAY;IACdY,qBAAA;IACAC,UAAA;IACA0D,KAAA,EAAOvC,aAAA;IACPlB,cAAA;IACA0D,OAAA,EAAS;IACTxD,mBAAA;IACAE,WAAA;IACAuD,KAAA,EAAOjD,SAAA;IACPJ,eAAA;IACAuB,QAAA,EAAU;IACVlB,aAAA;IACApB;EACF;EAEA;EACA,MAAMqE,cAAA,GAAiBvF,KAAA,CAAMwF,WAAW,CAAC;IACvC,MAAMN,gBAAA;EACR,GAAG,CAACA,gBAAA,CAAiB;EAErB,MAAMO,eAAA,GAAkBA,CAAC;IAAErE;EAAE,CAA2B;IACtD,IAAIY,WAAA,EAAa;MACfA,WAAA,CAAY;QAAEZ;MAAG;IACnB;EACF;EAEA;EACA,IAAI4D,SAAA,IAAa,CAACD,SAAA,EAAW;IAC3B,oBACEW,IAAA,CAAC;MAAIC,SAAA,EAAW7E,SAAA;gBACd,aAAA4E,IAAA,CAACrF,cAAA;QAAeS,SAAA,EAAWA,SAAA;QAAWkE,SAAA,EAAW;;;EAGvD;EAEA;EACA,IAAI,CAACD,SAAA,IAAaA,SAAA,CAAUzB,MAAM,KAAK,GAAG;IACxC,MAAMsC,eAAA,GAAkBjD,eAAA,CAAgB;MAAEhB;IAAe;IACzD,oBACE+D,IAAA,CAAC;MAAIC,SAAA,EAAW7E,SAAA;gBACd,aAAA4E,IAAA,CAACtF,oBAAA;QACCyF,WAAA,EAAY;QACZC,WAAA,EAAa,CAAC;UAAEnE;QAAe,EAAE;QACjCoE,UAAA,EAAYnD,gBAAA;QACZoD,KAAA,EAAOtD,CAAA,CAAE,0BAA0B;UACjCsD,KAAA,EAAOlG,cAAA,CAAe8F,eAAA,CAAgBK,MAAM,CAACC,QAAQ,EAAEzD,IAAA;QACzD;QACA0D,MAAA,EAAQ,MAAAA,CAAA;UACN,MAAMhB,OAAA;UACN3C,MAAA,CAAO2C,OAAO;QAChB;;;EAIR;EAEA,MAAMiB,iBAAA,GAAqBC,CAAA;IACzB,IAAIA,CAAA,CAAEC,GAAG,KAAK,aAAa;MACzBD,CAAA,CAAEE,cAAc;MAChBhE,SAAA,CAAU;IACZ,OAAO,IAAI8D,CAAA,CAAEC,GAAG,KAAK,WAAW;MAC9BD,CAAA,CAAEE,cAAc;MAChBhE,SAAA,CAAU;IACZ;EACF;EAEA,MAAMiE,aAAA,GAAgBtE,cAAA,KAAmB;EAEzC,MAAMuE,cAAA,GAAiBA,CAAA;IACrB,IAAIzE,WAAA,EAAa;MACfA,WAAA,CAAY;QAAEZ,EAAA,EAAI;MAAK;IACzB;EACF;EAEA,oBACEsF,KAAA,CAAC;IACCf,SAAA,EAAW7E,SAAA;IACX6F,SAAA,EAAWP,iBAAA;IACXQ,GAAA,EAAK9B,OAAA;IACL+B,IAAA,EAAK;IACLC,QAAA,EAAU,CAAC;eAEV3E,aAAA,iBACCuE,KAAA,CAAC;MACC,iBAAeF,aAAA;MACfb,SAAA,EAAW,GAAG7E,SAAA,eAAwB0F,aAAA,GAAgB,IAAI1F,SAAA,wBAAiC,GAAG,IAAI;MAClGiG,OAAA,EAASN,cAAA;MACTE,SAAA,EAAYN,GAAA;QACV,IAAIA,GAAA,CAAEC,GAAG,KAAK,WAAWD,GAAA,CAAEC,GAAG,KAAK,KAAK;UACtCD,GAAA,CAAEE,cAAc;UAChBE,cAAA;QACF;MACF;MACAI,IAAA,EAAK;MACLC,QAAA,EAAU;iBAEThF,IAAA,iBAAQ4D,IAAA,CAACpF,OAAA;QAAQ0G,KAAA,EAAM;uBACxBN,KAAA,CAAC;mBACEhE,CAAA,CAAE,gBAAgB,KAClB5C,cAAA,CAAe6C,eAAA,CAAgB;UAAEhB;QAAe,IAAIsE,MAAA,EAAQgB,MAAA,EAAQxE,IAAA;;QAI1EsC,SAAA,CAAUmC,GAAG,CAAEC,IAAA;MACd,MAAMC,MAAA,GAA0BD,IAAA,CAAK/F,EAAE;MACvC,MAAMiG,SAAA,GAAY,OAAOD,MAAA,KAAW,WAAW9F,MAAA,CAAO8F,MAAA,IAAUA,MAAA;MAChE,MAAME,SAAA,GAAYtG,gBAAA,CAAiBmG,IAAA,EAAMjG,UAAA;MACzC,MAAMqG,UAAA,GAAaF,SAAA,KAAc/F,MAAA,CAAOY,cAAA;MAExC,oBACEwD,IAAA,CAAC9E,QAAA;QACCa,qBAAA,EAAuBA,qBAAA;QACvBC,UAAA,EAAYA,UAAA;QACZ0D,KAAA,EAAOvC,aAAA;QACPlB,cAAA,EAAgBA,cAAA;QAChB6F,KAAA,EAAO;QACP5F,aAAA,EAAeA,aAAA;QACfC,mBAAA,EAAqBA,mBAAA;QAErByD,KAAA,EAAOjD,SAAA;QACP8E,IAAA,EAAM;UACJ/F,EAAA,EAAIgG,MAAA;UACJK,WAAA,EAAa;UACbC,KAAA,EAAOJ;QACT;QACAK,QAAA,EAAUlC,eAAA;QACVmC,QAAA,EAAUxF,UAAA;QACVH,eAAA,EAAiBA,eAAA;QACjB4F,QAAA,EAAUN,UAAA;QACVrF,cAAA,EAAgBA,cAAA;QAChBI,aAAA,EAAeA,aAAA;QACfpB,UAAA,EAAYA;SAbPmG,SAAA;IAgBX,IACC1C,OAAA,iBACCe,IAAA,CAACjF,QAAA;MACCqH,YAAA,EAAc/C,SAAA,CAAUzB,MAAM;MAC9BkE,KAAA,EAAO;MACPpG,EAAA,EAAG;MACH2G,UAAA,EAAYxC,cAAA;MACZV,SAAA,EAAWA;;;AAKrB;AAEA,OAAO,MAAMmD,IAAA,GAA6BC,KAAA;EACxC,oBACEvC,IAAA,CAAChF,iBAAA;cACC,aAAAgF,IAAA,CAAClE,SAAA;MAAW,GAAGyG;;;AAGrB","ignoreList":[]}