@payloadcms/ui 4.0.0-internal.011fd46 → 4.0.0-internal.016994f

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

@@ -1,14 +1,17 @@
 'use client';
 
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { getTranslation } from '@payloadcms/translations';
 import { formatAdminURL } from 'payload/shared';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, 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 { useDocumentTitle } from '../../../providers/DocumentTitle/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { Button } from '../../Button/index.js';
-import { useHierarchyDrawer } from '../Drawer/useHierarchyDrawer.js';
+import { Popup, PopupList } from '../../Popup/index.js';
+import { useHierarchyModal } from '../Modal/useHierarchyModal.js';
 import './index.css';
 const baseClass = 'hierarchy-button';
 export const HierarchyButtonClient = ({
@@ -20,6 +23,7 @@ export const HierarchyButtonClient = ({
   SmallIcon
 }) => {
   const {
+    i18n,
     t
   } = useTranslation();
   const {
@@ -29,6 +33,9 @@ export const HierarchyButtonClient = ({
   const {
     collectionSlug: documentCollectionSlug
   } = useDocumentInfo();
+  const {
+    title: documentTitle
+  } = useDocumentTitle();
   const {
     disabled: formDisabled,
     setModified
@@ -43,14 +50,15 @@ export const HierarchyButtonClient = ({
     collectionSlug: hierarchyCollectionSlug
   });
   const useAsTitle = collectionConfig?.admin?.useAsTitle || 'name';
+  const hierarchyConfig = collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object' ? collectionConfig.hierarchy : undefined;
   const isHierarchyCollection = documentCollectionSlug === hierarchyCollectionSlug;
-  // When in hierarchy collection, let the drawer use allowedCollections from context
+  // When in hierarchy collection, let the modal 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({
+  const [HierarchyModal,, {
+    openModal
+  }] = useHierarchyModal({
     filterByCollection,
     hierarchyCollectionSlug,
     Icon
@@ -87,8 +95,8 @@ export const HierarchyButtonClient = ({
     };
     void fetchItemName();
   }, [currentId, hierarchyCollectionSlug, config.routes.api, config.serverURL, useAsTitle, t]);
-  const handleDrawerSave = useCallback(({
-    closeDrawer,
+  const handleModalSave = useCallback(({
+    closeModal,
     selections
   }) => {
     const ids = Array.from(selections.keys());
@@ -101,28 +109,125 @@ export const HierarchyButtonClient = ({
       });
       setModified(true);
     }
-    closeDrawer();
+    closeModal();
   }, [currentFieldValue?.value, dispatchField, fieldName, hasMany, setModified]);
   const handleClick = useCallback(() => {
     if (!readOnly) {
-      openDrawer();
+      openModal();
     }
-  }, [openDrawer, readOnly]);
+  }, [openModal, readOnly]);
+  // A single value is required to name the folder in the menu, so `hasMany` fields keep the
+  // plain button that opens the move modal directly.
+  const hasSingleFolder = !hasMany && (typeof currentId === 'string' || typeof currentId === 'number');
   const label = isLoading ? `${t('general:loading')}...` : displayName;
+  // e.g. "Folder" / "Tag" - the hierarchy collection this document is filed under.
+  const hierarchyLabel = getTranslation(collectionConfig?.labels?.singular, i18n);
+  const emptyLabel = `${t('general:no')} ${hierarchyLabel}`;
+  const controlRef = useRef(null);
+  const [shouldRefocus, setShouldRefocus] = useState(false);
+  // Removal swaps the menu trigger out for the plain button, so focus is restored once the
+  // replacement has rendered rather than on the element that is about to unmount.
+  useEffect(() => {
+    if (shouldRefocus) {
+      controlRef.current?.querySelector('button')?.focus();
+      setShouldRefocus(false);
+    }
+  }, [shouldRefocus]);
+  const handleRemove = useCallback(() => {
+    dispatchField({
+      type: 'UPDATE',
+      path: fieldName,
+      value: null
+    });
+    setModified(true);
+    setShouldRefocus(true);
+  }, [dispatchField, fieldName, setModified]);
+  const goToHref = useMemo(() => {
+    if (!hasSingleFolder || !documentCollectionSlug) {
+      return undefined;
+    }
+    const parentQueryParam = hierarchyConfig?.parentFieldName || 'parent';
+    return formatAdminURL({
+      adminRoute: config.routes.admin,
+      path: `/collections/${documentCollectionSlug}/hierarchy?${parentQueryParam}=${currentId}`
+    });
+  }, [config.routes.admin, currentId, documentCollectionSlug, hasSingleFolder, hierarchyConfig?.parentFieldName]);
+  const buttonClassName = [baseClass, readOnly && `${baseClass}--read-only`].filter(Boolean).join(' ');
   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, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__control`,
+      ref: controlRef,
+      children: hasSingleFolder && !readOnly ? /*#__PURE__*/_jsx(Popup, {
+        caret: false,
+        className: `${baseClass}__popup`,
+        horizontalAlign: "left",
+        portalClassName: `${baseClass}__popup-content`,
+        render: ({
+          close
+        }) => /*#__PURE__*/_jsxs(PopupList.MenuItem, {
+          children: [/*#__PURE__*/_jsx(PopupList.Button, {
+            onClick: () => {
+              close();
+              openModal();
+            },
+            children: "Move to..."
+          }), /*#__PURE__*/_jsx(PopupList.Button, {
+            onClick: () => {
+              close();
+              handleRemove();
+            },
+            children: `Remove from ${hierarchyLabel}`
+          }), /*#__PURE__*/_jsx(PopupList.Divider, {}), /*#__PURE__*/_jsx(PopupList.Button, {
+            href: goToHref,
+            onClick: close,
+            children: /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__truncate`,
+              title: displayName,
+              children: `Go to "${displayName}"`
+            })
+          })]
+        }),
+        renderButton: ({
+          active,
+          onClick,
+          onKeyDown
+        }) => /*#__PURE__*/_jsx(Button, {
+          "aria-label": displayName,
+          buttonStyle: "secondary",
+          className: buttonClassName,
+          extraButtonProps: {
+            'aria-expanded': active,
+            'aria-haspopup': 'menu',
+            onKeyDown
+          },
+          icon: SmallIcon ?? Icon,
+          iconPosition: "left",
+          margin: false,
+          onClick: onClick,
+          selected: active,
+          tooltip: displayName,
+          children: /*#__PURE__*/_jsx("span", {
+            className: `${baseClass}__truncate`,
+            children: label
+          })
+        }),
+        size: "fit-content",
+        verticalAlign: "bottom"
+      }) : /*#__PURE__*/_jsx(Button, {
+        buttonStyle: "secondary",
+        className: buttonClassName,
+        disabled: readOnly,
+        icon: SmallIcon ?? Icon,
+        iconPosition: "left",
+        margin: false,
+        onClick: handleClick,
+        children: currentId ? label : emptyLabel
+      })
+    }), /*#__PURE__*/_jsx(HierarchyModal, {
       hasMany: hasMany,
       initialSelections: currentId ? [currentId] : undefined,
-      onSave: handleDrawerSave
+      onSave: handleModalSave,
+      title: !hasMany && documentTitle ? `${t('general:move')} "${documentTitle}"` : undefined
     })]
   });
 };

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

@@ -1 +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":"AAAA;;;AACA,SAASA,cAAc,QAAQ;AAC/B,OAAOC,KAAA,IAASC,WAAW,EAAEC,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ;AAIjE,SAASC,OAAO,EAAEC,aAAa,QAAQ;AACvC,SAASC,SAAS,QAAQ;AAC1B,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,kBAAkB,QAAQ;AACnC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAWlB,OAAO,MAAMC,qBAAA,GAA8DA,CAAC;EAC1EC,SAAS;EACTC,OAAA,GAAU,KAAK;EACfC,uBAAuB;EACvBC,IAAI;EACJC,QAAA,EAAUC,iBAAiB;EAC3BC;AAAS,CACV;EACC,MAAM;IAAEC;EAAC,CAAE,GAAGZ,cAAA;EACd,MAAM;IAAEa,MAAM;IAAEC;EAAe,CAAE,GAAGhB,SAAA;EACpC,MAAM;IAAEiB,cAAA,EAAgBC;EAAsB,CAAE,GAAGjB,eAAA;EACnD,MAAM;IAAEkB,QAAA,EAAUC,YAAY;IAAEC;EAAW,CAAE,GAAGvB,OAAA;EAChD,MAAMa,QAAA,GAAWC,iBAAA,IAAqBQ,YAAA;EACtC,MAAME,aAAA,GAAgBvB,aAAA,CAAc,CAAC,CAACwB,CAAA,EAAGC,QAAA,CAAS,KAAKA,QAAA;EAEvD,MAAMC,iBAAA,GAAoB1B,aAAA,CAAc,CAAC,CAAC2B,MAAA,CAAO,KAAKA,MAAC,IAAUA,MAAA,GAASnB,SAAA,CAAU,IAAK;EACzF,MAAMoB,SAAA,GAAYF,iBAAA,EAAmBG,KAAA;EAErC,MAAM,CAACC,WAAA,EAAaC,cAAA,CAAe,GAAGjC,QAAA,CAAiB;EACvD,MAAM,CAACkC,SAAA,EAAWC,YAAA,CAAa,GAAGnC,QAAA,CAAS;EAE3C,MAAMoC,gBAAA,GAAmBjB,eAAA,CAAgB;IAAEC,cAAA,EAAgBR;EAAwB;EACnF,MAAMyB,UAAA,GAAaD,gBAAA,EAAkBE,KAAA,EAAOD,UAAA,IAAc;EAE1D,MAAME,qBAAA,GAAwBlB,sBAAA,KAA2BT,uBAAA;EAEzD;EACA;EACA;EACA,MAAM4B,kBAAA,GAAqBzC,OAAA,CACzB,MAAOwC,qBAAA,IAAyB,CAAClB,sBAAA,GAAyBoB,SAAA,GAAY,CAACpB,sBAAA,CAAuB,EAC9F,CAACkB,qBAAA,EAAuBlB,sBAAA,CAAuB;EAGjD,MAAM,CAACqB,eAAA,GAAmB;IAAEC;EAAU,CAAE,CAAC,GAAGpC,kBAAA,CAAmB;IAC7DiC,kBAAA;IACA5B,uBAAA;IACAC;EACF;EAEA;EACAf,SAAA,CAAU;IACR,MAAM8C,aAAA,GAAgB,MAAAA,CAAA;MACpB,IAAId,SAAA,KAAc,OAAOA,SAAA,KAAc,YAAY,OAAOA,SAAA,KAAc,QAAO,GAAI;QACjFK,YAAA,CAAa;QACb,IAAI;UACF,MAAMU,QAAA,GAAW,MAAMC,KAAA,CACrBnD,cAAA,CAAe;YACboD,QAAA,EAAU7B,MAAA,CAAO8B,MAAM,CAACC,GAAG;YAC3BC,IAAA,EAAM,IAAItC,uBAAA,IAA2BkB,SAAA,EAAW;YAChDqB,SAAA,EAAWjC,MAAA,CAAOiC;UACpB,IACA;YAAEC,WAAA,EAAa;UAAU;UAG3B,IAAIP,QAAA,CAASQ,EAAE,EAAE;YACf,MAAMC,QAAA,GAAW,MAAMT,QAAA,CAASU,IAAI;YACpC,MAAMC,KAAA,GAAQF,QAAA,GAAWjB,UAAA,CAAW,IAAIiB,QAAA,EAAUG,IAAA,IAAQH,QAAA,EAAUI,EAAA;YAEpEzB,cAAA,CAAe0B,MAAA,CAAOH,KAAA;UACxB,OAAO;YACLvB,cAAA,CAAehB,CAAA,CAAE;UACnB;QACF,EAAE,MAAM;UACNgB,cAAA,CAAehB,CAAA,CAAE;QACnB,UAAU;UACRkB,YAAA,CAAa;QACf;MACF,OAAO;QACLF,cAAA,CAAehB,CAAA,CAAE;QACjBkB,YAAA,CAAa;MACf;IACF;IAEA,KAAKS,aAAA;EACP,GAAG,CAACd,SAAA,EAAWlB,uBAAA,EAAyBM,MAAA,CAAO8B,MAAM,CAACC,GAAG,EAAE/B,MAAA,CAAOiC,SAAS,EAAEd,UAAA,EAAYpB,CAAA,CAAE;EAE3F,MAAM2C,gBAAA,GAAmB/D,WAAA,CACvB,CAAC;IACCgE,WAAW;IACXC;EAAU,CAIX;IACC,MAAMC,GAAA,GAAMC,KAAA,CAAMC,IAAI,CAACH,UAAA,CAAWI,IAAI;IACtC,MAAMC,QAAA,GAAWxD,OAAA,GAAUoD,GAAA,GAAOA,GAAG,CAAC,EAAE,IAAI;IAE5C,IAAInC,iBAAA,EAAmBG,KAAA,KAAUoC,QAAA,EAAU;MACzC1C,aAAA,CAAc;QACZ2C,IAAA,EAAM;QACNlB,IAAA,EAAMxC,SAAA;QACNqB,KAAA,EAAOoC;MACT;MACA3C,WAAA,CAAY;IACd;IACAqC,WAAA;EACF,GACA,CAACjC,iBAAA,EAAmBG,KAAA,EAAON,aAAA,EAAef,SAAA,EAAWC,OAAA,EAASa,WAAA,CAAY;EAG5E,MAAM6C,WAAA,GAAcxE,WAAA,CAAY;IAC9B,IAAI,CAACiB,QAAA,EAAU;MACb6B,UAAA;IACF;EACF,GAAG,CAACA,UAAA,EAAY7B,QAAA,CAAS;EAEzB,MAAMwD,KAAA,GAAQpC,SAAA,GAAY,GAAGjB,CAAA,CAAE,uBAAuB,GAAGe,WAAA;EAEzD,oBACEuC,KAAA,CAAAC,SAAA;4BACEC,IAAA,CAACnE,MAAA;MACCoE,WAAA,EAAY;MACZC,SAAA,EAAW,CAACnE,SAAA,EAAWM,QAAA,IAAY,GAAGN,SAAA,aAAsB,CAAC,CAACoE,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;MACnFxD,QAAA,EAAUR,QAAA;MACViE,IAAA,EAAM/D,SAAA,IAAaH,IAAA;MACnBmE,YAAA,EAAa;MACbC,MAAA,EAAQ;MACRC,OAAA,EAASb,WAAA;gBAERC;qBAEHG,IAAA,CAAC/B,eAAA;MACC/B,OAAA,EAASA,OAAA;MACTwE,iBAAA,EAAmBrD,SAAA,GAAY,CAACA,SAAA,CAAU,GAAGW,SAAA;MAC7C2C,MAAA,EAAQxB;;;AAIhB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","formatAdminURL","React","useCallback","useEffect","useMemo","useRef","useState","useForm","useFormFields","useConfig","useDocumentInfo","useDocumentTitle","useTranslation","Button","Popup","PopupList","useHierarchyModal","baseClass","HierarchyButtonClient","fieldName","hasMany","hierarchyCollectionSlug","Icon","readOnly","readOnlyFromProps","SmallIcon","i18n","t","config","getEntityConfig","collectionSlug","documentCollectionSlug","title","documentTitle","disabled","formDisabled","setModified","dispatchField","_","dispatch","currentFieldValue","fields","currentId","value","displayName","setDisplayName","isLoading","setIsLoading","collectionConfig","useAsTitle","admin","hierarchyConfig","hierarchy","undefined","isHierarchyCollection","filterByCollection","HierarchyModal","openModal","fetchItemName","response","fetch","apiRoute","routes","api","path","serverURL","credentials","ok","itemData","json","name","id","String","handleModalSave","closeModal","selections","ids","Array","from","keys","newValue","type","handleClick","hasSingleFolder","label","hierarchyLabel","labels","singular","emptyLabel","controlRef","shouldRefocus","setShouldRefocus","current","querySelector","focus","handleRemove","goToHref","parentQueryParam","parentFieldName","adminRoute","buttonClassName","filter","Boolean","join","_jsxs","_Fragment","_jsx","className","ref","caret","horizontalAlign","portalClassName","render","close","MenuItem","onClick","Divider","href","renderButton","active","onKeyDown","buttonStyle","extraButtonProps","icon","iconPosition","margin","selected","tooltip","size","verticalAlign","initialSelections","onSave"],"sources":["../../../../src/elements/Hierarchy/DocHeaderButton/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport { formatAdminURL } from 'payload/shared'\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\n\nimport type { SelectionWithPath } from '../Modal/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 { useDocumentTitle } from '../../../providers/DocumentTitle/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Button } from '../../Button/index.js'\nimport { Popup, PopupList } from '../../Popup/index.js'\nimport { useHierarchyModal } from '../Modal/useHierarchyModal.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 { i18n, t } = useTranslation()\n  const { config, getEntityConfig } = useConfig()\n  const { collectionSlug: documentCollectionSlug } = useDocumentInfo()\n  const { title: documentTitle } = useDocumentTitle()\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  const hierarchyConfig =\n    collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n      ? collectionConfig.hierarchy\n      : undefined\n\n  const isHierarchyCollection = documentCollectionSlug === hierarchyCollectionSlug\n\n  // When in hierarchy collection, let the modal 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 [HierarchyModal, , { openModal }] = useHierarchyModal({\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 handleModalSave = useCallback(\n    ({\n      closeModal,\n      selections,\n    }: {\n      closeModal: () => 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      closeModal()\n    },\n    [currentFieldValue?.value, dispatchField, fieldName, hasMany, setModified],\n  )\n\n  const handleClick = useCallback(() => {\n    if (!readOnly) {\n      openModal()\n    }\n  }, [openModal, readOnly])\n\n  // A single value is required to name the folder in the menu, so `hasMany` fields keep the\n  // plain button that opens the move modal directly.\n  const hasSingleFolder =\n    !hasMany && (typeof currentId === 'string' || typeof currentId === 'number')\n\n  const label = isLoading ? `${t('general:loading')}...` : displayName\n\n  // e.g. \"Folder\" / \"Tag\" - the hierarchy collection this document is filed under.\n  const hierarchyLabel = getTranslation(collectionConfig?.labels?.singular, i18n)\n  const emptyLabel = `${t('general:no')} ${hierarchyLabel}`\n\n  const controlRef = useRef<HTMLDivElement | null>(null)\n  const [shouldRefocus, setShouldRefocus] = useState(false)\n\n  // Removal swaps the menu trigger out for the plain button, so focus is restored once the\n  // replacement has rendered rather than on the element that is about to unmount.\n  useEffect(() => {\n    if (shouldRefocus) {\n      controlRef.current?.querySelector('button')?.focus()\n      setShouldRefocus(false)\n    }\n  }, [shouldRefocus])\n\n  const handleRemove = useCallback(() => {\n    dispatchField({\n      type: 'UPDATE',\n      path: fieldName,\n      value: null,\n    })\n    setModified(true)\n    setShouldRefocus(true)\n  }, [dispatchField, fieldName, setModified])\n\n  const goToHref = useMemo(() => {\n    if (!hasSingleFolder || !documentCollectionSlug) {\n      return undefined\n    }\n\n    const parentQueryParam = hierarchyConfig?.parentFieldName || 'parent'\n\n    return formatAdminURL({\n      adminRoute: config.routes.admin,\n      path: `/collections/${documentCollectionSlug}/hierarchy?${parentQueryParam}=${currentId}`,\n    })\n  }, [\n    config.routes.admin,\n    currentId,\n    documentCollectionSlug,\n    hasSingleFolder,\n    hierarchyConfig?.parentFieldName,\n  ])\n\n  const buttonClassName = [baseClass, readOnly && `${baseClass}--read-only`]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <>\n      <div className={`${baseClass}__control`} ref={controlRef}>\n        {hasSingleFolder && !readOnly ? (\n          <Popup\n            caret={false}\n            className={`${baseClass}__popup`}\n            horizontalAlign=\"left\"\n            portalClassName={`${baseClass}__popup-content`}\n            render={({ close }) => (\n              <PopupList.MenuItem>\n                <PopupList.Button\n                  onClick={() => {\n                    close()\n                    openModal()\n                  }}\n                >\n                  Move to...\n                </PopupList.Button>\n                <PopupList.Button\n                  onClick={() => {\n                    close()\n                    handleRemove()\n                  }}\n                >\n                  {`Remove from ${hierarchyLabel}`}\n                </PopupList.Button>\n                <PopupList.Divider />\n                <PopupList.Button href={goToHref} onClick={close}>\n                  <span className={`${baseClass}__truncate`} title={displayName}>\n                    {`Go to \"${displayName}\"`}\n                  </span>\n                </PopupList.Button>\n              </PopupList.MenuItem>\n            )}\n            renderButton={({ active, onClick, onKeyDown }) => (\n              <Button\n                aria-label={displayName}\n                buttonStyle=\"secondary\"\n                className={buttonClassName}\n                extraButtonProps={{\n                  'aria-expanded': active,\n                  'aria-haspopup': 'menu',\n                  onKeyDown,\n                }}\n                icon={SmallIcon ?? Icon}\n                iconPosition=\"left\"\n                margin={false}\n                onClick={onClick}\n                selected={active}\n                tooltip={displayName}\n              >\n                <span className={`${baseClass}__truncate`}>{label}</span>\n              </Button>\n            )}\n            size=\"fit-content\"\n            verticalAlign=\"bottom\"\n          />\n        ) : (\n          <Button\n            buttonStyle=\"secondary\"\n            className={buttonClassName}\n            disabled={readOnly}\n            icon={SmallIcon ?? Icon}\n            iconPosition=\"left\"\n            margin={false}\n            onClick={handleClick}\n          >\n            {currentId ? label : emptyLabel}\n          </Button>\n        )}\n      </div>\n      <HierarchyModal\n        hasMany={hasMany}\n        initialSelections={currentId ? [currentId] : undefined}\n        onSave={handleModalSave}\n        title={!hasMany && documentTitle ? `${t('general:move')} \"${documentTitle}\"` : undefined}\n      />\n    </>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -18,9 +18,7 @@ export const HierarchyButton = ({
   // 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({
+  const renderedIcon = isDefaultFolderIcon ? /*#__PURE__*/_jsx(FolderIcon, {}) : RenderServerComponent({
     Component: IconComponent,
     importMap: payload.importMap,
     key: `hierarchy-button-icon-${hierarchyCollectionSlug}`

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

@@ -1 +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":[]}
+{"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","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 />\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,QAEDC,qBAAA,CAAsB;IACpByB,SAAA,EAAWT,aAAA;IACXU,SAAA,EAAWpB,OAAA,CAAQoB,SAAS;IAC5BC,GAAA,EAAK,yBAAyBtB,uBAAA;EAChC;EAGF;EACA;EACA,MAAMuB,kBAAA,GACJ,CAACR,kBAAA,IAAsBA,kBAAA,KAAuB;EAChD,MAAMS,iBAAA,GACJT,kBAAA,KAAuBJ,aAAA,GACrBO,YAAA,GACEK,kBAAA,gBACFJ,IAAA,CAACzB,UAAA,QAEDC,qBAAA,CAAsB;IACpByB,SAAA,EAAWL,kBAAA;IACXM,SAAA,EAAWpB,OAAA,CAAQoB,SAAS;IAC5BC,GAAA,EAAK,+BAA+BtB,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,EAAWQ;;AAGjB","ignoreList":[]}

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

@@ -4,5 +4,10 @@ import './index.css';
 export type HierarchyFieldClientProps = {
     Icon?: React.ReactNode;
 } & RelationshipFieldClientProps;
+/**
+ * Renders a hierarchy relationship (e.g. tags) as a standard relationship input, swapping the
+ * "create new document" button for one that opens the hierarchy column browser. Options are
+ * labelled with their full ancestor path while browsing so same-named items stay distinguishable.
+ */
 export declare const HierarchyFieldClient: React.FC<HierarchyFieldClientProps>;
 //# sourceMappingURL=index.client.d.ts.map

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

@@ -1 +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;AAkBnD,OAAO,aAAa,CAAA;AAMpB,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"}
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Field/index.client.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,4BAA4B,EAAqB,MAAM,SAAS,CAAA;AAG9E,OAAO,KAAyC,MAAM,OAAO,CAAA;AAc7D,OAAO,aAAa,CAAA;AAUpB,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,GAAG,4BAA4B,CAAA;AAEhC;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAoPpE,CAAA"}

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

@@ -2,30 +2,34 @@
 
 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 React, { Fragment, useCallback, useMemo } from 'react';
 import { mergeFieldStyles } from '../../../fields/mergeFieldStyles.js';
-import { fieldBaseClass } from '../../../fields/shared/index.js';
+import { RelationshipInput } from '../../../fields/Relationship/Input.js';
 import { useField } from '../../../forms/useField/index.js';
-import { CirclePlusIcon } from '../../../icons/CirclePlus/index.js';
+import { TagIcon } from '../../../icons/Tag/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 { useHierarchyModal } from '../Modal/useHierarchyModal.js';
 import './index.css';
 const baseClass = 'hierarchy-field';
+/** The hierarchy is monomorphic, so the grouped options can be flattened into a single list */
+const flattenOptionGroups = groups => groups.map(group => group.options).flat();
+/**
+ * Renders a hierarchy relationship (e.g. tags) as a standard relationship input, swapping the
+ * "create new document" button for one that opens the hierarchy column browser. Options are
+ * labelled with their full ancestor path while browsing so same-named items stay distinguishable.
+ */
 export const HierarchyFieldClient = props => {
   const {
     field,
     field: {
       admin: {
         className,
-        description
+        description,
+        isSortable = true,
+        placeholder
       } = {},
       hasMany,
       label,
@@ -52,6 +56,8 @@ export const HierarchyFieldClient = props => {
   const collectionConfig = getEntityConfig({
     collectionSlug: hierarchySlug
   });
+  const hierarchyConfig = collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object' ? collectionConfig.hierarchy : undefined;
+  const titlePathFieldName = hierarchyConfig?.titlePathFieldName;
   const memoizedValidate = useCallback((value, validationOptions) => {
     if (typeof validate === 'function') {
       return validate(value, {
@@ -69,6 +75,8 @@ export const HierarchyFieldClient = props => {
       Label
     } = {},
     disabled,
+    filterOptions,
+    initialValue,
     path,
     setValue,
     showError,
@@ -77,113 +85,130 @@ export const HierarchyFieldClient = props => {
     potentiallyStalePath: pathFromProps,
     validate: memoizedValidate
   });
+  const [relationTo] = React.useState(() => [hierarchySlug]);
   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;
+  const toRelationValues = useCallback(ids => {
+    if (hasMany) {
+      return Array.isArray(ids) ? ids.map(id => ({
+        relationTo: hierarchySlug,
+        value: id
+      })) : null;
     }
-    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 [];
+    return ids ? {
+      relationTo: hierarchySlug,
+      value: ids
+    } : null;
+  }, [hasMany, hierarchySlug]);
+  const memoizedValue = useMemo(() => toRelationValues(value_0), [toRelationValues, value_0]);
+  const memoizedInitialValue = useMemo(() => toRelationValues(initialValue), [initialValue, toRelationValues]);
+  const handleChangeHasMany = useCallback(newValue => {
+    const ids_0 = Array.isArray(newValue) ? newValue.map(relation => relation.value) : [];
+    const isUnchanged = Array.isArray(value_0) && value_0.length === ids_0.length && value_0.every((id_0, index) => id_0 === ids_0[index]);
+    setValue(ids_0, isUnchanged);
+  }, [setValue, value_0]);
+  const handleChangeSingle = useCallback(newValue_0 => {
+    const id_1 = newValue_0?.value ?? null;
+    setValue(id_1, value_0 === id_1);
+  }, [setValue, value_0]);
+  // Selecting the virtual path field is what triggers the server to compute it
+  const selectOptionFields = useMemo(() => titlePathFieldName ? {
+    [titlePathFieldName]: true
+  } : undefined, [titlePathFieldName]);
+  const formatOptionLabel = useCallback(({
+    context,
+    defaultLabel,
+    doc
+  }) => {
+    if (context !== 'menu' || !titlePathFieldName) {
+      return defaultLabel;
     }
-    if (Array.isArray(value_0)) {
-      return value_0;
+    const titlePath = doc?.[titlePathFieldName];
+    if (typeof titlePath !== 'string' || !titlePath) {
+      return defaultLabel;
     }
-    return [value_0];
-  }, [value_0]);
+    return titlePath.split('/').map(segment => segment.trim()).join(' / ');
+  }, [titlePathFieldName]);
   // Memoize to prevent new array references on every render
   const filterByCollection = useMemo(() => documentCollectionSlug ? [documentCollectionSlug] : undefined, [documentCollectionSlug]);
-  const [HierarchyDrawer,, {
-    openDrawer
-  }] = useHierarchyDrawer({
+  const [HierarchyModal,, {
+    openModal
+  }] = useHierarchyModal({
     filterByCollection,
     hierarchyCollectionSlug: hierarchySlug,
     Icon
   });
-  const handleDrawerSave = useCallback(({
-    closeDrawer,
+  // Pass the current value so the browser opens expanded to what is already selected
+  const initialSelections = useMemo(() => {
+    if (!value_0) {
+      return [];
+    }
+    return Array.isArray(value_0) ? value_0 : [value_0];
+  }, [value_0]);
+  const handleModalSave = useCallback(({
+    closeModal,
     selections
   }) => {
-    const ids = Array.from(selections.keys());
-    const newValue = hasMany ? ids : ids[0] ?? null;
-    setValue(newValue);
-    closeDrawer();
+    const ids_1 = Array.from(selections.keys());
+    setValue(hasMany ? ids_1 : ids_1[0] ?? null);
+    closeModal();
   }, [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: /*#__PURE__*/_jsx(CirclePlusIcon, {
-            size: 24
-          }),
-          iconPosition: "left",
-          margin: false,
-          onClick: handleOpenDrawer,
-          size: "medium",
-          children: t('general:selectLabel', {
-            label: hierarchyLabel
-          })
-        })]
-      }), AfterInput, /*#__PURE__*/_jsx(RenderCustomComponent, {
-        CustomComponent: Description,
-        Fallback: /*#__PURE__*/_jsx(FieldDescription, {
-          description: description,
-          path: path
-        })
+  const selectLabel = t('general:selectLabel', {
+    label: hierarchyLabel
+  });
+  const BrowseButton = useMemo(() => /*#__PURE__*/_jsx(Button, {
+    "aria-label": selectLabel,
+    buttonStyle: "secondary",
+    className: `${baseClass}__browse-button`,
+    disabled: disabled,
+    icon: Icon ?? /*#__PURE__*/_jsx(TagIcon, {}),
+    margin: false,
+    onClick: openModal,
+    size: "large",
+    tooltip: selectLabel
+  }), [disabled, Icon, openModal, selectLabel]);
+  return /*#__PURE__*/_jsx(RelationshipInput, {
+    AfterInput: /*#__PURE__*/_jsxs(Fragment, {
+      children: [AfterInput, /*#__PURE__*/_jsx(HierarchyModal, {
+        hasMany: hasMany,
+        initialSelections: initialSelections,
+        onSave: handleModalSave
       })]
-    }), /*#__PURE__*/_jsx(HierarchyDrawer, {
-      hasMany: hasMany,
-      initialSelections: initialSelections,
-      onSave: handleDrawerSave
-    })]
+    }),
+    allowEdit: false,
+    BeforeInput: BeforeInput,
+    className: [baseClass, className].filter(Boolean).join(' '),
+    CreateButton: BrowseButton,
+    Description: Description,
+    description: description,
+    Error: Error,
+    filterOptions: filterOptions,
+    formatDisplayedOptions: flattenOptionGroups,
+    formatOptionLabel: formatOptionLabel,
+    isSortable: isSortable,
+    Label: Label,
+    label: label,
+    localized: localized,
+    maxResultsPerRequest: 10,
+    path: path,
+    placeholder: placeholder,
+    readOnly: readOnly || disabled,
+    relationTo: relationTo,
+    required: required,
+    selectOptionFields: selectOptionFields,
+    showError: showError,
+    style: styles,
+    ...(hasMany === true ? {
+      hasMany: true,
+      initialValue: memoizedInitialValue,
+      onChange: handleChangeHasMany,
+      value: memoizedValue
+    } : {
+      hasMany: false,
+      initialValue: memoizedInitialValue,
+      onChange: handleChangeSingle,
+      value: memoizedValue
+    })
   });
 };
 //# sourceMappingURL=index.client.js.map