@payloadcms/ui 4.0.0-internal.a7ca468 → 4.0.0-internal.af6aad0

package/dist/elements/Hierarchy/Modal/Footer/index.js

@@ -0,0 +1,166 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { FolderIcon } from '../../../../icons/Folder/index.js';
+import { ReplaceIcon } from '../../../../icons/Replace/index.js';
+import { useTranslation } from '../../../../providers/Translation/index.js';
+import { Button } from '../../../Button/index.js';
+import { Chip } from '../../../Chip/index.js';
+import { DialogFooter } from '../../../Dialog/index.js';
+import './index.css';
+const baseClass = 'hierarchy-modal-footer';
+// TODO: replace with a translation key once the hierarchy strings are finalized
+const moveToLabel = 'Move to';
+/** Deeper paths collapse to a leading ellipsis so the chip stays scannable, e.g. "… / Parent / Child" */
+const MAX_VISIBLE_SEGMENTS = 2;
+const Separator = () => /*#__PURE__*/_jsx("span", {
+  className: `${baseClass}__chip-separator`,
+  children: "/"
+});
+const HierarchyPathChip = ({
+  Icon,
+  onClick,
+  path
+}) => {
+  const isTruncated = path.length > MAX_VISIBLE_SEGMENTS;
+  const visibleSegments = isTruncated ? path.slice(-MAX_VISIBLE_SEGMENTS) : path;
+  return /*#__PURE__*/_jsxs(Chip, {
+    "aria-label": path.map(segment => segment.title).join(' / '),
+    className: `${baseClass}__chip`,
+    icon: Icon ?? /*#__PURE__*/_jsx(FolderIcon, {}),
+    onClick: onClick,
+    children: [isTruncated ? /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [/*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__chip-ellipsis`,
+        children: "…"
+      }), /*#__PURE__*/_jsx(Separator, {})]
+    }) : null, visibleSegments.map((segment, index) => /*#__PURE__*/_jsxs(React.Fragment, {
+      children: [index > 0 && /*#__PURE__*/_jsx(Separator, {}), segment.title]
+    }, segment.id))]
+  });
+};
+export const HierarchyModalFooter = t0 => {
+  const $ = _c(23);
+  const {
+    confirmLabel,
+    destinationPath,
+    Icon,
+    isConfirmDisabled,
+    isMultiSelect,
+    onClear,
+    onConfirm,
+    onMoveToRoot,
+    onRevealPath,
+    placeholderLabel,
+    previousPath,
+    selectionCount,
+    selectionCountLabel,
+    showMoveToRoot
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== onRevealPath || $[1] !== previousPath) {
+    t1 = () => onRevealPath(previousPath ?? []);
+    $[0] = onRevealPath;
+    $[1] = previousPath;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const revealPrevious = t1;
+  let t2;
+  if ($[3] !== destinationPath || $[4] !== onRevealPath) {
+    t2 = () => onRevealPath(destinationPath ?? []);
+    $[3] = destinationPath;
+    $[4] = onRevealPath;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const revealDestination = t2;
+  let t3;
+  if ($[6] !== Icon || $[7] !== confirmLabel || $[8] !== destinationPath || $[9] !== isConfirmDisabled || $[10] !== isMultiSelect || $[11] !== onClear || $[12] !== onConfirm || $[13] !== onMoveToRoot || $[14] !== placeholderLabel || $[15] !== previousPath || $[16] !== revealDestination || $[17] !== revealPrevious || $[18] !== selectionCount || $[19] !== selectionCountLabel || $[20] !== showMoveToRoot || $[21] !== t) {
+    const placeholder = _jsx("span", {
+      className: `${baseClass}__placeholder`,
+      children: placeholderLabel
+    });
+    t3 = _jsxs(DialogFooter, {
+      children: [_jsx("div", {
+        className: `${baseClass}__lead`,
+        children: isMultiSelect ? selectionCount > 0 ? _jsxs(React.Fragment, {
+          children: [_jsx("span", {
+            className: `${baseClass}__placeholder`,
+            children: selectionCountLabel
+          }), _jsx(Button, {
+            buttonStyle: "link",
+            className: `${baseClass}__clear`,
+            margin: false,
+            onClick: onClear,
+            size: "medium",
+            children: t("general:clear")
+          })]
+        }) : placeholder : _jsxs(React.Fragment, {
+          children: [previousPath?.length ? _jsxs(React.Fragment, {
+            children: [_jsx(HierarchyPathChip, {
+              Icon,
+              onClick: revealPrevious,
+              path: previousPath
+            }), _jsx("span", {
+              className: `${baseClass}__arrow`,
+              children: _jsx(ReplaceIcon, {})
+            })]
+          }) : null, destinationPath?.length ? _jsxs(React.Fragment, {
+            children: [!previousPath?.length && _jsx("span", {
+              className: `${baseClass}__placeholder`,
+              children: moveToLabel
+            }), _jsx(HierarchyPathChip, {
+              Icon,
+              onClick: revealDestination,
+              path: destinationPath
+            })]
+          }) : placeholder]
+        })
+      }), _jsxs("div", {
+        className: `${baseClass}__trail`,
+        children: [showMoveToRoot && onMoveToRoot ? _jsx(Button, {
+          buttonStyle: "secondary",
+          margin: false,
+          onClick: onMoveToRoot,
+          size: "medium",
+          children: t("hierarchy:moveToRoot")
+        }) : null, _jsx(Button, {
+          disabled: isConfirmDisabled,
+          margin: false,
+          onClick: onConfirm,
+          size: "medium",
+          children: confirmLabel
+        })]
+      })]
+    });
+    $[6] = Icon;
+    $[7] = confirmLabel;
+    $[8] = destinationPath;
+    $[9] = isConfirmDisabled;
+    $[10] = isMultiSelect;
+    $[11] = onClear;
+    $[12] = onConfirm;
+    $[13] = onMoveToRoot;
+    $[14] = placeholderLabel;
+    $[15] = previousPath;
+    $[16] = revealDestination;
+    $[17] = revealPrevious;
+    $[18] = selectionCount;
+    $[19] = selectionCountLabel;
+    $[20] = showMoveToRoot;
+    $[21] = t;
+    $[22] = t3;
+  } else {
+    t3 = $[22];
+  }
+  return t3;
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Hierarchy/Modal/Footer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","FolderIcon","ReplaceIcon","useTranslation","Button","Chip","DialogFooter","baseClass","moveToLabel","MAX_VISIBLE_SEGMENTS","Separator","_jsx","className","HierarchyPathChip","Icon","onClick","path","isTruncated","length","visibleSegments","slice","_jsxs","map","segment","title","join","icon","Fragment","index","id","HierarchyModalFooter","t0","$","confirmLabel","destinationPath","isConfirmDisabled","isMultiSelect","onClear","onConfirm","onMoveToRoot","onRevealPath","placeholderLabel","previousPath","selectionCount","selectionCountLabel","showMoveToRoot","t","t1","revealPrevious","t2","revealDestination","t3","placeholder","children","buttonStyle","margin","size","disabled"],"sources":["../../../../../src/elements/Hierarchy/Modal/Footer/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback } from 'react'\n\nimport type { PathSegment } from '../../ColumnBrowser/types.js'\n\nimport { FolderIcon } from '../../../../icons/Folder/index.js'\nimport { ReplaceIcon } from '../../../../icons/Replace/index.js'\nimport { useTranslation } from '../../../../providers/Translation/index.js'\nimport { Button } from '../../../Button/index.js'\nimport { Chip } from '../../../Chip/index.js'\nimport { DialogFooter } from '../../../Dialog/index.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-modal-footer'\n\n// TODO: replace with a translation key once the hierarchy strings are finalized\nconst moveToLabel = 'Move to'\n\nexport type HierarchyModalFooterProps = {\n  /** Label for the primary action, e.g. \"Move\" or \"Confirm\" */\n  readonly confirmLabel: string\n  /** Path of the item the user has picked in this session, root first */\n  readonly destinationPath?: PathSegment[]\n  /** Leading icon for the breadcrumb chips - falls back to a folder */\n  readonly Icon?: React.ReactNode\n  readonly isConfirmDisabled: boolean\n  readonly isMultiSelect: boolean\n  readonly onClear: () => void\n  readonly onConfirm: () => void\n  readonly onMoveToRoot?: () => void\n  /** Called with a chip's path to expand the browser down to that item and focus it */\n  readonly onRevealPath: (path: PathSegment[]) => void\n  /** Shown when nothing has been picked yet, e.g. \"Select Folder\" */\n  readonly placeholderLabel: string\n  /** Path the item lived in before the modal was opened, root first */\n  readonly previousPath?: PathSegment[]\n  readonly selectionCount: number\n  /** Shown in multi-select mode once something is checked, e.g. \"3 Tags selected\" */\n  readonly selectionCountLabel: string\n  readonly showMoveToRoot?: boolean\n}\n\n/** Deeper paths collapse to a leading ellipsis so the chip stays scannable, e.g. \"… / Parent / Child\" */\nconst MAX_VISIBLE_SEGMENTS = 2\n\nconst Separator: React.FC = () => <span className={`${baseClass}__chip-separator`}>/</span>\n\nconst HierarchyPathChip: React.FC<{\n  readonly Icon?: React.ReactNode\n  readonly onClick: () => void\n  readonly path: PathSegment[]\n}> = ({ Icon, onClick, path }) => {\n  const isTruncated = path.length > MAX_VISIBLE_SEGMENTS\n  const visibleSegments = isTruncated ? path.slice(-MAX_VISIBLE_SEGMENTS) : path\n\n  return (\n    <Chip\n      aria-label={path.map((segment) => segment.title).join(' / ')}\n      className={`${baseClass}__chip`}\n      icon={Icon ?? <FolderIcon />}\n      onClick={onClick}\n    >\n      {isTruncated ? (\n        <React.Fragment>\n          <span className={`${baseClass}__chip-ellipsis`}>&hellip;</span>\n          <Separator />\n        </React.Fragment>\n      ) : null}\n      {visibleSegments.map((segment, index) => (\n        <React.Fragment key={segment.id}>\n          {index > 0 && <Separator />}\n          {segment.title}\n        </React.Fragment>\n      ))}\n    </Chip>\n  )\n}\n\nexport const HierarchyModalFooter: React.FC<HierarchyModalFooterProps> = ({\n  confirmLabel,\n  destinationPath,\n  Icon,\n  isConfirmDisabled,\n  isMultiSelect,\n  onClear,\n  onConfirm,\n  onMoveToRoot,\n  onRevealPath,\n  placeholderLabel,\n  previousPath,\n  selectionCount,\n  selectionCountLabel,\n  showMoveToRoot,\n}) => {\n  const { t } = useTranslation()\n\n  const revealPrevious = useCallback(\n    () => onRevealPath(previousPath ?? []),\n    [onRevealPath, previousPath],\n  )\n\n  const revealDestination = useCallback(\n    () => onRevealPath(destinationPath ?? []),\n    [destinationPath, onRevealPath],\n  )\n\n  const placeholder = <span className={`${baseClass}__placeholder`}>{placeholderLabel}</span>\n\n  return (\n    <DialogFooter>\n      <div className={`${baseClass}__lead`}>\n        {isMultiSelect ? (\n          selectionCount > 0 ? (\n            <React.Fragment>\n              <span className={`${baseClass}__placeholder`}>{selectionCountLabel}</span>\n              <Button\n                buttonStyle=\"link\"\n                className={`${baseClass}__clear`}\n                margin={false}\n                onClick={onClear}\n                size=\"medium\"\n              >\n                {t('general:clear')}\n              </Button>\n            </React.Fragment>\n          ) : (\n            placeholder\n          )\n        ) : (\n          <React.Fragment>\n            {previousPath?.length ? (\n              <React.Fragment>\n                <HierarchyPathChip Icon={Icon} onClick={revealPrevious} path={previousPath} />\n                <span className={`${baseClass}__arrow`}>\n                  <ReplaceIcon />\n                </span>\n              </React.Fragment>\n            ) : null}\n            {destinationPath?.length ? (\n              <React.Fragment>\n                {!previousPath?.length && (\n                  <span className={`${baseClass}__placeholder`}>{moveToLabel}</span>\n                )}\n                <HierarchyPathChip Icon={Icon} onClick={revealDestination} path={destinationPath} />\n              </React.Fragment>\n            ) : (\n              placeholder\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={`${baseClass}__trail`}>\n        {showMoveToRoot && onMoveToRoot ? (\n          <Button buttonStyle=\"secondary\" margin={false} onClick={onMoveToRoot} size=\"medium\">\n            {t('hierarchy:moveToRoot')}\n          </Button>\n        ) : null}\n        <Button disabled={isConfirmDisabled} margin={false} onClick={onConfirm} size=\"medium\">\n          {confirmLabel}\n        </Button>\n      </div>\n    </DialogFooter>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Hierarchy/Modal/fetchAncestorPath.d.ts

@@ -1,15 +1,29 @@
+import type { PathSegment } from '../ColumnBrowser/types.js';
 type FetchAncestorPathArgs = {
     api: string;
     collectionSlug: string;
     itemId: number | string;
     parentFieldName: string;
     serverURL: string;
+    useAsTitle: string;
 };
+type FetchAncestorPathsArgs = {
+    itemIds: (number | string)[];
+} & Omit<FetchAncestorPathArgs, 'itemId'>;
+export type AncestorPathResult = {
+    /** Ancestor IDs from root down to the item's immediate parent, excluding the item itself */
+    ancestorIds: (number | string)[];
+    /** Full path from root down to the item itself, with titles */
+    path: PathSegment[];
+};
+/**
+ * Fetches the ancestor paths for several items in a single API call with depth.
+ * Each populated parent chain is walked to build a titled breadcrumb from root to the item.
+ */
+export declare function fetchAncestorPaths({ api, collectionSlug, itemIds, parentFieldName, serverURL, useAsTitle, }: FetchAncestorPathsArgs): Promise<Map<number | string, AncestorPathResult>>;
 /**
- * Fetches the ancestor path for an item using a single API call with depth.
- * Returns array of ancestor IDs from root to item's parent.
- * Example: item at level 3 returns [grandparentId, parentId]
+ * Fetches the ancestor path for a single item. See {@link fetchAncestorPaths}.
  */
-export declare function fetchAncestorPath({ api, collectionSlug, itemId, parentFieldName, serverURL, }: FetchAncestorPathArgs): Promise<(number | string)[]>;
+export declare function fetchAncestorPath({ itemId, ...rest }: FetchAncestorPathArgs): Promise<AncestorPathResult>;
 export {};
 //# sourceMappingURL=fetchAncestorPath.d.ts.map

package/dist/elements/Hierarchy/Modal/fetchAncestorPath.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fetchAncestorPath.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Modal/fetchAncestorPath.ts"],"names":[],"mappings":"AAGA,KAAK,qBAAqB,GAAG;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,cAAc,EAAE,MAAM,CAAA;IACtB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAID;;;;GAIG;AACH,wBAAsB,iBAAiB,CAAC,EACtC,GAAG,EACH,cAAc,EACd,MAAM,EACN,eAAe,EACf,SAAS,GACV,EAAE,qBAAqB,GAAG,OAAO,CAAC,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC,CA+CtD"}
+{"version":3,"file":"fetchAncestorPath.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Modal/fetchAncestorPath.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAE5D,KAAK,qBAAqB,GAAG;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,cAAc,EAAE,MAAM,CAAA;IACtB,MAAM,EAAE,MAAM,GAAG,MAAM,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,SAAS,EAAE,MAAM,CAAA;IACjB,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,sBAAsB,GAAG;IAC5B,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;CAC7B,GAAG,IAAI,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAA;AAEzC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,4FAA4F;IAC5F,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IAChC,+DAA+D;IAC/D,IAAI,EAAE,WAAW,EAAE,CAAA;CACpB,CAAA;AAMD;;;GAGG;AACH,wBAAsB,kBAAkB,CAAC,EACvC,GAAG,EACH,cAAc,EACd,OAAO,EACP,eAAe,EACf,SAAS,EACT,UAAU,GACX,EAAE,sBAAsB,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,GAAG,MAAM,EAAE,kBAAkB,CAAC,CAAC,CA0C5E;AAED;;GAEG;AACH,wBAAsB,iBAAiB,CAAC,EACtC,MAAM,EACN,GAAG,IAAI,EACR,EAAE,qBAAqB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAIrD"}

package/dist/elements/Hierarchy/Modal/fetchAncestorPath.js

@@ -1,27 +1,36 @@
 import { formatAdminURL } from 'payload/shared';
 import * as qs from 'qs-esm';
 const MAX_HIERARCHY_DEPTH = 20;
+const EMPTY_RESULT = {
+  ancestorIds: [],
+  path: []
+};
 /**
- * Fetches the ancestor path for an item using a single API call with depth.
- * Returns array of ancestor IDs from root to item's parent.
- * Example: item at level 3 returns [grandparentId, parentId]
+ * Fetches the ancestor paths for several items in a single API call with depth.
+ * Each populated parent chain is walked to build a titled breadcrumb from root to the item.
  */
-export async function fetchAncestorPath({
+export async function fetchAncestorPaths({
   api,
   collectionSlug,
-  itemId,
+  itemIds,
   parentFieldName,
-  serverURL
+  serverURL,
+  useAsTitle
 }) {
+  const results = new Map();
+  if (itemIds.length === 0) {
+    return results;
+  }
   const queryString = qs.stringify({
     depth: MAX_HIERARCHY_DEPTH,
-    limit: 1,
+    limit: itemIds.length,
     select: {
-      [parentFieldName]: true
+      [parentFieldName]: true,
+      [useAsTitle]: true
     },
     where: {
       id: {
-        equals: itemId
+        in: itemIds
       }
     }
   }, {
@@ -36,25 +45,80 @@ export async function fetchAncestorPath({
     credentials: 'include'
   });
   if (!response.ok) {
-    return [];
+    return results;
   }
   const data = await response.json();
-  const doc = data.docs?.[0];
-  if (!doc) {
-    return [];
+  for (const doc of data.docs || []) {
+    const id = doc.id;
+    if (id === null || id === undefined) {
+      continue;
+    }
+    results.set(id, buildAncestorPath({
+      id,
+      doc,
+      parentFieldName,
+      useAsTitle
+    }));
   }
-  // Walk the nested parent chain to build path from root to immediate parent
-  const path = [];
-  let current = doc[parentFieldName];
-  while (current !== null && current !== undefined) {
-    // Parent could be an ID (number/string) or a populated object
-    const parentId = typeof current === 'object' ? current.id : current;
-    if (parentId !== null && parentId !== undefined) {
-      path.unshift(parentId);
+  return results;
+}
+/**
+ * Fetches the ancestor path for a single item. See {@link fetchAncestorPaths}.
+ */
+export async function fetchAncestorPath({
+  itemId,
+  ...rest
+}) {
+  const results = await fetchAncestorPaths({
+    ...rest,
+    itemIds: [itemId]
+  });
+  return results.get(itemId) ?? EMPTY_RESULT;
+}
+function buildAncestorPath({
+  id,
+  doc,
+  parentFieldName,
+  useAsTitle
+}) {
+  const toTitle = (value, segmentID) => {
+    const rawTitle = value?.[useAsTitle];
+    return typeof rawTitle === 'string' || typeof rawTitle === 'number' ? String(rawTitle) : String(segmentID);
+  };
+  const path = [{
+    id,
+    title: toTitle(doc, id)
+  }];
+  let current = doc;
+  for (let depth = 0; depth < MAX_HIERARCHY_DEPTH; depth++) {
+    const parent = current?.[parentFieldName];
+    if (parent === null || parent === undefined) {
+      break;
+    }
+    // Parent is either a populated document or a bare ID once the depth limit is hit
+    if (typeof parent === 'object') {
+      const parentDoc = parent;
+      const parentID = parentDoc.id;
+      if (parentID === null || parentID === undefined) {
+        break;
+      }
+      path.unshift({
+        id: parentID,
+        title: toTitle(parentDoc, parentID)
+      });
+      current = parentDoc;
+    } else {
+      const parentID = parent;
+      path.unshift({
+        id: parentID,
+        title: String(parentID)
+      });
+      break;
     }
-    // Move to next parent (only if current is populated object)
-    current = typeof current === 'object' ? current[parentFieldName] : null;
   }
-  return path;
+  return {
+    ancestorIds: path.slice(0, -1).map(segment => segment.id),
+    path
+  };
 }
 //# sourceMappingURL=fetchAncestorPath.js.map

package/dist/elements/Hierarchy/Modal/fetchAncestorPath.js.map

@@ -1 +1 @@
-{"version":3,"file":"fetchAncestorPath.js","names":["formatAdminURL","qs","MAX_HIERARCHY_DEPTH","fetchAncestorPath","api","collectionSlug","itemId","parentFieldName","serverURL","queryString","stringify","depth","limit","select","where","id","equals","addQueryPrefix","url","apiRoute","path","response","fetch","credentials","ok","data","json","doc","docs","current","undefined","parentId","unshift"],"sources":["../../../../src/elements/Hierarchy/Modal/fetchAncestorPath.ts"],"sourcesContent":["import { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\n\ntype FetchAncestorPathArgs = {\n  api: string\n  collectionSlug: string\n  itemId: number | string\n  parentFieldName: string\n  serverURL: string\n}\n\nconst MAX_HIERARCHY_DEPTH = 20\n\n/**\n * Fetches the ancestor path for an item using a single API call with depth.\n * Returns array of ancestor IDs from root to item's parent.\n * Example: item at level 3 returns [grandparentId, parentId]\n */\nexport async function fetchAncestorPath({\n  api,\n  collectionSlug,\n  itemId,\n  parentFieldName,\n  serverURL,\n}: FetchAncestorPathArgs): Promise<(number | string)[]> {\n  const queryString = qs.stringify(\n    {\n      depth: MAX_HIERARCHY_DEPTH,\n      limit: 1,\n      select: { [parentFieldName]: true },\n      where: { id: { equals: itemId } },\n    },\n    { addQueryPrefix: true },\n  )\n\n  const url = formatAdminURL({\n    apiRoute: api,\n    path: `/${collectionSlug}${queryString}`,\n    serverURL,\n  })\n\n  const response = await fetch(url, { credentials: 'include' })\n\n  if (!response.ok) {\n    return []\n  }\n\n  const data = await response.json()\n  const doc = data.docs?.[0]\n\n  if (!doc) {\n    return []\n  }\n\n  // Walk the nested parent chain to build path from root to immediate parent\n  const path: (number | string)[] = []\n  let current = doc[parentFieldName]\n\n  while (current !== null && current !== undefined) {\n    // Parent could be an ID (number/string) or a populated object\n    const parentId = typeof current === 'object' ? current.id : current\n\n    if (parentId !== null && parentId !== undefined) {\n      path.unshift(parentId)\n    }\n\n    // Move to next parent (only if current is populated object)\n    current = typeof current === 'object' ? current[parentFieldName] : null\n  }\n\n  return path\n}\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ;AAC/B,YAAYC,EAAA,MAAQ;AAUpB,MAAMC,mBAAA,GAAsB;AAE5B;;;;;AAKA,OAAO,eAAeC,kBAAkB;EACtCC,GAAG;EACHC,cAAc;EACdC,MAAM;EACNC,eAAe;EACfC;AAAS,CACa;EACtB,MAAMC,WAAA,GAAcR,EAAA,CAAGS,SAAS,CAC9B;IACEC,KAAA,EAAOT,mBAAA;IACPU,KAAA,EAAO;IACPC,MAAA,EAAQ;MAAE,CAACN,eAAA,GAAkB;IAAK;IAClCO,KAAA,EAAO;MAAEC,EAAA,EAAI;QAAEC,MAAA,EAAQV;MAAO;IAAE;EAClC,GACA;IAAEW,cAAA,EAAgB;EAAK;EAGzB,MAAMC,GAAA,GAAMlB,cAAA,CAAe;IACzBmB,QAAA,EAAUf,GAAA;IACVgB,IAAA,EAAM,IAAIf,cAAA,GAAiBI,WAAA,EAAa;IACxCD;EACF;EAEA,MAAMa,QAAA,GAAW,MAAMC,KAAA,CAAMJ,GAAA,EAAK;IAAEK,WAAA,EAAa;EAAU;EAE3D,IAAI,CAACF,QAAA,CAASG,EAAE,EAAE;IAChB,OAAO,EAAE;EACX;EAEA,MAAMC,IAAA,GAAO,MAAMJ,QAAA,CAASK,IAAI;EAChC,MAAMC,GAAA,GAAMF,IAAA,CAAKG,IAAI,GAAG,EAAE;EAE1B,IAAI,CAACD,GAAA,EAAK;IACR,OAAO,EAAE;EACX;EAEA;EACA,MAAMP,IAAA,GAA4B,EAAE;EACpC,IAAIS,OAAA,GAAUF,GAAG,CAACpB,eAAA,CAAgB;EAElC,OAAOsB,OAAA,KAAY,QAAQA,OAAA,KAAYC,SAAA,EAAW;IAChD;IACA,MAAMC,QAAA,GAAW,OAAOF,OAAA,KAAY,WAAWA,OAAA,CAAQd,EAAE,GAAGc,OAAA;IAE5D,IAAIE,QAAA,KAAa,QAAQA,QAAA,KAAaD,SAAA,EAAW;MAC/CV,IAAA,CAAKY,OAAO,CAACD,QAAA;IACf;IAEA;IACAF,OAAA,GAAU,OAAOA,OAAA,KAAY,WAAWA,OAAO,CAACtB,eAAA,CAAgB,GAAG;EACrE;EAEA,OAAOa,IAAA;AACT","ignoreList":[]}
+{"version":3,"file":"fetchAncestorPath.js","names":["formatAdminURL","qs","MAX_HIERARCHY_DEPTH","EMPTY_RESULT","ancestorIds","path","fetchAncestorPaths","api","collectionSlug","itemIds","parentFieldName","serverURL","useAsTitle","results","Map","length","queryString","stringify","depth","limit","select","where","id","in","addQueryPrefix","url","apiRoute","response","fetch","credentials","ok","data","json","doc","docs","undefined","set","buildAncestorPath","fetchAncestorPath","itemId","rest","get","toTitle","value","segmentID","rawTitle","String","title","current","parent","parentDoc","parentID","unshift","slice","map","segment"],"sources":["../../../../src/elements/Hierarchy/Modal/fetchAncestorPath.ts"],"sourcesContent":["import { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\n\nimport type { PathSegment } from '../ColumnBrowser/types.js'\n\ntype FetchAncestorPathArgs = {\n  api: string\n  collectionSlug: string\n  itemId: number | string\n  parentFieldName: string\n  serverURL: string\n  useAsTitle: string\n}\n\ntype FetchAncestorPathsArgs = {\n  itemIds: (number | string)[]\n} & Omit<FetchAncestorPathArgs, 'itemId'>\n\nexport type AncestorPathResult = {\n  /** Ancestor IDs from root down to the item's immediate parent, excluding the item itself */\n  ancestorIds: (number | string)[]\n  /** Full path from root down to the item itself, with titles */\n  path: PathSegment[]\n}\n\nconst MAX_HIERARCHY_DEPTH = 20\n\nconst EMPTY_RESULT: AncestorPathResult = { ancestorIds: [], path: [] }\n\n/**\n * Fetches the ancestor paths for several items in a single API call with depth.\n * Each populated parent chain is walked to build a titled breadcrumb from root to the item.\n */\nexport async function fetchAncestorPaths({\n  api,\n  collectionSlug,\n  itemIds,\n  parentFieldName,\n  serverURL,\n  useAsTitle,\n}: FetchAncestorPathsArgs): Promise<Map<number | string, AncestorPathResult>> {\n  const results = new Map<number | string, AncestorPathResult>()\n\n  if (itemIds.length === 0) {\n    return results\n  }\n\n  const queryString = qs.stringify(\n    {\n      depth: MAX_HIERARCHY_DEPTH,\n      limit: itemIds.length,\n      select: { [parentFieldName]: true, [useAsTitle]: true },\n      where: { id: { in: itemIds } },\n    },\n    { addQueryPrefix: true },\n  )\n\n  const url = formatAdminURL({\n    apiRoute: api,\n    path: `/${collectionSlug}${queryString}`,\n    serverURL,\n  })\n\n  const response = await fetch(url, { credentials: 'include' })\n\n  if (!response.ok) {\n    return results\n  }\n\n  const data = await response.json()\n\n  for (const doc of (data.docs || []) as Record<string, unknown>[]) {\n    const id = doc.id as number | string\n\n    if (id === null || id === undefined) {\n      continue\n    }\n\n    results.set(id, buildAncestorPath({ id, doc, parentFieldName, useAsTitle }))\n  }\n\n  return results\n}\n\n/**\n * Fetches the ancestor path for a single item. See {@link fetchAncestorPaths}.\n */\nexport async function fetchAncestorPath({\n  itemId,\n  ...rest\n}: FetchAncestorPathArgs): Promise<AncestorPathResult> {\n  const results = await fetchAncestorPaths({ ...rest, itemIds: [itemId] })\n\n  return results.get(itemId) ?? EMPTY_RESULT\n}\n\nfunction buildAncestorPath({\n  id,\n  doc,\n  parentFieldName,\n  useAsTitle,\n}: {\n  doc: Record<string, unknown>\n  id: number | string\n  parentFieldName: string\n  useAsTitle: string\n}): AncestorPathResult {\n  const toTitle = (\n    value: Record<string, unknown> | undefined,\n    segmentID: number | string,\n  ): string => {\n    const rawTitle = value?.[useAsTitle]\n    return typeof rawTitle === 'string' || typeof rawTitle === 'number'\n      ? String(rawTitle)\n      : String(segmentID)\n  }\n\n  const path: PathSegment[] = [{ id, title: toTitle(doc, id) }]\n\n  let current: Record<string, unknown> | undefined = doc\n\n  for (let depth = 0; depth < MAX_HIERARCHY_DEPTH; depth++) {\n    const parent = current?.[parentFieldName]\n\n    if (parent === null || parent === undefined) {\n      break\n    }\n\n    // Parent is either a populated document or a bare ID once the depth limit is hit\n    if (typeof parent === 'object') {\n      const parentDoc = parent as Record<string, unknown>\n      const parentID = parentDoc.id as number | string\n\n      if (parentID === null || parentID === undefined) {\n        break\n      }\n\n      path.unshift({ id: parentID, title: toTitle(parentDoc, parentID) })\n      current = parentDoc\n    } else {\n      const parentID = parent as number | string\n      path.unshift({ id: parentID, title: String(parentID) })\n      break\n    }\n  }\n\n  return {\n    ancestorIds: path.slice(0, -1).map((segment) => segment.id),\n    path,\n  }\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -14,66 +14,17 @@
     overflow: clip;
   }
 
-  .hierarchy-modal__header-actions {
-    display: flex;
-    gap: var(--spacer-2);
-  }
-
-  .dialog.hierarchy-modal .dialog__body {
+  /* Beats the `:has(.dialog__header)` / `:has(.dialog__footer)` padding rules in Dialog/index.css */
+  .dialog.hierarchy-modal .hierarchy-modal__content .dialog__body {
     display: flex;
     flex-direction: column;
     padding: 0;
   }
 
-  .hierarchy-modal__subheader {
-    display: flex;
+  .dialog.hierarchy-modal .dialog__footer {
     justify-content: space-between;
     align-items: center;
-    padding: var(--spacer-1) var(--spacer-3);
-    padding-inline-start: var(--spacer-2-5);
-    border-bottom: var(--stroke-width-small) solid var(--color-border);
-    flex-shrink: 0;
-  }
-
-  .hierarchy-modal__subheader-left {
-    display: flex;
-    align-items: center;
-    gap: var(--spacer-1);
-    font-weight: 500;
-    color: var(--color-text);
-  }
-
-  .hierarchy-modal__subheader-right {
-    display: flex;
-    align-items: center;
-    gap: var(--spacer-2);
-  }
-
-  .hierarchy-modal__selection-info {
-    color: var(--color-text-secondary);
-  }
-
-  .hierarchy-modal__move-to-root,
-  .hierarchy-modal__clear-all {
-    height: auto;
-    padding: 0;
-    border: 0;
-    border-radius: 0;
-    background: transparent;
-    color: var(--color-text-secondary);
-    text-decoration: underline;
-    text-underline-offset: 2px;
-  }
-
-  .hierarchy-modal__move-to-root:hover:not(.btn--disabled),
-  .hierarchy-modal__clear-all:hover:not(.btn--disabled) {
-    background: transparent;
-    color: var(--color-text);
-  }
-
-  .hierarchy-modal__move-to-root:active:not(.btn--disabled),
-  .hierarchy-modal__clear-all:active:not(.btn--disabled) {
-    background: transparent;
+    border-top: var(--stroke-width-small) solid var(--color-border);
   }
 
   .hierarchy-modal__columns {

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

@@ -10,9 +10,12 @@ type HierarchyModalContentProps = {
     }) => void;
 } & HierarchyModalInternalProps;
 export type HierarchyModalContentRef = {
-    selectItem: (id: number | string) => void;
+    selectItem: (params: {
+        id: number | string;
+        title?: string;
+    }) => void;
 };
-export declare const HierarchyModalContent: ({ baseFilter, closeModal, columnBrowserRef, disabledIds, filterByCollection, hasMany, hierarchyCollectionSlug, Icon, initialSelections, onCreateNew, onMoveToRoot, onSave, parentFieldName, ref, showMoveToRoot, useAsTitle, }: {
+export declare const HierarchyModalContent: ({ baseFilter, closeModal, columnBrowserRef, confirmLabel, disabledIds, filterByCollection, hasMany, hierarchyCollectionSlug, Icon, initialSelections, onCreateNew, onMoveToRoot, onSave, parentFieldName, ref, showMoveToRoot, title, useAsTitle, }: {
     ref?: React.RefObject<HierarchyModalContentRef | null>;
 } & HierarchyModalContentProps) => React.JSX.Element;
 export declare const HierarchyModal: React.FC<HierarchyModalInternalProps>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Modal/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,KAAK,EAAE,2BAA2B,EAAqB,MAAM,YAAY,CAAA;AAahF,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,SAAS,oBAAoB,CAAA;AAE1C,KAAK,0BAA0B,GAAG;IAChC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;IACpE,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CACrE,GAAG,2BAA2B,CAAA;AAE/B,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,eAAO,MAAM,qBAAqB,mOAiB/B;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,wBAAwB,GAAG,IAAI,CAAC,CAAA;CAAE,GAAG,0BAA0B,sBAmNzF,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CA+FhE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Modal/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAE1E,OAAO,KAAK,EAAE,2BAA2B,EAAqB,MAAM,YAAY,CAAA;AAYhF,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,SAAS,oBAAoB,CAAA;AAE1C,KAAK,0BAA0B,GAAG;IAChC,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;IACpE,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,QAAQ,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CACrE,GAAG,2BAA2B,CAAA;AAE/B,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;CACtE,CAAA;AAED,eAAO,MAAM,qBAAqB,wPAmB/B;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,wBAAwB,GAAG,IAAI,CAAC,CAAA;CAAE,GAAG,0BAA0B,sBAyPzF,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAoGhE,CAAA"}