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

package/dist/elements/Hierarchy/ColumnBrowser/ColumnItem/index.js

@@ -0,0 +1,162 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo } from 'react';
+import { CheckboxInput } from '../../../../fields/Checkbox/Input.js';
+import { ChevronIcon } from '../../../../icons/Chevron/index.js';
+import { isSuperset } from '../../../../utilities/isSuperset.js';
+import './index.css';
+const baseClass = 'hierarchy-column-item';
+export const ColumnItem = t0 => {
+  const $ = _c(27);
+  const {
+    disabled,
+    filterByCollection,
+    hasSelectedDescendants,
+    isExpanded,
+    isSelected,
+    item,
+    onExpand,
+    onSelect
+  } = t0;
+  const {
+    id,
+    allowedCollections,
+    hasChildren,
+    title
+  } = item;
+  let t1;
+  bb0: {
+    if (disabled) {
+      t1 = true;
+      break bb0;
+    }
+    if (!filterByCollection || filterByCollection.length === 0) {
+      t1 = false;
+      break bb0;
+    }
+    t1 = !isSuperset(allowedCollections, filterByCollection);
+  }
+  const isDisabled = t1;
+  let t2;
+  if ($[0] !== id || $[1] !== isDisabled || $[2] !== onSelect) {
+    t2 = e => {
+      e.stopPropagation();
+      if (isDisabled) {
+        return;
+      }
+      onSelect({
+        id
+      });
+    };
+    $[0] = id;
+    $[1] = isDisabled;
+    $[2] = onSelect;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const handleCheckboxToggle = t2;
+  let t3;
+  if ($[4] !== hasChildren || $[5] !== id || $[6] !== onExpand) {
+    t3 = e_0 => {
+      if (e_0.target.closest(`.${baseClass}__checkbox`)) {
+        return;
+      }
+      if (hasChildren) {
+        onExpand({
+          id
+        });
+      }
+    };
+    $[4] = hasChildren;
+    $[5] = id;
+    $[6] = onExpand;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const handleRowClick = t3;
+  let t4;
+  if ($[8] !== hasChildren || $[9] !== id || $[10] !== onExpand) {
+    t4 = e_1 => {
+      if (e_1.key === "Enter" || e_1.key === " ") {
+        e_1.preventDefault();
+        if (hasChildren) {
+          onExpand({
+            id
+          });
+        }
+      }
+    };
+    $[8] = hasChildren;
+    $[9] = id;
+    $[10] = onExpand;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  const handleKeyDown = t4;
+  const t5 = isExpanded && `${baseClass}--expanded`;
+  const t6 = isSelected && `${baseClass}--selected`;
+  const t7 = isDisabled && `${baseClass}--disabled`;
+  let t8;
+  if ($[12] !== t5 || $[13] !== t6 || $[14] !== t7) {
+    t8 = [baseClass, t5, t6, t7].filter(Boolean);
+    $[12] = t5;
+    $[13] = t6;
+    $[14] = t7;
+    $[15] = t8;
+  } else {
+    t8 = $[15];
+  }
+  const t9 = t8.join(" ");
+  const t10 = isDisabled ? undefined : handleRowClick;
+  const t11 = isDisabled ? -1 : 0;
+  let t12;
+  if ($[16] !== handleCheckboxToggle || $[17] !== handleKeyDown || $[18] !== hasChildren || $[19] !== hasSelectedDescendants || $[20] !== isDisabled || $[21] !== isSelected || $[22] !== t10 || $[23] !== t11 || $[24] !== t9 || $[25] !== title) {
+    t12 = _jsxs("div", {
+      className: t9,
+      onClick: t10,
+      onKeyDown: handleKeyDown,
+      role: "button",
+      tabIndex: t11,
+      children: [_jsx("div", {
+        className: `${baseClass}__checkbox`,
+        children: _jsx(CheckboxInput, {
+          checked: isSelected,
+          onToggle: handleCheckboxToggle,
+          readOnly: isDisabled,
+          variant: "muted"
+        })
+      }), _jsx("span", {
+        className: `${baseClass}__title`,
+        title,
+        children: title
+      }), hasSelectedDescendants && !isSelected && _jsx("span", {
+        className: `${baseClass}__descendant-indicator`
+      }), hasChildren && _jsx("span", {
+        className: `${baseClass}__chevron`,
+        children: _jsx(ChevronIcon, {
+          direction: "right"
+        })
+      })]
+    });
+    $[16] = handleCheckboxToggle;
+    $[17] = handleKeyDown;
+    $[18] = hasChildren;
+    $[19] = hasSelectedDescendants;
+    $[20] = isDisabled;
+    $[21] = isSelected;
+    $[22] = t10;
+    $[23] = t11;
+    $[24] = t9;
+    $[25] = title;
+    $[26] = t12;
+  } else {
+    t12 = $[26];
+  }
+  return t12;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Hierarchy/ColumnBrowser/ColumnItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useMemo","CheckboxInput","ChevronIcon","isSuperset","baseClass","ColumnItem","t0","$","disabled","filterByCollection","hasSelectedDescendants","isExpanded","isSelected","item","onExpand","onSelect","id","allowedCollections","hasChildren","title","t1","bb0","length","isDisabled","t2","e","stopPropagation","handleCheckboxToggle","t3","e_0","target","closest","handleRowClick","t4","e_1","key","preventDefault","handleKeyDown","t5","t6","t7","t8","filter","Boolean","t9","join","t10","undefined","t11","t12","_jsxs","className","onClick","onKeyDown","role","tabIndex","children","_jsx","checked","onToggle","readOnly","variant","direction"],"sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/ColumnItem/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useMemo } from 'react'\n\nimport type { ColumnItemProps } from '../types.js'\n\nimport { CheckboxInput } from '../../../../fields/Checkbox/Input.js'\nimport { ChevronIcon } from '../../../../icons/Chevron/index.js'\nimport { isSuperset } from '../../../../utilities/isSuperset.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-column-item'\n\nexport const ColumnItem: React.FC<ColumnItemProps> = ({\n  disabled,\n  filterByCollection,\n  hasSelectedDescendants,\n  isExpanded,\n  isSelected,\n  item,\n  onExpand,\n  onSelect,\n}) => {\n  const { id, allowedCollections, hasChildren, title } = item\n\n  // Disable selection if:\n  // 1. This item is in the disabledIds set (e.g., being moved)\n  // 2. Folder doesn't allow ALL required collections\n  const isDisabled = useMemo(() => {\n    if (disabled) {\n      return true\n    }\n    if (!filterByCollection || filterByCollection.length === 0) {\n      return false\n    }\n    return !isSuperset(allowedCollections, filterByCollection)\n  }, [allowedCollections, disabled, filterByCollection])\n\n  const handleCheckboxToggle = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      e.stopPropagation()\n      if (isDisabled) {\n        return\n      }\n      onSelect({ id })\n    },\n    [id, isDisabled, onSelect],\n  )\n\n  const handleRowClick = useCallback(\n    (e: React.MouseEvent) => {\n      // Don't expand when clicking the checkbox\n      if ((e.target as HTMLElement).closest(`.${baseClass}__checkbox`)) {\n        return\n      }\n      if (hasChildren) {\n        onExpand({ id })\n      }\n    },\n    [hasChildren, id, onExpand],\n  )\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        if (hasChildren) {\n          onExpand({ id })\n        }\n      }\n    },\n    [hasChildren, id, onExpand],\n  )\n\n  return (\n    <div\n      className={[\n        baseClass,\n        isExpanded && `${baseClass}--expanded`,\n        isSelected && `${baseClass}--selected`,\n        isDisabled && `${baseClass}--disabled`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={isDisabled ? undefined : handleRowClick}\n      onKeyDown={handleKeyDown}\n      role=\"button\"\n      tabIndex={isDisabled ? -1 : 0}\n    >\n      <div className={`${baseClass}__checkbox`}>\n        <CheckboxInput\n          checked={isSelected}\n          onToggle={handleCheckboxToggle}\n          readOnly={isDisabled}\n          variant=\"muted\"\n        />\n      </div>\n\n      <span className={`${baseClass}__title`} title={title}>\n        {title}\n      </span>\n\n      {hasSelectedDescendants && !isSelected && (\n        <span className={`${baseClass}__descendant-indicator`} />\n      )}\n\n      {hasChildren && (\n        <span className={`${baseClass}__chevron`}>\n          <ChevronIcon direction=\"right\" />\n        </span>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,15 @@
+@layer payload-default {
+  .hierarchy-column-browser {
+    display: flex;
+    flex: 1;
+    overflow-x: auto;
+  }
+
+  .hierarchy-column-browser__column-wrapper {
+    flex-shrink: 0;
+  }
+
+  .hierarchy-column-browser__column-wrapper--loading {
+    padding: var(--spacer-3);
+  }
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { HierarchyColumnBrowserProps, HierarchyColumnBrowserRef } from './types.js';
+import './index.css';
+export declare const HierarchyColumnBrowser: ({ ancestorsWithSelections, baseFilter, disabledIds, filterByCollection, hierarchyCollectionSlug, initialExpandedPath, isLoadingPath, onCreateNew, onSelect, parentFieldName, ref, selectedIds, useAsTitle, }: {
+    ref?: React.RefObject<HierarchyColumnBrowserRef | null>;
+} & HierarchyColumnBrowserProps) => React.JSX.Element;
+export type { ColumnItemData, HierarchyColumnBrowserProps, HierarchyColumnBrowserRef, PathSegment, } from './types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/ColumnBrowser/index.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAwE,MAAM,OAAO,CAAA;AAE5F,OAAO,KAAK,EAGV,2BAA2B,EAC3B,yBAAyB,EAC1B,MAAM,YAAY,CAAA;AASnB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,sBAAsB,GAAmC,8MAcnE;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;CAAE,GAAG,2BAA2B,sBA0d3F,CAAA;AAED,YAAY,EACV,cAAc,EACd,2BAA2B,EAC3B,yBAAyB,EACzB,WAAW,GACZ,MAAM,YAAY,CAAA"}

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

@@ -0,0 +1,473 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import { combineWhereConstraints, DEFAULT_HIERARCHY_TREE_LIMIT, formatAdminURL } from 'payload/shared';
+import * as qs from 'qs-esm';
+import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { useEffectEvent } from '../../../hooks/useEffectEvent.js';
+import { useAuth } from '../../../providers/Auth/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { isSuperset } from '../../../utilities/isSuperset.js';
+import { Spinner } from '../../Spinner/index.js';
+import { Column } from './Column/index.js';
+import './index.css';
+const baseClass = 'hierarchy-column-browser';
+export const HierarchyColumnBrowser = function HierarchyColumnBrowser({
+  ancestorsWithSelections,
+  baseFilter,
+  disabledIds,
+  filterByCollection,
+  hierarchyCollectionSlug,
+  initialExpandedPath,
+  isLoadingPath,
+  onCreateNew,
+  onSelect,
+  parentFieldName,
+  ref,
+  selectedIds,
+  useAsTitle = 'id'
+}) {
+  const {
+    i18n
+  } = useTranslation();
+  const {
+    permissions
+  } = useAuth();
+  const {
+    config: {
+      routes: {
+        api
+      },
+      serverURL
+    },
+    getEntityConfig
+  } = useConfig();
+  const collectionConfig = getEntityConfig({
+    collectionSlug: hierarchyCollectionSlug
+  });
+  const hierarchyConfig = collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object' ? collectionConfig.hierarchy : undefined;
+  const treeLimit = hierarchyConfig?.admin?.treeLimit ?? DEFAULT_HIERARCHY_TREE_LIMIT;
+  const collectionLabel = collectionConfig ? getTranslation(collectionConfig.labels?.singular || hierarchyCollectionSlug, i18n) : hierarchyCollectionSlug;
+  const canCreate = Boolean(permissions?.collections?.[hierarchyCollectionSlug]?.create);
+  const [columns, setColumns] = useState([]);
+  const [expandedPath, setExpandedPath] = useState([]);
+  const containerRef = useRef(null);
+  const lastColumnRef = useRef(null);
+  const hasLoadedRef = useRef(false);
+  const fetchItems = useCallback(async ({
+    page,
+    parentId
+  }) => {
+    const parentWhere = parentId === null ? {
+      [parentFieldName]: {
+        exists: false
+      }
+    } : {
+      [parentFieldName]: {
+        equals: parentId
+      }
+    };
+    // Build the final where clause, adding collectionSpecific filtering if configured
+    let where = parentWhere;
+    // Filter by collection type if collectionSpecific is configured and filterByCollection is defined
+    // - undefined: no filtering, show all folders
+    // - [] empty: show all folders (no constraints)
+    // - ['posts', ...]: show folders that allow ANY of these OR unrestricted
+    // Note: Ideally we'd enforce ALL (superset) but hasMany enum fields in PG
+    // do not support "contains all" queries easily
+    if (hierarchyConfig?.collectionSpecific && filterByCollection !== undefined) {
+      const typeFieldName = hierarchyConfig.collectionSpecific.fieldName;
+      if (filterByCollection.length > 0) {
+        // Get all possible type field values from relatedCollections
+        // This is used to detect "unrestricted" folders (empty allowedTypes array)
+        const allPossibleTypes = Object.keys(hierarchyConfig.relatedCollections || {});
+        where = {
+          and: [parentWhere, {
+            or: [
+            // items that allow ANY of the selected collections
+            {
+              [typeFieldName]: {
+                in: filterByCollection
+              }
+            },
+            // OR items that are unrestricted (no type field exists)
+            {
+              [typeFieldName]: {
+                exists: false
+              }
+            },
+            // OR items with empty allowedTypes array (unrestricted)
+            // Using not_in with all possible values matches empty arrays in both MongoDB and Postgres
+            ...(allPossibleTypes.length > 0 ? [{
+              [typeFieldName]: {
+                not_in: allPossibleTypes
+              }
+            }] : [])]
+          }]
+        };
+      } else {
+        // Empty array: show all items of this parent
+        where = parentWhere;
+      }
+    }
+    // Combine with baseFilter if provided
+    const whereWithBaseFilter = combineWhereConstraints([where, baseFilter]);
+    const queryString = qs.stringify({
+      limit: treeLimit,
+      page,
+      sort: useAsTitle,
+      where: whereWithBaseFilter
+    }, {
+      addQueryPrefix: true
+    });
+    const url = formatAdminURL({
+      apiRoute: api,
+      path: `/${hierarchyCollectionSlug}${queryString}`,
+      serverURL
+    });
+    const response = await fetch(url, {
+      credentials: 'include'
+    });
+    if (!response.ok) {
+      throw new Error('Failed to fetch items');
+    }
+    const data = await response.json();
+    const typeFieldName_0 = hierarchyConfig?.collectionSpecific ? hierarchyConfig.collectionSpecific.fieldName : undefined;
+    const allItems = (data.docs || []).map(doc => ({
+      id: doc.id,
+      allowedCollections: typeFieldName_0 ? doc[typeFieldName_0] : undefined,
+      hasChildren: true,
+      title: String(doc[useAsTitle] || doc.id)
+    }));
+    // Client-side filter: only show items that are a superset of required collections
+    // Server query uses ANY (due to PG limitations), but we want ALL (superset)
+    const items = filterByCollection && filterByCollection.length > 0 ? allItems.filter(item => isSuperset(item.allowedCollections, filterByCollection)) : allItems;
+    return {
+      hasNextPage: data.hasNextPage || false,
+      items,
+      totalDocs: data.totalDocs || 0
+    };
+  }, [api, baseFilter, filterByCollection, hierarchyConfig, parentFieldName, serverURL, hierarchyCollectionSlug, treeLimit, useAsTitle]);
+  const refreshColumn = useCallback(async parentId_0 => {
+    const columnIndex = columns.findIndex(col => col.parentId === parentId_0);
+    if (columnIndex === -1) {
+      return;
+    }
+    setColumns(prev => {
+      const updated = [...prev];
+      updated[columnIndex] = {
+        ...updated[columnIndex],
+        isLoading: true
+      };
+      return updated;
+    });
+    try {
+      const {
+        hasNextPage,
+        items: items_0,
+        totalDocs
+      } = await fetchItems({
+        page: 1,
+        parentId: parentId_0
+      });
+      setColumns(prev_1 => {
+        const updated_1 = [...prev_1];
+        if (updated_1[columnIndex]) {
+          updated_1[columnIndex] = {
+            ...updated_1[columnIndex],
+            hasNextPage,
+            isLoading: false,
+            items: items_0,
+            page: 1,
+            totalDocs
+          };
+        }
+        return updated_1;
+      });
+    } catch {
+      setColumns(prev_0 => {
+        const updated_0 = [...prev_0];
+        if (updated_0[columnIndex]) {
+          updated_0[columnIndex] = {
+            ...updated_0[columnIndex],
+            isLoading: false
+          };
+        }
+        return updated_0;
+      });
+    }
+  }, [columns, fetchItems]);
+  useImperativeHandle(ref, () => ({
+    refreshColumn
+  }), [refreshColumn]);
+  const loadColumns = useEffectEvent(async path => {
+    // Build list of parentIds to fetch: [null, ...path]
+    const parentIds = [null];
+    if (path?.length) {
+      parentIds.push(...path);
+    }
+    // Set initial loading state for all columns
+    setColumns(parentIds.map(parentId_1 => ({
+      hasNextPage: false,
+      isLoading: true,
+      items: [],
+      page: 1,
+      parentId: parentId_1,
+      totalDocs: 0
+    })));
+    // Set expanded path to match (excluding null/root)
+    if (path?.length) {
+      setExpandedPath(path);
+    }
+    // Fetch all columns in parallel
+    const results = await Promise.all(parentIds.map(async (parentId_2, index) => {
+      try {
+        const {
+          hasNextPage: hasNextPage_0,
+          items: items_1,
+          totalDocs: totalDocs_0
+        } = await fetchItems({
+          page: 1,
+          parentId: parentId_2
+        });
+        let parentTitle;
+        if (index > 0 && parentId_2 !== null) {
+          // Will be filled in after all fetches complete
+        }
+        return {
+          hasNextPage: hasNextPage_0,
+          isLoading: false,
+          items: items_1,
+          page: 1,
+          parentId: parentId_2,
+          parentTitle,
+          totalDocs: totalDocs_0
+        };
+      } catch {
+        return {
+          hasNextPage: false,
+          isLoading: false,
+          items: [],
+          page: 1,
+          parentId: parentId_2,
+          parentTitle: undefined,
+          totalDocs: 0
+        };
+      }
+    }));
+    // Fill in parent titles from previous columns
+    const columnsWithTitles = results.map((col_0, index_0) => {
+      if (index_0 === 0 || col_0.parentId === null) {
+        return col_0;
+      }
+      const prevColumn = results[index_0 - 1];
+      const parentItem = prevColumn?.items.find(item_0 => item_0.id === col_0.parentId);
+      return {
+        ...col_0,
+        parentTitle: parentItem?.title || String(col_0.parentId)
+      };
+    });
+    setColumns(columnsWithTitles);
+  });
+  // Load columns on mount - wait for path loading to complete
+  useEffect(() => {
+    if (isLoadingPath || hasLoadedRef.current) {
+      return;
+    }
+    hasLoadedRef.current = true;
+    void loadColumns(initialExpandedPath);
+  }, [initialExpandedPath, isLoadingPath]);
+  // Auto-scroll to the last column when columns change
+  useEffect(() => {
+    if (lastColumnRef.current && columns.length > 1) {
+      lastColumnRef.current.scrollIntoView({
+        behavior: 'instant',
+        inline: 'start'
+      });
+    }
+  }, [columns.length]);
+  const handleExpand = useCallback(async ({
+    columnIndex: columnIndex_0,
+    itemId
+  }) => {
+    const column = columns[columnIndex_0];
+    if (!column) {
+      return;
+    }
+    const item_1 = column.items.find(i => i.id === itemId);
+    if (!item_1) {
+      return;
+    }
+    // Update expanded path - keep path up to this column, add new item
+    const newExpandedPath = [...expandedPath.slice(0, columnIndex_0), itemId];
+    setExpandedPath(newExpandedPath);
+    // Remove columns to the right and add new loading column
+    const newColumns = columns.slice(0, columnIndex_0 + 1);
+    newColumns.push({
+      hasNextPage: false,
+      isLoading: true,
+      items: [],
+      page: 1,
+      parentId: itemId,
+      parentTitle: item_1.title,
+      totalDocs: 0
+    });
+    setColumns(newColumns);
+    // Fetch children
+    try {
+      const {
+        hasNextPage: hasNextPage_1,
+        items: items_2,
+        totalDocs: totalDocs_1
+      } = await fetchItems({
+        page: 1,
+        parentId: itemId
+      });
+      setColumns(prev_3 => {
+        const updated_3 = [...prev_3];
+        const targetIndex_0 = columnIndex_0 + 1;
+        if (updated_3[targetIndex_0]?.parentId === itemId) {
+          updated_3[targetIndex_0] = {
+            hasNextPage: hasNextPage_1,
+            isLoading: false,
+            items: items_2,
+            page: 1,
+            parentId: itemId,
+            parentTitle: item_1.title,
+            totalDocs: totalDocs_1
+          };
+        }
+        return updated_3;
+      });
+    } catch {
+      setColumns(prev_2 => {
+        const updated_2 = [...prev_2];
+        const targetIndex = columnIndex_0 + 1;
+        if (updated_2[targetIndex]?.parentId === itemId) {
+          updated_2[targetIndex] = {
+            hasNextPage: false,
+            isLoading: false,
+            items: [],
+            page: 1,
+            parentId: itemId,
+            parentTitle: item_1.title,
+            totalDocs: 0
+          };
+        }
+        return updated_2;
+      });
+    }
+  }, [columns, expandedPath, fetchItems]);
+  const handleLoadMore = useCallback(async ({
+    columnIndex: columnIndex_1
+  }) => {
+    const column_0 = columns[columnIndex_1];
+    if (!column_0 || column_0.isLoading || !column_0.hasNextPage) {
+      return;
+    }
+    const nextPage = column_0.page + 1;
+    // Set loading state
+    setColumns(prev_4 => {
+      const updated_4 = [...prev_4];
+      updated_4[columnIndex_1] = {
+        ...updated_4[columnIndex_1],
+        isLoading: true
+      };
+      return updated_4;
+    });
+    try {
+      const {
+        hasNextPage: hasNextPage_2,
+        items: newItems
+      } = await fetchItems({
+        page: nextPage,
+        parentId: column_0.parentId
+      });
+      setColumns(prev_6 => {
+        const updated_6 = [...prev_6];
+        if (updated_6[columnIndex_1]) {
+          updated_6[columnIndex_1] = {
+            ...updated_6[columnIndex_1],
+            hasNextPage: hasNextPage_2,
+            isLoading: false,
+            items: [...updated_6[columnIndex_1].items, ...newItems],
+            page: nextPage
+          };
+        }
+        return updated_6;
+      });
+    } catch {
+      setColumns(prev_5 => {
+        const updated_5 = [...prev_5];
+        if (updated_5[columnIndex_1]) {
+          updated_5[columnIndex_1] = {
+            ...updated_5[columnIndex_1],
+            isLoading: false
+          };
+        }
+        return updated_5;
+      });
+    }
+  }, [columns, fetchItems]);
+  // Build path for each column based on parent info
+  const getPathToColumn = columnIndex_2 => {
+    const path_0 = [];
+    for (let i_0 = 1; i_0 <= columnIndex_2; i_0++) {
+      const col_1 = columns[i_0];
+      if (col_1?.parentId !== null && col_1?.parentId !== undefined) {
+        path_0.push({
+          id: col_1.parentId,
+          title: col_1.parentTitle || String(col_1.parentId)
+        });
+      }
+    }
+    return path_0;
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    ref: containerRef,
+    children: [columns.map((column_1, index_1) => {
+      const isLastColumn = index_1 === columns.length - 1 && !isLoadingPath;
+      const expandedId = expandedPath[index_1] ?? null;
+      const pathToColumn = getPathToColumn(index_1);
+      return /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__column-wrapper`,
+        ref: isLastColumn ? lastColumnRef : undefined,
+        children: /*#__PURE__*/_jsx(Column, {
+          ancestorsWithSelections: ancestorsWithSelections,
+          canCreate: canCreate && Boolean(onCreateNew),
+          collectionLabel: collectionLabel,
+          disabled: isLoadingPath,
+          disabledIds: disabledIds,
+          expandedId: expandedId,
+          filterByCollection: filterByCollection,
+          hasNextPage: column_1.hasNextPage,
+          isLoading: column_1.isLoading,
+          items: column_1.items,
+          onCreateNew: onCreateNew || (() => {}),
+          onExpand: ({
+            id
+          }) => handleExpand({
+            columnIndex: index_1,
+            itemId: id
+          }),
+          onLoadMore: () => handleLoadMore({
+            columnIndex: index_1
+          }),
+          onSelect: onSelect,
+          parentId: column_1.parentId,
+          parentTitle: column_1.parentTitle,
+          pathToColumn: pathToColumn,
+          selectedIds: selectedIds,
+          totalDocs: column_1.totalDocs
+        })
+      }, `${column_1.parentId ?? 'root'}-${index_1}`);
+    }), isLoadingPath && /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__column-wrapper ${baseClass}__column-wrapper--loading`,
+      children: /*#__PURE__*/_jsx(Spinner, {})
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map