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

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

@@ -0,0 +1,15 @@
+@layer payload-default {
+  .hierarchy-button {
+    margin: 0;
+    font-weight: normal;
+
+    .btn__content {
+      gap: 0;
+    }
+  }
+
+  .hierarchy-button--read-only {
+    cursor: default;
+    color: var(--color-text-disabled);
+  }
+}

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import './index.css';
+export type HierarchyButtonClientProps = {
+    fieldName: string;
+    hasMany?: boolean;
+    hierarchyCollectionSlug: string;
+    Icon?: React.ReactNode;
+    readOnly?: boolean;
+    SmallIcon?: React.ReactNode;
+};
+export declare const HierarchyButtonClient: React.FC<HierarchyButtonClientProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/DocHeaderButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAUxE,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,0BAA0B,GAAG;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC5B,CAAA;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAiItE,CAAA"}

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

@@ -0,0 +1,129 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { formatAdminURL } from 'payload/shared';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { useForm, useFormFields } from '../../../forms/Form/context.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Button } from '../../Button/index.js';
+import { useHierarchyDrawer } from '../Drawer/useHierarchyDrawer.js';
+import './index.css';
+const baseClass = 'hierarchy-button';
+export const HierarchyButtonClient = ({
+  fieldName,
+  hasMany = false,
+  hierarchyCollectionSlug,
+  Icon,
+  readOnly: readOnlyFromProps,
+  SmallIcon
+}) => {
+  const {
+    t
+  } = useTranslation();
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
+  const {
+    collectionSlug: documentCollectionSlug
+  } = useDocumentInfo();
+  const {
+    disabled: formDisabled,
+    setModified
+  } = useForm();
+  const readOnly = readOnlyFromProps || formDisabled;
+  const dispatchField = useFormFields(([_, dispatch]) => dispatch);
+  const currentFieldValue = useFormFields(([fields]) => fields && fields?.[fieldName] || null);
+  const currentId = currentFieldValue?.value;
+  const [displayName, setDisplayName] = useState('');
+  const [isLoading, setIsLoading] = useState(true);
+  const collectionConfig = getEntityConfig({
+    collectionSlug: hierarchyCollectionSlug
+  });
+  const useAsTitle = collectionConfig?.admin?.useAsTitle || 'name';
+  const isHierarchyCollection = documentCollectionSlug === hierarchyCollectionSlug;
+  // When in hierarchy collection, let the drawer use allowedCollections from context
+  // When in other collections, filter by that collection's slug
+  // Memoize to prevent new array references on every render
+  const filterByCollection = useMemo(() => isHierarchyCollection || !documentCollectionSlug ? undefined : [documentCollectionSlug], [isHierarchyCollection, documentCollectionSlug]);
+  const [HierarchyDrawer,, {
+    openDrawer
+  }] = useHierarchyDrawer({
+    filterByCollection,
+    hierarchyCollectionSlug,
+    Icon
+  });
+  // Fetch item name when currentId changes
+  useEffect(() => {
+    const fetchItemName = async () => {
+      if (currentId && (typeof currentId === 'string' || typeof currentId === 'number')) {
+        setIsLoading(true);
+        try {
+          const response = await fetch(formatAdminURL({
+            apiRoute: config.routes.api,
+            path: `/${hierarchyCollectionSlug}/${currentId}`,
+            serverURL: config.serverURL
+          }), {
+            credentials: 'include'
+          });
+          if (response.ok) {
+            const itemData = await response.json();
+            const title = itemData?.[useAsTitle] || itemData?.name || itemData?.id;
+            setDisplayName(String(title));
+          } else {
+            setDisplayName(t('general:none'));
+          }
+        } catch {
+          setDisplayName(t('general:none'));
+        } finally {
+          setIsLoading(false);
+        }
+      } else {
+        setDisplayName(t('general:none'));
+        setIsLoading(false);
+      }
+    };
+    void fetchItemName();
+  }, [currentId, hierarchyCollectionSlug, config.routes.api, config.serverURL, useAsTitle, t]);
+  const handleDrawerSave = useCallback(({
+    closeDrawer,
+    selections
+  }) => {
+    const ids = Array.from(selections.keys());
+    const newValue = hasMany ? ids : ids[0] ?? null;
+    if (currentFieldValue?.value !== newValue) {
+      dispatchField({
+        type: 'UPDATE',
+        path: fieldName,
+        value: newValue
+      });
+      setModified(true);
+    }
+    closeDrawer();
+  }, [currentFieldValue?.value, dispatchField, fieldName, hasMany, setModified]);
+  const handleClick = useCallback(() => {
+    if (!readOnly) {
+      openDrawer();
+    }
+  }, [openDrawer, readOnly]);
+  const label = isLoading ? `${t('general:loading')}...` : displayName;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Button, {
+      buttonStyle: "secondary",
+      className: [baseClass, readOnly && `${baseClass}--read-only`].filter(Boolean).join(' '),
+      disabled: readOnly,
+      icon: SmallIcon ?? Icon,
+      iconPosition: "left",
+      margin: false,
+      onClick: handleClick,
+      children: label
+    }), /*#__PURE__*/_jsx(HierarchyDrawer, {
+      hasMany: hasMany,
+      initialSelections: currentId ? [currentId] : undefined,
+      onSave: handleDrawerSave
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

package/dist/elements/Hierarchy/DocHeaderButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["formatAdminURL","React","useCallback","useEffect","useMemo","useState","useForm","useFormFields","useConfig","useDocumentInfo","useTranslation","Button","useHierarchyDrawer","baseClass","HierarchyButtonClient","fieldName","hasMany","hierarchyCollectionSlug","Icon","readOnly","readOnlyFromProps","SmallIcon","t","config","getEntityConfig","collectionSlug","documentCollectionSlug","disabled","formDisabled","setModified","dispatchField","_","dispatch","currentFieldValue","fields","currentId","value","displayName","setDisplayName","isLoading","setIsLoading","collectionConfig","useAsTitle","admin","isHierarchyCollection","filterByCollection","undefined","HierarchyDrawer","openDrawer","fetchItemName","response","fetch","apiRoute","routes","api","path","serverURL","credentials","ok","itemData","json","title","name","id","String","handleDrawerSave","closeDrawer","selections","ids","Array","from","keys","newValue","type","handleClick","label","_jsxs","_Fragment","_jsx","buttonStyle","className","filter","Boolean","join","icon","iconPosition","margin","onClick","initialSelections","onSave"],"sources":["../../../../src/elements/Hierarchy/DocHeaderButton/index.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback, useEffect, useMemo, useState } from 'react'\n\nimport type { SelectionWithPath } from '../Drawer/types.js'\n\nimport { useForm, useFormFields } from '../../../forms/Form/context.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useDocumentInfo } from '../../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { useHierarchyDrawer } from '../Drawer/useHierarchyDrawer.js'\nimport './index.css'\n\nconst baseClass = 'hierarchy-button'\n\nexport type HierarchyButtonClientProps = {\n  fieldName: string\n  hasMany?: boolean\n  hierarchyCollectionSlug: string\n  Icon?: React.ReactNode\n  readOnly?: boolean\n  SmallIcon?: React.ReactNode\n}\n\nexport const HierarchyButtonClient: React.FC<HierarchyButtonClientProps> = ({\n  fieldName,\n  hasMany = false,\n  hierarchyCollectionSlug,\n  Icon,\n  readOnly: readOnlyFromProps,\n  SmallIcon,\n}) => {\n  const { t } = useTranslation()\n  const { config, getEntityConfig } = useConfig()\n  const { collectionSlug: documentCollectionSlug } = useDocumentInfo()\n  const { disabled: formDisabled, setModified } = useForm()\n  const readOnly = readOnlyFromProps || formDisabled\n  const dispatchField = useFormFields(([_, dispatch]) => dispatch)\n\n  const currentFieldValue = useFormFields(([fields]) => (fields && fields?.[fieldName]) || null)\n  const currentId = currentFieldValue?.value as null | number | string\n\n  const [displayName, setDisplayName] = useState<string>('')\n  const [isLoading, setIsLoading] = useState(true)\n\n  const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n  const useAsTitle = collectionConfig?.admin?.useAsTitle || 'name'\n\n  const isHierarchyCollection = documentCollectionSlug === hierarchyCollectionSlug\n\n  // When in hierarchy collection, let the drawer use allowedCollections from context\n  // When in other collections, filter by that collection's slug\n  // Memoize to prevent new array references on every render\n  const filterByCollection = useMemo(\n    () => (isHierarchyCollection || !documentCollectionSlug ? undefined : [documentCollectionSlug]),\n    [isHierarchyCollection, documentCollectionSlug],\n  )\n\n  const [HierarchyDrawer, , { openDrawer }] = useHierarchyDrawer({\n    filterByCollection,\n    hierarchyCollectionSlug,\n    Icon,\n  })\n\n  // Fetch item name when currentId changes\n  useEffect(() => {\n    const fetchItemName = async () => {\n      if (currentId && (typeof currentId === 'string' || typeof currentId === 'number')) {\n        setIsLoading(true)\n        try {\n          const response = await fetch(\n            formatAdminURL({\n              apiRoute: config.routes.api,\n              path: `/${hierarchyCollectionSlug}/${currentId}`,\n              serverURL: config.serverURL,\n            }),\n            { credentials: 'include' },\n          )\n\n          if (response.ok) {\n            const itemData = await response.json()\n            const title = itemData?.[useAsTitle] || itemData?.name || itemData?.id\n\n            setDisplayName(String(title))\n          } else {\n            setDisplayName(t('general:none'))\n          }\n        } catch {\n          setDisplayName(t('general:none'))\n        } finally {\n          setIsLoading(false)\n        }\n      } else {\n        setDisplayName(t('general:none'))\n        setIsLoading(false)\n      }\n    }\n\n    void fetchItemName()\n  }, [currentId, hierarchyCollectionSlug, config.routes.api, config.serverURL, useAsTitle, t])\n\n  const handleDrawerSave = useCallback(\n    ({\n      closeDrawer,\n      selections,\n    }: {\n      closeDrawer: () => void\n      selections: Map<number | string, SelectionWithPath>\n    }) => {\n      const ids = Array.from(selections.keys())\n      const newValue = hasMany ? ids : (ids[0] ?? null)\n\n      if (currentFieldValue?.value !== newValue) {\n        dispatchField({\n          type: 'UPDATE',\n          path: fieldName,\n          value: newValue,\n        })\n        setModified(true)\n      }\n      closeDrawer()\n    },\n    [currentFieldValue?.value, dispatchField, fieldName, hasMany, setModified],\n  )\n\n  const handleClick = useCallback(() => {\n    if (!readOnly) {\n      openDrawer()\n    }\n  }, [openDrawer, readOnly])\n\n  const label = isLoading ? `${t('general:loading')}...` : displayName\n\n  return (\n    <>\n      <Button\n        buttonStyle=\"secondary\"\n        className={[baseClass, readOnly && `${baseClass}--read-only`].filter(Boolean).join(' ')}\n        disabled={readOnly}\n        icon={SmallIcon ?? Icon}\n        iconPosition=\"left\"\n        margin={false}\n        onClick={handleClick}\n      >\n        {label}\n      </Button>\n      <HierarchyDrawer\n        hasMany={hasMany}\n        initialSelections={currentId ? [currentId] : undefined}\n        onSave={handleDrawerSave}\n      />\n    </>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Hierarchy/DocHeaderButton/index.server.d.ts

@@ -0,0 +1,10 @@
+import type { Payload } from 'payload';
+import React from 'react';
+export type HierarchyButtonServerProps = {
+    fieldName: string;
+    hasMany?: boolean;
+    hierarchyCollectionSlug: string;
+    payload: Payload;
+};
+export declare const HierarchyButton: React.FC<HierarchyButtonServerProps>;
+//# sourceMappingURL=index.server.d.ts.map

package/dist/elements/Hierarchy/DocHeaderButton/index.server.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.server.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/DocHeaderButton/index.server.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,MAAM,MAAM,0BAA0B,GAAG;IACvC,SAAS,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,uBAAuB,EAAE,MAAM,CAAA;IAC/B,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,0BAA0B,CAwDhE,CAAA"}

package/dist/elements/Hierarchy/DocHeaderButton/index.server.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { FolderIcon } from '../../../icons/Folder/index.js';
+import { RenderServerComponent } from '../../RenderServerComponent/index.js';
+// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary
+import { HierarchyButtonClient } from '../../../exports/client/index.js';
+export const HierarchyButton = ({
+  fieldName,
+  hasMany,
+  hierarchyCollectionSlug,
+  payload
+}) => {
+  const hierarchyCollectionConfig = payload.config.collections.find(c => c.slug === hierarchyCollectionSlug);
+  const hierarchyConfig = hierarchyCollectionConfig?.hierarchy && typeof hierarchyCollectionConfig.hierarchy === 'object' ? hierarchyCollectionConfig.hierarchy : undefined;
+  const IconComponent = hierarchyConfig?.admin.components.Icon;
+  const SmallIconComponent = hierarchyConfig?.admin.components.SmallIcon;
+  // Render the custom icon if provided, otherwise use FolderIcon directly
+  // Important: Must render the icon here on server to avoid hydration mismatch
+  // For default FolderIcon path, render directly to avoid import map requirement
+  const isDefaultFolderIcon = !IconComponent || IconComponent === '@payloadcms/ui#FolderIcon';
+  const renderedIcon = isDefaultFolderIcon ? /*#__PURE__*/_jsx(FolderIcon, {
+    size: 16
+  }) : RenderServerComponent({
+    Component: IconComponent,
+    importMap: payload.importMap,
+    key: `hierarchy-button-icon-${hierarchyCollectionSlug}`
+  });
+  // Render the small icon for compact display (pill button)
+  // Reuse the full icon if SmallIcon is the same component
+  const isDefaultSmallIcon = !SmallIconComponent || SmallIconComponent === '@payloadcms/ui#FolderIcon';
+  const renderedSmallIcon = SmallIconComponent === IconComponent ? renderedIcon : isDefaultSmallIcon ? /*#__PURE__*/_jsx(FolderIcon, {}) : RenderServerComponent({
+    Component: SmallIconComponent,
+    importMap: payload.importMap,
+    key: `hierarchy-button-small-icon-${hierarchyCollectionSlug}`
+  });
+  return /*#__PURE__*/_jsx(HierarchyButtonClient, {
+    fieldName: fieldName,
+    hasMany: hasMany,
+    hierarchyCollectionSlug: hierarchyCollectionSlug,
+    Icon: renderedIcon,
+    SmallIcon: renderedSmallIcon
+  });
+};
+//# sourceMappingURL=index.server.js.map

package/dist/elements/Hierarchy/DocHeaderButton/index.server.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.server.js","names":["React","FolderIcon","RenderServerComponent","HierarchyButtonClient","HierarchyButton","fieldName","hasMany","hierarchyCollectionSlug","payload","hierarchyCollectionConfig","config","collections","find","c","slug","hierarchyConfig","hierarchy","undefined","IconComponent","admin","components","Icon","SmallIconComponent","SmallIcon","isDefaultFolderIcon","renderedIcon","_jsx","size","Component","importMap","key","isDefaultSmallIcon","renderedSmallIcon"],"sources":["../../../../src/elements/Hierarchy/DocHeaderButton/index.server.tsx"],"sourcesContent":["import type { Payload } from 'payload'\n\nimport React from 'react'\n\nimport { FolderIcon } from '../../../icons/Folder/index.js'\nimport { RenderServerComponent } from '../../RenderServerComponent/index.js'\n// eslint-disable-next-line payload/no-imports-from-exports-dir -- Server component must reference exports dir for proper client boundary\nimport { HierarchyButtonClient } from '../../../exports/client/index.js'\n\nexport type HierarchyButtonServerProps = {\n  fieldName: string\n  hasMany?: boolean\n  hierarchyCollectionSlug: string\n  payload: Payload\n}\n\nexport const HierarchyButton: React.FC<HierarchyButtonServerProps> = ({\n  fieldName,\n  hasMany,\n  hierarchyCollectionSlug,\n  payload,\n}) => {\n  const hierarchyCollectionConfig = payload.config.collections.find(\n    (c) => c.slug === hierarchyCollectionSlug,\n  )\n  const hierarchyConfig =\n    hierarchyCollectionConfig?.hierarchy && typeof hierarchyCollectionConfig.hierarchy === 'object'\n      ? hierarchyCollectionConfig.hierarchy\n      : undefined\n  const IconComponent = hierarchyConfig?.admin.components.Icon\n  const SmallIconComponent = hierarchyConfig?.admin.components.SmallIcon\n\n  // Render the custom icon if provided, otherwise use FolderIcon directly\n  // Important: Must render the icon here on server to avoid hydration mismatch\n  // For default FolderIcon path, render directly to avoid import map requirement\n  const isDefaultFolderIcon = !IconComponent || IconComponent === '@payloadcms/ui#FolderIcon'\n  const renderedIcon = isDefaultFolderIcon ? (\n    <FolderIcon size={16} />\n  ) : (\n    RenderServerComponent({\n      Component: IconComponent,\n      importMap: payload.importMap,\n      key: `hierarchy-button-icon-${hierarchyCollectionSlug}`,\n    })\n  )\n\n  // Render the small icon for compact display (pill button)\n  // Reuse the full icon if SmallIcon is the same component\n  const isDefaultSmallIcon =\n    !SmallIconComponent || SmallIconComponent === '@payloadcms/ui#FolderIcon'\n  const renderedSmallIcon =\n    SmallIconComponent === IconComponent ? (\n      renderedIcon\n    ) : isDefaultSmallIcon ? (\n      <FolderIcon />\n    ) : (\n      RenderServerComponent({\n        Component: SmallIconComponent,\n        importMap: payload.importMap,\n        key: `hierarchy-button-small-icon-${hierarchyCollectionSlug}`,\n      })\n    )\n\n  return (\n    <HierarchyButtonClient\n      fieldName={fieldName}\n      hasMany={hasMany}\n      hierarchyCollectionSlug={hierarchyCollectionSlug}\n      Icon={renderedIcon}\n      SmallIcon={renderedSmallIcon}\n    />\n  )\n}\n"],"mappings":";AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,UAAU,QAAQ;AAC3B,SAASC,qBAAqB,QAAQ;AACtC;AACA,SAASC,qBAAqB,QAAQ;AAStC,OAAO,MAAMC,eAAA,GAAwDA,CAAC;EACpEC,SAAS;EACTC,OAAO;EACPC,uBAAuB;EACvBC;AAAO,CACR;EACC,MAAMC,yBAAA,GAA4BD,OAAA,CAAQE,MAAM,CAACC,WAAW,CAACC,IAAI,CAC9DC,CAAA,IAAMA,CAAA,CAAEC,IAAI,KAAKP,uBAAA;EAEpB,MAAMQ,eAAA,GACJN,yBAAA,EAA2BO,SAAA,IAAa,OAAOP,yBAAA,CAA0BO,SAAS,KAAK,WACnFP,yBAAA,CAA0BO,SAAS,GACnCC,SAAA;EACN,MAAMC,aAAA,GAAgBH,eAAA,EAAiBI,KAAA,CAAMC,UAAA,CAAWC,IAAA;EACxD,MAAMC,kBAAA,GAAqBP,eAAA,EAAiBI,KAAA,CAAMC,UAAA,CAAWG,SAAA;EAE7D;EACA;EACA;EACA,MAAMC,mBAAA,GAAsB,CAACN,aAAA,IAAiBA,aAAA,KAAkB;EAChE,MAAMO,YAAA,GAAeD,mBAAA,gBACnBE,IAAA,CAACzB,UAAA;IAAW0B,IAAA,EAAM;OAElBzB,qBAAA,CAAsB;IACpB0B,SAAA,EAAWV,aAAA;IACXW,SAAA,EAAWrB,OAAA,CAAQqB,SAAS;IAC5BC,GAAA,EAAK,yBAAyBvB,uBAAA;EAChC;EAGF;EACA;EACA,MAAMwB,kBAAA,GACJ,CAACT,kBAAA,IAAsBA,kBAAA,KAAuB;EAChD,MAAMU,iBAAA,GACJV,kBAAA,KAAuBJ,aAAA,GACrBO,YAAA,GACEM,kBAAA,gBACFL,IAAA,CAACzB,UAAA,QAEDC,qBAAA,CAAsB;IACpB0B,SAAA,EAAWN,kBAAA;IACXO,SAAA,EAAWrB,OAAA,CAAQqB,SAAS;IAC5BC,GAAA,EAAK,+BAA+BvB,uBAAA;EACtC;EAGJ,oBACEmB,IAAA,CAACvB,qBAAA;IACCE,SAAA,EAAWA,SAAA;IACXC,OAAA,EAASA,OAAA;IACTC,uBAAA,EAAyBA,uBAAA;IACzBc,IAAA,EAAMI,YAAA;IACNF,SAAA,EAAWS;;AAGjB","ignoreList":[]}

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

@@ -0,0 +1,15 @@
+type FetchAncestorPathArgs = {
+    api: string;
+    collectionSlug: string;
+    itemId: number | string;
+    parentFieldName: string;
+    serverURL: string;
+};
+/**
+ * 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]
+ */
+export declare function fetchAncestorPath({ api, collectionSlug, itemId, parentFieldName, serverURL, }: FetchAncestorPathArgs): Promise<(number | string)[]>;
+export {};
+//# sourceMappingURL=fetchAncestorPath.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fetchAncestorPath.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Drawer/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"}

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

@@ -0,0 +1,60 @@
+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 array of ancestor IDs from root to item's parent.
+ * Example: item at level 3 returns [grandparentId, parentId]
+ */
+export async function fetchAncestorPath({
+  api,
+  collectionSlug,
+  itemId,
+  parentFieldName,
+  serverURL
+}) {
+  const queryString = qs.stringify({
+    depth: MAX_HIERARCHY_DEPTH,
+    limit: 1,
+    select: {
+      [parentFieldName]: 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 [];
+  }
+  const data = await response.json();
+  const doc = data.docs?.[0];
+  if (!doc) {
+    return [];
+  }
+  // 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);
+    }
+    // Move to next parent (only if current is populated object)
+    current = typeof current === 'object' ? current[parentFieldName] : null;
+  }
+  return path;
+}
+//# sourceMappingURL=fetchAncestorPath.js.map

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

@@ -0,0 +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/Drawer/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":[]}

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

@@ -0,0 +1,108 @@
+@layer payload-default {
+  /* Override drawer to be a centered modal instead of side panel */
+  .hierarchy-drawer.drawer {
+    justify-content: center;
+    align-items: center;
+  }
+
+  .hierarchy-drawer .drawer__blur-bg {
+    background: var(--color-modalbackdrop);
+  }
+
+  .hierarchy-drawer .drawer__content {
+    width: min(900px, calc(100vw - var(--spacer-6)));
+    height: min(700px, calc(100vh - var(--spacer-6)));
+    border-radius: var(--radius-large);
+    transform: none;
+    box-shadow: var(--elevation-500-dialog);
+  }
+
+  .hierarchy-drawer .drawer__close {
+    position: absolute;
+    inset: 0;
+    background: transparent;
+  }
+
+  .hierarchy-drawer__content {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--color-bg);
+    border-radius: var(--radius-large);
+    overflow: clip;
+
+    .drawer-action-header {
+      padding: var(--spacer-2) var(--spacer-3);
+    }
+  }
+
+  .hierarchy-drawer__subheader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--spacer-2) var(--gutter-h);
+    border-bottom: 1px solid var(--color-border);
+    flex-shrink: 0;
+  }
+
+  .hierarchy-drawer__subheader-left {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    font-weight: 500;
+    color: var(--color-text);
+
+    svg {
+      width: var(--spacer-3);
+      height: var(--spacer-3);
+    }
+  }
+
+  .hierarchy-drawer__subheader-right {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
+  .hierarchy-drawer__selection-info {
+    color: var(--color-text-secondary);
+  }
+
+  .hierarchy-drawer__clear-all {
+    color: var(--color-text-secondary);
+    text-decoration: underline;
+    cursor: pointer;
+    background: none;
+    border: none;
+    padding: 0;
+    font-size: inherit;
+
+    &:hover {
+      color: var(--color-text);
+    }
+  }
+
+  .hierarchy-drawer__move-to-root {
+    background: none;
+    border: none;
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    font-size: inherit;
+    padding: 0;
+    text-decoration: underline;
+
+    &:hover {
+      color: var(--color-text);
+    }
+  }
+
+  .hierarchy-drawer__columns {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+  }
+
+  .hierarchy-drawer__toggler {
+    cursor: pointer;
+  }
+}

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { HierarchyColumnBrowserRef } from '../ColumnBrowser/index.js';
+import type { HierarchyDrawerInternalProps } from './types.js';
+import './index.css';
+export declare const baseClass = "hierarchy-drawer";
+type HierarchyDrawerContentProps = {
+    columnBrowserRef?: React.RefObject<HierarchyColumnBrowserRef | null>;
+    onCreateNew?: (params: {
+        parentId: null | number | string;
+    }) => void;
+} & HierarchyDrawerInternalProps;
+export type HierarchyDrawerContentRef = {
+    selectItem: (id: number | string) => void;
+};
+export declare const HierarchyDrawerContent: ({ baseFilter, closeDrawer, columnBrowserRef, disabledIds, filterByCollection, hasMany, hierarchyCollectionSlug, Icon, initialSelections, onCreateNew, onMoveToRoot, onSave, parentFieldName, ref, showMoveToRoot, useAsTitle, }: {
+    ref?: React.RefObject<HierarchyDrawerContentRef | null>;
+} & HierarchyDrawerContentProps) => React.JSX.Element;
+export declare const HierarchyDrawer: React.FC<HierarchyDrawerInternalProps>;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Drawer/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAA;AAEd,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AAC1E,OAAO,KAAK,EAAE,4BAA4B,EAAqB,MAAM,YAAY,CAAA;AAYjF,OAAO,aAAa,CAAA;AAEpB,eAAO,MAAM,SAAS,qBAAqB,CAAA;AAE3C,KAAK,2BAA2B,GAAG;IACjC,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,4BAA4B,CAAA;AAEhC,MAAM,MAAM,yBAAyB,GAAG;IACtC,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;CAC1C,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAmC,iOAiBnE;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,yBAAyB,GAAG,IAAI,CAAC,CAAA;CAAE,GAAG,2BAA2B,sBAwL3F,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,4BAA4B,CA8FlE,CAAA"}