@payloadcms/ui 4.0.0-internal.a0ef1b8 → 4.0.0-internal.bc5cf8c

package/dist/elements/GroupBy/Popup.js

@@ -0,0 +1,268 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback } from 'react';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { TrashIcon } from '../../icons/Trash/index.js';
+import { XIcon } from '../../icons/X/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Button } from '../Button/index.js';
+import { Popup, PopupList } from '../Popup/index.js';
+import './Popup.css';
+const baseClass = 'group-by-control';
+export const GroupByPopup = t0 => {
+  const $ = _c(35);
+  const {
+    close,
+    filteredFields,
+    groupByField,
+    groupByFieldName,
+    isActive,
+    onChange,
+    value
+  } = t0;
+  const {
+    t
+  } = useTranslation();
+  const directionValue = !value || typeof value !== "string" ? "asc" : value.startsWith("-") ? "desc" : "asc";
+  let t1;
+  if ($[0] !== onChange || $[1] !== value) {
+    t1 = fieldPath => {
+      onChange(value?.startsWith("-") ? `-${fieldPath}` : fieldPath);
+    };
+    $[0] = onChange;
+    $[1] = value;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const handleFieldSelect = t1;
+  let t2;
+  if ($[3] !== close || $[4] !== onChange) {
+    t2 = () => {
+      onChange("");
+      close();
+    };
+    $[3] = close;
+    $[4] = onChange;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  const handleClear = t2;
+  let t3;
+  if ($[6] !== groupByFieldName || $[7] !== onChange) {
+    t3 = direction => {
+      if (!groupByFieldName) {
+        return;
+      }
+      onChange(direction === "asc" ? groupByFieldName : `-${groupByFieldName}`);
+    };
+    $[6] = groupByFieldName;
+    $[7] = onChange;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  const handleDirectionSelect = t3;
+  let t4;
+  if ($[9] !== close || $[10] !== directionValue || $[11] !== filteredFields || $[12] !== groupByField?.label || $[13] !== groupByFieldName || $[14] !== handleClear || $[15] !== handleDirectionSelect || $[16] !== handleFieldSelect || $[17] !== isActive || $[18] !== t) {
+    let t5;
+    if ($[20] !== filteredFields || $[21] !== groupByFieldName || $[22] !== handleFieldSelect) {
+      t5 = t6 => {
+        const {
+          close: closeFieldPopup
+        } = t6;
+        return _jsx(PopupList.RadioGroup, {
+          children: filteredFields.map((field, i) => _jsx(PopupList.RadioGroupItem, {
+            active: field.fieldPath === groupByFieldName,
+            onClick: () => {
+              handleFieldSelect(field.fieldPath);
+              closeFieldPopup();
+            },
+            children: field.label
+          }, i))
+        });
+      };
+      $[20] = filteredFields;
+      $[21] = groupByFieldName;
+      $[22] = handleFieldSelect;
+      $[23] = t5;
+    } else {
+      t5 = $[23];
+    }
+    let t6;
+    if ($[24] !== groupByField?.label || $[25] !== t) {
+      t6 = t7 => {
+        const {
+          active,
+          onClick,
+          onKeyDown
+        } = t7;
+        return _jsxs("button", {
+          className: `${baseClass}__select-trigger`,
+          onClick,
+          onKeyDown,
+          type: "button",
+          children: [_jsx("span", {
+            className: `${baseClass}__select-value`,
+            children: groupByField?.label || t("general:selectValue")
+          }), _jsx(ChevronIcon, {
+            direction: active ? "up" : "down",
+            size: 16
+          })]
+        });
+      };
+      $[24] = groupByField?.label;
+      $[25] = t;
+      $[26] = t6;
+    } else {
+      t6 = $[26];
+    }
+    let t7;
+    if ($[27] !== directionValue || $[28] !== handleDirectionSelect || $[29] !== t) {
+      t7 = t8 => {
+        const {
+          close: closeSortPopup
+        } = t8;
+        return _jsxs(PopupList.RadioGroup, {
+          children: [_jsx(PopupList.RadioGroupItem, {
+            active: directionValue === "desc",
+            onClick: () => {
+              handleDirectionSelect("desc");
+              closeSortPopup();
+            },
+            children: t("general:descending")
+          }), _jsx(PopupList.RadioGroupItem, {
+            active: directionValue === "asc",
+            onClick: () => {
+              handleDirectionSelect("asc");
+              closeSortPopup();
+            },
+            children: t("general:ascending")
+          })]
+        });
+      };
+      $[27] = directionValue;
+      $[28] = handleDirectionSelect;
+      $[29] = t;
+      $[30] = t7;
+    } else {
+      t7 = $[30];
+    }
+    let t8;
+    if ($[31] !== directionValue || $[32] !== groupByFieldName || $[33] !== t) {
+      t8 = t9 => {
+        const {
+          active: active_0,
+          onClick: onClick_0,
+          onKeyDown: onKeyDown_0
+        } = t9;
+        return _jsxs("button", {
+          className: [`${baseClass}__select-trigger`, !groupByFieldName && `${baseClass}__select-trigger--disabled`].filter(Boolean).join(" "),
+          disabled: !groupByFieldName,
+          onClick: onClick_0,
+          onKeyDown: onKeyDown_0,
+          type: "button",
+          children: [_jsx("span", {
+            className: `${baseClass}__select-value`,
+            children: directionValue === "desc" ? t("general:descending") : t("general:ascending")
+          }), _jsx(ChevronIcon, {
+            direction: active_0 ? "up" : "down",
+            size: 16
+          })]
+        });
+      };
+      $[31] = directionValue;
+      $[32] = groupByFieldName;
+      $[33] = t;
+      $[34] = t8;
+    } else {
+      t8 = $[34];
+    }
+    t4 = _jsxs("div", {
+      className: `${baseClass}__content`,
+      children: [_jsxs("div", {
+        className: `${baseClass}__header`,
+        children: [_jsx("span", {
+          className: `${baseClass}__title`,
+          children: t("general:groupByLabel", {
+            label: ""
+          })
+        }), _jsxs("div", {
+          className: `${baseClass}__header-actions`,
+          children: [isActive && _jsx(Button, {
+            "aria-label": t("general:clear"),
+            buttonStyle: "ghost",
+            icon: _jsx(TrashIcon, {}),
+            onClick: handleClear,
+            round: true,
+            size: "medium"
+          }), _jsx(Button, {
+            "aria-label": t("general:close"),
+            buttonStyle: "ghost",
+            icon: _jsx(XIcon, {
+              size: 24
+            }),
+            onClick: close,
+            round: true,
+            size: "medium"
+          })]
+        })]
+      }), _jsxs("div", {
+        className: `${baseClass}__body`,
+        children: [_jsxs("div", {
+          className: `${baseClass}__row`,
+          children: [_jsx("label", {
+            className: `${baseClass}__label`,
+            children: t("general:field")
+          }), _jsx("div", {
+            className: `${baseClass}__input`,
+            "data-popup-prevent-close": true,
+            children: _jsx(Popup, {
+              className: `${baseClass}__select-popup`,
+              horizontalAlign: "right",
+              render: t5,
+              renderButton: t6,
+              verticalAlign: "bottom"
+            })
+          })]
+        }), _jsxs("div", {
+          className: `${baseClass}__row`,
+          children: [_jsx("label", {
+            className: `${baseClass}__label`,
+            children: t("general:sort")
+          }), _jsx("div", {
+            className: `${baseClass}__input`,
+            "data-popup-prevent-close": true,
+            children: _jsx(Popup, {
+              className: `${baseClass}__select-popup`,
+              disabled: !groupByFieldName,
+              horizontalAlign: "right",
+              render: t7,
+              renderButton: t8,
+              size: "small",
+              verticalAlign: "bottom"
+            })
+          })]
+        })]
+      })]
+    });
+    $[9] = close;
+    $[10] = directionValue;
+    $[11] = filteredFields;
+    $[12] = groupByField?.label;
+    $[13] = groupByFieldName;
+    $[14] = handleClear;
+    $[15] = handleDirectionSelect;
+    $[16] = handleFieldSelect;
+    $[17] = isActive;
+    $[18] = t;
+    $[19] = t4;
+  } else {
+    t4 = $[19];
+  }
+  return t4;
+};
+//# sourceMappingURL=Popup.js.map

package/dist/elements/GroupBy/Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","names":["c","_c","React","useCallback","ChevronIcon","TrashIcon","XIcon","useTranslation","Button","Popup","PopupList","baseClass","GroupByPopup","t0","$","close","filteredFields","groupByField","groupByFieldName","isActive","onChange","value","t","directionValue","startsWith","t1","fieldPath","handleFieldSelect","t2","handleClear","t3","direction","handleDirectionSelect","t4","label","t5","t6","closeFieldPopup","_jsx","RadioGroup","children","map","field","i","RadioGroupItem","active","onClick","t7","onKeyDown","_jsxs","className","type","size","t8","closeSortPopup","t9","active_0","onClick_0","onKeyDown_0","filter","Boolean","join","disabled","buttonStyle","icon","round","horizontalAlign","render","verticalAlign"],"sources":["../../../src/elements/GroupBy/Popup.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback } from 'react'\n\nimport type { ReducedField } from '../WhereBuilder/types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { TrashIcon } from '../../icons/Trash/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './Popup.css'\n\nexport type GroupByPopupProps = {\n  /** Closes the parent popup. */\n  readonly close: () => void\n  /** The selectable, permission-filtered fields. */\n  readonly filteredFields: ReducedField[]\n  /** The currently selected field, if any. */\n  readonly groupByField?: ReducedField\n  /** The selected field path with any leading `-` stripped. */\n  readonly groupByFieldName?: string\n  /** Whether a field is currently selected. */\n  readonly isActive: boolean\n  /** Called with the next `groupBy` value (prefixed with `-` for descending). */\n  readonly onChange: (groupBy: string) => void\n  /** The current `groupBy` value (prefixed with `-` for descending). */\n  readonly value: string\n}\n\nconst baseClass = 'group-by-control'\n\nexport const GroupByPopup: React.FC<GroupByPopupProps> = ({\n  close,\n  filteredFields,\n  groupByField,\n  groupByFieldName,\n  isActive,\n  onChange,\n  value,\n}) => {\n  const { t } = useTranslation()\n\n  const directionValue =\n    !value || typeof value !== 'string' ? 'asc' : value.startsWith('-') ? 'desc' : 'asc'\n\n  const handleFieldSelect = useCallback(\n    (fieldPath: string) => {\n      onChange(value?.startsWith('-') ? `-${fieldPath}` : fieldPath)\n    },\n    [onChange, value],\n  )\n\n  const handleClear = useCallback(() => {\n    onChange('')\n    close()\n  }, [onChange, close])\n\n  const handleDirectionSelect = useCallback(\n    (direction: 'asc' | 'desc') => {\n      if (!groupByFieldName) {\n        return\n      }\n      onChange(direction === 'asc' ? groupByFieldName : `-${groupByFieldName}`)\n    },\n    [groupByFieldName, onChange],\n  )\n\n  return (\n    <div className={`${baseClass}__content`}>\n      <div className={`${baseClass}__header`}>\n        <span className={`${baseClass}__title`}>{t('general:groupByLabel', { label: '' })}</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              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' ? t('general:descending') : 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"],"mappings":"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","ignoreList":[]}

package/dist/elements/GroupBy/index.d.ts

@@ -0,0 +1,12 @@
+import type { ClientField, SanitizedCollectionConfig } from 'payload';
+import React from 'react';
+export type GroupByButtonProps = {
+    readonly collectionSlug: SanitizedCollectionConfig['slug'];
+    readonly fields: ClientField[];
+    /** Called with the next `groupBy` value (prefixed with `-` for descending). */
+    readonly onChange: (groupBy: string) => void;
+    /** The current `groupBy` value (prefixed with `-` for descending). */
+    readonly value: string;
+};
+export declare const GroupByButton: React.FC<GroupByButtonProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/GroupBy/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAS,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAG5E,OAAO,KAAkB,MAAM,OAAO,CAAA;AAUtC,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;IAC1D,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,+EAA+E;IAC/E,QAAQ,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,sEAAsE;IACtE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB,CAAA;AAoBD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAiFtD,CAAA"}

package/dist/elements/GroupBy/index.js

@@ -0,0 +1,91 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isFieldDisabled } from 'payload/shared';
+import React, { useMemo } from 'react';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { useAuth } from '../../providers/Auth/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js';
+import { Button } from '../Button/index.js';
+import { Popup } from '../Popup/index.js';
+import { GroupByPopup } from './Popup.js';
+const baseClass = 'group-by-control';
+/**
+ * Supported field types for group by functionality.
+ */
+const supportedFieldTypes = ['text', 'textarea', 'number', 'select', 'relationship', 'date', 'checkbox', 'radio', 'email', 'upload'];
+export const GroupByButton = ({
+  collectionSlug,
+  fields,
+  onChange,
+  value
+}) => {
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    permissions
+  } = useAuth();
+  const groupByFieldName = value?.replace(/^-/, '');
+  const fieldPermissions = permissions?.collections?.[collectionSlug]?.fields;
+  const reducedFields = useMemo(() => reduceFieldsToOptions({
+    fieldPermissions,
+    fields,
+    i18n
+  }), [fields, fieldPermissions, i18n]);
+  const filteredFields = useMemo(() => reducedFields.filter(field => !isFieldDisabled(field.field, 'groupBy') && field.fieldPath !== 'id' && supportedFieldTypes.includes(field.field.type)), [reducedFields]);
+  const groupByField = reducedFields.find(field_0 => field_0.fieldPath === groupByFieldName);
+  const isActive = Boolean(groupByFieldName && groupByField);
+  if (filteredFields.length === 0) {
+    return null;
+  }
+  const triggerLabel = isActive ? t('general:groupByLabel', {
+    label: groupByField?.label || ''
+  }) : t('general:groupByLabel', {
+    label: ''
+  });
+  return /*#__PURE__*/_jsx(Popup, {
+    className: baseClass,
+    horizontalAlign: "right",
+    portalClassName: `${baseClass}__popup`,
+    render: ({
+      close
+    }) => /*#__PURE__*/_jsx(GroupByPopup, {
+      close: close,
+      filteredFields: filteredFields,
+      groupByField: groupByField,
+      groupByFieldName: groupByFieldName,
+      isActive: isActive,
+      onChange: onChange,
+      value: value
+    }),
+    renderButton: ({
+      active,
+      onClick,
+      onKeyDown,
+      ...ariaProps
+    }) => /*#__PURE__*/_jsx(Button, {
+      buttonStyle: "secondary",
+      className: `${baseClass}__trigger`,
+      extraButtonProps: {
+        onKeyDown
+      },
+      icon: /*#__PURE__*/_jsx(ChevronIcon, {
+        direction: active ? 'up' : 'down',
+        size: 16
+      }),
+      id: "toggle-group-by",
+      onClick: onClick,
+      selected: active || isActive,
+      size: "medium",
+      ...ariaProps,
+      children: triggerLabel
+    }),
+    size: "large",
+    theme: "auto",
+    verticalAlign: "bottom"
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["isFieldDisabled","React","useMemo","ChevronIcon","useAuth","useTranslation","reduceFieldsToOptions","Button","Popup","GroupByPopup","baseClass","supportedFieldTypes","GroupByButton","collectionSlug","fields","onChange","value","i18n","t","permissions","groupByFieldName","replace","fieldPermissions","collections","reducedFields","filteredFields","filter","field","fieldPath","includes","type","groupByField","find","isActive","Boolean","length","triggerLabel","label","_jsx","className","horizontalAlign","portalClassName","render","close","renderButton","active","onClick","onKeyDown","ariaProps","buttonStyle","extraButtonProps","icon","direction","size","id","selected","theme","verticalAlign"],"sources":["../../../src/elements/GroupBy/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, Field, SanitizedCollectionConfig } from 'payload'\n\nimport { isFieldDisabled } from 'payload/shared'\nimport React, { useMemo } from 'react'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js'\nimport { Button } from '../Button/index.js'\nimport { Popup } from '../Popup/index.js'\nimport { GroupByPopup } from './Popup.js'\n\nexport type GroupByButtonProps = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly fields: ClientField[]\n  /** Called with the next `groupBy` value (prefixed with `-` for descending). */\n  readonly onChange: (groupBy: string) => void\n  /** The current `groupBy` value (prefixed with `-` for descending). */\n  readonly value: string\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 GroupByButton: React.FC<GroupByButtonProps> = ({\n  collectionSlug,\n  fields,\n  onChange,\n  value,\n}) => {\n  const { i18n, t } = useTranslation()\n  const { permissions } = useAuth()\n\n  const groupByFieldName = value?.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  if (filteredFields.length === 0) {\n    return null\n  }\n\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        <GroupByPopup\n          close={close}\n          filteredFields={filteredFields}\n          groupByField={groupByField}\n          groupByFieldName={groupByFieldName}\n          isActive={isActive}\n          onChange={onChange}\n          value={value}\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":"AAAA;;;AAGA,SAASA,eAAe,QAAQ;AAChC,OAAOC,KAAA,IAASC,OAAO,QAAQ;AAE/B,SAASC,WAAW,QAAQ;AAC5B,SAASC,OAAO,QAAQ;AACxB,SAASC,cAAc,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ;AACtC,SAASC,MAAM,QAAQ;AACvB,SAASC,KAAK,QAAQ;AACtB,SAASC,YAAY,QAAQ;AAW7B,MAAMC,SAAA,GAAY;AAElB;;;AAGA,MAAMC,mBAAA,GAAuC,CAC3C,QACA,YACA,UACA,UACA,gBACA,QACA,YACA,SACA,SACA,SACD;AAED,OAAO,MAAMC,aAAA,GAA8CA,CAAC;EAC1DC,cAAc;EACdC,MAAM;EACNC,QAAQ;EACRC;AAAK,CACN;EACC,MAAM;IAAEC,IAAI;IAAEC;EAAC,CAAE,GAAGb,cAAA;EACpB,MAAM;IAAEc;EAAW,CAAE,GAAGf,OAAA;EAExB,MAAMgB,gBAAA,GAAmBJ,KAAA,EAAOK,OAAA,CAAQ,MAAM;EAE9C,MAAMC,gBAAA,GAAmBH,WAAA,EAAaI,WAAA,GAAcV,cAAA,CAAe,EAAEC,MAAA;EAErE,MAAMU,aAAA,GAAgBtB,OAAA,CACpB,MACEI,qBAAA,CAAsB;IACpBgB,gBAAA;IACAR,MAAA;IACAG;EACF,IACF,CAACH,MAAA,EAAQQ,gBAAA,EAAkBL,IAAA,CAAK;EAGlC,MAAMQ,cAAA,GAAiBvB,OAAA,CACrB,MACEsB,aAAA,CAAcE,MAAM,CACjBC,KAAA,IACC,CAAC3B,eAAA,CAAgB2B,KAAA,CAAMA,KAAK,EAAE,cAC9BA,KAAA,CAAMC,SAAS,KAAK,QACpBjB,mBAAA,CAAoBkB,QAAQ,CAACF,KAAA,CAAMA,KAAK,CAACG,IAAI,IAEnD,CAACN,aAAA,CAAc;EAGjB,MAAMO,YAAA,GAAeP,aAAA,CAAcQ,IAAI,CAAEL,OAAA,IAAUA,OAAA,CAAMC,SAAS,KAAKR,gBAAA;EACvE,MAAMa,QAAA,GAAWC,OAAA,CAAQd,gBAAA,IAAoBW,YAAA;EAE7C,IAAIN,cAAA,CAAeU,MAAM,KAAK,GAAG;IAC/B,OAAO;EACT;EAEA,MAAMC,YAAA,GAAeH,QAAA,GACjBf,CAAA,CAAE,wBAAwB;IAAEmB,KAAA,EAAON,YAAA,EAAcM,KAAA,IAAS;EAAG,KAC7DnB,CAAA,CAAE,wBAAwB;IAAEmB,KAAA,EAAO;EAAG;EAE1C,oBACEC,IAAA,CAAC9B,KAAA;IACC+B,SAAA,EAAW7B,SAAA;IACX8B,eAAA,EAAgB;IAChBC,eAAA,EAAiB,GAAG/B,SAAA,SAAkB;IACtCgC,MAAA,EAAQA,CAAC;MAAEC;IAAK,CAAE,kBAChBL,IAAA,CAAC7B,YAAA;MACCkC,KAAA,EAAOA,KAAA;MACPlB,cAAA,EAAgBA,cAAA;MAChBM,YAAA,EAAcA,YAAA;MACdX,gBAAA,EAAkBA,gBAAA;MAClBa,QAAA,EAAUA,QAAA;MACVlB,QAAA,EAAUA,QAAA;MACVC,KAAA,EAAOA;;IAGX4B,YAAA,EAAcA,CAAC;MAAEC,MAAM;MAAEC,OAAO;MAAEC,SAAS;MAAE,GAAGC;IAAA,CAAW,kBACzDV,IAAA,CAAC/B,MAAA;MACC0C,WAAA,EAAY;MACZV,SAAA,EAAW,GAAG7B,SAAA,WAAoB;MAClCwC,gBAAA,EAAkB;QAAEH;MAAU;MAC9BI,IAAA,eAAMb,IAAA,CAACnC,WAAA;QAAYiD,SAAA,EAAWP,MAAA,GAAS,OAAO;QAAQQ,IAAA,EAAM;;MAC5DC,EAAA,EAAG;MACHR,OAAA,EAASA,OAAA;MACTS,QAAA,EAAUV,MAAA,IAAUZ,QAAA;MACpBoB,IAAA,EAAK;MACJ,GAAGL,SAAS;gBAEZZ;;IAGLiB,IAAA,EAAK;IACLG,KAAA,EAAM;IACNC,aAAA,EAAc;;AAGpB","ignoreList":[]}

package/dist/elements/Hierarchy/ColumnBrowser/Column/index.css

@@ -5,7 +5,7 @@
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
-    border-right: 1px solid var(--color-border);
+    border-right: var(--stroke-width-small) solid var(--color-border);
     height: 100%;
     background: var(--color-bg);
   }
@@ -18,7 +18,7 @@
     padding: var(--spacer-1) var(--spacer-3);
     flex-shrink: 0;
     margin-bottom: var(--spacer-2);
-    border-bottom: 1px solid var(--color-border);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
   }
 
   .hierarchy-column__add-button {

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,8 +22,8 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: var(--spacer-2) var(--gutter-h);
-    border-bottom: 1px solid var(--color-border);
+    padding: var(--spacer-2) var(--spacer-2-5);
+    border-bottom: var(--stroke-width-small) 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;
+  }
+}