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

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

@@ -0,0 +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 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';
+const HierarchyPath = ({
+  Icon,
+  path
+}) => {
+  const label = path.map(segment => segment.title).join(' / ');
+  return /*#__PURE__*/_jsx(Chip, {
+    "aria-label": label,
+    className: `${baseClass}__path`,
+    icon: Icon ?? /*#__PURE__*/_jsx(FolderIcon, {}),
+    children: label
+  });
+};
+export const HierarchyModalFooter = t0 => {
+  const $ = _c(16);
+  const {
+    confirmLabel,
+    destinationPath,
+    Icon,
+    isBusy: t1,
+    isConfirmDisabled,
+    isMultiSelect,
+    onClear,
+    onConfirm,
+    onMoveToRoot,
+    placeholderLabel,
+    previousPath,
+    selectionCount,
+    selectionCountLabel,
+    showMoveToRoot
+  } = t0;
+  const isBusy = t1 === undefined ? false : t1;
+  const {
+    t
+  } = useTranslation();
+  let t2;
+  if ($[0] !== Icon || $[1] !== confirmLabel || $[2] !== destinationPath || $[3] !== isBusy || $[4] !== isConfirmDisabled || $[5] !== isMultiSelect || $[6] !== onClear || $[7] !== onConfirm || $[8] !== onMoveToRoot || $[9] !== placeholderLabel || $[10] !== previousPath || $[11] !== selectionCount || $[12] !== selectionCountLabel || $[13] !== showMoveToRoot || $[14] !== t) {
+    t2 = _jsxs(DialogFooter, {
+      children: [_jsx("div", {
+        className: `${baseClass}__info`,
+        children: isMultiSelect ? _jsxs(React.Fragment, {
+          children: [_jsx("span", {
+            className: `${baseClass}__secondary`,
+            children: selectionCountLabel
+          }), selectionCount > 0 ? _jsx(Button, {
+            buttonStyle: "primary-ghost",
+            className: `${baseClass}__clear`,
+            margin: false,
+            onClick: onClear,
+            size: "medium",
+            children: t("general:clear")
+          }) : null]
+        }) : _jsxs(React.Fragment, {
+          children: [previousPath?.length ? _jsxs(React.Fragment, {
+            children: [_jsx(HierarchyPath, {
+              Icon,
+              path: previousPath
+            }), _jsx("span", {
+              "aria-hidden": true,
+              className: `${baseClass}__arrow`,
+              children: _jsx(ReplaceIcon, {})
+            })]
+          }) : null, destinationPath?.length ? _jsx(HierarchyPath, {
+            Icon,
+            path: destinationPath
+          }) : _jsx("span", {
+            className: `${baseClass}__secondary`,
+            children: placeholderLabel
+          })]
+        })
+      }), _jsxs("div", {
+        className: `${baseClass}__actions`,
+        children: [showMoveToRoot && onMoveToRoot ? _jsx(Button, {
+          buttonStyle: "secondary",
+          disabled: isBusy,
+          margin: false,
+          onClick: onMoveToRoot,
+          size: "medium",
+          children: t("hierarchy:moveToRoot")
+        }) : null, _jsx(Button, {
+          disabled: isBusy || isConfirmDisabled,
+          margin: false,
+          onClick: onConfirm,
+          size: "medium",
+          children: confirmLabel
+        })]
+      })]
+    });
+    $[0] = Icon;
+    $[1] = confirmLabel;
+    $[2] = destinationPath;
+    $[3] = isBusy;
+    $[4] = isConfirmDisabled;
+    $[5] = isMultiSelect;
+    $[6] = onClear;
+    $[7] = onConfirm;
+    $[8] = onMoveToRoot;
+    $[9] = placeholderLabel;
+    $[10] = previousPath;
+    $[11] = selectionCount;
+    $[12] = selectionCountLabel;
+    $[13] = showMoveToRoot;
+    $[14] = t;
+    $[15] = t2;
+  } else {
+    t2 = $[15];
+  }
+  return t2;
+};
+//# 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","FolderIcon","ReplaceIcon","useTranslation","Button","Chip","DialogFooter","baseClass","HierarchyPath","Icon","path","label","map","segment","title","join","_jsx","className","icon","HierarchyModalFooter","t0","$","confirmLabel","destinationPath","isBusy","t1","isConfirmDisabled","isMultiSelect","onClear","onConfirm","onMoveToRoot","placeholderLabel","previousPath","selectionCount","selectionCountLabel","showMoveToRoot","undefined","t","t2","_jsxs","children","Fragment","buttonStyle","margin","onClick","size","length","disabled"],"sources":["../../../../../src/elements/Hierarchy/Modal/Footer/index.tsx"],"sourcesContent":["'use client'\nimport React 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\nexport type HierarchyModalFooterProps = {\n  confirmLabel: string\n  destinationPath?: PathSegment[]\n  Icon?: React.ReactNode\n  isBusy?: boolean\n  isConfirmDisabled: boolean\n  isMultiSelect: boolean\n  onClear: () => void\n  onConfirm: () => void\n  onMoveToRoot?: () => void\n  placeholderLabel: string\n  previousPath?: PathSegment[]\n  selectionCount: number\n  selectionCountLabel: string\n  showMoveToRoot?: boolean\n}\n\nconst HierarchyPath: React.FC<{\n  Icon?: React.ReactNode\n  path: PathSegment[]\n}> = ({ Icon, path }) => {\n  const label = path.map((segment) => segment.title).join(' / ')\n\n  return (\n    <Chip aria-label={label} className={`${baseClass}__path`} icon={Icon ?? <FolderIcon />}>\n      {label}\n    </Chip>\n  )\n}\n\nexport const HierarchyModalFooter: React.FC<HierarchyModalFooterProps> = ({\n  confirmLabel,\n  destinationPath,\n  Icon,\n  isBusy = false,\n  isConfirmDisabled,\n  isMultiSelect,\n  onClear,\n  onConfirm,\n  onMoveToRoot,\n  placeholderLabel,\n  previousPath,\n  selectionCount,\n  selectionCountLabel,\n  showMoveToRoot,\n}) => {\n  const { t } = useTranslation()\n\n  return (\n    <DialogFooter>\n      <div className={`${baseClass}__info`}>\n        {isMultiSelect ? (\n          <React.Fragment>\n            <span className={`${baseClass}__secondary`}>{selectionCountLabel}</span>\n            {selectionCount > 0 ? (\n              <Button\n                buttonStyle=\"primary-ghost\"\n                className={`${baseClass}__clear`}\n                margin={false}\n                onClick={onClear}\n                size=\"medium\"\n              >\n                {t('general:clear')}\n              </Button>\n            ) : null}\n          </React.Fragment>\n        ) : (\n          <React.Fragment>\n            {previousPath?.length ? (\n              <React.Fragment>\n                <HierarchyPath Icon={Icon} path={previousPath} />\n                <span aria-hidden className={`${baseClass}__arrow`}>\n                  <ReplaceIcon />\n                </span>\n              </React.Fragment>\n            ) : null}\n            {destinationPath?.length ? (\n              <HierarchyPath Icon={Icon} path={destinationPath} />\n            ) : (\n              <span className={`${baseClass}__secondary`}>{placeholderLabel}</span>\n            )}\n          </React.Fragment>\n        )}\n      </div>\n      <div className={`${baseClass}__actions`}>\n        {showMoveToRoot && onMoveToRoot ? (\n          <Button\n            buttonStyle=\"secondary\"\n            disabled={isBusy}\n            margin={false}\n            onClick={onMoveToRoot}\n            size=\"medium\"\n          >\n            {t('hierarchy:moveToRoot')}\n          </Button>\n        ) : null}\n        <Button\n          disabled={isBusy || isConfirmDisabled}\n          margin={false}\n          onClick={onConfirm}\n          size=\"medium\"\n        >\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

@@ -0,0 +1,20 @@
+import type { PathSegment } from '../ColumnBrowser/types.js';
+type FetchAncestorPathArgs = {
+    api: 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 the ancestor IDs used to expand the browser and a titled path for the footer.
+ */
+export declare function fetchAncestorPath({ api, collectionSlug, itemId, parentFieldName, serverURL, useAsTitle, }: FetchAncestorPathArgs): Promise<AncestorPathResult>;
+export {};
+//# sourceMappingURL=fetchAncestorPath.d.ts.map

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

@@ -0,0 +1 @@
+{"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,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,cAAc,EACd,MAAM,EACN,eAAe,EACf,SAAS,EACT,UAAU,GACX,EAAE,qBAAqB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAwDrD"}

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

@@ -0,0 +1,86 @@
+import { formatAdminURL } from 'payload/shared';
+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 the ancestor IDs used to expand the browser and a titled path for the footer.
+ */
+export async function fetchAncestorPath({
+  api,
+  collectionSlug,
+  itemId,
+  parentFieldName,
+  serverURL,
+  useAsTitle
+}) {
+  const queryString = qs.stringify({
+    depth: MAX_HIERARCHY_DEPTH,
+    limit: 1,
+    select: {
+      [parentFieldName]: true,
+      [useAsTitle]: true
+    },
+    where: {
+      id: {
+        equals: itemId
+      }
+    }
+  }, {
+    addQueryPrefix: true
+  });
+  const url = formatAdminURL({
+    apiRoute: api,
+    path: `/${collectionSlug}${queryString}`,
+    serverURL
+  });
+  const response = await fetch(url, {
+    credentials: 'include'
+  });
+  if (!response.ok) {
+    return {
+      ancestorIds: [],
+      path: []
+    };
+  }
+  const data = await response.json();
+  const doc = data.docs?.[0];
+  if (!doc) {
+    return {
+      ancestorIds: [],
+      path: []
+    };
+  }
+  const path = [toPathSegment({
+    id: itemId,
+    doc,
+    useAsTitle
+  })];
+  let current = doc[parentFieldName];
+  while (current !== null && current !== undefined) {
+    const parentId = typeof current === 'object' ? current.id : current;
+    if (parentId !== null && parentId !== undefined) {
+      path.unshift(toPathSegment({
+        id: parentId,
+        doc: typeof current === 'object' ? current : undefined,
+        useAsTitle
+      }));
+    }
+    current = typeof current === 'object' ? current[parentFieldName] : null;
+  }
+  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

@@ -0,0 +1 @@
+{"version":3,"file":"fetchAncestorPath.js","names":["formatAdminURL","qs","MAX_HIERARCHY_DEPTH","fetchAncestorPath","api","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  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  collectionSlug,\n  itemId,\n  parentFieldName,\n  serverURL,\n  useAsTitle,\n}: FetchAncestorPathArgs): Promise<AncestorPathResult> {\n  const queryString = qs.stringify(\n    {\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;AAkBpB,MAAMC,mBAAA,GAAsB;AAE5B;;;;AAIA,OAAO,eAAeC,kBAAkB;EACtCC,GAAG;EACHC,cAAc;EACdC,MAAM;EACNC,eAAe;EACfC,SAAS;EACTC;AAAU,CACY;EACtB,MAAMC,WAAA,GAAcT,EAAA,CAAGU,SAAS,CAC9B;IACEC,KAAA,EAAOV,mBAAA;IACPW,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,GAAMnB,cAAA,CAAe;IACzBoB,QAAA,EAAUhB,GAAA;IACViB,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

@@ -0,0 +1,32 @@
+@layer payload-default {
+  .dialog.hierarchy-modal {
+    width: min(900px, calc(100vw - var(--spacer-6)));
+    height: min(700px, calc(100vh - var(--spacer-6)));
+    max-width: calc(100vw - var(--spacer-6));
+  }
+
+  .hierarchy-modal__content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--color-bg);
+    border-radius: var(--radius-large);
+    overflow: clip;
+  }
+
+  .dialog.hierarchy-modal .dialog__body {
+    display: flex;
+    flex-direction: column;
+    padding: 0;
+  }
+
+  .hierarchy-modal__columns {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+  }
+
+  .hierarchy-modal__toggler {
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { HierarchyColumnBrowserRef } from '../ColumnBrowser/index.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: (selection: SelectionWithPath) => void;
+};
+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>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAC5D,OAAO,KAAK,EAAE,2BAA2B,EAAE,iBAAiB,EAAE,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,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,sBAkLzF,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,2BAA2B,CAsHhE,CAAA"}

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

@@ -0,0 +1,307 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import React, { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useEffectEvent } from '../../../hooks/useEffectEvent.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useHierarchy } from '../../../providers/Hierarchy/index.js';
+import { useTranslation } from '../../../providers/Translation/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 {
+    i18n,
+    t
+  } = useTranslation();
+  // NOTE: Do NOT use useModal() here - it causes re-renders when any modal state changes
+  // Use closeModal prop instead which already handles closing the modal
+  const {
+    config: {
+      routes: {
+        api
+      },
+      serverURL
+    },
+    getEntityConfig
+  } = useConfig();
+  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 loadAncestorPath = useEffectEvent(async itemId => {
+    if (itemId === undefined || itemId === null) {
+      setIsLoadingPath(false);
+      return;
+    }
+    try {
+      const {
+        ancestorIds,
+        path
+      } = await fetchAncestorPath({
+        api,
+        collectionSlug: hierarchyCollectionSlug,
+        itemId,
+        parentFieldName: parentFieldName_internal,
+        serverURL,
+        useAsTitle: useAsTitle || 'id'
+      });
+      setInitialExpandedPath(ancestorIds);
+      setPreviousPath(path);
+    } catch {
+      // Silently handle fetch errors - will just start at root
+    } finally {
+      setIsLoadingPath(false);
+    }
+  });
+  // Load ancestor path on mount
+  useEffect(() => {
+    if (hasLoadedPathRef.current) {
+      return;
+    }
+    hasLoadedPathRef.current = true;
+    void loadAncestorPath(firstSelection);
+  }, [firstSelection]);
+  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(), []);
+  const handleSave = useCallback(() => {
+    onSave({
+      closeModal,
+      selections
+    });
+  }, [onSave, selections, closeModal]);
+  const handleSelect = useCallback(({
+    id,
+    path: path_0
+  }) => {
+    setHasSelectedDestination(true);
+    setSelections(prev => {
+      return selectHierarchyItem({
+        id,
+        current: prev,
+        hasMany,
+        path: path_0
+      });
+    });
+  }, [hasMany]);
+  const handleClearAll = useCallback(() => {
+    setSelections(new Map());
+  }, []);
+  const handleCancel = useCallback(() => {
+    setSelections(createHierarchySelections({
+      hasMany,
+      initialSelections
+    }));
+    setHasSelectedDestination(false);
+    closeModal();
+  }, [closeModal, hasMany, initialSelections]);
+  // Expose selectItem for programmatic selection (e.g., after creating a new item)
+  useImperativeHandle(ref, () => ({
+    selectItem: ({
+      id: id_0,
+      path: path_1
+    }) => {
+      setHasSelectedDestination(true);
+      setSelections(prev_0 => {
+        const next = new Map(prev_0);
+        if (!hasMany) {
+          next.clear();
+        }
+        next.set(id_0, {
+          id: id_0,
+          path: path_1
+        });
+        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, {
+      onClose: handleCancel,
+      showClose: true,
+      title: title || t('general:selectValue', {
+        label: collectionLabel
+      })
+    }), /*#__PURE__*/_jsx(DialogBody, {
+      children: /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__columns`,
+        children: /*#__PURE__*/_jsx(HierarchyColumnBrowser, {
+          ancestorsWithSelections: ancestorsWithSelections,
+          baseFilter: baseFilter,
+          disabledIds: disabledIds,
+          filterByCollection: filterByCollection,
+          hierarchyCollectionSlug: hierarchyCollectionSlug,
+          initialExpandedPath: initialExpandedPath,
+          isLoadingPath: isLoadingPath,
+          onCreateNew: onCreateNew,
+          onSelect: handleSelect,
+          parentFieldName: parentFieldName,
+          ref: columnBrowserRef,
+          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
+    })]
+  });
+};
+export const HierarchyModal = props => {
+  const {
+    hierarchyCollectionSlug,
+    modalSlug,
+    parentFieldName,
+    reopenCount,
+    useAsTitle
+  } = props;
+  const {
+    refreshTree
+  } = useHierarchy();
+  // Get parentFieldName from hierarchy config
+  const {
+    getEntityConfig
+  } = useConfig();
+  const collectionConfig = getEntityConfig({
+    collectionSlug: hierarchyCollectionSlug
+  });
+  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
+  const modalContentRef = useRef(null);
+  // Key for DocumentDrawer to force remount when parentId changes
+  const [documentDrawerKey, setDocumentDrawerKey] = useState(0);
+  // Stable drawer slug for the document drawer - must not change on remount
+  const documentDrawerSlug = `${modalSlug}-create-doc`;
+  // Document drawer for creating new items - rendered OUTSIDE the modal to avoid nested modal issues
+  const [DocumentDrawer,, {
+    closeDrawer: closeDocumentDrawer,
+    openDrawer: openDocumentDrawer
+  }] = useDocumentDrawer({
+    collectionSlug: hierarchyCollectionSlug,
+    drawerSlug: documentDrawerSlug
+  });
+  const handleCreateNew = useCallback(({
+    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();
+    }, 0);
+  }, [openDocumentDrawer]);
+  // Refresh the column, select the new item, and close the document drawer after creation
+  const handleDocumentSave = useCallback(({
+    doc
+  }) => {
+    if (columnBrowserRef.current && createParentId !== undefined) {
+      void columnBrowserRef.current.refreshColumn(createParentId);
+    }
+    if (modalContentRef.current && 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, createParentPath, hierarchyCollectionSlug, refreshTree, useAsTitle]);
+  // Memoize the content - only depends on stable values
+  const modalContent = useMemo(() => /*#__PURE__*/_jsx(HierarchyModalContent, {
+    ...props,
+    columnBrowserRef: columnBrowserRef,
+    onCreateNew: handleCreateNew,
+    ref: modalContentRef
+  }, reopenCount), [handleCreateNew, props, reopenCount]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(DialogModal, {
+      className: baseClass,
+      closeOnBlur: true,
+      size: "large",
+      slug: modalSlug,
+      children: modalContent
+    }), /*#__PURE__*/_jsx(DrawerDepthProvider, {
+      children: /*#__PURE__*/_jsx(DocumentDrawer, {
+        initialData: createParentId !== null ? {
+          [parentFieldName_internal]: createParentId
+        } : undefined,
+        onSave: handleDocumentSave
+      }, documentDrawerKey)
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map