@payloadcms/ui 4.0.0-internal.011fd46 → 4.0.0-internal.016994f

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/ColumnItem/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAA;AAEnD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAKlD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoGhD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/ColumnItem/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkD,MAAM,OAAO,CAAA;AAEtE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAKlD,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAiIhD,CAAA"}

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

@@ -1,162 +1,122 @@
 '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 React, { useCallback, useEffect, useMemo, useRef } 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;
+export const ColumnItem = ({
+  disabled,
+  filterByCollection,
+  hasMany,
+  isExpanded,
+  isSelected,
+  item,
+  onExpand,
+  onSelect,
+  revealToken,
+  selectedDescendantCount
+}) => {
   const {
     id,
     allowedCollections,
     hasChildren,
     title
   } = item;
-  let t1;
-  bb0: {
+  const rowRef = useRef(null);
+  const rowActionRef = useRef(null);
+  const checkboxRef = useRef(null);
+  // Disable selection if:
+  // 1. This item is in the disabledIds set (e.g., being moved)
+  // 2. Folder doesn't allow ALL required collections
+  const isDisabled = useMemo(() => {
     if (disabled) {
-      t1 = true;
-      break bb0;
+      return true;
     }
     if (!filterByCollection || filterByCollection.length === 0) {
-      t1 = false;
-      break bb0;
+      return false;
+    }
+    return !isSuperset(allowedCollections, filterByCollection);
+  }, [allowedCollections, disabled, filterByCollection]);
+  useEffect(() => {
+    if (revealToken === undefined) {
+      return;
     }
-    t1 = !isSuperset(allowedCollections, filterByCollection);
-  }
-  const isDisabled = t1;
-  let t2;
-  if ($[0] !== id || $[1] !== isDisabled || $[2] !== onSelect) {
-    t2 = e => {
-      e.stopPropagation();
-      if (isDisabled) {
-        return;
-      }
-      onSelect({
+    rowRef.current?.scrollIntoView({
+      behavior: 'instant',
+      block: 'nearest',
+      inline: 'nearest'
+    });
+    // Focus whichever control owns selection for this mode
+    const target = hasMany ? checkboxRef.current : rowActionRef.current;
+    target?.focus({
+      preventScroll: true
+    });
+  }, [hasMany, revealToken]);
+  const handleSelect = useCallback(() => {
+    onSelect({
+      id
+    });
+    // Single-select mirrors the macOS column view: picking a folder also makes it the open one,
+    // which collapses any columns deeper than it.
+    if (!hasMany && hasChildren) {
+      onExpand({
         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", {
+    }
+  }, [hasChildren, hasMany, id, onExpand, onSelect]);
+  const handleExpand = useCallback(() => {
+    onExpand({
+      id
+    });
+  }, [id, onExpand]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: [baseClass, hasMany && `${baseClass}--multi-select`, isExpanded && `${baseClass}--expanded`, isSelected && `${baseClass}--selected`, isDisabled && `${baseClass}--disabled`].filter(Boolean).join(' '),
+    ref: rowRef,
+    children: [(!hasMany || hasChildren) && /*#__PURE__*/_jsx("button", {
+      "aria-hidden": hasMany ? 'true' : undefined,
+      "aria-label": title,
+      "aria-pressed": hasMany ? undefined : isSelected,
+      className: `${baseClass}__select`,
+      disabled: isDisabled,
+      onClick: hasMany ? handleExpand : handleSelect,
+      ref: rowActionRef,
+      tabIndex: hasMany ? -1 : undefined,
+      type: "button"
+    }), hasMany && /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__checkbox`,
+      children: /*#__PURE__*/_jsx(CheckboxInput, {
+        "aria-label": title,
+        checked: isSelected,
+        inputRef: checkboxRef,
+        onToggle: handleSelect,
+        readOnly: isDisabled
+      })
+    }), /*#__PURE__*/_jsx("span", {
+      className: `${baseClass}__title`,
+      title: title,
+      children: title
+    }), (hasMany && selectedDescendantCount > 0 || hasChildren) && /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__trail`,
+      children: [hasMany && selectedDescendantCount > 0 && /*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__descendant-count`,
+        children: selectedDescendantCount
+      }), hasChildren && /*#__PURE__*/_jsx("button", {
+        "aria-expanded": isExpanded,
+        // TODO: replace with a translation key once the hierarchy strings are finalized
+        "aria-label": `Open ${title}`,
         className: `${baseClass}__chevron`,
-        children: _jsx(ChevronIcon, {
-          direction: "right"
+        disabled: isDisabled,
+        onClick: handleExpand,
+        type: "button",
+        children: /*#__PURE__*/_jsx(ChevronIcon, {
+          direction: "right",
+          size: 16
         })
       })]
-    });
-    $[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

@@ -1 +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":[]}
+{"version":3,"file":"index.js","names":["React","useCallback","useEffect","useMemo","useRef","CheckboxInput","ChevronIcon","isSuperset","baseClass","ColumnItem","disabled","filterByCollection","hasMany","isExpanded","isSelected","item","onExpand","onSelect","revealToken","selectedDescendantCount","id","allowedCollections","hasChildren","title","rowRef","rowActionRef","checkboxRef","isDisabled","length","undefined","current","scrollIntoView","behavior","block","inline","target","focus","preventScroll","handleSelect","handleExpand","_jsxs","className","filter","Boolean","join","ref","_jsx","onClick","tabIndex","type","checked","inputRef","onToggle","readOnly","direction","size"],"sources":["../../../../../src/elements/Hierarchy/ColumnBrowser/ColumnItem/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback, useEffect, useMemo, useRef } 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  hasMany,\n  isExpanded,\n  isSelected,\n  item,\n  onExpand,\n  onSelect,\n  revealToken,\n  selectedDescendantCount,\n}) => {\n  const { id, allowedCollections, hasChildren, title } = item\n  const rowRef = useRef<HTMLDivElement>(null)\n  const rowActionRef = useRef<HTMLButtonElement>(null)\n  const checkboxRef = useRef<HTMLInputElement>(null)\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  useEffect(() => {\n    if (revealToken === undefined) {\n      return\n    }\n\n    rowRef.current?.scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' })\n\n    // Focus whichever control owns selection for this mode\n    const target = hasMany ? checkboxRef.current : rowActionRef.current\n    target?.focus({ preventScroll: true })\n  }, [hasMany, revealToken])\n\n  const handleSelect = useCallback(() => {\n    onSelect({ id })\n\n    // Single-select mirrors the macOS column view: picking a folder also makes it the open one,\n    // which collapses any columns deeper than it.\n    if (!hasMany && hasChildren) {\n      onExpand({ id })\n    }\n  }, [hasChildren, hasMany, id, onExpand, onSelect])\n\n  const handleExpand = useCallback(() => {\n    onExpand({ id })\n  }, [id, onExpand])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        hasMany && `${baseClass}--multi-select`,\n        isExpanded && `${baseClass}--expanded`,\n        isSelected && `${baseClass}--selected`,\n        isDisabled && `${baseClass}--disabled`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      ref={rowRef}\n    >\n      {/*\n        Full-bleed overlay carrying the row's primary action. Single-select picks the row; in\n        multi-select the checkbox owns selection, so the row body opens children instead - and a\n        row with none gets no overlay at all. The chevron and checkbox are the controls exposed to\n        assistive tech in multi-select, so the overlay is hidden from it to avoid announcing the\n        same action twice.\n      */}\n      {(!hasMany || hasChildren) && (\n        <button\n          aria-hidden={hasMany ? 'true' : undefined}\n          aria-label={title}\n          aria-pressed={hasMany ? undefined : isSelected}\n          className={`${baseClass}__select`}\n          disabled={isDisabled}\n          onClick={hasMany ? handleExpand : handleSelect}\n          ref={rowActionRef}\n          tabIndex={hasMany ? -1 : undefined}\n          type=\"button\"\n        />\n      )}\n\n      {hasMany && (\n        <div className={`${baseClass}__checkbox`}>\n          <CheckboxInput\n            aria-label={title}\n            checked={isSelected}\n            inputRef={checkboxRef}\n            onToggle={handleSelect}\n            readOnly={isDisabled}\n          />\n        </div>\n      )}\n\n      <span className={`${baseClass}__title`} title={title}>\n        {title}\n      </span>\n\n      {((hasMany && selectedDescendantCount > 0) || hasChildren) && (\n        <div className={`${baseClass}__trail`}>\n          {hasMany && selectedDescendantCount > 0 && (\n            <span className={`${baseClass}__descendant-count`}>{selectedDescendantCount}</span>\n          )}\n\n          {hasChildren && (\n            <button\n              aria-expanded={isExpanded}\n              // TODO: replace with a translation key once the hierarchy strings are finalized\n              aria-label={`Open ${title}`}\n              className={`${baseClass}__chevron`}\n              disabled={isDisabled}\n              onClick={handleExpand}\n              type=\"button\"\n            >\n              <ChevronIcon direction=\"right\" size={16} />\n            </button>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,7 +1,7 @@
 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, }: {
+export declare const HierarchyColumnBrowser: ({ baseFilter, disabledIds, filterByCollection, hasMany, hierarchyCollectionSlug, initialExpandedPath, isLoadingPath, onCreateNew, onSelect, parentFieldName, ref, selectedDescendantCounts, selectedIds, useAsTitle, }: {
     ref?: React.RefObject<HierarchyColumnBrowserRef | null>;
 } & HierarchyColumnBrowserProps) => React.JSX.Element;
 export type { ColumnItemData, HierarchyColumnBrowserProps, HierarchyColumnBrowserRef, PathSegment, } from './types.js';

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

@@ -1 +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"}
+{"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,EAE1B,MAAM,YAAY,CAAA;AASnB,OAAO,aAAa,CAAA;AAIpB,eAAO,MAAM,sBAAsB,2NAehC;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;CAAE,GAAG,2BAA2B,sBAihB3F,CAAA;AAED,YAAY,EACV,cAAc,EACd,2BAA2B,EAC3B,yBAAyB,EACzB,WAAW,GACZ,MAAM,YAAY,CAAA"}

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

@@ -15,10 +15,10 @@ import { Column } from './Column/index.js';
 import './index.css';
 const baseClass = 'hierarchy-column-browser';
 export const HierarchyColumnBrowser = function HierarchyColumnBrowser({
-  ancestorsWithSelections,
   baseFilter,
   disabledIds,
   filterByCollection,
+  hasMany,
   hierarchyCollectionSlug,
   initialExpandedPath,
   isLoadingPath,
@@ -26,6 +26,7 @@ export const HierarchyColumnBrowser = function HierarchyColumnBrowser({
   onSelect,
   parentFieldName,
   ref,
+  selectedDescendantCounts,
   selectedIds,
   useAsTitle = 'id'
 }) {
@@ -50,9 +51,11 @@ export const HierarchyColumnBrowser = function HierarchyColumnBrowser({
   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 collectionLabelPlural = collectionConfig ? getTranslation(collectionConfig.labels?.plural || hierarchyCollectionSlug, i18n) : hierarchyCollectionSlug;
   const canCreate = Boolean(permissions?.collections?.[hierarchyCollectionSlug]?.create);
   const [columns, setColumns] = useState([]);
   const [expandedPath, setExpandedPath] = useState([]);
+  const [revealed, setRevealed] = useState(null);
   const containerRef = useRef(null);
   const lastColumnRef = useRef(null);
   const hasLoadedRef = useRef(false);
@@ -199,10 +202,7 @@ export const HierarchyColumnBrowser = function HierarchyColumnBrowser({
       });
     }
   }, [columns, fetchItems]);
-  useImperativeHandle(ref, () => ({
-    refreshColumn
-  }), [refreshColumn]);
-  const loadColumns = useEffectEvent(async path => {
+  const loadColumnsForPath = useCallback(async path => {
     // Build list of parentIds to fetch: [null, ...path]
     const parentIds = [null];
     if (path?.length) {
@@ -217,10 +217,9 @@ export const HierarchyColumnBrowser = function HierarchyColumnBrowser({
       parentId: parentId_1,
       totalDocs: 0
     })));
-    // Set expanded path to match (excluding null/root)
-    if (path?.length) {
-      setExpandedPath(path);
-    }
+    // Set expanded path to match (excluding null/root). Always reset - a `revealPath` back to the
+    // root would otherwise leave the previous path's items marked as expanded.
+    setExpandedPath(path ?? []);
     // Fetch all columns in parallel
     const results = await Promise.all(parentIds.map(async (parentId_2, index) => {
       try {
@@ -270,7 +269,25 @@ export const HierarchyColumnBrowser = function HierarchyColumnBrowser({
       };
     });
     setColumns(columnsWithTitles);
+  }, [fetchItems]);
+  const loadColumns = useEffectEvent(async path_0 => {
+    await loadColumnsForPath(path_0);
   });
+  const revealPath = useCallback(async path_1 => {
+    const target = path_1[path_1.length - 1];
+    if (!target) {
+      return;
+    }
+    await loadColumnsForPath(path_1.slice(0, -1).map(segment => segment.id));
+    setRevealed(prev_2 => ({
+      id: target.id,
+      token: (prev_2?.token ?? 0) + 1
+    }));
+  }, [loadColumnsForPath]);
+  useImperativeHandle(ref, () => ({
+    refreshColumn,
+    revealPath
+  }), [refreshColumn, revealPath]);
   // Load columns on mount - wait for path loading to complete
   useEffect(() => {
     if (isLoadingPath || hasLoadedRef.current) {
@@ -303,6 +320,13 @@ export const HierarchyColumnBrowser = function HierarchyColumnBrowser({
     // Update expanded path - keep path up to this column, add new item
     const newExpandedPath = [...expandedPath.slice(0, columnIndex_0), itemId];
     setExpandedPath(newExpandedPath);
+    // Re-opening a folder that is already expanded here (e.g. clicking the grandparent while
+    // sitting in grandparent/parent/child) makes it the deepest open one again. Its child column
+    // is already loaded, so drop everything past it rather than refetching.
+    if (columns[columnIndex_0 + 1]?.parentId === itemId) {
+      setColumns(columns.slice(0, columnIndex_0 + 2));
+      return;
+    }
     // Remove columns to the right and add new loading column
     const newColumns = columns.slice(0, columnIndex_0 + 1);
     newColumns.push({
@@ -325,8 +349,8 @@ export const HierarchyColumnBrowser = function HierarchyColumnBrowser({
         page: 1,
         parentId: itemId
       });
-      setColumns(prev_3 => {
-        const updated_3 = [...prev_3];
+      setColumns(prev_4 => {
+        const updated_3 = [...prev_4];
         const targetIndex_0 = columnIndex_0 + 1;
         if (updated_3[targetIndex_0]?.parentId === itemId) {
           updated_3[targetIndex_0] = {
@@ -342,8 +366,8 @@ export const HierarchyColumnBrowser = function HierarchyColumnBrowser({
         return updated_3;
       });
     } catch {
-      setColumns(prev_2 => {
-        const updated_2 = [...prev_2];
+      setColumns(prev_3 => {
+        const updated_2 = [...prev_3];
         const targetIndex = columnIndex_0 + 1;
         if (updated_2[targetIndex]?.parentId === itemId) {
           updated_2[targetIndex] = {
@@ -369,8 +393,8 @@ export const HierarchyColumnBrowser = function HierarchyColumnBrowser({
     }
     const nextPage = column_0.page + 1;
     // Set loading state
-    setColumns(prev_4 => {
-      const updated_4 = [...prev_4];
+    setColumns(prev_5 => {
+      const updated_4 = [...prev_5];
       updated_4[columnIndex_1] = {
         ...updated_4[columnIndex_1],
         isLoading: true
@@ -385,8 +409,8 @@ export const HierarchyColumnBrowser = function HierarchyColumnBrowser({
         page: nextPage,
         parentId: column_0.parentId
       });
-      setColumns(prev_6 => {
-        const updated_6 = [...prev_6];
+      setColumns(prev_7 => {
+        const updated_6 = [...prev_7];
         if (updated_6[columnIndex_1]) {
           updated_6[columnIndex_1] = {
             ...updated_6[columnIndex_1],
@@ -399,8 +423,8 @@ export const HierarchyColumnBrowser = function HierarchyColumnBrowser({
         return updated_6;
       });
     } catch {
-      setColumns(prev_5 => {
-        const updated_5 = [...prev_5];
+      setColumns(prev_6 => {
+        const updated_5 = [...prev_6];
         if (updated_5[columnIndex_1]) {
           updated_5[columnIndex_1] = {
             ...updated_5[columnIndex_1],
@@ -412,19 +436,34 @@ export const HierarchyColumnBrowser = function HierarchyColumnBrowser({
     }
   }, [columns, fetchItems]);
   // Build path for each column based on parent info
-  const getPathToColumn = columnIndex_2 => {
-    const path_0 = [];
+  const getPathToColumn = useCallback(columnIndex_2 => {
+    const path_2 = [];
     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({
+        path_2.push({
           id: col_1.parentId,
           title: col_1.parentTitle || String(col_1.parentId)
         });
       }
     }
-    return path_0;
-  };
+    return path_2;
+  }, [columns]);
+  // Single-select only: clicking the empty space in a column makes that column's own folder the
+  // current destination - e.g. in grandparent/parent/child, clicking empty space in the column
+  // showing grandparent's children (headed "grandparent") makes grandparent current again,
+  // dropping the parent/child columns opened past it.
+  const handleSelectParent = useCallback(({
+    id,
+    columnIndex: columnIndex_3
+  }) => {
+    onSelect({
+      id,
+      path: getPathToColumn(columnIndex_3)
+    });
+    setExpandedPath(prev_8 => prev_8.slice(0, columnIndex_3));
+    setColumns(prev_9 => prev_9.slice(0, columnIndex_3 + 1));
+  }, [getPathToColumn, onSelect]);
   return /*#__PURE__*/_jsxs("div", {
     className: baseClass,
     ref: containerRef,
@@ -436,30 +475,40 @@ export const HierarchyColumnBrowser = function HierarchyColumnBrowser({
         className: `${baseClass}__column-wrapper`,
         ref: isLastColumn ? lastColumnRef : undefined,
         children: /*#__PURE__*/_jsx(Column, {
-          ancestorsWithSelections: ancestorsWithSelections,
           canCreate: canCreate && Boolean(onCreateNew),
           collectionLabel: collectionLabel,
+          collectionLabelPlural: collectionLabelPlural,
           disabled: isLoadingPath,
           disabledIds: disabledIds,
           expandedId: expandedId,
           filterByCollection: filterByCollection,
+          hasMany: hasMany,
           hasNextPage: column_1.hasNextPage,
           isLoading: column_1.isLoading,
           items: column_1.items,
           onCreateNew: onCreateNew || (() => {}),
           onExpand: ({
-            id
+            id: id_0
           }) => handleExpand({
             columnIndex: index_1,
-            itemId: id
+            itemId: id_0
           }),
           onLoadMore: () => handleLoadMore({
             columnIndex: index_1
           }),
           onSelect: onSelect,
+          onSelectParent: hasMany ? undefined : ({
+            id: id_1
+          }) => handleSelectParent({
+            id: id_1,
+            columnIndex: index_1
+          }),
           parentId: column_1.parentId,
           parentTitle: column_1.parentTitle,
           pathToColumn: pathToColumn,
+          revealedId: revealed?.id,
+          revealToken: revealed?.token,
+          selectedDescendantCounts: selectedDescendantCounts,
           selectedIds: selectedIds,
           totalDocs: column_1.totalDocs
         })