@payloadcms/ui 4.0.0-canary.0 → 4.0.0-canary.2

package/dist/elements/FileDetails/DraggableFileDetails/index.js

@@ -5,14 +5,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Button } from '../../Button/index.js';
 import { Thumbnail } from '../../Thumbnail/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'file-details-draggable';
 import { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js';
 import { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js';
 import { EditIcon } from '../../../icons/Edit/index.js';
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
 export const DraggableFileDetails = props => {
-  const $ = _c(20);
+  const $ = _c(21);
   const {
     collectionSlug,
     doc,
@@ -43,7 +43,7 @@ export const DraggableFileDetails = props => {
   }
   const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer(t0);
   let t1;
-  if ($[3] !== DocumentDrawer || $[4] !== DocumentDrawerToggler || $[5] !== collectionSlug || $[6] !== doc || $[7] !== filename || $[8] !== hideRemoveFile || $[9] !== imageCacheTag || $[10] !== isSortable || $[11] !== removeItem || $[12] !== rowIndex || $[13] !== thumbnailURL || $[14] !== uploadConfig || $[15] !== url) {
+  if ($[3] !== DocumentDrawer || $[4] !== DocumentDrawerToggler || $[5] !== collectionSlug || $[6] !== doc || $[7] !== filename || $[8] !== hideRemoveFile || $[9] !== id || $[10] !== imageCacheTag || $[11] !== isSortable || $[12] !== removeItem || $[13] !== rowIndex || $[14] !== thumbnailURL || $[15] !== uploadConfig || $[16] !== url) {
     t1 = draggableSortableItemProps => _jsxs("div", {
       className: [baseClass, draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`].filter(Boolean).join(" "),
       ref: draggableSortableItemProps.setNodeRef,
@@ -82,35 +82,36 @@ export const DraggableFileDetails = props => {
           round: true
         })]
       })]
-    });
+    }, id);
     $[3] = DocumentDrawer;
     $[4] = DocumentDrawerToggler;
     $[5] = collectionSlug;
     $[6] = doc;
     $[7] = filename;
     $[8] = hideRemoveFile;
-    $[9] = imageCacheTag;
-    $[10] = isSortable;
-    $[11] = removeItem;
-    $[12] = rowIndex;
-    $[13] = thumbnailURL;
-    $[14] = uploadConfig;
-    $[15] = url;
-    $[16] = t1;
+    $[9] = id;
+    $[10] = imageCacheTag;
+    $[11] = isSortable;
+    $[12] = removeItem;
+    $[13] = rowIndex;
+    $[14] = thumbnailURL;
+    $[15] = uploadConfig;
+    $[16] = url;
+    $[17] = t1;
   } else {
-    t1 = $[16];
+    t1 = $[17];
   }
   let t2;
-  if ($[17] !== id || $[18] !== t1) {
+  if ($[18] !== id || $[19] !== t1) {
     t2 = _jsx(DraggableSortableItem, {
       id,
       children: t1
     }, id);
-    $[17] = id;
-    $[18] = t1;
-    $[19] = t2;
+    $[18] = id;
+    $[19] = t1;
+    $[20] = t2;
   } else {
-    t2 = $[19];
+    t2 = $[20];
   }
   return t2;
 };

package/dist/elements/FileDetails/DraggableFileDetails/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","Button","Thumbnail","baseClass","DraggableSortableItem","AlignJustifiedIcon","EditIcon","useDocumentDrawer","DraggableFileDetails","props","$","collectionSlug","doc","hideRemoveFile","imageCacheTag","isSortable","removeItem","rowIndex","uploadConfig","id","filename","thumbnailURL","url","t0","DocumentDrawer","DocumentDrawerToggler","t1","draggableSortableItemProps","_jsxs","className","filter","Boolean","join","ref","setNodeRef","style","transform","transition","zIndex","isDragging","undefined","children","_jsx","attributes","listeners","fileSrc","buttonStyle","icon","onClick","round","t2"],"sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details-draggable'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js'\nimport { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js'\nimport { EditIcon } from '../../../icons/Edit/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\n\nexport type DraggableFileDetailsProps = {\n  collectionSlug: string\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  hasImageSizes?: boolean\n  hasMany: boolean\n  hideRemoveFile?: boolean\n  imageCacheTag?: string\n  isSortable?: boolean\n  removeItem?: (index: number) => void\n  rowIndex: number\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const DraggableFileDetails: React.FC<DraggableFileDetailsProps> = (props) => {\n  const {\n    collectionSlug,\n    doc,\n    hideRemoveFile,\n    imageCacheTag,\n    isSortable,\n    removeItem,\n    rowIndex,\n    uploadConfig,\n  } = props\n\n  const { id, filename, thumbnailURL, url } = doc\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    id,\n    collectionSlug,\n  })\n\n  return (\n    <DraggableSortableItem id={id} key={id}>\n      {(draggableSortableItemProps) => (\n        <div\n          className={[\n            baseClass,\n            draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          ref={draggableSortableItemProps.setNodeRef}\n          style={{\n            transform: draggableSortableItemProps.transform,\n            transition: draggableSortableItemProps.transition,\n            zIndex: draggableSortableItemProps.isDragging ? 1 : undefined,\n          }}\n        >\n          <div className={`${baseClass}--drag-wrapper`}>\n            {isSortable && draggableSortableItemProps && (\n              <div\n                className={`${baseClass}__drag`}\n                {...draggableSortableItemProps.attributes}\n                {...draggableSortableItemProps.listeners}\n              >\n                <AlignJustifiedIcon />\n              </div>\n            )}\n            <Thumbnail\n              className={`${baseClass}__thumbnail`}\n              collectionSlug={collectionSlug}\n              doc={doc}\n              fileSrc={thumbnailURL || url}\n              imageCacheTag={imageCacheTag}\n              uploadConfig={uploadConfig}\n            />\n          </div>\n          <div className={`${baseClass}__main-detail`}>{filename}</div>\n\n          <div className={`${baseClass}__actions`}>\n            <DocumentDrawer />\n            <DocumentDrawerToggler>\n              <EditIcon />\n            </DocumentDrawerToggler>\n            {!hideRemoveFile && removeItem && (\n              <Button\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                onClick={() => removeItem(rowIndex)}\n                round\n              />\n            )}\n          </div>\n        </div>\n      )}\n    </DraggableSortableItem>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,MAAW;AAElB,SAASC,MAAM,QAAQ;AACvB,SAASC,SAAS,QAAQ;AAC1B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAIlB,SAASC,qBAAqB,QAAQ;AACtC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,QAAQ,QAAQ;AACzB,SAASC,iBAAiB,QAAQ;AAmBlC,OAAO,MAAMC,oBAAA,GAA4DC,KAAA;EAAA,MAAAC,CAAA,GAAAX,EAAA;EACvE;IAAAY,cAAA;IAAAC,GAAA;IAAAC,cAAA;IAAAC,aAAA;IAAAC,UAAA;IAAAC,UAAA;IAAAC,QAAA;IAAAC;EAAA,IASIT,KAAA;EAEJ;IAAAU,EAAA;IAAAC,QAAA;IAAAC,YAAA;IAAAC;EAAA,IAA4CV,GAAA;EAAA,IAAAW,EAAA;EAAA,IAAAb,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAS,EAAA;IAEsBI,EAAA;MAAAJ,EAAA;MAAAR;IAAA;IAGlED,CAAA,MAAAC,cAAA;IAAAD,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAa,EAAA;EAAA;IAAAA,EAAA,GAAAb,CAAA;EAAA;EAHA,OAAAc,cAAA,EAAAC,qBAAA,IAAgDlB,iBAAA,CAAkBgB,EAGlE;EAAA,IAAAG,EAAA;EAAA,IAAAhB,CAAA,QAAAc,cAAA,IAAAd,CAAA,QAAAe,qBAAA,IAAAf,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAE,GAAA,IAAAF,CAAA,QAAAU,QAAA,IAAAV,CAAA,QAAAG,cAAA,IAAAH,CAAA,QAAAI,aAAA,IAAAJ,CAAA,SAAAK,UAAA,IAAAL,CAAA,SAAAM,UAAA,IAAAN,CAAA,SAAAO,QAAA,IAAAP,CAAA,SAAAW,YAAA,IAAAX,CAAA,SAAAQ,YAAA,IAAAR,CAAA,SAAAY,GAAA;IAIKI,EAAA,GAAAC,0BAAA,IACCC,KAAA,CAAC;MAAAC,SAAA,EACY,CAAA1B,SAAA,EAETwB,0BAAA,IAA8BZ,UAAA,IAAc,GAAAZ,SAAA,mBAA+B,EAAA2B,MAAA,CAAAC,OAEnE,EAAAC,IAAA,CACF;MAAAC,GAAA,EACHN,0BAAA,CAAAO,UAAA;MAAAC,KAAA;QAAAC,SAAA,EAEQT,0BAAA,CAAAS,SAAA;QAAAC,UAAA,EACCV,0BAAA,CAAAU,UAAA;QAAAC,MAAA,EACJX,0BAAA,CAAAY,UAAA,OAAAC;MAA4C;MAAAC,QAAA,GAGtDb,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAA1B,SAAA,gBAA4B;QAAAsC,QAAA,GACzC1B,UAAA,IAAcY,0BAAA,IACbe,IAAA,CAAC;UAAAb,SAAA,EACY,GAAA1B,SAAA,QAAoB;UAAA,GAC3BwB,0BAAA,CAAAgB,UAAA;UAAA,GACAhB,0BAAA,CAAAiB,SAAA;UAAAH,QAAA,EAEJC,IAAA,CAAArC,kBAAA,IAAC;QAAA,C,GAGLqC,IAAA,CAAAxC,SAAA;UAAA2B,SAAA,EACa,GAAA1B,SAAA,aAAyB;UAAAQ,cAAA;UAAAC,GAAA;UAAAiC,OAAA,EAG3BxB,YAAA,IAAgBC,GAAA;UAAAR,aAAA;UAAAI;QAAA,C;UAK7BwB,IAAA,CAAC;QAAAb,SAAA,EAAe,GAAA1B,SAAA,eAA2B;QAAAsC,QAAA,EAAGrB;MAAA,C,GAE9CQ,KAAA,CAAC;QAAAC,SAAA,EAAe,GAAA1B,SAAA,WAAuB;QAAAsC,QAAA,GACrCC,IAAA,CAAClB,cAAA,OACDkB,IAAA,CAACjB,qBAAA;UAAAgB,QAAA,EACCC,IAAA,CAAApC,QAAA,IAAC;QAAA,C,GAEF,CAACO,cAAA,IAAkBG,UAAA,IAClB0B,IAAA,CAAAzC,MAAA;UAAA6C,WAAA,EACc;UAAAjB,SAAA,EACD,GAAA1B,SAAA,UAAsB;UAAA4C,IAAA,EAC5B;UAAAC,OAAA,EAAAA,CAAA,KACUhC,UAAA,CAAWC,QAAA;UAAAgC,KAAA;QAAA,C;;;;;;;;;;;;;;;;;;;;;;IA/CtCC,EAAA,GAAAR,IAAA,CAAAtC,qBAAA;MAAAe,EAAA;MAAAsB,QAAA,EACGf;OADiCP,EAAA;IAAAT,CAAA,OAAAS,EAAA;IAAAT,CAAA,OAAAgB,EAAA;IAAAhB,CAAA,OAAAwC,EAAA;EAAA;IAAAA,EAAA,GAAAxC,CAAA;EAAA;EAAA,OAApCwC,EAAoC;AAAA,CAwDxC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","Button","Thumbnail","baseClass","DraggableSortableItem","AlignJustifiedIcon","EditIcon","useDocumentDrawer","DraggableFileDetails","props","$","collectionSlug","doc","hideRemoveFile","imageCacheTag","isSortable","removeItem","rowIndex","uploadConfig","id","filename","thumbnailURL","url","t0","DocumentDrawer","DocumentDrawerToggler","t1","draggableSortableItemProps","_jsxs","className","filter","Boolean","join","ref","setNodeRef","style","transform","transition","zIndex","isDragging","undefined","children","_jsx","attributes","listeners","fileSrc","buttonStyle","icon","onClick","round","t2"],"sources":["../../../../src/elements/FileDetails/DraggableFileDetails/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport { Button } from '../../Button/index.js'\nimport { Thumbnail } from '../../Thumbnail/index.js'\nimport './index.css'\n\nconst baseClass = 'file-details-draggable'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload'\n\nimport { DraggableSortableItem } from '../../../elements/DraggableSortable/DraggableSortableItem/index.js'\nimport { AlignJustifiedIcon } from '../../../icons/AlignJustified/index.js'\nimport { EditIcon } from '../../../icons/Edit/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\n\nexport type DraggableFileDetailsProps = {\n  collectionSlug: string\n  customUploadActions?: React.ReactNode[]\n  doc: {\n    sizes?: FileSizes\n  } & Data\n  enableAdjustments?: boolean\n  hasImageSizes?: boolean\n  hasMany: boolean\n  hideRemoveFile?: boolean\n  imageCacheTag?: string\n  isSortable?: boolean\n  removeItem?: (index: number) => void\n  rowIndex: number\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const DraggableFileDetails: React.FC<DraggableFileDetailsProps> = (props) => {\n  const {\n    collectionSlug,\n    doc,\n    hideRemoveFile,\n    imageCacheTag,\n    isSortable,\n    removeItem,\n    rowIndex,\n    uploadConfig,\n  } = props\n\n  const { id, filename, thumbnailURL, url } = doc\n\n  const [DocumentDrawer, DocumentDrawerToggler] = useDocumentDrawer({\n    id,\n    collectionSlug,\n  })\n\n  return (\n    <DraggableSortableItem id={id} key={id}>\n      {(draggableSortableItemProps) => (\n        <div\n          className={[\n            baseClass,\n            draggableSortableItemProps && isSortable && `${baseClass}--has-drag-handle`,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          key={id}\n          ref={draggableSortableItemProps.setNodeRef}\n          style={{\n            transform: draggableSortableItemProps.transform,\n            transition: draggableSortableItemProps.transition,\n            zIndex: draggableSortableItemProps.isDragging ? 1 : undefined,\n          }}\n        >\n          <div className={`${baseClass}--drag-wrapper`}>\n            {isSortable && draggableSortableItemProps && (\n              <div\n                className={`${baseClass}__drag`}\n                {...draggableSortableItemProps.attributes}\n                {...draggableSortableItemProps.listeners}\n              >\n                <AlignJustifiedIcon />\n              </div>\n            )}\n            <Thumbnail\n              className={`${baseClass}__thumbnail`}\n              collectionSlug={collectionSlug}\n              doc={doc}\n              fileSrc={thumbnailURL || url}\n              imageCacheTag={imageCacheTag}\n              uploadConfig={uploadConfig}\n            />\n          </div>\n          <div className={`${baseClass}__main-detail`}>{filename}</div>\n\n          <div className={`${baseClass}__actions`}>\n            <DocumentDrawer />\n            <DocumentDrawerToggler>\n              <EditIcon />\n            </DocumentDrawerToggler>\n            {!hideRemoveFile && removeItem && (\n              <Button\n                buttonStyle=\"ghost\"\n                className={`${baseClass}__remove`}\n                icon=\"x\"\n                onClick={() => removeItem(rowIndex)}\n                round\n              />\n            )}\n          </div>\n        </div>\n      )}\n    </DraggableSortableItem>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/GroupByControl/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GroupByControl/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAS,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAG5E,OAAO,KAAuC,MAAM,OAAO,CAAA;AAY3D,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;CAC/B,CAAA;AAoBD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqPxD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GroupByControl/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAS,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAG5E,OAAO,KAAuC,MAAM,OAAO,CAAA;AAW3D,OAAO,aAAa,CAAA;AAEpB,MAAM,MAAM,mBAAmB,GAAG;IAChC,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;CAC/B,CAAA;AAoBD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAoPxD,CAAA"}

package/dist/elements/GroupByControl/index.js

@@ -3,7 +3,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { isFieldDisabled } from 'payload/shared';
 import React, { useCallback, useMemo, useRef } from 'react';
-import { CheckIcon } from '../../icons/Check/index.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { TrashIcon } from '../../icons/Trash/index.js';
 import { XIcon } from '../../icons/X/index.js';
@@ -75,6 +74,9 @@ export const GroupByControl = ({
       });
     })();
   }, [groupByFieldName, listQuery]);
+  if (filteredFields.length === 0) {
+    return null;
+  }
   const directionValue = !groupByRaw || typeof groupByRaw !== 'string' ? 'asc' : groupByRaw.startsWith('-') ? 'desc' : 'asc';
   // Build the trigger button label
   const triggerLabel = isActive ? t('general:groupByLabel', {
@@ -134,12 +136,9 @@ export const GroupByControl = ({
                 horizontalAlign: "right",
                 render: ({
                   close: closeFieldPopup
-                }) => /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
-                  children: filteredFields.map((field_1, i) => /*#__PURE__*/_jsx(PopupList.Button, {
+                }) => /*#__PURE__*/_jsx(PopupList.RadioGroup, {
+                  children: filteredFields.map((field_1, i) => /*#__PURE__*/_jsx(PopupList.RadioGroupItem, {
                     active: field_1.fieldPath === groupByFieldName,
-                    icon: field_1.fieldPath === groupByFieldName ? /*#__PURE__*/_jsx(CheckIcon, {
-                      size: 16
-                    }) : undefined,
                     onClick: () => {
                       handleFieldSelect(field_1.fieldPath);
                       closeFieldPopup();

package/dist/elements/GroupByControl/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["isFieldDisabled","React","useCallback","useMemo","useRef","CheckIcon","ChevronIcon","TrashIcon","XIcon","useAuth","useListQuery","useTranslation","reduceFieldsToOptions","Button","Popup","PopupList","baseClass","supportedFieldTypes","GroupByControl","collectionSlug","fields","i18n","t","permissions","listQuery","closeRef","groupByRaw","query","groupBy","groupByFieldName","replace","fieldPermissions","collections","reducedFields","filteredFields","filter","field","fieldPath","includes","type","groupByField","find","isActive","Boolean","handleFieldSelect","value","refineListData","startsWith","page","handleClear","current","handleDirectionSelect","directionValue","triggerLabel","label","_jsx","className","horizontalAlign","portalClassName","render","close","_jsxs","buttonStyle","icon","onClick","round","size","closeFieldPopup","ButtonGroup","map","i","active","undefined","renderButton","onKeyDown","direction","verticalAlign","disabled","closeSortPopup","RadioGroup","RadioGroupItem","join","ariaProps","extraButtonProps","id","selected","theme"],"sources":["../../../src/elements/GroupByControl/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, Field, SanitizedCollectionConfig } from 'payload'\n\nimport { isFieldDisabled } from 'payload/shared'\nimport React, { useCallback, useMemo, useRef } from 'react'\n\nimport { CheckIcon } from '../../icons/Check/index.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { TrashIcon } from '../../icons/Trash/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nexport type GroupByControlProps = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly fields: ClientField[]\n}\n\nconst baseClass = 'group-by-control'\n\n/**\n * Supported field types for group by functionality.\n */\nconst supportedFieldTypes: Field['type'][] = [\n  'text',\n  'textarea',\n  'number',\n  'select',\n  'relationship',\n  'date',\n  'checkbox',\n  'radio',\n  'email',\n  'upload',\n]\n\nexport const GroupByControl: React.FC<GroupByControlProps> = ({ collectionSlug, fields }) => {\n  const { i18n, t } = useTranslation()\n  const { permissions } = useAuth()\n  const listQuery = useListQuery()\n  const closeRef = useRef<(() => void) | null>(null)\n\n  const groupByRaw = listQuery.query?.groupBy\n  const groupByFieldName = groupByRaw?.replace(/^-/, '')\n\n  const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields\n\n  const reducedFields = useMemo(\n    () =>\n      reduceFieldsToOptions({\n        fieldPermissions,\n        fields,\n        i18n,\n      }),\n    [fields, fieldPermissions, i18n],\n  )\n\n  const filteredFields = useMemo(\n    () =>\n      reducedFields.filter(\n        (field) =>\n          !isFieldDisabled(field.field, 'groupBy') &&\n          field.fieldPath !== 'id' &&\n          supportedFieldTypes.includes(field.field.type),\n      ),\n    [reducedFields],\n  )\n\n  const groupByField = reducedFields.find((field) => field.fieldPath === groupByFieldName)\n  const isActive = Boolean(groupByFieldName && groupByField)\n\n  const handleFieldSelect = useCallback(\n    (value: string) => {\n      void (async () => {\n        if (typeof listQuery.refineListData !== 'function') {\n          return\n        }\n        await listQuery.refineListData({\n          groupBy: listQuery.query?.groupBy?.startsWith('-') ? `-${value}` : value,\n          page: 1,\n        })\n      })()\n    },\n    [listQuery],\n  )\n\n  const handleClear = useCallback(() => {\n    void (async () => {\n      if (typeof listQuery.refineListData === 'function') {\n        await listQuery.refineListData({ groupBy: '' })\n      }\n      closeRef.current?.()\n    })()\n  }, [listQuery])\n\n  const handleDirectionSelect = useCallback(\n    (value: 'asc' | 'desc') => {\n      void (async () => {\n        if (!groupByFieldName || typeof listQuery.refineListData !== 'function') {\n          return\n        }\n        await listQuery.refineListData({\n          groupBy: value === 'asc' ? groupByFieldName : `-${groupByFieldName}`,\n          page: 1,\n        })\n      })()\n    },\n    [groupByFieldName, listQuery],\n  )\n\n  const directionValue =\n    !groupByRaw || typeof groupByRaw !== 'string'\n      ? 'asc'\n      : groupByRaw.startsWith('-')\n        ? 'desc'\n        : 'asc'\n\n  // Build the trigger button label\n  const triggerLabel = isActive\n    ? t('general:groupByLabel', { label: groupByField?.label || '' })\n    : t('general:groupByLabel', { label: '' })\n\n  return (\n    <Popup\n      className={baseClass}\n      horizontalAlign=\"right\"\n      portalClassName={`${baseClass}__popup`}\n      render={({ close }) => {\n        closeRef.current = close\n        return (\n          <div className={`${baseClass}__content`}>\n            <div className={`${baseClass}__header`}>\n              <span className={`${baseClass}__title`}>\n                {t('general:groupByLabel', { label: '' })}\n              </span>\n              <div className={`${baseClass}__header-actions`}>\n                {isActive && (\n                  <Button\n                    aria-label={t('general:clear')}\n                    buttonStyle=\"ghost\"\n                    icon={<TrashIcon />}\n                    onClick={handleClear}\n                    round\n                    size=\"medium\"\n                  />\n                )}\n                <Button\n                  aria-label={t('general:close')}\n                  buttonStyle=\"ghost\"\n                  icon={<XIcon size={24} />}\n                  onClick={close}\n                  round\n                  size=\"medium\"\n                />\n              </div>\n            </div>\n            <div className={`${baseClass}__body`}>\n              <div className={`${baseClass}__row`}>\n                <label className={`${baseClass}__label`}>{t('general:field')}</label>\n                <div className={`${baseClass}__input`} data-popup-prevent-close>\n                  <Popup\n                    className={`${baseClass}__select-popup`}\n                    horizontalAlign=\"right\"\n                    render={({ close: closeFieldPopup }) => (\n                      <PopupList.ButtonGroup>\n                        {filteredFields.map((field, i) => (\n                          <PopupList.Button\n                            active={field.fieldPath === groupByFieldName}\n                            icon={\n                              field.fieldPath === groupByFieldName ? (\n                                <CheckIcon size={16} />\n                              ) : undefined\n                            }\n                            key={i}\n                            onClick={() => {\n                              handleFieldSelect(field.fieldPath)\n                              closeFieldPopup()\n                            }}\n                          >\n                            {field.label}\n                          </PopupList.Button>\n                        ))}\n                      </PopupList.ButtonGroup>\n                    )}\n                    renderButton={({ active, onClick, onKeyDown }) => (\n                      <button\n                        className={`${baseClass}__select-trigger`}\n                        onClick={onClick}\n                        onKeyDown={onKeyDown}\n                        type=\"button\"\n                      >\n                        <span className={`${baseClass}__select-value`}>\n                          {groupByField?.label || t('general:selectValue')}\n                        </span>\n                        <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                      </button>\n                    )}\n                    size=\"medium\"\n                    verticalAlign=\"bottom\"\n                  />\n                </div>\n              </div>\n              <div className={`${baseClass}__row`}>\n                <label className={`${baseClass}__label`}>{t('general:sort')}</label>\n                <div className={`${baseClass}__input`} data-popup-prevent-close>\n                  <Popup\n                    className={`${baseClass}__select-popup`}\n                    disabled={!groupByFieldName}\n                    horizontalAlign=\"right\"\n                    render={({ close: closeSortPopup }) => (\n                      <PopupList.RadioGroup>\n                        <PopupList.RadioGroupItem\n                          active={directionValue === 'desc'}\n                          onClick={() => {\n                            handleDirectionSelect('desc')\n                            closeSortPopup()\n                          }}\n                        >\n                          {t('general:descending')}\n                        </PopupList.RadioGroupItem>\n                        <PopupList.RadioGroupItem\n                          active={directionValue === 'asc'}\n                          onClick={() => {\n                            handleDirectionSelect('asc')\n                            closeSortPopup()\n                          }}\n                        >\n                          {t('general:ascending')}\n                        </PopupList.RadioGroupItem>\n                      </PopupList.RadioGroup>\n                    )}\n                    renderButton={({ active, onClick, onKeyDown }) => (\n                      <button\n                        className={[\n                          `${baseClass}__select-trigger`,\n                          !groupByFieldName && `${baseClass}__select-trigger--disabled`,\n                        ]\n                          .filter(Boolean)\n                          .join(' ')}\n                        disabled={!groupByFieldName}\n                        onClick={onClick}\n                        onKeyDown={onKeyDown}\n                        type=\"button\"\n                      >\n                        <span className={`${baseClass}__select-value`}>\n                          {directionValue === 'desc'\n                            ? t('general:descending')\n                            : t('general:ascending')}\n                        </span>\n                        <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                      </button>\n                    )}\n                    size=\"small\"\n                    verticalAlign=\"bottom\"\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        )\n      }}\n      renderButton={({ active, onClick, onKeyDown, ...ariaProps }) => (\n        <Button\n          buttonStyle=\"secondary\"\n          className={`${baseClass}__trigger`}\n          extraButtonProps={{ onKeyDown }}\n          icon={<ChevronIcon direction={active ? 'up' : 'down'} size={16} />}\n          id=\"toggle-group-by\"\n          onClick={onClick}\n          selected={active || isActive}\n          size=\"medium\"\n          {...ariaProps}\n        >\n          {triggerLabel}\n        </Button>\n      )}\n      size=\"large\"\n      theme=\"auto\"\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["isFieldDisabled","React","useCallback","useMemo","useRef","ChevronIcon","TrashIcon","XIcon","useAuth","useListQuery","useTranslation","reduceFieldsToOptions","Button","Popup","PopupList","baseClass","supportedFieldTypes","GroupByControl","collectionSlug","fields","i18n","t","permissions","listQuery","closeRef","groupByRaw","query","groupBy","groupByFieldName","replace","fieldPermissions","collections","reducedFields","filteredFields","filter","field","fieldPath","includes","type","groupByField","find","isActive","Boolean","handleFieldSelect","value","refineListData","startsWith","page","handleClear","current","handleDirectionSelect","length","directionValue","triggerLabel","label","_jsx","className","horizontalAlign","portalClassName","render","close","_jsxs","buttonStyle","icon","onClick","round","size","closeFieldPopup","RadioGroup","map","i","RadioGroupItem","active","renderButton","onKeyDown","direction","verticalAlign","disabled","closeSortPopup","join","ariaProps","extraButtonProps","id","selected","theme"],"sources":["../../../src/elements/GroupByControl/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, Field, SanitizedCollectionConfig } from 'payload'\n\nimport { isFieldDisabled } from 'payload/shared'\nimport React, { useCallback, useMemo, useRef } from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { TrashIcon } from '../../icons/Trash/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.css'\n\nexport type GroupByControlProps = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly fields: ClientField[]\n}\n\nconst baseClass = 'group-by-control'\n\n/**\n * Supported field types for group by functionality.\n */\nconst supportedFieldTypes: Field['type'][] = [\n  'text',\n  'textarea',\n  'number',\n  'select',\n  'relationship',\n  'date',\n  'checkbox',\n  'radio',\n  'email',\n  'upload',\n]\n\nexport const GroupByControl: React.FC<GroupByControlProps> = ({ collectionSlug, fields }) => {\n  const { i18n, t } = useTranslation()\n  const { permissions } = useAuth()\n  const listQuery = useListQuery()\n  const closeRef = useRef<(() => void) | null>(null)\n\n  const groupByRaw = listQuery.query?.groupBy\n  const groupByFieldName = groupByRaw?.replace(/^-/, '')\n\n  const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields\n\n  const reducedFields = useMemo(\n    () =>\n      reduceFieldsToOptions({\n        fieldPermissions,\n        fields,\n        i18n,\n      }),\n    [fields, fieldPermissions, i18n],\n  )\n\n  const filteredFields = useMemo(\n    () =>\n      reducedFields.filter(\n        (field) =>\n          !isFieldDisabled(field.field, 'groupBy') &&\n          field.fieldPath !== 'id' &&\n          supportedFieldTypes.includes(field.field.type),\n      ),\n    [reducedFields],\n  )\n\n  const groupByField = reducedFields.find((field) => field.fieldPath === groupByFieldName)\n  const isActive = Boolean(groupByFieldName && groupByField)\n\n  const handleFieldSelect = useCallback(\n    (value: string) => {\n      void (async () => {\n        if (typeof listQuery.refineListData !== 'function') {\n          return\n        }\n        await listQuery.refineListData({\n          groupBy: listQuery.query?.groupBy?.startsWith('-') ? `-${value}` : value,\n          page: 1,\n        })\n      })()\n    },\n    [listQuery],\n  )\n\n  const handleClear = useCallback(() => {\n    void (async () => {\n      if (typeof listQuery.refineListData === 'function') {\n        await listQuery.refineListData({ groupBy: '' })\n      }\n      closeRef.current?.()\n    })()\n  }, [listQuery])\n\n  const handleDirectionSelect = useCallback(\n    (value: 'asc' | 'desc') => {\n      void (async () => {\n        if (!groupByFieldName || typeof listQuery.refineListData !== 'function') {\n          return\n        }\n        await listQuery.refineListData({\n          groupBy: value === 'asc' ? groupByFieldName : `-${groupByFieldName}`,\n          page: 1,\n        })\n      })()\n    },\n    [groupByFieldName, listQuery],\n  )\n\n  if (filteredFields.length === 0) {\n    return null\n  }\n\n  const directionValue =\n    !groupByRaw || typeof groupByRaw !== 'string'\n      ? 'asc'\n      : groupByRaw.startsWith('-')\n        ? 'desc'\n        : 'asc'\n\n  // Build the trigger button label\n  const triggerLabel = isActive\n    ? t('general:groupByLabel', { label: groupByField?.label || '' })\n    : t('general:groupByLabel', { label: '' })\n\n  return (\n    <Popup\n      className={baseClass}\n      horizontalAlign=\"right\"\n      portalClassName={`${baseClass}__popup`}\n      render={({ close }) => {\n        closeRef.current = close\n        return (\n          <div className={`${baseClass}__content`}>\n            <div className={`${baseClass}__header`}>\n              <span className={`${baseClass}__title`}>\n                {t('general:groupByLabel', { label: '' })}\n              </span>\n              <div className={`${baseClass}__header-actions`}>\n                {isActive && (\n                  <Button\n                    aria-label={t('general:clear')}\n                    buttonStyle=\"ghost\"\n                    icon={<TrashIcon />}\n                    onClick={handleClear}\n                    round\n                    size=\"medium\"\n                  />\n                )}\n                <Button\n                  aria-label={t('general:close')}\n                  buttonStyle=\"ghost\"\n                  icon={<XIcon size={24} />}\n                  onClick={close}\n                  round\n                  size=\"medium\"\n                />\n              </div>\n            </div>\n            <div className={`${baseClass}__body`}>\n              <div className={`${baseClass}__row`}>\n                <label className={`${baseClass}__label`}>{t('general:field')}</label>\n                <div className={`${baseClass}__input`} data-popup-prevent-close>\n                  <Popup\n                    className={`${baseClass}__select-popup`}\n                    horizontalAlign=\"right\"\n                    render={({ close: closeFieldPopup }) => (\n                      <PopupList.RadioGroup>\n                        {filteredFields.map((field, i) => (\n                          <PopupList.RadioGroupItem\n                            active={field.fieldPath === groupByFieldName}\n                            key={i}\n                            onClick={() => {\n                              handleFieldSelect(field.fieldPath)\n                              closeFieldPopup()\n                            }}\n                          >\n                            {field.label}\n                          </PopupList.RadioGroupItem>\n                        ))}\n                      </PopupList.RadioGroup>\n                    )}\n                    renderButton={({ active, onClick, onKeyDown }) => (\n                      <button\n                        className={`${baseClass}__select-trigger`}\n                        onClick={onClick}\n                        onKeyDown={onKeyDown}\n                        type=\"button\"\n                      >\n                        <span className={`${baseClass}__select-value`}>\n                          {groupByField?.label || t('general:selectValue')}\n                        </span>\n                        <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                      </button>\n                    )}\n                    size=\"medium\"\n                    verticalAlign=\"bottom\"\n                  />\n                </div>\n              </div>\n              <div className={`${baseClass}__row`}>\n                <label className={`${baseClass}__label`}>{t('general:sort')}</label>\n                <div className={`${baseClass}__input`} data-popup-prevent-close>\n                  <Popup\n                    className={`${baseClass}__select-popup`}\n                    disabled={!groupByFieldName}\n                    horizontalAlign=\"right\"\n                    render={({ close: closeSortPopup }) => (\n                      <PopupList.RadioGroup>\n                        <PopupList.RadioGroupItem\n                          active={directionValue === 'desc'}\n                          onClick={() => {\n                            handleDirectionSelect('desc')\n                            closeSortPopup()\n                          }}\n                        >\n                          {t('general:descending')}\n                        </PopupList.RadioGroupItem>\n                        <PopupList.RadioGroupItem\n                          active={directionValue === 'asc'}\n                          onClick={() => {\n                            handleDirectionSelect('asc')\n                            closeSortPopup()\n                          }}\n                        >\n                          {t('general:ascending')}\n                        </PopupList.RadioGroupItem>\n                      </PopupList.RadioGroup>\n                    )}\n                    renderButton={({ active, onClick, onKeyDown }) => (\n                      <button\n                        className={[\n                          `${baseClass}__select-trigger`,\n                          !groupByFieldName && `${baseClass}__select-trigger--disabled`,\n                        ]\n                          .filter(Boolean)\n                          .join(' ')}\n                        disabled={!groupByFieldName}\n                        onClick={onClick}\n                        onKeyDown={onKeyDown}\n                        type=\"button\"\n                      >\n                        <span className={`${baseClass}__select-value`}>\n                          {directionValue === 'desc'\n                            ? t('general:descending')\n                            : t('general:ascending')}\n                        </span>\n                        <ChevronIcon direction={active ? 'up' : 'down'} size={16} />\n                      </button>\n                    )}\n                    size=\"small\"\n                    verticalAlign=\"bottom\"\n                  />\n                </div>\n              </div>\n            </div>\n          </div>\n        )\n      }}\n      renderButton={({ active, onClick, onKeyDown, ...ariaProps }) => (\n        <Button\n          buttonStyle=\"secondary\"\n          className={`${baseClass}__trigger`}\n          extraButtonProps={{ onKeyDown }}\n          icon={<ChevronIcon direction={active ? 'up' : 'down'} size={16} />}\n          id=\"toggle-group-by\"\n          onClick={onClick}\n          selected={active || isActive}\n          size=\"medium\"\n          {...ariaProps}\n        >\n          {triggerLabel}\n        </Button>\n      )}\n      size=\"large\"\n      theme=\"auto\"\n      verticalAlign=\"bottom\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,26 +1,8 @@
 @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 {
+  .dialog.hierarchy-drawer {
     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;
+    max-width: calc(100vw - var(--spacer-6));
   }
 
   .hierarchy-drawer__content {
@@ -40,7 +22,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: var(--spacer-2) var(--gutter-h);
+    padding: var(--spacer-2) var(--spacer-2-5);
     border-bottom: 1px solid var(--color-border);
     flex-shrink: 0;
   }

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

@@ -1 +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"}
+{"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;AAajF,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"}

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

@@ -8,8 +8,9 @@ import { TagIcon } from '../../../icons/Tag/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useHierarchy } from '../../../providers/Hierarchy/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
+import { DialogModal } from '../../Dialog/index.js';
 import { useDocumentDrawer } from '../../DocumentDrawer/index.js';
-import { Drawer, DrawerDepthProvider } from '../../Drawer/index.js';
+import { DrawerDepthProvider } from '../../Drawer/index.js';
 import { DrawerActionHeader } from '../../DrawerActionHeader/index.js';
 import { HierarchyColumnBrowser } from '../ColumnBrowser/index.js';
 import { fetchAncestorPath } from './fetchAncestorPath.js';
@@ -275,9 +276,10 @@ export const HierarchyDrawer = props => {
     ref: drawerContentRef
   }), [handleCreateNew, props]);
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Drawer, {
+    children: [/*#__PURE__*/_jsx(DialogModal, {
       className: baseClass,
-      Header: null,
+      closeOnBlur: true,
+      size: "large",
       slug: drawerSlug,
       children: drawerContent
     }), /*#__PURE__*/_jsx(DrawerDepthProvider, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getTranslation","React","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","useEffectEvent","TagIcon","useConfig","useHierarchy","useTranslation","useDocumentDrawer","Drawer","DrawerDepthProvider","DrawerActionHeader","HierarchyColumnBrowser","fetchAncestorPath","baseClass","HierarchyDrawerContent","baseFilter","closeDrawer","columnBrowserRef","disabledIds","filterByCollection","hasMany","hierarchyCollectionSlug","Icon","initialSelections","onCreateNew","onMoveToRoot","onSave","parentFieldName","ref","showMoveToRoot","useAsTitle","i18n","t","config","routes","api","serverURL","getEntityConfig","collectionConfig","collectionSlug","collectionLabel","labels","plural","parentFieldName_internal","hierarchy","initialExpandedPath","setInitialExpandedPath","isLoadingPath","setIsLoadingPath","Boolean","length","hasLoadedPathRef","firstSelection","loadAncestorPath","itemId","path","current","selections","setSelections","map","Map","id","set","selectedIds","Set","keys","ancestorsWithSelections","handleCancel","handleSave","handleSelect","prev","next","has","delete","clear","handleClearAll","selectItem","selectionCount","size","_jsxs","className","_jsx","onCancel","saveLabel","title","label","onClick","type","_Fragment","onSelect","HierarchyDrawer","props","drawerSlug","refreshTree","createParentId","setCreateParentId","drawerContentRef","documentDrawerKey","setDocumentDrawerKey","documentDrawerSlug","DocumentDrawer","closeDocumentDrawer","openDrawer","openDocumentDrawer","handleCreateNew","parentId","setTimeout","handleDocumentSave","doc","undefined","refreshColumn","drawerContent","Header","slug","initialData"],"sources":["../../../../src/elements/Hierarchy/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport type { HierarchyColumnBrowserRef } from '../ColumnBrowser/index.js'\nimport type { HierarchyDrawerInternalProps, SelectionWithPath } from './types.js'\n\nimport { useEffectEvent } from '../../../hooks/useEffectEvent.js'\nimport { TagIcon } from '../../../icons/Tag/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useHierarchy } from '../../../providers/Hierarchy/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { Drawer, DrawerDepthProvider } from '../../Drawer/index.js'\nimport { DrawerActionHeader } from '../../DrawerActionHeader/index.js'\nimport { HierarchyColumnBrowser } from '../ColumnBrowser/index.js'\nimport { fetchAncestorPath } from './fetchAncestorPath.js'\nimport './index.css'\n\nexport const baseClass = 'hierarchy-drawer'\n\ntype HierarchyDrawerContentProps = {\n  columnBrowserRef?: React.RefObject<HierarchyColumnBrowserRef | null>\n  onCreateNew?: (params: { parentId: null | number | string }) => void\n} & HierarchyDrawerInternalProps\n\nexport type HierarchyDrawerContentRef = {\n  selectItem: (id: number | string) => void\n}\n\nexport const HierarchyDrawerContent = function HierarchyDrawerContent({\n  baseFilter,\n  closeDrawer,\n  columnBrowserRef,\n  disabledIds,\n  filterByCollection,\n  hasMany = false,\n  hierarchyCollectionSlug,\n  Icon,\n  initialSelections,\n  onCreateNew,\n  onMoveToRoot,\n  onSave,\n  parentFieldName,\n  ref,\n  showMoveToRoot,\n  useAsTitle,\n}: { ref?: React.RefObject<HierarchyDrawerContentRef | null> } & HierarchyDrawerContentProps) {\n  const { i18n, t } = useTranslation()\n  // NOTE: Do NOT use useModal() here - it causes re-renders when any modal state changes\n  // Use closeDrawer prop instead which already handles closing the modal\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n  const collectionLabel = collectionConfig\n    ? getTranslation(collectionConfig.labels?.plural || hierarchyCollectionSlug, i18n)\n    : hierarchyCollectionSlug\n\n  const parentFieldName_internal =\n    collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n      ? collectionConfig.hierarchy.parentFieldName\n      : parentFieldName\n\n  const [initialExpandedPath, setInitialExpandedPath] = useState<(number | string)[] | undefined>()\n  const [isLoadingPath, setIsLoadingPath] = useState(Boolean(initialSelections?.length))\n  const hasLoadedPathRef = React.useRef(false)\n  const firstSelection = initialSelections?.[0]\n\n  const loadAncestorPath = useEffectEvent(async (itemId?: number | string) => {\n    if (!itemId) {\n      setIsLoadingPath(false)\n      return\n    }\n\n    try {\n      const path = await fetchAncestorPath({\n        api,\n        collectionSlug: hierarchyCollectionSlug,\n        itemId,\n        parentFieldName: parentFieldName_internal,\n        serverURL,\n      })\n      setInitialExpandedPath(path)\n    } catch {\n      // Silently handle fetch errors - will just start at root\n    } finally {\n      setIsLoadingPath(false)\n    }\n  })\n\n  // Load ancestor path on mount\n  useEffect(() => {\n    if (hasLoadedPathRef.current) {\n      return\n    }\n    hasLoadedPathRef.current = true\n    void loadAncestorPath(firstSelection)\n  }, [firstSelection])\n\n  const [selections, setSelections] = useState<Map<number | string, SelectionWithPath>>(() => {\n    const map = new Map<number | string, SelectionWithPath>()\n\n    if (initialSelections) {\n      for (const id of initialSelections) {\n        map.set(id, { id, path: [] })\n      }\n    }\n\n    return map\n  })\n\n  const selectedIds = useMemo(() => new Set(selections.keys()), [selections])\n\n  // For now, ancestorsWithSelections is empty - will be computed when we have path tracking\n  const ancestorsWithSelections = useMemo(() => new Set<number | string>(), [])\n\n  const handleCancel = useCallback(() => {\n    closeDrawer()\n  }, [closeDrawer])\n\n  const handleSave = useCallback(() => {\n    onSave({ closeDrawer, selections })\n  }, [onSave, selections, closeDrawer])\n\n  const handleSelect = useCallback(\n    ({\n      id,\n      path,\n    }: {\n      id: number | string\n      path: Array<{ id: number | string; title: string }>\n    }) => {\n      setSelections((prev) => {\n        const next = new Map(prev)\n\n        if (next.has(id)) {\n          next.delete(id)\n        } else {\n          if (!hasMany) {\n            // Single select: clear previous selections\n            next.clear()\n          }\n          next.set(id, { id, path })\n        }\n\n        return next\n      })\n    },\n    [hasMany],\n  )\n\n  const handleClearAll = useCallback(() => {\n    setSelections(new Map())\n  }, [])\n\n  // Expose selectItem for programmatic selection (e.g., after creating a new item)\n  useImperativeHandle(\n    ref,\n    () => ({\n      selectItem: (id: number | string) => {\n        setSelections((prev) => {\n          const next = new Map(prev)\n          if (!hasMany) {\n            next.clear()\n          }\n          // Path will be empty for newly created items - could be enhanced later\n          next.set(id, { id, path: [] })\n          return next\n        })\n      },\n    }),\n    [hasMany],\n  )\n\n  const selectionCount = selections.size\n\n  return (\n    <div className={`${baseClass}__content`}>\n      <DrawerActionHeader\n        onCancel={handleCancel}\n        onSave={handleSave}\n        saveLabel={t('general:select')}\n        title={t('general:selectValue', { label: collectionLabel })}\n      />\n      <div className={`${baseClass}__subheader`}>\n        <div className={`${baseClass}__subheader-left`}>\n          {Icon || <TagIcon />}\n          <h4>{collectionLabel}</h4>\n        </div>\n        <div className={`${baseClass}__subheader-right`}>\n          {showMoveToRoot && onMoveToRoot && (\n            <button className={`${baseClass}__move-to-root`} onClick={onMoveToRoot} type=\"button\">\n              {t('hierarchy:moveToRoot')}\n            </button>\n          )}\n          {selectionCount > 0 && (\n            <>\n              <span className={`${baseClass}__selection-info`}>{selectionCount} selected</span>\n              <span>—</span>\n              <button className={`${baseClass}__clear-all`} onClick={handleClearAll} type=\"button\">\n                {t('general:clearAll')}\n              </button>\n            </>\n          )}\n        </div>\n      </div>\n      <div className={`${baseClass}__columns`}>\n        <HierarchyColumnBrowser\n          ancestorsWithSelections={ancestorsWithSelections}\n          baseFilter={baseFilter}\n          disabledIds={disabledIds}\n          filterByCollection={filterByCollection}\n          hierarchyCollectionSlug={hierarchyCollectionSlug}\n          initialExpandedPath={initialExpandedPath}\n          isLoadingPath={isLoadingPath}\n          onCreateNew={onCreateNew}\n          onSelect={handleSelect}\n          parentFieldName={parentFieldName}\n          ref={columnBrowserRef}\n          selectedIds={selectedIds}\n          useAsTitle={useAsTitle}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport const HierarchyDrawer: React.FC<HierarchyDrawerInternalProps> = (props) => {\n  const { drawerSlug, hierarchyCollectionSlug, parentFieldName } = props\n\n  const { refreshTree } = useHierarchy()\n\n  // Get parentFieldName from hierarchy config\n  const { getEntityConfig } = useConfig()\n  const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n  const parentFieldName_internal =\n    collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n      ? collectionConfig.hierarchy.parentFieldName\n      : parentFieldName\n\n  // Track which parentId is being used for the document drawer - use state to trigger re-render\n  const [createParentId, setCreateParentId] = useState<null | number | string>(null)\n\n  // Ref to access column browser's refresh function\n  const columnBrowserRef = useRef<HierarchyColumnBrowserRef | null>(null)\n\n  // Ref to access drawer content's selectItem function\n  const drawerContentRef = useRef<HierarchyDrawerContentRef | null>(null)\n\n  // Key for DocumentDrawer to force remount when parentId changes\n  const [documentDrawerKey, setDocumentDrawerKey] = useState(0)\n\n  // Stable drawer slug for the document drawer - must not change on remount\n  const documentDrawerSlug = `${drawerSlug}-create-doc`\n\n  // Document drawer for creating new items - rendered OUTSIDE the Drawer to avoid nested modal issues\n  const [DocumentDrawer, , { closeDrawer: closeDocumentDrawer, openDrawer: openDocumentDrawer }] =\n    useDocumentDrawer({\n      collectionSlug: hierarchyCollectionSlug,\n      drawerSlug: documentDrawerSlug,\n    })\n\n  const handleCreateNew = useCallback(\n    ({ parentId }: { parentId: null | number | string }) => {\n      // Increment key to force DocumentDrawer remount with new initialData\n      setDocumentDrawerKey((prev) => prev + 1)\n      setCreateParentId(parentId)\n      // Use setTimeout to ensure state update triggers re-render before opening drawer\n      setTimeout(() => {\n        openDocumentDrawer()\n      }, 0)\n    },\n    [openDocumentDrawer],\n  )\n\n  // Refresh the column, select the new item, and close the document drawer after creation\n  const handleDocumentSave = useCallback<\n    NonNullable<React.ComponentProps<typeof DocumentDrawer>['onSave']>\n  >(\n    ({ doc }) => {\n      if (columnBrowserRef.current && createParentId !== undefined) {\n        void columnBrowserRef.current.refreshColumn(createParentId)\n      }\n      if (drawerContentRef.current && doc?.id) {\n        drawerContentRef.current.selectItem(doc.id)\n      }\n      refreshTree(hierarchyCollectionSlug)\n      closeDocumentDrawer()\n    },\n    [closeDocumentDrawer, createParentId, hierarchyCollectionSlug, refreshTree],\n  )\n\n  // Memoize the content - only depends on stable values\n  const drawerContent = useMemo(\n    () => (\n      <HierarchyDrawerContent\n        {...props}\n        columnBrowserRef={columnBrowserRef}\n        onCreateNew={handleCreateNew}\n        ref={drawerContentRef}\n      />\n    ),\n    [handleCreateNew, props],\n  )\n\n  return (\n    <>\n      <Drawer className={baseClass} Header={null} slug={drawerSlug}>\n        {drawerContent}\n      </Drawer>\n      <DrawerDepthProvider>\n        <DocumentDrawer\n          initialData={\n            createParentId !== null ? { [parentFieldName_internal]: createParentId } : undefined\n          }\n          key={documentDrawerKey}\n          onSave={handleDocumentSave}\n        />\n      </DrawerDepthProvider>\n    </>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["getTranslation","React","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","useEffectEvent","TagIcon","useConfig","useHierarchy","useTranslation","DialogModal","useDocumentDrawer","DrawerDepthProvider","DrawerActionHeader","HierarchyColumnBrowser","fetchAncestorPath","baseClass","HierarchyDrawerContent","baseFilter","closeDrawer","columnBrowserRef","disabledIds","filterByCollection","hasMany","hierarchyCollectionSlug","Icon","initialSelections","onCreateNew","onMoveToRoot","onSave","parentFieldName","ref","showMoveToRoot","useAsTitle","i18n","t","config","routes","api","serverURL","getEntityConfig","collectionConfig","collectionSlug","collectionLabel","labels","plural","parentFieldName_internal","hierarchy","initialExpandedPath","setInitialExpandedPath","isLoadingPath","setIsLoadingPath","Boolean","length","hasLoadedPathRef","firstSelection","loadAncestorPath","itemId","path","current","selections","setSelections","map","Map","id","set","selectedIds","Set","keys","ancestorsWithSelections","handleCancel","handleSave","handleSelect","prev","next","has","delete","clear","handleClearAll","selectItem","selectionCount","size","_jsxs","className","_jsx","onCancel","saveLabel","title","label","onClick","type","_Fragment","onSelect","HierarchyDrawer","props","drawerSlug","refreshTree","createParentId","setCreateParentId","drawerContentRef","documentDrawerKey","setDocumentDrawerKey","documentDrawerSlug","DocumentDrawer","closeDocumentDrawer","openDrawer","openDocumentDrawer","handleCreateNew","parentId","setTimeout","handleDocumentSave","doc","undefined","refreshColumn","drawerContent","closeOnBlur","slug","initialData"],"sources":["../../../../src/elements/Hierarchy/Drawer/index.tsx"],"sourcesContent":["'use client'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, {\n  useCallback,\n  useEffect,\n  useImperativeHandle,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\n\nimport type { HierarchyColumnBrowserRef } from '../ColumnBrowser/index.js'\nimport type { HierarchyDrawerInternalProps, SelectionWithPath } from './types.js'\n\nimport { useEffectEvent } from '../../../hooks/useEffectEvent.js'\nimport { TagIcon } from '../../../icons/Tag/index.js'\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useHierarchy } from '../../../providers/Hierarchy/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { DialogModal } from '../../Dialog/index.js'\nimport { useDocumentDrawer } from '../../DocumentDrawer/index.js'\nimport { DrawerDepthProvider } from '../../Drawer/index.js'\nimport { DrawerActionHeader } from '../../DrawerActionHeader/index.js'\nimport { HierarchyColumnBrowser } from '../ColumnBrowser/index.js'\nimport { fetchAncestorPath } from './fetchAncestorPath.js'\nimport './index.css'\n\nexport const baseClass = 'hierarchy-drawer'\n\ntype HierarchyDrawerContentProps = {\n  columnBrowserRef?: React.RefObject<HierarchyColumnBrowserRef | null>\n  onCreateNew?: (params: { parentId: null | number | string }) => void\n} & HierarchyDrawerInternalProps\n\nexport type HierarchyDrawerContentRef = {\n  selectItem: (id: number | string) => void\n}\n\nexport const HierarchyDrawerContent = function HierarchyDrawerContent({\n  baseFilter,\n  closeDrawer,\n  columnBrowserRef,\n  disabledIds,\n  filterByCollection,\n  hasMany = false,\n  hierarchyCollectionSlug,\n  Icon,\n  initialSelections,\n  onCreateNew,\n  onMoveToRoot,\n  onSave,\n  parentFieldName,\n  ref,\n  showMoveToRoot,\n  useAsTitle,\n}: { ref?: React.RefObject<HierarchyDrawerContentRef | null> } & HierarchyDrawerContentProps) {\n  const { i18n, t } = useTranslation()\n  // NOTE: Do NOT use useModal() here - it causes re-renders when any modal state changes\n  // Use closeDrawer prop instead which already handles closing the modal\n  const {\n    config: {\n      routes: { api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n  const collectionLabel = collectionConfig\n    ? getTranslation(collectionConfig.labels?.plural || hierarchyCollectionSlug, i18n)\n    : hierarchyCollectionSlug\n\n  const parentFieldName_internal =\n    collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n      ? collectionConfig.hierarchy.parentFieldName\n      : parentFieldName\n\n  const [initialExpandedPath, setInitialExpandedPath] = useState<(number | string)[] | undefined>()\n  const [isLoadingPath, setIsLoadingPath] = useState(Boolean(initialSelections?.length))\n  const hasLoadedPathRef = React.useRef(false)\n  const firstSelection = initialSelections?.[0]\n\n  const loadAncestorPath = useEffectEvent(async (itemId?: number | string) => {\n    if (!itemId) {\n      setIsLoadingPath(false)\n      return\n    }\n\n    try {\n      const path = await fetchAncestorPath({\n        api,\n        collectionSlug: hierarchyCollectionSlug,\n        itemId,\n        parentFieldName: parentFieldName_internal,\n        serverURL,\n      })\n      setInitialExpandedPath(path)\n    } catch {\n      // Silently handle fetch errors - will just start at root\n    } finally {\n      setIsLoadingPath(false)\n    }\n  })\n\n  // Load ancestor path on mount\n  useEffect(() => {\n    if (hasLoadedPathRef.current) {\n      return\n    }\n    hasLoadedPathRef.current = true\n    void loadAncestorPath(firstSelection)\n  }, [firstSelection])\n\n  const [selections, setSelections] = useState<Map<number | string, SelectionWithPath>>(() => {\n    const map = new Map<number | string, SelectionWithPath>()\n\n    if (initialSelections) {\n      for (const id of initialSelections) {\n        map.set(id, { id, path: [] })\n      }\n    }\n\n    return map\n  })\n\n  const selectedIds = useMemo(() => new Set(selections.keys()), [selections])\n\n  // For now, ancestorsWithSelections is empty - will be computed when we have path tracking\n  const ancestorsWithSelections = useMemo(() => new Set<number | string>(), [])\n\n  const handleCancel = useCallback(() => {\n    closeDrawer()\n  }, [closeDrawer])\n\n  const handleSave = useCallback(() => {\n    onSave({ closeDrawer, selections })\n  }, [onSave, selections, closeDrawer])\n\n  const handleSelect = useCallback(\n    ({\n      id,\n      path,\n    }: {\n      id: number | string\n      path: Array<{ id: number | string; title: string }>\n    }) => {\n      setSelections((prev) => {\n        const next = new Map(prev)\n\n        if (next.has(id)) {\n          next.delete(id)\n        } else {\n          if (!hasMany) {\n            // Single select: clear previous selections\n            next.clear()\n          }\n          next.set(id, { id, path })\n        }\n\n        return next\n      })\n    },\n    [hasMany],\n  )\n\n  const handleClearAll = useCallback(() => {\n    setSelections(new Map())\n  }, [])\n\n  // Expose selectItem for programmatic selection (e.g., after creating a new item)\n  useImperativeHandle(\n    ref,\n    () => ({\n      selectItem: (id: number | string) => {\n        setSelections((prev) => {\n          const next = new Map(prev)\n          if (!hasMany) {\n            next.clear()\n          }\n          // Path will be empty for newly created items - could be enhanced later\n          next.set(id, { id, path: [] })\n          return next\n        })\n      },\n    }),\n    [hasMany],\n  )\n\n  const selectionCount = selections.size\n\n  return (\n    <div className={`${baseClass}__content`}>\n      <DrawerActionHeader\n        onCancel={handleCancel}\n        onSave={handleSave}\n        saveLabel={t('general:select')}\n        title={t('general:selectValue', { label: collectionLabel })}\n      />\n      <div className={`${baseClass}__subheader`}>\n        <div className={`${baseClass}__subheader-left`}>\n          {Icon || <TagIcon />}\n          <h4>{collectionLabel}</h4>\n        </div>\n        <div className={`${baseClass}__subheader-right`}>\n          {showMoveToRoot && onMoveToRoot && (\n            <button className={`${baseClass}__move-to-root`} onClick={onMoveToRoot} type=\"button\">\n              {t('hierarchy:moveToRoot')}\n            </button>\n          )}\n          {selectionCount > 0 && (\n            <>\n              <span className={`${baseClass}__selection-info`}>{selectionCount} selected</span>\n              <span>—</span>\n              <button className={`${baseClass}__clear-all`} onClick={handleClearAll} type=\"button\">\n                {t('general:clearAll')}\n              </button>\n            </>\n          )}\n        </div>\n      </div>\n      <div className={`${baseClass}__columns`}>\n        <HierarchyColumnBrowser\n          ancestorsWithSelections={ancestorsWithSelections}\n          baseFilter={baseFilter}\n          disabledIds={disabledIds}\n          filterByCollection={filterByCollection}\n          hierarchyCollectionSlug={hierarchyCollectionSlug}\n          initialExpandedPath={initialExpandedPath}\n          isLoadingPath={isLoadingPath}\n          onCreateNew={onCreateNew}\n          onSelect={handleSelect}\n          parentFieldName={parentFieldName}\n          ref={columnBrowserRef}\n          selectedIds={selectedIds}\n          useAsTitle={useAsTitle}\n        />\n      </div>\n    </div>\n  )\n}\n\nexport const HierarchyDrawer: React.FC<HierarchyDrawerInternalProps> = (props) => {\n  const { drawerSlug, hierarchyCollectionSlug, parentFieldName } = props\n\n  const { refreshTree } = useHierarchy()\n\n  // Get parentFieldName from hierarchy config\n  const { getEntityConfig } = useConfig()\n  const collectionConfig = getEntityConfig({ collectionSlug: hierarchyCollectionSlug })\n  const parentFieldName_internal =\n    collectionConfig?.hierarchy && typeof collectionConfig.hierarchy === 'object'\n      ? collectionConfig.hierarchy.parentFieldName\n      : parentFieldName\n\n  // Track which parentId is being used for the document drawer - use state to trigger re-render\n  const [createParentId, setCreateParentId] = useState<null | number | string>(null)\n\n  // Ref to access column browser's refresh function\n  const columnBrowserRef = useRef<HierarchyColumnBrowserRef | null>(null)\n\n  // Ref to access drawer content's selectItem function\n  const drawerContentRef = useRef<HierarchyDrawerContentRef | null>(null)\n\n  // Key for DocumentDrawer to force remount when parentId changes\n  const [documentDrawerKey, setDocumentDrawerKey] = useState(0)\n\n  // Stable drawer slug for the document drawer - must not change on remount\n  const documentDrawerSlug = `${drawerSlug}-create-doc`\n\n  // Document drawer for creating new items - rendered OUTSIDE the Drawer to avoid nested modal issues\n  const [DocumentDrawer, , { closeDrawer: closeDocumentDrawer, openDrawer: openDocumentDrawer }] =\n    useDocumentDrawer({\n      collectionSlug: hierarchyCollectionSlug,\n      drawerSlug: documentDrawerSlug,\n    })\n\n  const handleCreateNew = useCallback(\n    ({ parentId }: { parentId: null | number | string }) => {\n      // Increment key to force DocumentDrawer remount with new initialData\n      setDocumentDrawerKey((prev) => prev + 1)\n      setCreateParentId(parentId)\n      // Use setTimeout to ensure state update triggers re-render before opening drawer\n      setTimeout(() => {\n        openDocumentDrawer()\n      }, 0)\n    },\n    [openDocumentDrawer],\n  )\n\n  // Refresh the column, select the new item, and close the document drawer after creation\n  const handleDocumentSave = useCallback<\n    NonNullable<React.ComponentProps<typeof DocumentDrawer>['onSave']>\n  >(\n    ({ doc }) => {\n      if (columnBrowserRef.current && createParentId !== undefined) {\n        void columnBrowserRef.current.refreshColumn(createParentId)\n      }\n      if (drawerContentRef.current && doc?.id) {\n        drawerContentRef.current.selectItem(doc.id)\n      }\n      refreshTree(hierarchyCollectionSlug)\n      closeDocumentDrawer()\n    },\n    [closeDocumentDrawer, createParentId, hierarchyCollectionSlug, refreshTree],\n  )\n\n  // Memoize the content - only depends on stable values\n  const drawerContent = useMemo(\n    () => (\n      <HierarchyDrawerContent\n        {...props}\n        columnBrowserRef={columnBrowserRef}\n        onCreateNew={handleCreateNew}\n        ref={drawerContentRef}\n      />\n    ),\n    [handleCreateNew, props],\n  )\n\n  return (\n    <>\n      <DialogModal className={baseClass} closeOnBlur size=\"large\" slug={drawerSlug}>\n        {drawerContent}\n      </DialogModal>\n      <DrawerDepthProvider>\n        <DocumentDrawer\n          initialData={\n            createParentId !== null ? { [parentFieldName_internal]: createParentId } : undefined\n          }\n          key={documentDrawerKey}\n          onSave={handleDocumentSave}\n        />\n      </DrawerDepthProvider>\n    </>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,36 @@
+@layer payload-default {
+  .selected-hierarchies__pills {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacer-1);
+  }
+
+  .selected-hierarchies__pill .chip__label {
+    max-width: 200px;
+  }
+
+  .selected-hierarchies__pill.chip--size-medium {
+    height: 1.25rem;
+    padding-inline-start: var(--spacer-1);
+    border-radius: var(--radius-chip);
+  }
+
+  .selected-hierarchies__pill .chip__remove {
+    color: var(--color-icon-secondary);
+  }
+
+  .selected-hierarchies__pill .chip__remove:hover {
+    color: var(--color-text);
+  }
+
+  .selected-hierarchies__empty {
+    color: var(--color-text-secondary);
+    font-style: italic;
+    padding: var(--spacer-1) 0;
+  }
+
+  .selected-hierarchies__loading {
+    color: var(--color-text-secondary);
+    padding: var(--spacer-1) 0;
+  }
+}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import './SelectedHierarchies.scss';
+import './SelectedHierarchies.css';
 export type SelectedHierarchiesProps = {
     hierarchySlug: string;
     Icon?: React.ReactNode;

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

@@ -1 +1 @@
-{"version":3,"file":"SelectedHierarchies.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Field/SelectedHierarchies.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAMnE,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"}
+{"version":3,"file":"SelectedHierarchies.d.ts","sourceRoot":"","sources":["../../../../src/elements/Hierarchy/Field/SelectedHierarchies.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAMnE,OAAO,2BAA2B,CAAA;AASlC,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

@@ -8,7 +8,7 @@ import { useConfig } from '../../../providers/Config/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
 import { Chip } from '../../Chip/index.js';
 import { Spinner } from '../../Spinner/index.js';
-import './SelectedHierarchies.scss';
+import './SelectedHierarchies.css';
 const baseClass = 'selected-hierarchies';
 export const SelectedHierarchies = ({
   hierarchySlug,

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

@@ -1 +1 @@
-{"version":3,"file":"SelectedHierarchies.js","names":["formatAdminURL","qs","React","useEffect","useMemo","useRef","useState","useConfig","useTranslation","Chip","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","disabled","icon"],"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 { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Chip } from '../../Chip/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=\"sm\" />\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  return (\n    <Chip\n      className={`${baseClass}__pill`}\n      disabled={readOnly}\n      icon={Icon}\n      onRemove={() => onRemove({ id: item.id })}\n      size=\"medium\"\n    >\n      {item.title}\n    </Chip>\n  )\n}\n"],"mappings":"AAAA;;;AACA,SAASA,cAAc,QAAQ;AAC/B,YAAYC,EAAA,MAAQ;AACpB,OAAOC,KAAA,IAASC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ;AAE5D,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,SAASC,IAAI,QAAQ;AACrB,SAASC,OAAO,QAAQ;AACxB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAelB,OAAO,MAAMC,mBAAA,GAA0DA,CAAC;EACtEC,aAAa;EACbC,IAAI;EACJC,QAAQ;EACRC,QAAA,GAAW,KAAK;EAChBC;AAAW,CACZ;EACC,MAAM;IAAEC,MAAM;IAAEC;EAAe,CAAE,GAAGZ,SAAA;EACpC,MAAM;IAAEa;EAAI,CAAE,GAAGZ,cAAA;EACjB,MAAM,CAACa,KAAA,EAAOC,QAAA,CAAS,GAAGhB,QAAA,CAA0B,EAAE;EACtD,MAAM,CAACiB,aAAA,EAAeC,gBAAA,CAAiB,GAAGlB,QAAA,CAAS;EAEnD,MAAMmB,kBAAA,GAAqBpB,MAAA,CAAe;EAE1C,MAAM;IACJqB,MAAA,EAAQ;MAAEC;IAAG,CAAE;IACfC;EAAS,CACV,GAAGV,MAAA;EAEJ,MAAMW,gBAAA,GAAmBV,eAAA,CAAgB;IAAEW,cAAA,EAAgBjB;EAAc;EAEzE,MAAMkB,cAAA,GAAiB3B,OAAA,CAAQ,MAAMa,WAAA,CAAYe,KAAK,GAAGC,IAAI,GAAGC,IAAI,CAAC,MAAM,CAACjB,WAAA,CAAY;EAExFd,SAAA,CAAU;IACR,IAAI,CAACc,WAAA,IAAeA,WAAA,CAAYkB,MAAM,KAAK,GAAG;MAC5Cb,QAAA,CAAS,EAAE;MACXE,gBAAA,CAAiB;MACjB;IACF;IAEA,IAAIC,kBAAA,CAAmBW,OAAO,KAAKL,cAAA,EAAgB;MACjD;IACF;IACAN,kBAAA,CAAmBW,OAAO,GAAGL,cAAA;IAE7B,MAAMM,UAAA,GAAa,MAAAA,CAAA;MACjB,MAAMC,UAAA,GAAaT,gBAAA,EAAkBU,KAAA,EAAOD,UAAA,IAAc;MAE1D,MAAME,KAAA,GAAQ;QACZC,KAAA,EAAO;QACPC,KAAA,EAAOzB,WAAA,CAAYkB,MAAM;QACzBQ,MAAA,EAAQ;UACN,CAACL,UAAA,GAAa;QAChB;QACAM,KAAA,EAAO;UACLC,EAAA,EAAI;YACFC,EAAA,EAAI7B;UACN;QACF;MACF;MAEA,MAAM8B,WAAA,GAAc9C,EAAA,CAAG+C,SAAS,CAACR,KAAA;MAEjC,IAAI;QACF,MAAMS,GAAA,GAAMjD,cAAA,CAAe;UACzBkD,QAAA,EAAUvB,GAAA;UACVwB,IAAA,EAAM,IAAItC,aAAA,IAAiBkC,WAAA,EAAa;UACxCnB;QACF;QAEA,MAAMwB,QAAA,GAAW,MAAMC,KAAA,CAAMJ,GAAA,EAAK;UAChCK,WAAA,EAAa;UACbC,OAAA,EAAS;YACP,mBAAmBnC,IAAA,CAAKoC;UAC1B;QACF;QAEA,IAAIJ,QAAA,CAASK,EAAE,EAAE;UACf,MAAMC,IAAA,GAAO,MAAMN,QAAA,CAASO,IAAI;UAChC,MAAMC,YAAA,GAAgCF,IAAA,CAAKG,IAAI,CAACC,GAAG,CAAEC,GAAA;YACnD,MAAMC,KAAA,GAAQD,GAAA,CAAIlB,EAAE;YACpB,MAAMoB,UAAA,GAAaF,GAAG,CAACzB,UAAA,CAAW,IAAI0B,KAAA;YACtC,MAAME,KAAA,GACJ,OAAOD,UAAA,KAAe,YAAY,OAAOA,UAAA,KAAe,WACpDE,MAAA,CAAOF,UAAA,IACPE,MAAA,CAAOH,KAAA;YACb,OAAO;cACLnB,EAAA,EAAImB,KAAA;cACJE;YACF;UACF;UAEA;UACA,MAAME,YAAA,GAAenD,WAAA,CAClB6C,GAAG,CAAEjB,EAAA,IAAOe,YAAA,CAAaS,IAAI,CAAEC,IAAA,IAASA,IAAA,CAAKzB,EAAE,KAAKA,EAAA,GACpD0B,MAAM,CAAED,MAAA,IAAgCA,MAAA,KAASE,SAAA;UAEpDlD,QAAA,CAAS8C,YAAA;QACX;MACF,EAAE,MAAM;QACN;MAAA,CACF,SAAU;QACR5C,gBAAA,CAAiB;MACnB;IACF;IAEA,KAAKa,UAAA;EACP,GAAG,CAACpB,WAAA,EAAac,cAAA,EAAgBlB,aAAA,EAAegB,gBAAA,EAAkBD,SAAA,EAAWD,GAAA,EAAKP,IAAA,CAAKoC,QAAQ,CAAC;EAEhG,IAAIjC,aAAA,EAAe;IACjB,oBACEkD,IAAA,CAAC;MAAIC,SAAA,EAAW,GAAG/D,SAAA,WAAoB;gBACrC,aAAA8D,IAAA,CAAC/D,OAAA;QAAQiE,IAAA,EAAK;;;EAGpB;EAEA,IAAItD,KAAA,CAAMc,MAAM,KAAK,GAAG;IACtB,OAAO;EACT;EAEA,oBACEsC,IAAA,CAAC;IAAIC,SAAA,EAAW/D,SAAA;cACd,aAAA8D,IAAA,CAAC;MAAIC,SAAA,EAAW,GAAG/D,SAAA,SAAkB;gBAClCU,KAAA,CAAMyC,GAAG,CAAEQ,MAAA,iBACVG,IAAA,CAACG,YAAA;QACC9D,IAAA,EAAMA,IAAA;QACNwD,IAAA,EAAMA,MAAA;QAENvD,QAAA,EAAUA,QAAA;QACVC,QAAA,EAAUA;SAFLsD,MAAA,CAAKzB,EAAE;;;AAQxB;AASA,MAAM+B,YAAA,GAA4CA,CAAC;EAAE9D,IAAI;EAAEwD,IAAI;EAAEvD,QAAQ;EAAEC;AAAQ,CAAE;EACnF,oBACEyD,IAAA,CAAChE,IAAA;IACCiE,SAAA,EAAW,GAAG/D,SAAA,QAAiB;IAC/BkE,QAAA,EAAU7D,QAAA;IACV8D,IAAA,EAAMhE,IAAA;IACNC,QAAA,EAAUA,CAAA,KAAMA,QAAA,CAAS;MAAE8B,EAAA,EAAIyB,IAAA,CAAKzB;IAAG;IACvC8B,IAAA,EAAK;cAEJL,IAAA,CAAKJ;;AAGZ","ignoreList":[]}
+{"version":3,"file":"SelectedHierarchies.js","names":["formatAdminURL","qs","React","useEffect","useMemo","useRef","useState","useConfig","useTranslation","Chip","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","disabled","icon"],"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 { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { Chip } from '../../Chip/index.js'\nimport { Spinner } from '../../Spinner/index.js'\nimport './SelectedHierarchies.css'\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=\"sm\" />\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  return (\n    <Chip\n      className={`${baseClass}__pill`}\n      disabled={readOnly}\n      icon={Icon}\n      onRemove={() => onRemove({ id: item.id })}\n      size=\"medium\"\n    >\n      {item.title}\n    </Chip>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,6 @@
 import type { RelationshipFieldClientProps } from 'payload';
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type HierarchyFieldClientProps = {
     Icon?: React.ReactNode;
 } & RelationshipFieldClientProps;

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;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"}
+{"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"}

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

@@ -9,6 +9,7 @@ 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 { CirclePlusIcon } from '../../../icons/CirclePlus/index.js';
 import { useConfig } from '../../../providers/Config/index.js';
 import { useDocumentInfo } from '../../../providers/DocumentInfo/index.js';
 import { useTranslation } from '../../../providers/Translation/index.js';
@@ -16,7 +17,7 @@ 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';
+import './index.css';
 const baseClass = 'hierarchy-field';
 export const HierarchyFieldClient = props => {
   const {
@@ -160,7 +161,9 @@ export const HierarchyFieldClient = props => {
           buttonStyle: "dashed",
           className: `${baseClass}__manage-button`,
           disabled: disabled,
-          icon: "plus",
+          icon: /*#__PURE__*/_jsx(CirclePlusIcon, {
+            size: 24
+          }),
           iconPosition: "left",
           margin: false,
           onClick: handleOpenDrawer,