@payloadcms/ui 3.49.0-canary.7 → 3.49.0

package/dist/elements/GroupByBuilder/index.js

@@ -0,0 +1,112 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './index.scss';
+import React, { useMemo } from 'react';
+import { SelectInput } from '../../fields/Select/Input.js';
+import { useListQuery } from '../../providers/ListQuery/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js';
+import { ReactSelect } from '../ReactSelect/index.js';
+const baseClass = 'group-by-builder';
+/**
+ * Note: Some fields are already omitted from the list of fields:
+ * - fields with nested field, e.g. `tabs`, `groups`, etc.
+ * - fields that don't affect data, i.e. `row`, `collapsible`, `ui`, etc.
+ * So we don't technically need to omit them here, but do anyway.
+ * But some remaining fields still need an additional check, e.g. `richText`, etc.
+ */
+const supportedFieldTypes = ['text', 'textarea', 'number', 'select', 'relationship', 'date', 'checkbox', 'radio', 'email', 'number', 'upload'];
+export const GroupByBuilder = ({
+  collectionSlug,
+  fields
+}) => {
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const reducedFields = useMemo(() => reduceFieldsToOptions({
+    fields,
+    i18n
+  }), [fields, i18n]);
+  const {
+    query,
+    refineListData
+  } = useListQuery();
+  const groupByFieldName = query.groupBy?.replace(/^-/, '');
+  const groupByField = reducedFields.find(field => field.value === groupByFieldName);
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__header`,
+      children: [/*#__PURE__*/_jsx("p", {
+        children: t('general:groupByLabel', {
+          label: ''
+        })
+      }), query.groupBy && /*#__PURE__*/_jsx("button", {
+        className: `${baseClass}__clear-button`,
+        id: "group-by--reset",
+        onClick: async () => {
+          await refineListData({
+            groupBy: ''
+          });
+        },
+        type: "button",
+        children: t('general:clear')
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__inputs`,
+      children: [/*#__PURE__*/_jsx(ReactSelect, {
+        filterOption: (option, inputValue) => (option?.data?.plainTextLabel || option.label).toLowerCase().includes(inputValue.toLowerCase()),
+        id: "group-by--field-select",
+        isClearable: true,
+        isMulti: false,
+        onChange: async v => {
+          const value = v === null ? undefined : v.value;
+          // value is being cleared
+          if (v === null) {
+            await refineListData({
+              groupBy: '',
+              page: 1
+            });
+          }
+          await refineListData({
+            groupBy: value ? query.groupBy?.startsWith('-') ? `-${value}` : value : undefined,
+            page: 1
+          });
+        },
+        options: reducedFields.filter(field_0 => !field_0.field.admin.disableListFilter && field_0.value !== 'id' && supportedFieldTypes.includes(field_0.field.type)),
+        value: {
+          label: groupByField?.label || t('general:selectValue'),
+          value: groupByFieldName || ''
+        }
+      }), /*#__PURE__*/_jsx(SelectInput, {
+        id: "group-by--sort",
+        isClearable: false,
+        name: "direction",
+        onChange: async ({
+          value: value_0
+        }) => {
+          if (!groupByFieldName) {
+            return;
+          }
+          await refineListData({
+            groupBy: value_0 === 'asc' ? groupByFieldName : `-${groupByFieldName}`,
+            page: 1
+          });
+        },
+        options: [{
+          label: t('general:ascending'),
+          value: 'asc'
+        }, {
+          label: t('general:descending'),
+          value: 'desc'
+        }],
+        path: "direction",
+        readOnly: !groupByFieldName,
+        value: !query.groupBy ? 'asc' : typeof query.groupBy === 'string' ? `${query.groupBy.startsWith('-') ? 'desc' : 'asc'}` : ''
+      })]
+    })]
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useMemo","SelectInput","useListQuery","useTranslation","reduceFieldsToOptions","ReactSelect","baseClass","supportedFieldTypes","GroupByBuilder","collectionSlug","fields","i18n","t","reducedFields","query","refineListData","groupByFieldName","groupBy","replace","groupByField","find","field","value","_jsxs","className","_jsx","label","id","onClick","type","filterOption","option","inputValue","data","plainTextLabel","toLowerCase","includes","isClearable","isMulti","onChange","v","undefined","page","startsWith","options","filter","admin","disableListFilter","name","path","readOnly"],"sources":["../../../src/elements/GroupByBuilder/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientField, Field, SanitizedCollectionConfig } from 'payload'\n\nimport './index.scss'\n\nimport React, { useMemo } from 'react'\n\nimport { SelectInput } from '../../fields/Select/Input.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { reduceFieldsToOptions } from '../../utilities/reduceFieldsToOptions.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  fields: ClientField[]\n}\n\nconst baseClass = 'group-by-builder'\n\n/**\n * Note: Some fields are already omitted from the list of fields:\n * - fields with nested field, e.g. `tabs`, `groups`, etc.\n * - fields that don't affect data, i.e. `row`, `collapsible`, `ui`, etc.\n * So we don't technically need to omit them here, but do anyway.\n * But some remaining fields still need an additional check, e.g. `richText`, etc.\n */\nconst supportedFieldTypes: Field['type'][] = [\n  'text',\n  'textarea',\n  'number',\n  'select',\n  'relationship',\n  'date',\n  'checkbox',\n  'radio',\n  'email',\n  'number',\n  'upload',\n]\n\nexport const GroupByBuilder: React.FC<Props> = ({ collectionSlug, fields }) => {\n  const { i18n, t } = useTranslation()\n\n  const reducedFields = useMemo(() => reduceFieldsToOptions({ fields, i18n }), [fields, i18n])\n\n  const { query, refineListData } = useListQuery()\n\n  const groupByFieldName = query.groupBy?.replace(/^-/, '')\n\n  const groupByField = reducedFields.find((field) => field.value === groupByFieldName)\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__header`}>\n        <p>\n          {t('general:groupByLabel', {\n            label: '',\n          })}\n        </p>\n        {query.groupBy && (\n          <button\n            className={`${baseClass}__clear-button`}\n            id=\"group-by--reset\"\n            onClick={async () => {\n              await refineListData({\n                groupBy: '',\n              })\n            }}\n            type=\"button\"\n          >\n            {t('general:clear')}\n          </button>\n        )}\n      </div>\n      <div className={`${baseClass}__inputs`}>\n        <ReactSelect\n          filterOption={(option, inputValue) =>\n            ((option?.data?.plainTextLabel as string) || option.label)\n              .toLowerCase()\n              .includes(inputValue.toLowerCase())\n          }\n          id=\"group-by--field-select\"\n          isClearable\n          isMulti={false}\n          onChange={async (v: { value: string } | null) => {\n            const value = v === null ? undefined : v.value\n\n            // value is being cleared\n            if (v === null) {\n              await refineListData({\n                groupBy: '',\n                page: 1,\n              })\n            }\n\n            await refineListData({\n              groupBy: value ? (query.groupBy?.startsWith('-') ? `-${value}` : value) : undefined,\n              page: 1,\n            })\n          }}\n          options={reducedFields.filter(\n            (field) =>\n              !field.field.admin.disableListFilter &&\n              field.value !== 'id' &&\n              supportedFieldTypes.includes(field.field.type),\n          )}\n          value={{\n            label: groupByField?.label || t('general:selectValue'),\n            value: groupByFieldName || '',\n          }}\n        />\n        <SelectInput\n          id=\"group-by--sort\"\n          isClearable={false}\n          name=\"direction\"\n          onChange={async ({ value }: { value: string }) => {\n            if (!groupByFieldName) {\n              return\n            }\n\n            await refineListData({\n              groupBy: value === 'asc' ? groupByFieldName : `-${groupByFieldName}`,\n              page: 1,\n            })\n          }}\n          options={[\n            { label: t('general:ascending'), value: 'asc' },\n            { label: t('general:descending'), value: 'desc' },\n          ]}\n          path=\"direction\"\n          readOnly={!groupByFieldName}\n          value={\n            !query.groupBy\n              ? 'asc'\n              : typeof query.groupBy === 'string'\n                ? `${query.groupBy.startsWith('-') ? 'desc' : 'asc'}`\n                : ''\n          }\n        />\n      </div>\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/GroupByBuilder/index.scss

@@ -0,0 +1,39 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .group-by-builder {
+    background: var(--theme-elevation-50);
+    padding: var(--base);
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--base) / 2);
+
+    &__header {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &__clear-button {
+      background: transparent;
+      border: none;
+      color: var(--theme-elevation-500);
+      line-height: inherit;
+      cursor: pointer;
+      font-size: inherit;
+      padding: 0;
+      text-decoration: underline;
+    }
+
+    &__inputs {
+      width: 100%;
+      display: flex;
+      gap: base(1);
+
+      & > * {
+        flex-grow: 1;
+        width: 50%;
+      }
+    }
+  }
+}

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

@@ -1,3 +1,8 @@
 import React from 'react';
-export declare const LeaveWithoutSaving: React.FC;
+type LeaveWithoutSavingProps = {
+    onConfirm?: () => Promise<void> | void;
+    onPrevent?: (nextHref: null | string) => void;
+};
+export declare const LeaveWithoutSaving: React.FC<LeaveWithoutSavingProps>;
+export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/LeaveWithoutSaving/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAa1C,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAuCtC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/LeaveWithoutSaving/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAsB,MAAM,OAAO,CAAA;AAa1C,KAAK,uBAAuB,GAAG;IAC7B,SAAS,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACtC,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,IAAI,GAAG,MAAM,KAAK,IAAI,CAAA;CAC9C,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAkDhE,CAAA"}

package/dist/elements/LeaveWithoutSaving/index.js

@@ -10,8 +10,12 @@ import { ConfirmationModal } from '../ConfirmationModal/index.js';
 import { useModal } from '../Modal/index.js';
 import { usePreventLeave } from './usePreventLeave.js';
 const modalSlug = 'leave-without-saving';
-export const LeaveWithoutSaving = () => {
-  const $ = _c(15);
+export const LeaveWithoutSaving = t0 => {
+  const $ = _c(18);
+  const {
+    onConfirm,
+    onPrevent
+  } = t0;
   const {
     closeModal,
     openModal
@@ -28,83 +32,99 @@ export const LeaveWithoutSaving = () => {
     t
   } = useTranslation();
   const prevent = Boolean((modified || !isValid) && user);
-  let t0;
-  if ($[0] !== openModal) {
-    t0 = () => {
+  let t1;
+  if ($[0] !== onPrevent || $[1] !== openModal) {
+    t1 = () => {
+      const activeHref = document.activeElement?.href || null;
+      if (onPrevent) {
+        onPrevent(activeHref);
+      }
       openModal(modalSlug);
     };
-    $[0] = openModal;
-    $[1] = t0;
+    $[0] = onPrevent;
+    $[1] = openModal;
+    $[2] = t1;
   } else {
-    t0 = $[1];
+    t1 = $[2];
   }
-  const onPrevent = t0;
-  let t1;
-  if ($[2] !== closeModal) {
-    t1 = () => {
+  const handlePrevent = t1;
+  let t2;
+  if ($[3] !== closeModal) {
+    t2 = () => {
       closeModal(modalSlug);
     };
-    $[2] = closeModal;
-    $[3] = t1;
+    $[3] = closeModal;
+    $[4] = t2;
   } else {
-    t1 = $[3];
+    t2 = $[4];
   }
-  const handleAccept = t1;
-  let t2;
-  if ($[4] !== handleAccept || $[5] !== hasAccepted || $[6] !== onPrevent || $[7] !== prevent) {
-    t2 = {
+  const handleAccept = t2;
+  let t3;
+  if ($[5] !== handleAccept || $[6] !== handlePrevent || $[7] !== hasAccepted || $[8] !== prevent) {
+    t3 = {
       hasAccepted,
       onAccept: handleAccept,
-      onPrevent,
+      onPrevent: handlePrevent,
       prevent
     };
-    $[4] = handleAccept;
-    $[5] = hasAccepted;
-    $[6] = onPrevent;
-    $[7] = prevent;
-    $[8] = t2;
+    $[5] = handleAccept;
+    $[6] = handlePrevent;
+    $[7] = hasAccepted;
+    $[8] = prevent;
+    $[9] = t3;
   } else {
-    t2 = $[8];
+    t3 = $[9];
   }
-  usePreventLeave(t2);
-  let t3;
-  if ($[9] !== closeModal) {
-    t3 = () => {
-      closeModal(modalSlug);
-    };
-    $[9] = closeModal;
-    $[10] = t3;
-  } else {
-    t3 = $[10];
-  }
-  const onCancel = t3;
+  usePreventLeave(t3);
   let t4;
-  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[10] !== closeModal) {
     t4 = () => {
-      setHasAccepted(true);
+      closeModal(modalSlug);
     };
+    $[10] = closeModal;
     $[11] = t4;
   } else {
     t4 = $[11];
   }
-  const onConfirm = t4;
+  const onCancel = t4;
   let t5;
-  if ($[12] !== onCancel || $[13] !== t) {
-    t5 = _jsx(ConfirmationModal, {
+  if ($[12] !== onConfirm) {
+    t5 = async () => {
+      if (onConfirm) {
+        ;
+        try {
+          await onConfirm();
+        } catch (t6) {
+          const err = t6;
+          console.error("Error in LeaveWithoutSaving onConfirm:", err);
+        }
+      }
+      setHasAccepted(true);
+    };
+    $[12] = onConfirm;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  const handleConfirm = t5;
+  let t6;
+  if ($[14] !== handleConfirm || $[15] !== onCancel || $[16] !== t) {
+    t6 = _jsx(ConfirmationModal, {
       body: t("general:changesNotSaved"),
       cancelLabel: t("general:stayOnThisPage"),
       confirmLabel: t("general:leaveAnyway"),
       heading: t("general:leaveWithoutSaving"),
       modalSlug,
       onCancel,
-      onConfirm
+      onConfirm: handleConfirm
     });
-    $[12] = onCancel;
-    $[13] = t;
-    $[14] = t5;
+    $[14] = handleConfirm;
+    $[15] = onCancel;
+    $[16] = t;
+    $[17] = t6;
   } else {
-    t5 = $[14];
+    t6 = $[17];
   }
-  return t5;
+  return t6;
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useForm","useFormModified","useAuth","useTranslation","ConfirmationModal","useModal","usePreventLeave","modalSlug","LeaveWithoutSaving","$","closeModal","openModal","modified","isValid","user","hasAccepted","setHasAccepted","useState","t","prevent","Boolean","t0","onPrevent","t1","handleAccept","t2","onAccept","t3","onCancel","t4","Symbol","for","onConfirm","t5","_jsx","body","cancelLabel","confirmLabel","heading"],"sources":["../../../src/elements/LeaveWithoutSaving/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback } from 'react'\n\nimport type { OnCancel } from '../ConfirmationModal/index.js'\n\nimport { useForm, useFormModified } from '../../forms/Form/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ConfirmationModal } from '../ConfirmationModal/index.js'\nimport { useModal } from '../Modal/index.js'\nimport { usePreventLeave } from './usePreventLeave.js'\n\nconst modalSlug = 'leave-without-saving'\n\nexport const LeaveWithoutSaving: React.FC = () => {\n  const { closeModal, openModal } = useModal()\n  const modified = useFormModified()\n  const { isValid } = useForm()\n  const { user } = useAuth()\n  const [hasAccepted, setHasAccepted] = React.useState(false)\n  const { t } = useTranslation()\n\n  const prevent = Boolean((modified || !isValid) && user)\n\n  const onPrevent = useCallback(() => {\n    openModal(modalSlug)\n  }, [openModal])\n\n  const handleAccept = useCallback(() => {\n    closeModal(modalSlug)\n  }, [closeModal])\n\n  usePreventLeave({ hasAccepted, onAccept: handleAccept, onPrevent, prevent })\n\n  const onCancel: OnCancel = useCallback(() => {\n    closeModal(modalSlug)\n  }, [closeModal])\n\n  const onConfirm = useCallback(() => {\n    setHasAccepted(true)\n  }, [])\n\n  return (\n    <ConfirmationModal\n      body={t('general:changesNotSaved')}\n      cancelLabel={t('general:stayOnThisPage')}\n      confirmLabel={t('general:leaveAnyway')}\n      heading={t('general:leaveWithoutSaving')}\n      modalSlug={modalSlug}\n      onCancel={onCancel}\n      onConfirm={onConfirm}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,WAAW,QAAQ;AAInC,SAASC,OAAO,EAAEC,eAAe,QAAQ;AACzC,SAASC,OAAO,QAAQ;AACxB,SAASC,cAAc,QAAQ;AAC/B,SAASC,iBAAiB,QAAQ;AAClC,SAASC,QAAQ,QAAQ;AACzB,SAASC,eAAe,QAAQ;AAEhC,MAAMC,SAAA,GAAY;AAElB,OAAO,MAAMC,kBAAA,GAA+BA,CAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAC1C;IAAAa,UAAA;IAAAC;EAAA,IAAkCN,QAAA;EAClC,MAAAO,QAAA,GAAiBX,eAAA;EACjB;IAAAY;EAAA,IAAoBb,OAAA;EACpB;IAAAc;EAAA,IAAiBZ,OAAA;EACjB,OAAAa,WAAA,EAAAC,cAAA,IAAsClB,KAAA,CAAAmB,QAAA,MAAe;EACrD;IAAAC;EAAA,IAAcf,cAAA;EAEd,MAAAgB,OAAA,GAAgBC,OAAA,CAAQ,CAACR,QAAA,KAAaC,OAAM,KAAMC,IAAA;EAAA,IAAAO,EAAA;EAAA,IAAAZ,CAAA,QAAAE,SAAA;IAEpBU,EAAA,GAAAA,CAAA;MAC5BV,SAAA,CAAAJ,SAAU;IAAA;IACZE,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAY,EAAA;EAAA;IAAAA,EAAA,GAAAZ,CAAA;EAAA;EAFA,MAAAa,SAAA,GAAkBD,EAEJ;EAAA,IAAAE,EAAA;EAAA,IAAAd,CAAA,QAAAC,UAAA;IAEmBa,EAAA,GAAAA,CAAA;MAC/Bb,UAAA,CAAAH,SAAW;IAAA;IACbE,CAAA,MAAAC,UAAA;IAAAD,CAAA,MAAAc,EAAA;EAAA;IAAAA,EAAA,GAAAd,CAAA;EAAA;EAFA,MAAAe,YAAA,GAAqBD,EAEN;EAAA,IAAAE,EAAA;EAAA,IAAAhB,CAAA,QAAAe,YAAA,IAAAf,CAAA,QAAAM,WAAA,IAAAN,CAAA,QAAAa,SAAA,IAAAb,CAAA,QAAAU,OAAA;IAECM,EAAA;MAAAV,WAAA;MAAAW,QAAA,EAAyBF,YAAA;MAAAF,SAAA;MAAAH;IAAA;IAAiCV,CAAA,MAAAe,YAAA;IAAAf,CAAA,MAAAM,WAAA;IAAAN,CAAA,MAAAa,SAAA;IAAAb,CAAA,MAAAU,OAAA;IAAAV,CAAA,MAAAgB,EAAA;EAAA;IAAAA,EAAA,GAAAhB,CAAA;EAAA;EAA1EH,eAAA,CAAgBmB,EAA0D;EAAA,IAAAE,EAAA;EAAA,IAAAlB,CAAA,QAAAC,UAAA;IAEnCiB,EAAA,GAAAA,CAAA;MACrCjB,UAAA,CAAAH,SAAW;IAAA;IACbE,CAAA,MAAAC,UAAA;IAAAD,CAAA,OAAAkB,EAAA;EAAA;IAAAA,EAAA,GAAAlB,CAAA;EAAA;EAFA,MAAAmB,QAAA,GAA2BD,EAEZ;EAAA,IAAAE,EAAA;EAAA,IAAApB,CAAA,SAAAqB,MAAA,CAAAC,GAAA;IAEeF,EAAA,GAAAA,CAAA;MAC5Bb,cAAA,KAAe;IAAA;IACjBP,CAAA,OAAAoB,EAAA;EAAA;IAAAA,EAAA,GAAApB,CAAA;EAAA;EAFA,MAAAuB,SAAA,GAAkBH,EAEb;EAAA,IAAAI,EAAA;EAAA,IAAAxB,CAAA,SAAAmB,QAAA,IAAAnB,CAAA,SAAAS,CAAA;IAGHe,EAAA,GAAAC,IAAA,CAAA9B,iBAAA;MAAA+B,IAAA,EACQjB,CAAA,CAAE;MAAAkB,WAAA,EACKlB,CAAA,CAAE;MAAAmB,YAAA,EACDnB,CAAA,CAAE;MAAAoB,OAAA,EACPpB,CAAA,CAAE;MAAAX,SAAA;MAAAqB,QAAA;MAAAI;IAAA,C;;;;;;;SAJbC,E;CAUJ","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useCallback","useForm","useFormModified","useAuth","useTranslation","ConfirmationModal","useModal","usePreventLeave","modalSlug","LeaveWithoutSaving","t0","$","onConfirm","onPrevent","closeModal","openModal","modified","isValid","user","hasAccepted","setHasAccepted","useState","t","prevent","Boolean","t1","activeHref","document","activeElement","href","handlePrevent","t2","handleAccept","t3","onAccept","t4","onCancel","t5","t6","err","console","error","handleConfirm","_jsx","body","cancelLabel","confirmLabel","heading"],"sources":["../../../src/elements/LeaveWithoutSaving/index.tsx"],"sourcesContent":["'use client'\nimport React, { useCallback } from 'react'\n\nimport type { OnCancel } from '../ConfirmationModal/index.js'\n\nimport { useForm, useFormModified } from '../../forms/Form/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ConfirmationModal } from '../ConfirmationModal/index.js'\nimport { useModal } from '../Modal/index.js'\nimport { usePreventLeave } from './usePreventLeave.js'\n\nconst modalSlug = 'leave-without-saving'\n\ntype LeaveWithoutSavingProps = {\n  onConfirm?: () => Promise<void> | void\n  onPrevent?: (nextHref: null | string) => void\n}\n\nexport const LeaveWithoutSaving: React.FC<LeaveWithoutSavingProps> = ({ onConfirm, onPrevent }) => {\n  const { closeModal, openModal } = useModal()\n  const modified = useFormModified()\n  const { isValid } = useForm()\n  const { user } = useAuth()\n  const [hasAccepted, setHasAccepted] = React.useState(false)\n  const { t } = useTranslation()\n\n  const prevent = Boolean((modified || !isValid) && user)\n\n  const handlePrevent = useCallback(() => {\n    const activeHref = (document.activeElement as HTMLAnchorElement)?.href || null\n    if (onPrevent) {\n      onPrevent(activeHref)\n    }\n    openModal(modalSlug)\n  }, [openModal, onPrevent])\n\n  const handleAccept = useCallback(() => {\n    closeModal(modalSlug)\n  }, [closeModal])\n\n  usePreventLeave({ hasAccepted, onAccept: handleAccept, onPrevent: handlePrevent, prevent })\n\n  const onCancel: OnCancel = useCallback(() => {\n    closeModal(modalSlug)\n  }, [closeModal])\n\n  const handleConfirm = useCallback(async () => {\n    if (onConfirm) {\n      try {\n        await onConfirm()\n      } catch (err) {\n        console.error('Error in LeaveWithoutSaving onConfirm:', err)\n      }\n    }\n    setHasAccepted(true)\n  }, [onConfirm])\n\n  return (\n    <ConfirmationModal\n      body={t('general:changesNotSaved')}\n      cancelLabel={t('general:stayOnThisPage')}\n      confirmLabel={t('general:leaveAnyway')}\n      heading={t('general:leaveWithoutSaving')}\n      modalSlug={modalSlug}\n      onCancel={onCancel}\n      onConfirm={handleConfirm}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAiBnD,OAAO,cAAc,CAAA;AAIrB;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyOpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAkBnD,OAAO,cAAc,CAAA;AAIrB;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyQpD,CAAA"}

package/dist/elements/ListControls/index.js

@@ -14,6 +14,7 @@ import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { AnimateHeight } from '../AnimateHeight/index.js';
 import { ColumnSelector } from '../ColumnSelector/index.js';
+import { GroupByBuilder } from '../GroupByBuilder/index.js';
 import { Pill } from '../Pill/index.js';
 import { SearchFilter } from '../SearchFilter/index.js';
 import { WhereBuilder } from '../WhereBuilder/index.js';
@@ -106,7 +107,7 @@ export const ListControls = props => {
     }
   }, [t, listSearchableFields, i18n, searchLabel]);
   let listMenuItems = listMenuItemsFromProps;
-  if (collectionConfig?.enableQueryPresets && !disableQueryPresets && queryPresetMenuItems?.length > 0) {
+  if (collectionConfig.enableQueryPresets && !disableQueryPresets && queryPresetMenuItems?.length > 0) {
     // Cannot push or unshift into `listMenuItemsFromProps` as it will mutate the original array
     listMenuItems = [...queryPresetMenuItems, listMenuItemsFromProps?.length > 0 ? /*#__PURE__*/_jsx(PopupList.Divider, {}, "divider") : null, ...(listMenuItemsFromProps || [])];
   }
@@ -117,7 +118,6 @@ export const ListControls = props => {
         className: `${baseClass}__wrap`,
         children: [/*#__PURE__*/_jsx(SearchIcon, {}), /*#__PURE__*/_jsx(SearchFilter, {
           handleChange: handleSearchChange,
-          // eslint-disable-next-line react-compiler/react-compiler -- TODO: fix
           label: searchLabelTranslated.current,
           searchQueryParam: query?.search
         }, collectionSlug), activePreset && hasModifiedPreset ? /*#__PURE__*/_jsx("div", {
@@ -136,6 +136,7 @@ export const ListControls = props => {
               icon: /*#__PURE__*/_jsx(ChevronIcon, {
                 direction: visibleDrawer === 'columns' ? 'up' : 'down'
               }),
+              id: "toggle-columns",
               onClick: () => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined),
               pillStyle: "light",
               size: "small",
@@ -147,6 +148,7 @@ export const ListControls = props => {
               icon: /*#__PURE__*/_jsx(ChevronIcon, {
                 direction: visibleDrawer === 'where' ? 'up' : 'down'
               }),
+              id: "toggle-list-filters",
               onClick: () => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined),
               pillStyle: "light",
               size: "small",
@@ -164,6 +166,20 @@ export const ListControls = props => {
               activePreset: activePreset,
               openPresetListDrawer: openPresetListDrawer,
               resetPreset: resetPreset
+            }), collectionConfig.admin.groupBy && /*#__PURE__*/_jsx(Pill, {
+              "aria-controls": `${baseClass}-group-by`,
+              "aria-expanded": visibleDrawer === 'group-by',
+              className: `${baseClass}__toggle-group-by`,
+              icon: /*#__PURE__*/_jsx(ChevronIcon, {
+                direction: visibleDrawer === 'group-by' ? 'up' : 'down'
+              }),
+              id: "toggle-group-by",
+              onClick: () => setVisibleDrawer(visibleDrawer !== 'group-by' ? 'group-by' : undefined),
+              pillStyle: "light",
+              size: "small",
+              children: t('general:groupByLabel', {
+                label: ''
+              })
             }), listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && /*#__PURE__*/_jsx(Popup, {
               button: /*#__PURE__*/_jsx(Dots, {
                 ariaLabel: t('general:moreOptions')
@@ -191,12 +207,20 @@ export const ListControls = props => {
         height: visibleDrawer === 'where' ? 'auto' : 0,
         id: `${baseClass}-where`,
         children: /*#__PURE__*/_jsx(WhereBuilder, {
-          collectionPluralLabel: collectionConfig?.labels?.plural,
+          collectionPluralLabel: collectionConfig.labels?.plural,
           collectionSlug: collectionConfig.slug,
-          fields: collectionConfig?.fields,
+          fields: collectionConfig.fields,
           renderedFilters: renderedFilters,
           resolvedFilterOptions: resolvedFilterOptions
         })
+      }), collectionConfig.admin.groupBy && /*#__PURE__*/_jsx(AnimateHeight, {
+        className: `${baseClass}__group-by`,
+        height: visibleDrawer === 'group-by' ? 'auto' : 0,
+        id: `${baseClass}-group-by`,
+        children: /*#__PURE__*/_jsx(GroupByBuilder, {
+          collectionSlug: collectionConfig.slug,
+          fields: collectionConfig.fields
+        })
       })]
     }), PresetListDrawer, EditPresetDrawer, CreateNewPresetDrawer, DeletePresetModal]
   });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useWindowInfo","getTranslation","validateWhereQuery","React","Fragment","useEffect","useRef","useState","Popup","PopupList","useUseTitleField","ChevronIcon","Dots","SearchIcon","useListQuery","useTranslation","AnimateHeight","ColumnSelector","Pill","SearchFilter","WhereBuilder","ActiveQueryPreset","getTextFieldsToBeSearched","useQueryPresets","baseClass","ListControls","props","beforeActions","collectionConfig","collectionSlug","disableQueryPresets","enableColumns","enableFilters","enableSort","listMenuItems","listMenuItemsFromProps","queryPreset","activePreset","queryPresetPermissions","renderedFilters","resolvedFilterOptions","handleSearchChange","query","CreateNewPresetDrawer","DeletePresetModal","EditPresetDrawer","hasModifiedPreset","openPresetListDrawer","PresetListDrawer","queryPresetMenuItems","resetPreset","titleField","i18n","t","breakpoints","s","smallBreak","searchLabel","label","name","listSearchableFields","admin","fields","searchLabelTranslated","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","length","reduce","placeholderText","field","i","enableQueryPresets","_jsx","Divider","_jsxs","className","handleChange","searchQueryParam","search","icon","direction","onClick","pillStyle","size","Array","isArray","button","ariaLabel","horizontalAlign","id","verticalAlign","map","item","height","slug","collectionPluralLabel","labels","plural"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport { validateWhereQuery } from 'payload/shared'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\n\nimport type { ListControlsProps } from './types.js'\n\nimport { Popup, PopupList } from '../../elements/Popup/index.js'\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { Dots } from '../../icons/Dots/index.js'\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport { ActiveQueryPreset } from './ActiveQueryPreset/index.js'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport { useQueryPresets } from './useQueryPresets.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n  const {\n    beforeActions,\n    collectionConfig,\n    collectionSlug,\n    disableQueryPresets,\n    enableColumns = true,\n    enableFilters = true,\n    enableSort = false,\n    listMenuItems: listMenuItemsFromProps,\n    queryPreset: activePreset,\n    queryPresetPermissions,\n    renderedFilters,\n    resolvedFilterOptions,\n  } = props\n\n  const { handleSearchChange, query } = useListQuery()\n\n  const {\n    CreateNewPresetDrawer,\n    DeletePresetModal,\n    EditPresetDrawer,\n    hasModifiedPreset,\n    openPresetListDrawer,\n    PresetListDrawer,\n    queryPresetMenuItems,\n    resetPreset,\n  } = useQueryPresets({\n    activePreset,\n    collectionSlug,\n    queryPresetPermissions,\n  })\n\n  const titleField = useUseTitleField(collectionConfig)\n  const { i18n, t } = useTranslation()\n\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const searchLabel =\n    (titleField &&\n      getTranslation(\n        'label' in titleField &&\n          (typeof titleField.label === 'string' || typeof titleField.label === 'object')\n          ? titleField.label\n          : 'name' in titleField\n            ? titleField.name\n            : null,\n        i18n,\n      )) ??\n    'ID'\n\n  const listSearchableFields = getTextFieldsToBeSearched(\n    collectionConfig.admin.listSearchableFields,\n    collectionConfig.fields,\n    i18n,\n  )\n\n  const searchLabelTranslated = useRef(\n    t('general:searchBy', { label: getTranslation(searchLabel, i18n) }),\n  )\n\n  const hasWhereParam = useRef(Boolean(query?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(query?.where)\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !query?.where) {\n      hasWhereParam.current = false\n    } else if (query?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, query?.where])\n\n  useEffect(() => {\n    if (listSearchableFields?.length > 0) {\n      searchLabelTranslated.current = listSearchableFields.reduce(\n        (placeholderText: string, field, i: number) => {\n          const label =\n            'label' in field && field.label ? field.label : 'name' in field ? field.name : null\n\n          if (i === 0) {\n            return `${t('general:searchBy', {\n              label: getTranslation(label, i18n),\n            })}`\n          }\n\n          if (i === listSearchableFields.length - 1) {\n            return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`\n          }\n\n          return `${placeholderText}, ${getTranslation(label, i18n)}`\n        },\n        '',\n      )\n    } else {\n      searchLabelTranslated.current = t('general:searchBy', {\n        label: getTranslation(searchLabel, i18n),\n      })\n    }\n  }, [t, listSearchableFields, i18n, searchLabel])\n\n  let listMenuItems: React.ReactNode[] = listMenuItemsFromProps\n\n  if (\n    collectionConfig?.enableQueryPresets &&\n    !disableQueryPresets &&\n    queryPresetMenuItems?.length > 0\n  ) {\n    // Cannot push or unshift into `listMenuItemsFromProps` as it will mutate the original array\n    listMenuItems = [\n      ...queryPresetMenuItems,\n      listMenuItemsFromProps?.length > 0 ? <PopupList.Divider key=\"divider\" /> : null,\n      ...(listMenuItemsFromProps || []),\n    ]\n  }\n\n  return (\n    <Fragment>\n      <div className={baseClass}>\n        <div className={`${baseClass}__wrap`}>\n          <SearchIcon />\n          <SearchFilter\n            handleChange={handleSearchChange}\n            key={collectionSlug}\n            // eslint-disable-next-line react-compiler/react-compiler -- TODO: fix\n            label={searchLabelTranslated.current}\n            searchQueryParam={query?.search}\n          />\n          {activePreset && hasModifiedPreset ? (\n            <div className={`${baseClass}__modified`}>Modified</div>\n          ) : null}\n          <div className={`${baseClass}__buttons`}>\n            <div className={`${baseClass}__buttons-wrap`}>\n              {!smallBreak && <React.Fragment>{beforeActions && beforeActions}</React.Fragment>}\n              {enableColumns && (\n                <Pill\n                  aria-controls={`${baseClass}-columns`}\n                  aria-expanded={visibleDrawer === 'columns'}\n                  className={`${baseClass}__toggle-columns`}\n                  icon={<ChevronIcon direction={visibleDrawer === 'columns' ? 'up' : 'down'} />}\n                  onClick={() =>\n                    setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n                  }\n                  pillStyle=\"light\"\n                  size=\"small\"\n                >\n                  {t('general:columns')}\n                </Pill>\n              )}\n              {enableFilters && (\n                <Pill\n                  aria-controls={`${baseClass}-where`}\n                  aria-expanded={visibleDrawer === 'where'}\n                  className={`${baseClass}__toggle-where`}\n                  icon={<ChevronIcon direction={visibleDrawer === 'where' ? 'up' : 'down'} />}\n                  onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n                  pillStyle=\"light\"\n                  size=\"small\"\n                >\n                  {t('general:filters')}\n                </Pill>\n              )}\n              {enableSort && (\n                <Pill\n                  aria-controls={`${baseClass}-sort`}\n                  aria-expanded={visibleDrawer === 'sort'}\n                  className={`${baseClass}__toggle-sort`}\n                  icon={<ChevronIcon />}\n                  onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n                  pillStyle=\"light\"\n                  size=\"small\"\n                >\n                  {t('general:sort')}\n                </Pill>\n              )}\n              {!disableQueryPresets && (\n                <ActiveQueryPreset\n                  activePreset={activePreset}\n                  openPresetListDrawer={openPresetListDrawer}\n                  resetPreset={resetPreset}\n                />\n              )}\n              {listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && (\n                <Popup\n                  button={<Dots ariaLabel={t('general:moreOptions')} />}\n                  className={`${baseClass}__popup`}\n                  horizontalAlign=\"right\"\n                  id=\"list-menu\"\n                  size=\"medium\"\n                  verticalAlign=\"bottom\"\n                >\n                  {listMenuItems.map((item, i) => (\n                    <Fragment key={`list-menu-item-${i}`}>{item}</Fragment>\n                  ))}\n                </Popup>\n              )}\n            </div>\n          </div>\n        </div>\n        {enableColumns && (\n          <AnimateHeight\n            className={`${baseClass}__columns`}\n            height={visibleDrawer === 'columns' ? 'auto' : 0}\n            id={`${baseClass}-columns`}\n          >\n            <ColumnSelector collectionSlug={collectionConfig.slug} />\n          </AnimateHeight>\n        )}\n        <AnimateHeight\n          className={`${baseClass}__where`}\n          height={visibleDrawer === 'where' ? 'auto' : 0}\n          id={`${baseClass}-where`}\n        >\n          <WhereBuilder\n            collectionPluralLabel={collectionConfig?.labels?.plural}\n            collectionSlug={collectionConfig.slug}\n            fields={collectionConfig?.fields}\n            renderedFilters={renderedFilters}\n            resolvedFilterOptions={resolvedFilterOptions}\n          />\n        </AnimateHeight>\n      </div>\n      {PresetListDrawer}\n      {EditPresetDrawer}\n      {CreateNewPresetDrawer}\n      {DeletePresetModal}\n    </Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useWindowInfo","getTranslation","validateWhereQuery","React","Fragment","useEffect","useRef","useState","Popup","PopupList","useUseTitleField","ChevronIcon","Dots","SearchIcon","useListQuery","useTranslation","AnimateHeight","ColumnSelector","GroupByBuilder","Pill","SearchFilter","WhereBuilder","ActiveQueryPreset","getTextFieldsToBeSearched","useQueryPresets","baseClass","ListControls","props","beforeActions","collectionConfig","collectionSlug","disableQueryPresets","enableColumns","enableFilters","enableSort","listMenuItems","listMenuItemsFromProps","queryPreset","activePreset","queryPresetPermissions","renderedFilters","resolvedFilterOptions","handleSearchChange","query","CreateNewPresetDrawer","DeletePresetModal","EditPresetDrawer","hasModifiedPreset","openPresetListDrawer","PresetListDrawer","queryPresetMenuItems","resetPreset","titleField","i18n","t","breakpoints","s","smallBreak","searchLabel","label","name","listSearchableFields","admin","fields","searchLabelTranslated","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","length","reduce","placeholderText","field","i","enableQueryPresets","_jsx","Divider","_jsxs","className","handleChange","searchQueryParam","search","icon","direction","id","onClick","pillStyle","size","groupBy","Array","isArray","button","ariaLabel","horizontalAlign","verticalAlign","map","item","height","slug","collectionPluralLabel","labels","plural"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport { validateWhereQuery } from 'payload/shared'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\n\nimport type { ListControlsProps } from './types.js'\n\nimport { Popup, PopupList } from '../../elements/Popup/index.js'\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { Dots } from '../../icons/Dots/index.js'\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { GroupByBuilder } from '../GroupByBuilder/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport { ActiveQueryPreset } from './ActiveQueryPreset/index.js'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport { useQueryPresets } from './useQueryPresets.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\n/**\n * The ListControls component is used to render the controls (search, filter, where)\n * for a collection's list view. You can find those directly above the table which lists\n * the collection's documents.\n */\nexport const ListControls: React.FC<ListControlsProps> = (props) => {\n  const {\n    beforeActions,\n    collectionConfig,\n    collectionSlug,\n    disableQueryPresets,\n    enableColumns = true,\n    enableFilters = true,\n    enableSort = false,\n    listMenuItems: listMenuItemsFromProps,\n    queryPreset: activePreset,\n    queryPresetPermissions,\n    renderedFilters,\n    resolvedFilterOptions,\n  } = props\n\n  const { handleSearchChange, query } = useListQuery()\n\n  const {\n    CreateNewPresetDrawer,\n    DeletePresetModal,\n    EditPresetDrawer,\n    hasModifiedPreset,\n    openPresetListDrawer,\n    PresetListDrawer,\n    queryPresetMenuItems,\n    resetPreset,\n  } = useQueryPresets({\n    activePreset,\n    collectionSlug,\n    queryPresetPermissions,\n  })\n\n  const titleField = useUseTitleField(collectionConfig)\n  const { i18n, t } = useTranslation()\n\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const searchLabel =\n    (titleField &&\n      getTranslation(\n        'label' in titleField &&\n          (typeof titleField.label === 'string' || typeof titleField.label === 'object')\n          ? titleField.label\n          : 'name' in titleField\n            ? titleField.name\n            : null,\n        i18n,\n      )) ??\n    'ID'\n\n  const listSearchableFields = getTextFieldsToBeSearched(\n    collectionConfig.admin.listSearchableFields,\n    collectionConfig.fields,\n    i18n,\n  )\n\n  const searchLabelTranslated = useRef(\n    t('general:searchBy', { label: getTranslation(searchLabel, i18n) }),\n  )\n\n  const hasWhereParam = useRef(Boolean(query?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(query?.where)\n\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'group-by' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !query?.where) {\n      hasWhereParam.current = false\n    } else if (query?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, query?.where])\n\n  useEffect(() => {\n    if (listSearchableFields?.length > 0) {\n      searchLabelTranslated.current = listSearchableFields.reduce(\n        (placeholderText: string, field, i: number) => {\n          const label =\n            'label' in field && field.label ? field.label : 'name' in field ? field.name : null\n\n          if (i === 0) {\n            return `${t('general:searchBy', {\n              label: getTranslation(label, i18n),\n            })}`\n          }\n\n          if (i === listSearchableFields.length - 1) {\n            return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`\n          }\n\n          return `${placeholderText}, ${getTranslation(label, i18n)}`\n        },\n        '',\n      )\n    } else {\n      searchLabelTranslated.current = t('general:searchBy', {\n        label: getTranslation(searchLabel, i18n),\n      })\n    }\n  }, [t, listSearchableFields, i18n, searchLabel])\n\n  let listMenuItems: React.ReactNode[] = listMenuItemsFromProps\n\n  if (\n    collectionConfig.enableQueryPresets &&\n    !disableQueryPresets &&\n    queryPresetMenuItems?.length > 0\n  ) {\n    // Cannot push or unshift into `listMenuItemsFromProps` as it will mutate the original array\n    listMenuItems = [\n      ...queryPresetMenuItems,\n      listMenuItemsFromProps?.length > 0 ? <PopupList.Divider key=\"divider\" /> : null,\n      ...(listMenuItemsFromProps || []),\n    ]\n  }\n\n  return (\n    <Fragment>\n      <div className={baseClass}>\n        <div className={`${baseClass}__wrap`}>\n          <SearchIcon />\n          <SearchFilter\n            handleChange={handleSearchChange}\n            key={collectionSlug}\n            label={searchLabelTranslated.current}\n            searchQueryParam={query?.search}\n          />\n          {activePreset && hasModifiedPreset ? (\n            <div className={`${baseClass}__modified`}>Modified</div>\n          ) : null}\n          <div className={`${baseClass}__buttons`}>\n            <div className={`${baseClass}__buttons-wrap`}>\n              {!smallBreak && <React.Fragment>{beforeActions && beforeActions}</React.Fragment>}\n              {enableColumns && (\n                <Pill\n                  aria-controls={`${baseClass}-columns`}\n                  aria-expanded={visibleDrawer === 'columns'}\n                  className={`${baseClass}__toggle-columns`}\n                  icon={<ChevronIcon direction={visibleDrawer === 'columns' ? 'up' : 'down'} />}\n                  id=\"toggle-columns\"\n                  onClick={() =>\n                    setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n                  }\n                  pillStyle=\"light\"\n                  size=\"small\"\n                >\n                  {t('general:columns')}\n                </Pill>\n              )}\n              {enableFilters && (\n                <Pill\n                  aria-controls={`${baseClass}-where`}\n                  aria-expanded={visibleDrawer === 'where'}\n                  className={`${baseClass}__toggle-where`}\n                  icon={<ChevronIcon direction={visibleDrawer === 'where' ? 'up' : 'down'} />}\n                  id=\"toggle-list-filters\"\n                  onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n                  pillStyle=\"light\"\n                  size=\"small\"\n                >\n                  {t('general:filters')}\n                </Pill>\n              )}\n              {enableSort && (\n                <Pill\n                  aria-controls={`${baseClass}-sort`}\n                  aria-expanded={visibleDrawer === 'sort'}\n                  className={`${baseClass}__toggle-sort`}\n                  icon={<ChevronIcon />}\n                  onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n                  pillStyle=\"light\"\n                  size=\"small\"\n                >\n                  {t('general:sort')}\n                </Pill>\n              )}\n              {!disableQueryPresets && (\n                <ActiveQueryPreset\n                  activePreset={activePreset}\n                  openPresetListDrawer={openPresetListDrawer}\n                  resetPreset={resetPreset}\n                />\n              )}\n              {collectionConfig.admin.groupBy && (\n                <Pill\n                  aria-controls={`${baseClass}-group-by`}\n                  aria-expanded={visibleDrawer === 'group-by'}\n                  className={`${baseClass}__toggle-group-by`}\n                  icon={<ChevronIcon direction={visibleDrawer === 'group-by' ? 'up' : 'down'} />}\n                  id=\"toggle-group-by\"\n                  onClick={() =>\n                    setVisibleDrawer(visibleDrawer !== 'group-by' ? 'group-by' : undefined)\n                  }\n                  pillStyle=\"light\"\n                  size=\"small\"\n                >\n                  {t('general:groupByLabel', {\n                    label: '',\n                  })}\n                </Pill>\n              )}\n              {listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && (\n                <Popup\n                  button={<Dots ariaLabel={t('general:moreOptions')} />}\n                  className={`${baseClass}__popup`}\n                  horizontalAlign=\"right\"\n                  id=\"list-menu\"\n                  size=\"medium\"\n                  verticalAlign=\"bottom\"\n                >\n                  {listMenuItems.map((item, i) => (\n                    <Fragment key={`list-menu-item-${i}`}>{item}</Fragment>\n                  ))}\n                </Popup>\n              )}\n            </div>\n          </div>\n        </div>\n        {enableColumns && (\n          <AnimateHeight\n            className={`${baseClass}__columns`}\n            height={visibleDrawer === 'columns' ? 'auto' : 0}\n            id={`${baseClass}-columns`}\n          >\n            <ColumnSelector collectionSlug={collectionConfig.slug} />\n          </AnimateHeight>\n        )}\n        <AnimateHeight\n          className={`${baseClass}__where`}\n          height={visibleDrawer === 'where' ? 'auto' : 0}\n          id={`${baseClass}-where`}\n        >\n          <WhereBuilder\n            collectionPluralLabel={collectionConfig.labels?.plural}\n            collectionSlug={collectionConfig.slug}\n            fields={collectionConfig.fields}\n            renderedFilters={renderedFilters}\n            resolvedFilterOptions={resolvedFilterOptions}\n          />\n        </AnimateHeight>\n        {collectionConfig.admin.groupBy && (\n          <AnimateHeight\n            className={`${baseClass}__group-by`}\n            height={visibleDrawer === 'group-by' ? 'auto' : 0}\n            id={`${baseClass}-group-by`}\n          >\n            <GroupByBuilder\n              collectionSlug={collectionConfig.slug}\n              fields={collectionConfig.fields}\n            />\n          </AnimateHeight>\n        )}\n      </div>\n      {PresetListDrawer}\n      {EditPresetDrawer}\n      {CreateNewPresetDrawer}\n      {DeletePresetModal}\n    </Fragment>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/ListControls/index.scss

@@ -36,7 +36,8 @@
 
     .pill-selector,
     .where-builder,
-    .sort-complex {
+    .sort-complex,
+    .group-by-builder {
       margin-top: base(1);
     }
 
@@ -90,7 +91,8 @@
 
       &__toggle-columns,
       &__toggle-where,
-      &__toggle-sort {
+      &__toggle-sort,
+      &__toggle-group-by {
         flex: 1;
       }
     }

package/dist/elements/ListDrawer/DrawerContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAE/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAUjD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0KvD,CAAA"}
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAUjD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA8LvD,CAAA"}