@payloadcms/ui 4.0.0-internal.7b031c8 → 4.0.0-internal.7b53b6d

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

@@ -1,15 +1,21 @@
+import type { PathSegment } from '../ColumnBrowser/types.js';
 type FetchAncestorPathArgs = {
     api: string;
+    branch?: string;
     collectionSlug: string;
     itemId: number | string;
     parentFieldName: string;
     serverURL: string;
+    useAsTitle: string;
+};
+export type AncestorPathResult = {
+    ancestorIds: (number | string)[];
+    path: PathSegment[];
 };
 /**
  * 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]
+ * Returns the ancestor IDs used to expand the browser and a titled path for the footer.
  */
-export declare function fetchAncestorPath({ api, collectionSlug, itemId, parentFieldName, serverURL, }: FetchAncestorPathArgs): Promise<(number | string)[]>;
+export declare function fetchAncestorPath({ api, branch, collectionSlug, itemId, parentFieldName, serverURL, useAsTitle, }: 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,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,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,MAAM,MAAM,kBAAkB,GAAG;IAC/B,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IAChC,IAAI,EAAE,WAAW,EAAE,CAAA;CACpB,CAAA;AAID;;;GAGG;AACH,wBAAsB,iBAAiB,CAAC,EACtC,GAAG,EACH,MAAM,EACN,cAAc,EACd,MAAM,EACN,eAAe,EACf,SAAS,EACT,UAAU,GACX,EAAE,qBAAqB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAyDrD"}

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

@@ -3,21 +3,24 @@ import * as qs from 'qs-esm';
 const MAX_HIERARCHY_DEPTH = 20;
 /**
  * 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]
+ * Returns the ancestor IDs used to expand the browser and a titled path for the footer.
  */
 export async function fetchAncestorPath({
   api,
+  branch,
   collectionSlug,
   itemId,
   parentFieldName,
-  serverURL
+  serverURL,
+  useAsTitle
 }) {
   const queryString = qs.stringify({
+    branch,
     depth: MAX_HIERARCHY_DEPTH,
     limit: 1,
     select: {
-      [parentFieldName]: true
+      [parentFieldName]: true,
+      [useAsTitle]: true
     },
     where: {
       id: {
@@ -36,25 +39,50 @@ export async function fetchAncestorPath({
     credentials: 'include'
   });
   if (!response.ok) {
-    return [];
+    return {
+      ancestorIds: [],
+      path: []
+    };
   }
   const data = await response.json();
   const doc = data.docs?.[0];
   if (!doc) {
-    return [];
+    return {
+      ancestorIds: [],
+      path: []
+    };
   }
-  // Walk the nested parent chain to build path from root to immediate parent
-  const path = [];
+  const path = [toPathSegment({
+    id: itemId,
+    doc,
+    useAsTitle
+  })];
   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);
+      path.unshift(toPathSegment({
+        id: parentId,
+        doc: typeof current === 'object' ? current : undefined,
+        useAsTitle
+      }));
     }
-    // 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
+  };
+}
+function toPathSegment({
+  id,
+  doc,
+  useAsTitle
+}) {
+  const title = doc?.[useAsTitle];
+  return {
+    id,
+    title: typeof title === 'number' || typeof title === 'string' ? String(title) : String(id)
+  };
 }
 //# 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","fetchAncestorPath","api","branch","collectionSlug","itemId","parentFieldName","serverURL","useAsTitle","queryString","stringify","depth","limit","select","where","id","equals","addQueryPrefix","url","apiRoute","path","response","fetch","credentials","ok","ancestorIds","data","json","doc","docs","toPathSegment","current","undefined","parentId","unshift","slice","map","segment","title","String"],"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  branch?: string\n  collectionSlug: string\n  itemId: number | string\n  parentFieldName: string\n  serverURL: string\n  useAsTitle: string\n}\n\nexport type AncestorPathResult = {\n  ancestorIds: (number | string)[]\n  path: PathSegment[]\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 the ancestor IDs used to expand the browser and a titled path for the footer.\n */\nexport async function fetchAncestorPath({\n  api,\n  branch,\n  collectionSlug,\n  itemId,\n  parentFieldName,\n  serverURL,\n  useAsTitle,\n}: FetchAncestorPathArgs): Promise<AncestorPathResult> {\n  const queryString = qs.stringify(\n    {\n      branch,\n      depth: MAX_HIERARCHY_DEPTH,\n      limit: 1,\n      select: { [parentFieldName]: true, [useAsTitle]: 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 { ancestorIds: [], path: [] }\n  }\n\n  const data = await response.json()\n  const doc = data.docs?.[0]\n\n  if (!doc) {\n    return { ancestorIds: [], path: [] }\n  }\n\n  const path: PathSegment[] = [toPathSegment({ id: itemId, doc, useAsTitle })]\n  let current = doc[parentFieldName] as null | number | Record<string, unknown> | string\n\n  while (current !== null && current !== undefined) {\n    const parentId = typeof current === 'object' ? current.id : current\n\n    if (parentId !== null && parentId !== undefined) {\n      path.unshift(\n        toPathSegment({\n          id: parentId as number | string,\n          doc: typeof current === 'object' ? current : undefined,\n          useAsTitle,\n        }),\n      )\n    }\n\n    current =\n      typeof current === 'object'\n        ? (current[parentFieldName] as null | number | Record<string, unknown> | string)\n        : null\n  }\n\n  return {\n    ancestorIds: path.slice(0, -1).map((segment) => segment.id),\n    path,\n  }\n}\n\nfunction toPathSegment({\n  id,\n  doc,\n  useAsTitle,\n}: {\n  doc?: Record<string, unknown>\n  id: number | string\n  useAsTitle: string\n}): PathSegment {\n  const title = doc?.[useAsTitle]\n\n  return {\n    id,\n    title: typeof title === 'number' || typeof title === 'string' ? String(title) : String(id),\n  }\n}\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ;AAC/B,YAAYC,EAAA,MAAQ;AAmBpB,MAAMC,mBAAA,GAAsB;AAE5B;;;;AAIA,OAAO,eAAeC,kBAAkB;EACtCC,GAAG;EACHC,MAAM;EACNC,cAAc;EACdC,MAAM;EACNC,eAAe;EACfC,SAAS;EACTC;AAAU,CACY;EACtB,MAAMC,WAAA,GAAcV,EAAA,CAAGW,SAAS,CAC9B;IACEP,MAAA;IACAQ,KAAA,EAAOX,mBAAA;IACPY,KAAA,EAAO;IACPC,MAAA,EAAQ;MAAE,CAACP,eAAA,GAAkB;MAAM,CAACE,UAAA,GAAa;IAAK;IACtDM,KAAA,EAAO;MAAEC,EAAA,EAAI;QAAEC,MAAA,EAAQX;MAAO;IAAE;EAClC,GACA;IAAEY,cAAA,EAAgB;EAAK;EAGzB,MAAMC,GAAA,GAAMpB,cAAA,CAAe;IACzBqB,QAAA,EAAUjB,GAAA;IACVkB,IAAA,EAAM,IAAIhB,cAAA,GAAiBK,WAAA,EAAa;IACxCF;EACF;EAEA,MAAMc,QAAA,GAAW,MAAMC,KAAA,CAAMJ,GAAA,EAAK;IAAEK,WAAA,EAAa;EAAU;EAE3D,IAAI,CAACF,QAAA,CAASG,EAAE,EAAE;IAChB,OAAO;MAAEC,WAAA,EAAa,EAAE;MAAEL,IAAA,EAAM;IAAG;EACrC;EAEA,MAAMM,IAAA,GAAO,MAAML,QAAA,CAASM,IAAI;EAChC,MAAMC,GAAA,GAAMF,IAAA,CAAKG,IAAI,GAAG,EAAE;EAE1B,IAAI,CAACD,GAAA,EAAK;IACR,OAAO;MAAEH,WAAA,EAAa,EAAE;MAAEL,IAAA,EAAM;IAAG;EACrC;EAEA,MAAMA,IAAA,GAAsB,CAACU,aAAA,CAAc;IAAEf,EAAA,EAAIV,MAAA;IAAQuB,GAAA;IAAKpB;EAAW,GAAG;EAC5E,IAAIuB,OAAA,GAAUH,GAAG,CAACtB,eAAA,CAAgB;EAElC,OAAOyB,OAAA,KAAY,QAAQA,OAAA,KAAYC,SAAA,EAAW;IAChD,MAAMC,QAAA,GAAW,OAAOF,OAAA,KAAY,WAAWA,OAAA,CAAQhB,EAAE,GAAGgB,OAAA;IAE5D,IAAIE,QAAA,KAAa,QAAQA,QAAA,KAAaD,SAAA,EAAW;MAC/CZ,IAAA,CAAKc,OAAO,CACVJ,aAAA,CAAc;QACZf,EAAA,EAAIkB,QAAA;QACJL,GAAA,EAAK,OAAOG,OAAA,KAAY,WAAWA,OAAA,GAAUC,SAAA;QAC7CxB;MACF;IAEJ;IAEAuB,OAAA,GACE,OAAOA,OAAA,KAAY,WACdA,OAAO,CAACzB,eAAA,CAAgB,GACzB;EACR;EAEA,OAAO;IACLmB,WAAA,EAAaL,IAAA,CAAKe,KAAK,CAAC,GAAG,CAAC,GAAGC,GAAG,CAAEC,OAAA,IAAYA,OAAA,CAAQtB,EAAE;IAC1DK;EACF;AACF;AAEA,SAASU,cAAc;EACrBf,EAAE;EACFa,GAAG;EACHpB;AAAU,CAKX;EACC,MAAM8B,KAAA,GAAQV,GAAA,GAAMpB,UAAA,CAAW;EAE/B,OAAO;IACLO,EAAA;IACAuB,KAAA,EAAO,OAAOA,KAAA,KAAU,YAAY,OAAOA,KAAA,KAAU,WAAWC,MAAA,CAAOD,KAAA,IAASC,MAAA,CAAOxB,EAAA;EACzF;AACF","ignoreList":[]}

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

@@ -14,68 +14,12 @@
     overflow: clip;
   }
 
-  .hierarchy-modal__header-actions {
-    display: flex;
-    gap: var(--spacer-2);
-  }
-
   .dialog.hierarchy-modal .dialog__body {
     display: flex;
     flex-direction: column;
     padding: 0;
   }
 
-  .hierarchy-modal__subheader {
-    display: flex;
-    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;
-  }
-
   .hierarchy-modal__columns {
     flex: 1;
     overflow: hidden;

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

@@ -1,18 +1,20 @@
 import React from 'react';
 import type { HierarchyColumnBrowserRef } from '../ColumnBrowser/index.js';
-import type { HierarchyModalInternalProps } from './types.js';
+import type { PathSegment } from '../ColumnBrowser/types.js';
+import type { HierarchyModalInternalProps, SelectionWithPath } from './types.js';
 import './index.css';
 export declare const baseClass = "hierarchy-modal";
 type HierarchyModalContentProps = {
     columnBrowserRef?: React.RefObject<HierarchyColumnBrowserRef | null>;
     onCreateNew?: (params: {
         parentId: null | number | string;
+        path: PathSegment[];
     }) => void;
 } & HierarchyModalInternalProps;
 export type HierarchyModalContentRef = {
-    selectItem: (id: number | string) => void;
+    selectItem: (selection: SelectionWithPath) => 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, isBusy, 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;AAC1E,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,KAAK,EAAE,2BAA2B,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAchF,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,CAAC;QAAC,IAAI,EAAE,WAAW,EAAE,CAAA;KAAE,KAAK,IAAI,CAAA;CAC1F,GAAG,2BAA2B,CAAA;AAE/B,MAAM,MAAM,wBAAwB,GAAG;IACrC,UAAU,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,eAAO,MAAM,qBAAqB,gQAoB/B;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,wBAAwB,GAAG,IAAI,CAAC,CAAA;CAAE,GAAG,0BAA0B,sBAqLzF,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAsHhE,CAAA"}

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

@@ -4,34 +4,38 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { getTranslation } from '@payloadcms/translations';
 import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useEffectEvent } from '../../../hooks/useEffectEvent.js';
-import { TagIcon } from '../../../icons/Tag/index.js';
+import { useBranchParam } from '../../../providers/Branch/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useHierarchy } from '../../../providers/Hierarchy/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
-import { Button } from '../../Button/index.js';
 import { DialogBody, DialogHeader, DialogModal } from '../../Dialog/index.js';
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
 import { DrawerDepthProvider } from '../../Drawer/index.js';
 import { HierarchyColumnBrowser } from '../ColumnBrowser/index.js';
 import { fetchAncestorPath } from './fetchAncestorPath.js';
+import { HierarchyModalFooter } from './Footer/index.js';
+import { createHierarchySelections, selectHierarchyItem } from './selection.js';
 import './index.css';
 export const baseClass = 'hierarchy-modal';
 export const HierarchyModalContent = function HierarchyModalContent({
   baseFilter,
   closeModal,
   columnBrowserRef,
+  confirmLabel,
   disabledIds,
   filterByCollection,
   hasMany = false,
   hierarchyCollectionSlug,
   Icon,
   initialSelections,
+  isBusy,
   onCreateNew,
   onMoveToRoot,
   onSave,
   parentFieldName,
   ref,
   showMoveToRoot,
+  title,
   useAsTitle
 }) {
   const {
@@ -49,41 +53,39 @@ export const HierarchyModalContent = function HierarchyModalContent({
     },
     getEntityConfig
   } = useConfig();
+  const branch = useBranchParam();
   const collectionConfig = getEntityConfig({
     collectionSlug: hierarchyCollectionSlug
   });
   const collectionLabel = collectionConfig ? getTranslation(collectionConfig.labels?.plural || hierarchyCollectionSlug, i18n) : hierarchyCollectionSlug;
+  const collectionLabelSingular = collectionConfig ? getTranslation(collectionConfig.labels?.singular || hierarchyCollectionSlug, i18n) : hierarchyCollectionSlug;
   const parentFieldName_internal = collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object' ? collectionConfig.hierarchy.parentFieldName : parentFieldName;
   const [initialExpandedPath, setInitialExpandedPath] = useState();
+  const [previousPath, setPreviousPath] = useState();
   const [isLoadingPath, setIsLoadingPath] = useState(Boolean(initialSelections?.length));
+  const [hasSelectedDestination, setHasSelectedDestination] = useState(false);
   const hasLoadedPathRef = React.useRef(false);
   const firstSelection = initialSelections?.[0];
-  const mapSelections = useCallback(ids => {
-    const map = new Map();
-    if (ids) {
-      for (const id of ids) {
-        map.set(id, {
-          id,
-          path: []
-        });
-      }
-    }
-    return map;
-  }, []);
   const loadAncestorPath = useEffectEvent(async itemId => {
-    if (!itemId) {
+    if (itemId === undefined || itemId === null) {
       setIsLoadingPath(false);
       return;
     }
     try {
-      const path = await fetchAncestorPath({
+      const {
+        ancestorIds,
+        path
+      } = await fetchAncestorPath({
         api,
+        branch,
         collectionSlug: hierarchyCollectionSlug,
         itemId,
         parentFieldName: parentFieldName_internal,
-        serverURL
+        serverURL,
+        useAsTitle: useAsTitle || 'id'
       });
-      setInitialExpandedPath(path);
+      setInitialExpandedPath(ancestorIds);
+      setPreviousPath(path);
     } catch {
       // Silently handle fetch errors - will just start at root
     } finally {
@@ -98,7 +100,10 @@ export const HierarchyModalContent = function HierarchyModalContent({
     hasLoadedPathRef.current = true;
     void loadAncestorPath(firstSelection);
   }, [firstSelection]);
-  const [selections, setSelections] = useState(() => mapSelections(initialSelections));
+  const [selections, setSelections] = useState(() => createHierarchySelections({
+    hasMany,
+    initialSelections
+  }));
   const selectedIds = useMemo(() => new Set(selections.keys()), [selections]);
   // For now, ancestorsWithSelections is empty - will be computed when we have path tracking
   const ancestorsWithSelections = useMemo(() => new Set(), []);
@@ -109,109 +114,64 @@ export const HierarchyModalContent = function HierarchyModalContent({
     });
   }, [onSave, selections, closeModal]);
   const handleSelect = useCallback(({
-    id: id_0,
+    id,
     path: path_0
   }) => {
+    setHasSelectedDestination(true);
     setSelections(prev => {
-      const next = new Map(prev);
-      if (next.has(id_0)) {
-        next.delete(id_0);
-      } else {
-        if (!hasMany) {
-          // Single select: clear previous selections
-          next.clear();
-        }
-        next.set(id_0, {
-          id: id_0,
-          path: path_0
-        });
-      }
-      return next;
+      return selectHierarchyItem({
+        id,
+        current: prev,
+        hasMany,
+        path: path_0
+      });
     });
   }, [hasMany]);
   const handleClearAll = useCallback(() => {
     setSelections(new Map());
   }, []);
   const handleCancel = useCallback(() => {
-    setSelections(mapSelections(initialSelections));
+    setSelections(createHierarchySelections({
+      hasMany,
+      initialSelections
+    }));
+    setHasSelectedDestination(false);
     closeModal();
-  }, [closeModal, initialSelections, mapSelections]);
+  }, [closeModal, hasMany, initialSelections]);
   // Expose selectItem for programmatic selection (e.g., after creating a new item)
   useImperativeHandle(ref, () => ({
-    selectItem: id_1 => {
+    selectItem: ({
+      id: id_0,
+      path: path_1
+    }) => {
+      setHasSelectedDestination(true);
       setSelections(prev_0 => {
-        const next_0 = new Map(prev_0);
+        const next = new Map(prev_0);
         if (!hasMany) {
-          next_0.clear();
+          next.clear();
         }
-        // Path will be empty for newly created items - could be enhanced later
-        next_0.set(id_1, {
-          id: id_1,
-          path: []
+        next.set(id_0, {
+          id: id_0,
+          path: path_1
         });
-        return next_0;
+        return next;
       });
     }
   }), [hasMany]);
   const selectionCount = selections.size;
+  const destination = hasMany || !hasSelectedDestination ? undefined : selections.values().next().value;
+  const destinationPath = destination?.path;
+  const isDestinationUnchanged = destination !== undefined && destination.id === firstSelection;
   return /*#__PURE__*/_jsxs("div", {
     className: `${baseClass}__content`,
     children: [/*#__PURE__*/_jsx(DialogHeader, {
-      title: t('general:selectValue', {
+      onClose: handleCancel,
+      showClose: true,
+      title: title || t('general:selectValue', {
         label: collectionLabel
-      }),
-      children: /*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__header-actions`,
-        children: [/*#__PURE__*/_jsx(Button, {
-          buttonStyle: "secondary",
-          margin: false,
-          onClick: handleCancel,
-          size: "medium",
-          children: t('general:cancel')
-        }), /*#__PURE__*/_jsx(Button, {
-          margin: false,
-          onClick: handleSave,
-          size: "medium",
-          children: t('general:select')
-        })]
       })
-    }), /*#__PURE__*/_jsxs(DialogBody, {
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__subheader`,
-        children: [/*#__PURE__*/_jsxs("div", {
-          className: `${baseClass}__subheader-left`,
-          children: [Icon || /*#__PURE__*/_jsx(TagIcon, {}), /*#__PURE__*/_jsx("h4", {
-            children: collectionLabel
-          })]
-        }), /*#__PURE__*/_jsxs("div", {
-          className: `${baseClass}__subheader-right`,
-          children: [showMoveToRoot && onMoveToRoot && /*#__PURE__*/_jsx(Button, {
-            buttonStyle: "ghost",
-            className: `${baseClass}__move-to-root`,
-            margin: false,
-            onClick: onMoveToRoot,
-            size: "medium",
-            children: t('hierarchy:moveToRoot')
-          }), Boolean(selectionCount) && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx("span", {
-              className: `${baseClass}__selection-info`,
-              children: t('general:selectedCount', {
-                count: selectionCount,
-                label: ''
-              })
-            }), /*#__PURE__*/_jsx("span", {
-              children: "—"
-            }), /*#__PURE__*/_jsx(Button, {
-              buttonStyle: "ghost",
-              className: `${baseClass}__clear-all`,
-              margin: false,
-              onClick: handleClearAll,
-              size: "medium",
-              children: t('general:clear')
-            })]
-          })]
-        })]
-      }), /*#__PURE__*/_jsx("div", {
+    }), /*#__PURE__*/_jsx(DialogBody, {
+      children: /*#__PURE__*/_jsx("div", {
         className: `${baseClass}__columns`,
         children: /*#__PURE__*/_jsx(HierarchyColumnBrowser, {
           ancestorsWithSelections: ancestorsWithSelections,
@@ -228,7 +188,27 @@ export const HierarchyModalContent = function HierarchyModalContent({
           selectedIds: selectedIds,
           useAsTitle: useAsTitle
         })
-      })]
+      })
+    }), /*#__PURE__*/_jsx(HierarchyModalFooter, {
+      confirmLabel: confirmLabel || t('general:confirm'),
+      destinationPath: destinationPath,
+      Icon: Icon,
+      isBusy: isBusy,
+      isConfirmDisabled: !hasMany && (!hasSelectedDestination || selectionCount === 0 || isDestinationUnchanged),
+      isMultiSelect: hasMany,
+      onClear: handleClearAll,
+      onConfirm: handleSave,
+      onMoveToRoot: onMoveToRoot,
+      placeholderLabel: t('general:selectLabel', {
+        label: collectionLabelSingular
+      }),
+      previousPath: hasMany ? undefined : previousPath,
+      selectionCount: selectionCount,
+      selectionCountLabel: t('general:selectedCount', {
+        count: selectionCount,
+        label: selectionCount === 1 ? collectionLabelSingular : collectionLabel
+      }),
+      showMoveToRoot: showMoveToRoot
     })]
   });
 };
@@ -237,7 +217,8 @@ export const HierarchyModal = props => {
     hierarchyCollectionSlug,
     modalSlug,
     parentFieldName,
-    reopenCount
+    reopenCount,
+    useAsTitle
   } = props;
   const {
     refreshTree
@@ -252,6 +233,7 @@ export const HierarchyModal = props => {
   const parentFieldName_internal = collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object' ? collectionConfig.hierarchy.parentFieldName : parentFieldName;
   // Track which parentId is being used for the document drawer - use state to trigger re-render
   const [createParentId, setCreateParentId] = useState(null);
+  const [createParentPath, setCreateParentPath] = useState([]);
   // Ref to access column browser's refresh function
   const columnBrowserRef = useRef(null);
   // Ref to access drawer content's selectItem function
@@ -269,11 +251,13 @@ export const HierarchyModal = props => {
     drawerSlug: documentDrawerSlug
   });
   const handleCreateNew = useCallback(({
-    parentId
+    parentId,
+    path = []
   }) => {
     // Increment key to force DocumentDrawer remount with new initialData
     setDocumentDrawerKey(prev => prev + 1);
     setCreateParentId(parentId);
+    setCreateParentPath(path);
     // Use setTimeout to ensure state update triggers re-render before opening drawer
     setTimeout(() => {
       openDocumentDrawer();
@@ -287,11 +271,18 @@ export const HierarchyModal = props => {
       void columnBrowserRef.current.refreshColumn(createParentId);
     }
     if (modalContentRef.current && doc?.id) {
-      modalContentRef.current.selectItem(doc.id);
+      const title = useAsTitle ? doc[useAsTitle] : undefined;
+      modalContentRef.current.selectItem({
+        id: doc.id,
+        path: [...createParentPath, {
+          id: doc.id,
+          title: typeof title === 'number' || typeof title === 'string' ? String(title) : String(doc.id)
+        }]
+      });
     }
     refreshTree(hierarchyCollectionSlug);
     closeDocumentDrawer();
-  }, [closeDocumentDrawer, createParentId, hierarchyCollectionSlug, refreshTree]);
+  }, [closeDocumentDrawer, createParentId, createParentPath, hierarchyCollectionSlug, refreshTree, useAsTitle]);
   // Memoize the content - only depends on stable values
   const modalContent = useMemo(() => /*#__PURE__*/_jsx(HierarchyModalContent, {
     ...props,