@payloadcms/ui 3.80.0-internal.37a8509 → 3.80.0-internal.52ab774

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

@@ -0,0 +1,148 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { useModal } from '@faceless-ui/modal';
+import React, { useCallback, useId, useMemo, useRef } from 'react';
+export * from './types.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useEditDepth } from '../../../providers/EditDepth/index.js';
+import { useHierarchy } from '../../../providers/Hierarchy/index.js';
+import { DrawerToggler } from '../../Drawer/index.js';
+import { baseClass, HierarchyDrawer } from './index.js';
+export const formatHierarchyDrawerSlug = ({
+  depth,
+  uuid
+}) => `hierarchy-drawer_${depth}_${uuid}`;
+export const HierarchyDrawerToggler = ({
+  children,
+  className,
+  disabled,
+  drawerSlug,
+  onClick,
+  ...rest
+}) => {
+  return /*#__PURE__*/_jsx(DrawerToggler, {
+    className: [className, `${baseClass}__toggler`].filter(Boolean).join(' '),
+    disabled: disabled,
+    onClick: onClick,
+    slug: drawerSlug,
+    ...rest,
+    children: children
+  });
+};
+/**
+ * Hook for using a hierarchy drawer for selecting hierarchy items.
+ *
+ * @example
+ * ```tsx
+ * const [HierarchyDrawer, HierarchyDrawerToggler, { closeDrawer, openDrawer }] = useHierarchyDrawer({
+ *   collectionSlug: 'categories',
+ * })
+ *
+ * return (
+ *   <>
+ *     <HierarchyDrawer
+ *       onSave={(selections) => console.log(selections)}
+ *       hasMany={true}
+ *     />
+ *     <HierarchyDrawerToggler>Select Categories</HierarchyDrawerToggler>
+ *   </>
+ * )
+ * ```
+ */
+export const useHierarchyDrawer = ({
+  disabledIds,
+  filterByCollection: filterByCollectionProp,
+  hierarchyCollectionSlug,
+  Icon
+}) => {
+  const {
+    getEntityConfig
+  } = useConfig();
+  const {
+    allowedCollections,
+    baseFilter
+  } = useHierarchy();
+  const collectionConfig = getEntityConfig({
+    collectionSlug: hierarchyCollectionSlug
+  });
+  const useAsTitle = collectionConfig?.admin?.useAsTitle;
+  const hierarchyConfig = collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object' ? collectionConfig.hierarchy : undefined;
+  const parentFieldName = hierarchyConfig?.parentFieldName;
+  // Use explicit prop if provided, otherwise fall back to allowedCollections from context
+  // - allowedCollections is null/undefined: no filtering (undefined)
+  // - allowedCollections is []: folder accepts everything, show only unrestricted destinations ([])
+  // - allowedCollections has values: show folders accepting those types
+  // Memoize to prevent new array references on every render
+  const filterByCollection = useMemo(() => {
+    if (filterByCollectionProp !== undefined) {
+      return filterByCollectionProp;
+    }
+    return allowedCollections !== null ? allowedCollections.map(c => c.slug) : undefined;
+  }, [filterByCollectionProp, allowedCollections]);
+  const drawerDepth = useEditDepth();
+  const uuid = useId();
+  const {
+    closeModal,
+    openModal,
+    toggleModal
+  } = useModal();
+  const drawerSlug = formatHierarchyDrawerSlug({
+    depth: drawerDepth,
+    uuid
+  });
+  // Store modal functions in refs to ensure stable callbacks
+  // This prevents re-renders when other modals (like DocumentDrawer) change state
+  const closeModalRef = useRef(closeModal);
+  const openModalRef = useRef(openModal);
+  const toggleModalRef = useRef(toggleModal);
+  closeModalRef.current = closeModal;
+  openModalRef.current = openModal;
+  toggleModalRef.current = toggleModal;
+  // Stable callbacks using refs - these will NEVER change
+  const toggleDrawer = useCallback(() => {
+    toggleModalRef.current(drawerSlug);
+  }, [drawerSlug]);
+  const closeDrawer = useCallback(() => {
+    closeModalRef.current(drawerSlug);
+  }, [drawerSlug]);
+  const openDrawer = useCallback(() => {
+    openModalRef.current(drawerSlug);
+  }, [drawerSlug]);
+  const MemoizedDrawer = useMemo(() => {
+    const DrawerComponent = props => /*#__PURE__*/_createElement(HierarchyDrawer, {
+      ...props,
+      baseFilter: baseFilter,
+      closeDrawer: closeDrawer,
+      disabledIds: disabledIds,
+      drawerSlug: drawerSlug,
+      filterByCollection: filterByCollection,
+      hierarchyCollectionSlug: hierarchyCollectionSlug,
+      Icon: Icon,
+      key: drawerSlug,
+      parentFieldName: parentFieldName,
+      useAsTitle: useAsTitle
+    });
+    return DrawerComponent;
+  }, [baseFilter, drawerSlug, closeDrawer, disabledIds, filterByCollection, Icon, parentFieldName, hierarchyCollectionSlug, useAsTitle]);
+  const MemoizedDrawerToggler = useMemo(() => {
+    const TogglerComponent = props_0 => /*#__PURE__*/_jsx(HierarchyDrawerToggler, {
+      ...props_0,
+      drawerSlug: drawerSlug
+    });
+    return TogglerComponent;
+  }, [drawerSlug]);
+  const MemoizedDrawerState = useMemo(() => ({
+    closeDrawer,
+    drawerDepth,
+    drawerSlug,
+    // Note: Not tracking isDrawerOpen to prevent re-renders when other modals change state
+    // Consumers needing this can use useModal() directly
+    isDrawerOpen: false,
+    openDrawer,
+    toggleDrawer
+  }), [drawerDepth, drawerSlug, toggleDrawer, closeDrawer, openDrawer]);
+  return [MemoizedDrawer, MemoizedDrawerToggler, MemoizedDrawerState];
+};
+//# sourceMappingURL=useHierarchyDrawer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useHierarchyDrawer.js","names":["useModal","React","useCallback","useId","useMemo","useRef","useConfig","useEditDepth","useHierarchy","DrawerToggler","baseClass","HierarchyDrawer","formatHierarchyDrawerSlug","depth","uuid","HierarchyDrawerToggler","children","className","disabled","drawerSlug","onClick","rest","_jsx","filter","Boolean","join","slug","useHierarchyDrawer","disabledIds","filterByCollection","filterByCollectionProp","hierarchyCollectionSlug","Icon","getEntityConfig","allowedCollections","baseFilter","collectionConfig","collectionSlug","useAsTitle","admin","hierarchyConfig","hierarchy","undefined","parentFieldName","map","c","drawerDepth","closeModal","openModal","toggleModal","closeModalRef","openModalRef","toggleModalRef","current","toggleDrawer","closeDrawer","openDrawer","MemoizedDrawer","DrawerComponent","props","_createElement","key","MemoizedDrawerToggler","TogglerComponent","MemoizedDrawerState","isDrawerOpen"],"sources":["../../../../src/elements/Hierarchy/Drawer/useHierarchyDrawer.tsx"],"sourcesContent":["'use client'\nimport { useModal } from '@faceless-ui/modal'\nimport React, { useCallback, useId, useMemo, useRef } from 'react'\n\nimport type {\n  HierarchyDrawerProps,\n  HierarchyDrawerTogglerProps,\n  UseHierarchyDrawer,\n} from './types.js'\n\nexport * from './types.js'\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useEditDepth } from '../../../providers/EditDepth/index.js'\nimport { useHierarchy } from '../../../providers/Hierarchy/index.js'\nimport { DrawerToggler } from '../../Drawer/index.js'\nimport { baseClass, HierarchyDrawer } from './index.js'\n\nexport const formatHierarchyDrawerSlug = ({\n  depth,\n  uuid,\n}: {\n  depth: number\n  uuid: string\n}): string => `hierarchy-drawer_${depth}_${uuid}`\n\nexport const HierarchyDrawerToggler: React.FC<HierarchyDrawerTogglerProps> = ({\n  children,\n  className,\n  disabled,\n  drawerSlug,\n  onClick,\n  ...rest\n}) => {\n  return (\n    <DrawerToggler\n      className={[className, `${baseClass}__toggler`].filter(Boolean).join(' ')}\n      disabled={disabled}\n      onClick={onClick}\n      slug={drawerSlug}\n      {...rest}\n    >\n      {children}\n    </DrawerToggler>\n  )\n}\n\n/**\n * Hook for using a hierarchy drawer for selecting hierarchy items.\n *\n * @example\n * ```tsx\n * const [HierarchyDrawer, HierarchyDrawerToggler, { closeDrawer, openDrawer }] = useHierarchyDrawer({\n *   collectionSlug: 'categories',\n * })\n *\n * return (\n *   <>\n *     <HierarchyDrawer\n *       onSave={(selections) => console.log(selections)}\n *       hasMany={true}\n *     />\n *     <HierarchyDrawerToggler>Select Categories</HierarchyDrawerToggler>\n *   </>\n * )\n * ```\n */\nexport const useHierarchyDrawer: UseHierarchyDrawer = ({\n  disabledIds,\n  filterByCollection: filterByCollectionProp,\n  hierarchyCollectionSlug,\n  Icon,\n}) => {\n  const { getEntityConfig } = useConfig()\n  const { allowedCollections, baseFilter } = useHierarchy()\n  const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n\n  const useAsTitle = collectionConfig?.admin?.useAsTitle\n  const hierarchyConfig =\n    collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n      ? collectionConfig.hierarchy\n      : undefined\n  const parentFieldName = hierarchyConfig?.parentFieldName\n\n  // Use explicit prop if provided, otherwise fall back to allowedCollections from context\n  // - allowedCollections is null/undefined: no filtering (undefined)\n  // - allowedCollections is []: folder accepts everything, show only unrestricted destinations ([])\n  // - allowedCollections has values: show folders accepting those types\n  // Memoize to prevent new array references on every render\n  const filterByCollection = useMemo(() => {\n    if (filterByCollectionProp !== undefined) {\n      return filterByCollectionProp\n    }\n    return allowedCollections !== null ? allowedCollections.map((c) => c.slug) : undefined\n  }, [filterByCollectionProp, allowedCollections])\n\n  const drawerDepth = useEditDepth()\n  const uuid = useId()\n  const { closeModal, openModal, toggleModal } = useModal()\n\n  const drawerSlug = formatHierarchyDrawerSlug({\n    depth: drawerDepth,\n    uuid,\n  })\n\n  // Store modal functions in refs to ensure stable callbacks\n  // This prevents re-renders when other modals (like DocumentDrawer) change state\n  const closeModalRef = useRef(closeModal)\n  const openModalRef = useRef(openModal)\n  const toggleModalRef = useRef(toggleModal)\n  closeModalRef.current = closeModal\n  openModalRef.current = openModal\n  toggleModalRef.current = toggleModal\n\n  // Stable callbacks using refs - these will NEVER change\n  const toggleDrawer = useCallback(() => {\n    toggleModalRef.current(drawerSlug)\n  }, [drawerSlug])\n\n  const closeDrawer = useCallback(() => {\n    closeModalRef.current(drawerSlug)\n  }, [drawerSlug])\n\n  const openDrawer = useCallback(() => {\n    openModalRef.current(drawerSlug)\n  }, [drawerSlug])\n\n  const MemoizedDrawer = useMemo(() => {\n    const DrawerComponent: React.FC<HierarchyDrawerProps> = (props) => (\n      <HierarchyDrawer\n        {...props}\n        baseFilter={baseFilter}\n        closeDrawer={closeDrawer}\n        disabledIds={disabledIds}\n        drawerSlug={drawerSlug}\n        filterByCollection={filterByCollection}\n        hierarchyCollectionSlug={hierarchyCollectionSlug}\n        Icon={Icon}\n        key={drawerSlug}\n        parentFieldName={parentFieldName}\n        useAsTitle={useAsTitle}\n      />\n    )\n\n    return DrawerComponent\n  }, [\n    baseFilter,\n    drawerSlug,\n    closeDrawer,\n    disabledIds,\n    filterByCollection,\n    Icon,\n    parentFieldName,\n    hierarchyCollectionSlug,\n    useAsTitle,\n  ])\n\n  const MemoizedDrawerToggler = useMemo(() => {\n    const TogglerComponent: React.FC<Omit<HierarchyDrawerTogglerProps, 'drawerSlug'>> = (props) => (\n      <HierarchyDrawerToggler {...props} drawerSlug={drawerSlug} />\n    )\n\n    return TogglerComponent\n  }, [drawerSlug])\n\n  const MemoizedDrawerState = useMemo(\n    () => ({\n      closeDrawer,\n      drawerDepth,\n      drawerSlug,\n      // Note: Not tracking isDrawerOpen to prevent re-renders when other modals change state\n      // Consumers needing this can use useModal() directly\n      isDrawerOpen: false,\n      openDrawer,\n      toggleDrawer,\n    }),\n    [drawerDepth, drawerSlug, toggleDrawer, closeDrawer, openDrawer],\n  )\n\n  return [MemoizedDrawer, MemoizedDrawerToggler, MemoizedDrawerState]\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Hierarchy/Field/SelectedHierarchies.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './SelectedHierarchies.scss';
+export type SelectedHierarchiesProps = {
+    hierarchySlug: string;
+    Icon?: React.ReactNode;
+    onRemove: ({ id }: {
+        id: number | string;
+    }) => void;
+    readOnly?: boolean;
+    selectedIds: (number | string)[];
+};
+export declare const SelectedHierarchies: React.FC<SelectedHierarchiesProps>;
+//# sourceMappingURL=SelectedHierarchies.d.ts.map

package/dist/elements/Hierarchy/Field/SelectedHierarchies.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedHierarchies.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Field/SelectedHierarchies.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAOnE,OAAO,4BAA4B,CAAA;AASnC,MAAM,MAAM,wBAAwB,GAAG;IACrC,aAAa,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE;QAAE,EAAE,EAAE,MAAM,GAAG,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACnD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA8HlE,CAAA"}

package/dist/elements/Hierarchy/Field/SelectedHierarchies.js

@@ -0,0 +1,185 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatAdminURL } from 'payload/shared';
+import * as qs from 'qs-esm';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { XIcon } from '../../../icons/X/index.js';
+import { useConfig } from '../../../providers/Config/index.js';
+import { useTranslation } from '../../../providers/Translation/index.js';
+import { Pill } from '../../Pill/index.js';
+import { Spinner } from '../../Spinner/index.js';
+import './SelectedHierarchies.scss';
+const baseClass = 'selected-hierarchies';
+export const SelectedHierarchies = ({
+  hierarchySlug,
+  Icon,
+  onRemove,
+  readOnly = false,
+  selectedIds
+}) => {
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
+  const {
+    i18n
+  } = useTranslation();
+  const [items, setItems] = useState([]);
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
+  const prevSelectedIdsRef = useRef('');
+  const {
+    routes: {
+      api
+    },
+    serverURL
+  } = config;
+  const collectionConfig = getEntityConfig({
+    collectionSlug: hierarchySlug
+  });
+  const selectedIdsKey = useMemo(() => selectedIds.slice().sort().join(','), [selectedIds]);
+  useEffect(() => {
+    if (!selectedIds || selectedIds.length === 0) {
+      setItems([]);
+      setIsInitialLoad(false);
+      return;
+    }
+    if (prevSelectedIdsRef.current === selectedIdsKey) {
+      return;
+    }
+    prevSelectedIdsRef.current = selectedIdsKey;
+    const fetchItems = async () => {
+      const useAsTitle = collectionConfig?.admin?.useAsTitle || 'id';
+      const query = {
+        depth: 0,
+        limit: selectedIds.length,
+        select: {
+          [useAsTitle]: true
+        },
+        where: {
+          id: {
+            in: selectedIds
+          }
+        }
+      };
+      const queryString = qs.stringify(query);
+      try {
+        const url = formatAdminURL({
+          apiRoute: api,
+          path: `/${hierarchySlug}?${queryString}`,
+          serverURL
+        });
+        const response = await fetch(url, {
+          credentials: 'include',
+          headers: {
+            'Accept-Language': i18n.language
+          }
+        });
+        if (response.ok) {
+          const data = await response.json();
+          const fetchedItems = data.docs.map(doc => {
+            const docId = doc.id;
+            const titleValue = doc[useAsTitle] ?? docId;
+            const title = typeof titleValue === 'string' || typeof titleValue === 'number' ? String(titleValue) : String(docId);
+            return {
+              id: docId,
+              title
+            };
+          });
+          // Order by selectedIds to preserve selection order
+          const orderedItems = selectedIds.map(id => fetchedItems.find(item => item.id === id)).filter(item_0 => item_0 !== undefined);
+          setItems(orderedItems);
+        }
+      } catch {
+        // Silently fail - items will remain empty
+      } finally {
+        setIsInitialLoad(false);
+      }
+    };
+    void fetchItems();
+  }, [selectedIds, selectedIdsKey, hierarchySlug, collectionConfig, serverURL, api, i18n.language]);
+  if (isInitialLoad) {
+    return /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__loading`,
+      children: /*#__PURE__*/_jsx(Spinner, {
+        size: "small"
+      })
+    });
+  }
+  if (items.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: baseClass,
+    children: /*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__pills`,
+      children: items.map(item_1 => /*#__PURE__*/_jsx(SelectedPill, {
+        Icon: Icon,
+        item: item_1,
+        onRemove: onRemove,
+        readOnly: readOnly
+      }, item_1.id))
+    })
+  });
+};
+const SelectedPill = t0 => {
+  const $ = _c(9);
+  const {
+    Icon,
+    item,
+    onRemove,
+    readOnly
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  let t1;
+  if ($[0] !== item.id || $[1] !== onRemove) {
+    t1 = e => {
+      e.preventDefault();
+      e.stopPropagation();
+      onRemove({
+        id: item.id
+      });
+    };
+    $[0] = item.id;
+    $[1] = onRemove;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const handleRemove = t1;
+  let t2;
+  if ($[3] !== Icon || $[4] !== handleRemove || $[5] !== item.title || $[6] !== readOnly || $[7] !== t) {
+    t2 = _jsxs(Pill, {
+      className: `${baseClass}__pill`,
+      pillStyle: "light",
+      size: "small",
+      children: [Boolean(Icon) && _jsx("span", {
+        className: `${baseClass}__pill-icon`,
+        children: Icon
+      }), _jsx("span", {
+        className: `${baseClass}__pill-label`,
+        children: item.title
+      }), _jsx("button", {
+        "aria-label": t("general:remove"),
+        className: `${baseClass}__pill-remove`,
+        disabled: readOnly,
+        onClick: readOnly ? undefined : handleRemove,
+        type: "button",
+        children: _jsx(XIcon, {})
+      })]
+    });
+    $[3] = Icon;
+    $[4] = handleRemove;
+    $[5] = item.title;
+    $[6] = readOnly;
+    $[7] = t;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+};
+//# sourceMappingURL=SelectedHierarchies.js.map

package/dist/elements/Hierarchy/Field/SelectedHierarchies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectedHierarchies.js","names":["c","_c","formatAdminURL","qs","React","useEffect","useMemo","useRef","useState","XIcon","useConfig","useTranslation","Pill","Spinner","baseClass","SelectedHierarchies","hierarchySlug","Icon","onRemove","readOnly","selectedIds","config","getEntityConfig","i18n","items","setItems","isInitialLoad","setIsInitialLoad","prevSelectedIdsRef","routes","api","serverURL","collectionConfig","collectionSlug","selectedIdsKey","slice","sort","join","length","current","fetchItems","useAsTitle","admin","query","depth","limit","select","where","id","in","queryString","stringify","url","apiRoute","path","response","fetch","credentials","headers","language","ok","data","json","fetchedItems","docs","map","doc","docId","titleValue","title","String","orderedItems","find","item","filter","undefined","_jsx","className","size","SelectedPill","t0","$","t","t1","e","preventDefault","stopPropagation","handleRemove","t2","_jsxs","pillStyle","children","Boolean","disabled","onClick","type"],"sources":["../../../../src/elements/Hierarchy/Field/SelectedHierarchies.tsx"],"sourcesContent":["'use client'\nimport { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { useEffect, useMemo, useRef, useState } from 'react'\n\nimport { XIcon } from '../../../icons/X/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Pill } from '../../Pill/index.js'\nimport { Spinner } from '../../Spinner/index.js'\nimport './SelectedHierarchies.scss'\n\nconst baseClass = 'selected-hierarchies'\n\ntype HierarchyItem = {\n  id: number | string\n  title: string\n}\n\nexport type SelectedHierarchiesProps = {\n  hierarchySlug: string\n  Icon?: React.ReactNode\n  onRemove: ({ id }: { id: number | string }) => void\n  readOnly?: boolean\n  selectedIds: (number | string)[]\n}\n\nexport const SelectedHierarchies: React.FC<SelectedHierarchiesProps> = ({\n  hierarchySlug,\n  Icon,\n  onRemove,\n  readOnly = false,\n  selectedIds,\n}) => {\n  const { config, getEntityConfig } = useConfig()\n  const { i18n } = useTranslation()\n  const [items, setItems] = useState<HierarchyItem[]>([])\n  const [isInitialLoad, setIsInitialLoad] = useState(true)\n\n  const prevSelectedIdsRef = useRef<string>('')\n\n  const {\n    routes: { api },\n    serverURL,\n  } = config\n\n  const collectionConfig = getEntityConfig({ collectionSlug: hierarchySlug })\n\n  const selectedIdsKey = useMemo(() => selectedIds.slice().sort().join(','), [selectedIds])\n\n  useEffect(() => {\n    if (!selectedIds || selectedIds.length === 0) {\n      setItems([])\n      setIsInitialLoad(false)\n      return\n    }\n\n    if (prevSelectedIdsRef.current === selectedIdsKey) {\n      return\n    }\n    prevSelectedIdsRef.current = selectedIdsKey\n\n    const fetchItems = async () => {\n      const useAsTitle = collectionConfig?.admin?.useAsTitle || 'id'\n\n      const query = {\n        depth: 0,\n        limit: selectedIds.length,\n        select: {\n          [useAsTitle]: true,\n        },\n        where: {\n          id: {\n            in: selectedIds,\n          },\n        },\n      }\n\n      const queryString = qs.stringify(query)\n\n      try {\n        const url = formatAdminURL({\n          apiRoute: api,\n          path: `/${hierarchySlug}?${queryString}`,\n          serverURL,\n        })\n\n        const response = await fetch(url, {\n          credentials: 'include',\n          headers: {\n            'Accept-Language': i18n.language,\n          },\n        })\n\n        if (response.ok) {\n          const data = await response.json()\n          const fetchedItems: HierarchyItem[] = data.docs.map((doc: Record<string, unknown>) => {\n            const docId = doc.id as number | string\n            const titleValue = doc[useAsTitle] ?? docId\n            const title =\n              typeof titleValue === 'string' || typeof titleValue === 'number'\n                ? String(titleValue)\n                : String(docId)\n            return {\n              id: docId,\n              title,\n            }\n          })\n\n          // Order by selectedIds to preserve selection order\n          const orderedItems = selectedIds\n            .map((id) => fetchedItems.find((item) => item.id === id))\n            .filter((item): item is HierarchyItem => item !== undefined)\n\n          setItems(orderedItems)\n        }\n      } catch {\n        // Silently fail - items will remain empty\n      } finally {\n        setIsInitialLoad(false)\n      }\n    }\n\n    void fetchItems()\n  }, [selectedIds, selectedIdsKey, hierarchySlug, collectionConfig, serverURL, api, i18n.language])\n\n  if (isInitialLoad) {\n    return (\n      <div className={`${baseClass}__loading`}>\n        <Spinner size=\"small\" />\n      </div>\n    )\n  }\n\n  if (items.length === 0) {\n    return null\n  }\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__pills`}>\n        {items.map((item) => (\n          <SelectedPill\n            Icon={Icon}\n            item={item}\n            key={item.id}\n            onRemove={onRemove}\n            readOnly={readOnly}\n          />\n        ))}\n      </div>\n    </div>\n  )\n}\n\ntype SelectedPillProps = {\n  Icon?: React.ReactNode\n  item: HierarchyItem\n  onRemove: ({ id }: { id: number | string }) => void\n  readOnly: boolean\n}\n\nconst SelectedPill: React.FC<SelectedPillProps> = ({ Icon, item, onRemove, readOnly }) => {\n  const { t } = useTranslation()\n\n  const handleRemove = (e: React.MouseEvent) => {\n    e.preventDefault()\n    e.stopPropagation()\n    onRemove({ id: item.id })\n  }\n\n  return (\n    <Pill className={`${baseClass}__pill`} pillStyle=\"light\" size=\"small\">\n      {Boolean(Icon) && <span className={`${baseClass}__pill-icon`}>{Icon}</span>}\n      <span className={`${baseClass}__pill-label`}>{item.title}</span>\n      <button\n        aria-label={t('general:remove')}\n        className={`${baseClass}__pill-remove`}\n        disabled={readOnly}\n        onClick={readOnly ? undefined : handleRemove}\n        type=\"button\"\n      >\n        <XIcon />\n      </button>\n    </Pill>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Hierarchy/Field/SelectedHierarchies.scss

@@ -0,0 +1,78 @@
+@import '../../../scss/styles.scss';
+
+@layer payload-default {
+  .selected-hierarchies {
+    &__pills {
+      display: flex;
+      flex-wrap: wrap;
+      gap: calc(var(--base) * 0.5);
+    }
+
+    &__pill {
+      display: inline-flex;
+      align-items: center;
+      gap: calc(var(--base) * 0.25);
+      align-items: center;
+      background-color: var(--theme-elevation-50);
+      border: 1px solid var(--theme-elevation-150);
+      padding-inline-end: calc(var(--base) * 0.2);
+
+      .pill__label {
+        display: flex;
+        align-items: center;
+        gap: 4px;
+      }
+    }
+
+    &__pill-label {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 200px;
+    }
+
+    &__pill-remove {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      margin: 0;
+      border: none;
+      background: none;
+      border-radius: $style-radius-s;
+      color: inherit;
+      position: relative;
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+
+      &:hover {
+        background: var(--theme-elevation-200);
+      }
+
+      .icon {
+        width: calc(var(--base) * 0.8);
+        height: calc(var(--base) * 0.8);
+        color: var(--theme-elevation-500);
+      }
+    }
+
+    &__pill-tooltip {
+      white-space: nowrap;
+    }
+
+    &__empty {
+      color: var(--theme-elevation-500);
+      font-style: italic;
+      padding: calc(var(--base) * 0.25) 0;
+      height: 26px;
+    }
+
+    &__loading {
+      color: var(--theme-elevation-500);
+      padding: calc(var(--base) * 0.25) 0;
+      height: 26px;
+    }
+  }
+}

package/dist/elements/Hierarchy/Field/index.client.d.ts

@@ -0,0 +1,8 @@
+import type { RelationshipFieldClientProps } from 'payload';
+import React from 'react';
+import './index.scss';
+export type HierarchyFieldClientProps = {
+    Icon?: React.ReactNode;
+} & RelationshipFieldClientProps;
+export declare const HierarchyFieldClient: React.FC<HierarchyFieldClientProps>;
+//# sourceMappingURL=index.client.d.ts.map

package/dist/elements/Hierarchy/Field/index.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Field/index.client.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,4BAA4B,EAAE,MAAM,SAAS,CAAA;AAG3D,OAAO,KAA+B,MAAM,OAAO,CAAA;AAiBnD,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,GAAG,4BAA4B,CAAA;AAEhC,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA2LpE,CAAA"}

package/dist/elements/Hierarchy/Field/index.client.js

@@ -0,0 +1,186 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
+import React, { useCallback, useMemo } from 'react';
+import { FieldDescription } from '../../../fields/FieldDescription/index.js';
+import { FieldError } from '../../../fields/FieldError/index.js';
+import { FieldLabel } from '../../../fields/FieldLabel/index.js';
+import { mergeFieldStyles } from '../../../fields/mergeFieldStyles.js';
+import { fieldBaseClass } from '../../../fields/shared/index.js';
+import { useField } from '../../../forms/useField/index.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 { RenderCustomComponent } from '../../RenderCustomComponent/index.js';
+import { useHierarchyDrawer } from '../Drawer/useHierarchyDrawer.js';
+import { SelectedHierarchies } from './SelectedHierarchies.js';
+import './index.scss';
+const baseClass = 'hierarchy-field';
+export const HierarchyFieldClient = props => {
+  const {
+    field,
+    field: {
+      admin: {
+        className,
+        description
+      } = {},
+      hasMany,
+      label,
+      localized,
+      relationTo: relationToProp,
+      required
+    },
+    Icon,
+    path: pathFromProps,
+    readOnly,
+    validate
+  } = props;
+  const hierarchySlug = Array.isArray(relationToProp) ? relationToProp[0] : relationToProp;
+  const {
+    getEntityConfig
+  } = useConfig();
+  const {
+    collectionSlug: documentCollectionSlug
+  } = useDocumentInfo();
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const collectionConfig = getEntityConfig({
+    collectionSlug: hierarchySlug
+  });
+  const memoizedValidate = useCallback((value, validationOptions) => {
+    if (typeof validate === 'function') {
+      return validate(value, {
+        ...validationOptions,
+        required
+      });
+    }
+  }, [validate, required]);
+  const {
+    customComponents: {
+      AfterInput,
+      BeforeInput,
+      Description,
+      Error,
+      Label
+    } = {},
+    disabled,
+    path,
+    setValue,
+    showError,
+    value: value_0
+  } = useField({
+    potentiallyStalePath: pathFromProps,
+    validate: memoizedValidate
+  });
+  const styles = useMemo(() => mergeFieldStyles(field), [field]);
+  // Normalize value to array of IDs for display
+  const selectedIds = useMemo(() => {
+    if (!value_0) {
+      return [];
+    }
+    if (Array.isArray(value_0)) {
+      return value_0;
+    }
+    return [value_0];
+  }, [value_0]);
+  // Initialize selections for the drawer - use current value so drawer expands to current selection
+  const initialSelections = useMemo(() => {
+    if (!value_0) {
+      return [];
+    }
+    if (Array.isArray(value_0)) {
+      return value_0;
+    }
+    return [value_0];
+  }, [value_0]);
+  // Memoize to prevent new array references on every render
+  const filterByCollection = useMemo(() => documentCollectionSlug ? [documentCollectionSlug] : undefined, [documentCollectionSlug]);
+  const [HierarchyDrawer,, {
+    openDrawer
+  }] = useHierarchyDrawer({
+    filterByCollection,
+    hierarchyCollectionSlug: hierarchySlug,
+    Icon
+  });
+  const handleDrawerSave = useCallback(({
+    closeDrawer,
+    selections
+  }) => {
+    const ids = Array.from(selections.keys());
+    const newValue = hasMany ? ids : ids[0] ?? null;
+    setValue(newValue);
+    closeDrawer();
+  }, [hasMany, setValue]);
+  const handleRemove = useCallback(({
+    id: idToRemove
+  }) => {
+    if (hasMany) {
+      const newIds = selectedIds.filter(id => id !== idToRemove);
+      setValue(newIds.length > 0 ? newIds : null);
+    } else {
+      setValue(null);
+    }
+  }, [hasMany, selectedIds, setValue]);
+  const handleOpenDrawer = useCallback(() => {
+    openDrawer();
+  }, [openDrawer]);
+  const hierarchyLabel = getTranslation(hasMany ? collectionConfig?.labels?.plural : collectionConfig?.labels?.singular, i18n) || hierarchySlug;
+  return /*#__PURE__*/_jsxs("div", {
+    className: [fieldBaseClass, baseClass, className, showError && 'error', readOnly && `${baseClass}--read-only`].filter(Boolean).join(' '),
+    id: `field-${path?.replace(/\./g, '__')}`,
+    style: styles,
+    children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+      CustomComponent: Label,
+      Fallback: /*#__PURE__*/_jsx(FieldLabel, {
+        label: label,
+        localized: localized,
+        path: path,
+        required: required
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${fieldBaseClass}__wrap`,
+      children: [/*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Error,
+        Fallback: /*#__PURE__*/_jsx(FieldError, {
+          path: path,
+          showError: showError
+        })
+      }), BeforeInput, /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__content`,
+        children: [selectedIds.length > 0 && /*#__PURE__*/_jsx(SelectedHierarchies, {
+          hierarchySlug: hierarchySlug,
+          onRemove: handleRemove,
+          readOnly: readOnly || disabled,
+          selectedIds: selectedIds
+        }), !readOnly && (hasMany || selectedIds.length === 0) && /*#__PURE__*/_jsx(Button, {
+          buttonStyle: "dashed",
+          className: `${baseClass}__manage-button`,
+          disabled: disabled,
+          icon: "plus",
+          iconPosition: "left",
+          margin: false,
+          onClick: handleOpenDrawer,
+          size: "small",
+          children: t('general:selectLabel', {
+            label: hierarchyLabel
+          })
+        })]
+      }), AfterInput, /*#__PURE__*/_jsx(RenderCustomComponent, {
+        CustomComponent: Description,
+        Fallback: /*#__PURE__*/_jsx(FieldDescription, {
+          description: description,
+          path: path
+        })
+      })]
+    }), /*#__PURE__*/_jsx(HierarchyDrawer, {
+      hasMany: hasMany,
+      initialSelections: initialSelections,
+      onSave: handleDrawerSave
+    })]
+  });
+};
+//# sourceMappingURL=index.client.js.map