@payloadcms/ui 3.0.0-canary.23fcb9e → 3.0.0-canary.291e44c

package/dist/elements/GenerateConfirmation/index.js

@@ -43,31 +43,38 @@ export const GenerateConfirmation = props => {
       className: baseClass,
       slug: modalSlug,
       children: /*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__template`,
-        children: [/*#__PURE__*/_jsx("h1", {
-          children: t('authentication:confirmGeneration')
-        }), /*#__PURE__*/_jsx("p", {
-          children: /*#__PURE__*/_jsx(Translation, {
-            elements: {
-              1: ({
-                children
-              }) => /*#__PURE__*/_jsx("strong", {
-                children: children
-              })
+        className: `${baseClass}__wrapper`,
+        children: [/*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__content`,
+          children: [/*#__PURE__*/_jsx("h1", {
+            children: t('authentication:confirmGeneration')
+          }), /*#__PURE__*/_jsx("p", {
+            children: /*#__PURE__*/_jsx(Translation, {
+              elements: {
+                1: ({
+                  children
+                }) => /*#__PURE__*/_jsx("strong", {
+                  children: children
+                })
+              },
+              i18nKey: "authentication:generatingNewAPIKeyWillInvalidate",
+              t: t
+            })
+          })]
+        }), /*#__PURE__*/_jsxs("div", {
+          className: `${baseClass}__controls`,
+          children: [/*#__PURE__*/_jsx(Button, {
+            buttonStyle: "secondary",
+            onClick: () => {
+              toggleModal(modalSlug);
             },
-            i18nKey: "authentication:generatingNewAPIKeyWillInvalidate",
-            t: t
-          })
-        }), /*#__PURE__*/_jsx(Button, {
-          buttonStyle: "secondary",
-          onClick: () => {
-            toggleModal(modalSlug);
-          },
-          type: "button",
-          children: t('general:cancel')
-        }), /*#__PURE__*/_jsx(Button, {
-          onClick: handleGenerate,
-          children: t('authentication:generate')
+            size: "large",
+            type: "button",
+            children: t('general:cancel')
+          }), /*#__PURE__*/_jsx(Button, {
+            onClick: handleGenerate,
+            children: t('authentication:generate')
+          })]
         })]
       })
     })]

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Modal","useModal","React","toast","useDocumentInfo","useTranslation","Button","Translation","baseClass","GenerateConfirmation","props","highlightField","setKey","id","toggleModal","t","modalSlug","handleGenerate","success","_jsxs","Fragment","_jsx","buttonStyle","onClick","size","className","slug","elements","children","i18nKey","type"],"sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'generate-confirmation'\n\nexport type GenerateConfirmationProps = {\n  highlightField: (Boolean) => void\n  setKey: () => void\n}\n\nexport const GenerateConfirmation: React.FC<GenerateConfirmationProps> = (props) => {\n  const { highlightField, setKey } = props\n\n  const { id } = useDocumentInfo()\n  const { toggleModal } = useModal()\n  const { t } = useTranslation()\n\n  const modalSlug = `generate-confirmation-${id}`\n\n  const handleGenerate = () => {\n    setKey()\n    toggleModal(modalSlug)\n    toast.success(t('authentication:newAPIKeyGenerated'))\n    highlightField(true)\n  }\n\n  return (\n    <React.Fragment>\n      <Button\n        buttonStyle=\"secondary\"\n        onClick={() => {\n          toggleModal(modalSlug)\n        }}\n        size=\"small\"\n      >\n        {t('authentication:generateNewAPIKey')}\n      </Button>\n      <Modal className={baseClass} slug={modalSlug}>\n        <div className={`${baseClass}__template`}>\n          <h1>{t('authentication:confirmGeneration')}</h1>\n          <p>\n            <Translation\n              elements={{\n                1: ({ children }) => <strong>{children}</strong>,\n              }}\n              i18nKey=\"authentication:generatingNewAPIKeyWillInvalidate\"\n              t={t}\n            />\n          </p>\n\n          <Button\n            buttonStyle=\"secondary\"\n            onClick={() => {\n              toggleModal(modalSlug)\n            }}\n            type=\"button\"\n          >\n            {t('general:cancel')}\n          </Button>\n          <Button onClick={handleGenerate}>{t('authentication:generate')}</Button>\n        </div>\n      </Modal>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AACA,SAASA,KAAK,EAAEC,QAAQ,QAAQ;AAChC,OAAOC,KAAA,MAAW;AAClB,SAASC,KAAK,QAAQ;AAEtB,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,oBAAA,GAA6DC,KAAA;EACxE,MAAM;IAAEC,cAAc;IAAEC;EAAM,CAAE,GAAGF,KAAA;EAEnC,MAAM;IAAEG;EAAE,CAAE,GAAGT,eAAA;EACf,MAAM;IAAEU;EAAW,CAAE,GAAGb,QAAA;EACxB,MAAM;IAAEc;EAAC,CAAE,GAAGV,cAAA;EAEd,MAAMW,SAAA,GAAY,yBAAyBH,EAAA,EAAI;EAE/C,MAAMI,cAAA,GAAiBA,CAAA;IACrBL,MAAA;IACAE,WAAA,CAAYE,SAAA;IACZb,KAAA,CAAMe,OAAO,CAACH,CAAA,CAAE;IAChBJ,cAAA,CAAe;EACjB;EAEA,oBACEQ,KAAA,CAACjB,KAAA,CAAMkB,QAAQ;4BACbC,IAAA,CAACf,MAAA;MACCgB,WAAA,EAAY;MACZC,OAAA,EAASA,CAAA;QACPT,WAAA,CAAYE,SAAA;MACd;MACAQ,IAAA,EAAK;gBAEJT,CAAA,CAAE;qBAELM,IAAA,CAACrB,KAAA;MAAMyB,SAAA,EAAWjB,SAAA;MAAWkB,IAAA,EAAMV,SAAA;gBACjC,aAAAG,KAAA,CAAC;QAAIM,SAAA,EAAW,GAAGjB,SAAA,YAAqB;gCACtCa,IAAA,CAAC;oBAAIN,CAAA,CAAE;yBACPM,IAAA,CAAC;oBACC,aAAAA,IAAA,CAACd,WAAA;YACCoB,QAAA,EAAU;cACR,GAAG,CAAC;gBAAEC;cAAQ,CAAE,kBAAKP,IAAA,CAAC;0BAAQO;;YAChC;YACAC,OAAA,EAAQ;YACRd,CAAA,EAAGA;;yBAIPM,IAAA,CAACf,MAAA;UACCgB,WAAA,EAAY;UACZC,OAAA,EAASA,CAAA;YACPT,WAAA,CAAYE,SAAA;UACd;UACAc,IAAA,EAAK;oBAEJf,CAAA,CAAE;yBAELM,IAAA,CAACf,MAAA;UAAOiB,OAAA,EAASN,cAAA;oBAAiBF,CAAA,CAAE;;;;;AAK9C","ignoreList":[]}
+{"version":3,"file":"index.js","names":["Modal","useModal","React","toast","useDocumentInfo","useTranslation","Button","Translation","baseClass","GenerateConfirmation","props","highlightField","setKey","id","toggleModal","t","modalSlug","handleGenerate","success","_jsxs","Fragment","_jsx","buttonStyle","onClick","size","className","slug","elements","children","i18nKey","type"],"sources":["../../../src/elements/GenerateConfirmation/index.tsx"],"sourcesContent":["'use client'\nimport { Modal, useModal } from '@faceless-ui/modal'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { useDocumentInfo } from '../../providers/DocumentInfo/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Button } from '../Button/index.js'\nimport { Translation } from '../Translation/index.js'\nimport './index.scss'\n\nconst baseClass = 'generate-confirmation'\n\nexport type GenerateConfirmationProps = {\n  highlightField: (Boolean) => void\n  setKey: () => void\n}\n\nexport const GenerateConfirmation: React.FC<GenerateConfirmationProps> = (props) => {\n  const { highlightField, setKey } = props\n\n  const { id } = useDocumentInfo()\n  const { toggleModal } = useModal()\n  const { t } = useTranslation()\n\n  const modalSlug = `generate-confirmation-${id}`\n\n  const handleGenerate = () => {\n    setKey()\n    toggleModal(modalSlug)\n    toast.success(t('authentication:newAPIKeyGenerated'))\n    highlightField(true)\n  }\n\n  return (\n    <React.Fragment>\n      <Button\n        buttonStyle=\"secondary\"\n        onClick={() => {\n          toggleModal(modalSlug)\n        }}\n        size=\"small\"\n      >\n        {t('authentication:generateNewAPIKey')}\n      </Button>\n      <Modal className={baseClass} slug={modalSlug}>\n        <div className={`${baseClass}__wrapper`}>\n          <div className={`${baseClass}__content`}>\n            <h1>{t('authentication:confirmGeneration')}</h1>\n            <p>\n              <Translation\n                elements={{\n                  1: ({ children }) => <strong>{children}</strong>,\n                }}\n                i18nKey=\"authentication:generatingNewAPIKeyWillInvalidate\"\n                t={t}\n              />\n            </p>\n          </div>\n          <div className={`${baseClass}__controls`}>\n            <Button\n              buttonStyle=\"secondary\"\n              onClick={() => {\n                toggleModal(modalSlug)\n              }}\n              size=\"large\"\n              type=\"button\"\n            >\n              {t('general:cancel')}\n            </Button>\n            <Button onClick={handleGenerate}>{t('authentication:generate')}</Button>\n          </div>\n        </div>\n      </Modal>\n    </React.Fragment>\n  )\n}\n"],"mappings":"AAAA;;;AACA,SAASA,KAAK,EAAEC,QAAQ,QAAQ;AAChC,OAAOC,KAAA,MAAW;AAClB,SAASC,KAAK,QAAQ;AAEtB,SAASC,eAAe,QAAQ;AAChC,SAASC,cAAc,QAAQ;AAC/B,SAASC,MAAM,QAAQ;AACvB,SAASC,WAAW,QAAQ;AAC5B,OAAO;AAEP,MAAMC,SAAA,GAAY;AAOlB,OAAO,MAAMC,oBAAA,GAA6DC,KAAA;EACxE,MAAM;IAAEC,cAAc;IAAEC;EAAM,CAAE,GAAGF,KAAA;EAEnC,MAAM;IAAEG;EAAE,CAAE,GAAGT,eAAA;EACf,MAAM;IAAEU;EAAW,CAAE,GAAGb,QAAA;EACxB,MAAM;IAAEc;EAAC,CAAE,GAAGV,cAAA;EAEd,MAAMW,SAAA,GAAY,yBAAyBH,EAAA,EAAI;EAE/C,MAAMI,cAAA,GAAiBA,CAAA;IACrBL,MAAA;IACAE,WAAA,CAAYE,SAAA;IACZb,KAAA,CAAMe,OAAO,CAACH,CAAA,CAAE;IAChBJ,cAAA,CAAe;EACjB;EAEA,oBACEQ,KAAA,CAACjB,KAAA,CAAMkB,QAAQ;4BACbC,IAAA,CAACf,MAAA;MACCgB,WAAA,EAAY;MACZC,OAAA,EAASA,CAAA;QACPT,WAAA,CAAYE,SAAA;MACd;MACAQ,IAAA,EAAK;gBAEJT,CAAA,CAAE;qBAELM,IAAA,CAACrB,KAAA;MAAMyB,SAAA,EAAWjB,SAAA;MAAWkB,IAAA,EAAMV,SAAA;gBACjC,aAAAG,KAAA,CAAC;QAAIM,SAAA,EAAW,GAAGjB,SAAA,WAAoB;gCACrCW,KAAA,CAAC;UAAIM,SAAA,EAAW,GAAGjB,SAAA,WAAoB;kCACrCa,IAAA,CAAC;sBAAIN,CAAA,CAAE;2BACPM,IAAA,CAAC;sBACC,aAAAA,IAAA,CAACd,WAAA;cACCoB,QAAA,EAAU;gBACR,GAAG,CAAC;kBAAEC;gBAAQ,CAAE,kBAAKP,IAAA,CAAC;4BAAQO;;cAChC;cACAC,OAAA,EAAQ;cACRd,CAAA,EAAGA;;;yBAITI,KAAA,CAAC;UAAIM,SAAA,EAAW,GAAGjB,SAAA,YAAqB;kCACtCa,IAAA,CAACf,MAAA;YACCgB,WAAA,EAAY;YACZC,OAAA,EAASA,CAAA;cACPT,WAAA,CAAYE,SAAA;YACd;YACAQ,IAAA,EAAK;YACLM,IAAA,EAAK;sBAEJf,CAAA,CAAE;2BAELM,IAAA,CAACf,MAAA;YAAOiB,OAAA,EAASN,cAAA;sBAAiBF,CAAA,CAAE;;;;;;AAMhD","ignoreList":[]}

package/dist/elements/GenerateConfirmation/index.scss

@@ -1,19 +1,40 @@
 @import '../../scss/styles.scss';
 
-.generate-confirmation {
-  @include blur-bg;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: base(2);
+@layer payload-default {
+  .generate-confirmation {
+    @include blur-bg;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
 
-  &__template {
-    position: relative;
-    z-index: 1;
-  }
+    &__wrapper {
+      z-index: 1;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      gap: base(0.8);
+      padding: base(2);
+      max-width: base(36);
+    }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+      gap: base(0.4);
+
+      > * {
+        margin: 0;
+      }
+    }
+
+    &__controls {
+      display: flex;
+      gap: base(0.4);
 
-  .btn {
-    margin-right: $baseline;
+      .btn {
+        margin: 0;
+      }
+    }
   }
 }

package/dist/elements/Gutter/index.scss

@@ -1,19 +1,21 @@
 @import '../../scss/styles.scss';
 
-.gutter {
-  &--left {
-    padding-left: var(--gutter-h);
-  }
+@layer payload-default {
+  .gutter {
+    &--left {
+      padding-left: var(--gutter-h);
+    }
 
-  &--right {
-    padding-right: var(--gutter-h);
-  }
+    &--right {
+      padding-right: var(--gutter-h);
+    }
 
-  &--negative-left {
-    margin-left: calc(-1 * var(--gutter-h));
-  }
+    &--negative-left {
+      margin-left: calc(-1 * var(--gutter-h));
+    }
 
-  &--negative-right {
-    margin-right: calc(-1 * var(--gutter-h));
+    &--negative-right {
+      margin-right: calc(-1 * var(--gutter-h));
+    }
   }
 }

package/dist/elements/Hamburger/index.scss

@@ -1,40 +1,46 @@
 @import '../../scss/styles';
 
-.hamburger {
-  padding: 0;
-  border: 0;
-  cursor: pointer;
-  background-color: var(--theme-bg);
-  outline: none;
-  position: relative;
-  color: var(--theme-text);
-  box-shadow: 0px 0px 0px 1px var(--theme-elevation-150);
-  padding: base(0.1);
-  border-radius: 3px;
-  position: relative;
-  z-index: 1;
-  height: 100%;
-  width: 100%;
-  transition-property: box-shadow, background-color;
-  transition-duration: 100ms;
-  transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+@layer payload-default {
+  .hamburger {
+    padding: 0;
+    border: 0;
+    cursor: pointer;
+    background-color: var(--theme-bg);
+    outline: none;
+    position: relative;
+    color: var(--theme-text);
+    box-shadow: 0px 0px 0px 1px var(--theme-elevation-150);
+    padding: base(0.1);
+    border-radius: 3px;
+    position: relative;
+    z-index: 1;
+    height: 100%;
+    width: 100%;
+    transition-property: box-shadow, background-color;
+    transition-duration: 100ms;
+    transition-timing-function: cubic-bezier(0, 0.2, 0.2, 1);
+    --hamburger-size: var(--base);
 
-  &:hover {
-    background-color: var(--theme-elevation-100);
-    box-shadow: 0px 0px 0px 1px var(--theme-elevation-500);
-  }
+    &:hover {
+      background-color: var(--theme-elevation-100);
+      box-shadow: 0px 0px 0px 1px var(--theme-elevation-500);
+    }
 
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &::after {
-    z-index: -1;
-  }
+    &::after {
+      z-index: -1;
+    }
 
-  &__open-icon,
-  &__close-icon {
-    width: var(--hamburger-size);
-    height: var(--hamburger-size);
+    &__open-icon,
+    &__close-icon {
+      width: var(--hamburger-size);
+      height: var(--hamburger-size);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   }
 }

package/dist/elements/IDLabel/index.scss

@@ -1,12 +1,14 @@
 @import '../../scss/styles';
 
-.id-label {
-  font-size: base(0.8);
-  line-height: base(1.2);
-  font-weight: normal;
-  color: var(--theme-elevation-600);
-  background: var(--theme-elevation-100);
-  padding: base(0.2) base(0.4);
-  border-radius: $style-radius-m;
-  display: inline-flex;
+@layer payload-default {
+  .id-label {
+    font-size: base(0.8);
+    line-height: base(1.2);
+    font-weight: normal;
+    color: var(--theme-elevation-600);
+    background: var(--theme-elevation-100);
+    padding: base(0.2) base(0.4);
+    border-radius: $style-radius-m;
+    display: inline-flex;
+  }
 }

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":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIzE,OAAO,KAAsC,MAAM,OAAO,CAAA;AAuB1D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACpD,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyLpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIzE,OAAO,KAAgD,MAAM,OAAO,CAAA;AAsBpE,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACpD,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqLpD,CAAA"}

package/dist/elements/ListControls/index.js

@@ -1,10 +1,9 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useWindowInfo } from '@faceless-ui/window-info';
 import { getTranslation } from '@payloadcms/translations';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import AnimateHeightImport from 'react-animate-height';
 const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
 import { useUseTitleField } from '../../hooks/useUseAsTitle.js';
@@ -12,7 +11,6 @@ import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { SearchIcon } from '../../icons/Search/index.js';
 import { useListInfo } from '../../providers/ListInfo/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
-import { useSearchParams } from '../../providers/SearchParams/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { ColumnSelector } from '../ColumnSelector/index.js';
 import { DeleteMany } from '../DeleteMany/index.js';
@@ -32,252 +30,152 @@ const baseClass = 'list-controls';
  * the collection's documents.
  */
 export const ListControls = props => {
-  const $ = _c(34);
   const {
     collectionConfig,
-    enableColumns: t0,
-    enableSort: t1,
+    enableColumns = true,
+    enableSort = false,
     fields
   } = props;
-  const enableColumns = t0 === undefined ? true : t0;
-  const enableSort = t1 === undefined ? false : t1;
   const {
-    handleSearchChange
+    handleSearchChange,
+    params
   } = useListQuery();
   const {
-    collectionSlug
+    beforeActions,
+    collectionSlug,
+    disableBulkDelete,
+    disableBulkEdit
   } = useListInfo();
-  const {
-    searchParams
-  } = useSearchParams();
   const titleField = useUseTitleField(collectionConfig, fields);
   const {
     i18n,
     t
   } = useTranslation();
   const {
-    breakpoints: t2
+    breakpoints: {
+      s: smallBreak
+    }
   } = useWindowInfo();
-  const {
-    s: smallBreak
-  } = t2;
-  const [search, setSearch] = useState(typeof searchParams?.search === "string" ? searchParams?.search : "");
-  let t3;
-  if ($[0] !== titleField || $[1] !== i18n) {
-    t3 = (titleField && getTranslation("label" in titleField && typeof titleField.label === "string" ? titleField.label : "name" in titleField ? titleField.name : null, i18n)) ?? "ID";
-    $[0] = titleField;
-    $[1] = i18n;
-    $[2] = t3;
-  } else {
-    t3 = $[2];
-  }
-  const searchLabel = t3;
-  let t4;
-  if ($[3] !== collectionConfig.admin.listSearchableFields || $[4] !== fields) {
-    t4 = getTextFieldsToBeSearched(collectionConfig.admin.listSearchableFields, fields);
-    $[3] = collectionConfig.admin.listSearchableFields;
-    $[4] = fields;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  const listSearchableFields = t4;
-  const searchLabelTranslated = useRef(t("general:searchBy", {
+  const searchLabel = (titleField && getTranslation('label' in titleField && typeof titleField.label === 'string' ? titleField.label : 'name' in titleField ? titleField.name : null, i18n)) ?? 'ID';
+  const listSearchableFields = getTextFieldsToBeSearched(collectionConfig.admin.listSearchableFields, fields);
+  const searchLabelTranslated = useRef(t('general:searchBy', {
     label: getTranslation(searchLabel, i18n)
   }));
-  const hasWhereParam = useRef(Boolean(searchParams?.where));
-  const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where);
-  const [visibleDrawer, setVisibleDrawer] = useState(shouldInitializeWhereOpened ? "where" : undefined);
-  let t5;
-  if ($[6] !== searchParams) {
-    t5 = () => {
-      if (hasWhereParam.current && !searchParams?.where) {
-        setVisibleDrawer(undefined);
-        hasWhereParam.current = false;
-      } else {
-        if (searchParams?.where) {
-          hasWhereParam.current = true;
-        }
-      }
-    };
-    $[6] = searchParams;
-    $[7] = t5;
-  } else {
-    t5 = $[7];
-  }
-  const t6 = searchParams?.where;
-  let t7;
-  if ($[8] !== t6) {
-    t7 = [setVisibleDrawer, t6];
-    $[8] = t6;
-    $[9] = t7;
-  } else {
-    t7 = $[9];
-  }
-  useEffect(t5, t7);
-  let t8;
-  if ($[10] !== t || $[11] !== listSearchableFields || $[12] !== i18n || $[13] !== searchLabel) {
-    t8 = [t, listSearchableFields, i18n, searchLabel];
-    $[10] = t;
-    $[11] = listSearchableFields;
-    $[12] = i18n;
-    $[13] = searchLabel;
-    $[14] = t8;
-  } else {
-    t8 = $[14];
-  }
+  const hasWhereParam = useRef(Boolean(params?.where));
+  const shouldInitializeWhereOpened = validateWhereQuery(params?.where);
+  const [visibleDrawer, setVisibleDrawer] = useState(shouldInitializeWhereOpened ? 'where' : undefined);
+  useEffect(() => {
+    if (hasWhereParam.current && !params?.where) {
+      setVisibleDrawer(undefined);
+      hasWhereParam.current = false;
+    } else if (params?.where) {
+      hasWhereParam.current = true;
+    }
+  }, [setVisibleDrawer, params?.where]);
   useEffect(() => {
     if (listSearchableFields?.length > 0) {
       searchLabelTranslated.current = listSearchableFields.reduce((placeholderText, field, i) => {
-        const label = "label" in field && field.label ? field.label : "name" in field ? field.name : null;
+        const label = 'label' in field && field.label ? field.label : 'name' in field ? field.name : null;
         if (i === 0) {
-          return `${t("general:searchBy", {
+          return `${t('general:searchBy', {
             label: getTranslation(label, i18n)
           })}`;
         }
         if (i === listSearchableFields.length - 1) {
-          return `${placeholderText} ${t("general:or")} ${getTranslation(label, i18n)}`;
+          return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`;
         }
         return `${placeholderText}, ${getTranslation(label, i18n)}`;
-      }, "");
+      }, '');
     } else {
-      searchLabelTranslated.current = t("general:searchBy", {
+      searchLabelTranslated.current = t('general:searchBy', {
         label: getTranslation(searchLabel, i18n)
       });
     }
-  }, t8);
-  let t9;
-  if ($[15] !== handleSearchChange) {
-    t9 = search_0 => void handleSearchChange(search_0);
-    $[15] = handleSearchChange;
-    $[16] = t9;
-  } else {
-    t9 = $[16];
-  }
-  let t10;
-  if ($[17] !== enableColumns || $[18] !== visibleDrawer || $[19] !== t) {
-    t10 = enableColumns && _jsx(Pill, {
-      "aria-controls": `${baseClass}-columns`,
-      "aria-expanded": visibleDrawer === "columns",
-      className: `${baseClass}__toggle-columns ${visibleDrawer === "columns" ? `${baseClass}__buttons-active` : ""}`,
-      icon: _jsx(ChevronIcon, {}),
-      onClick: () => setVisibleDrawer(visibleDrawer !== "columns" ? "columns" : undefined),
-      pillStyle: "light",
-      children: t("general:columns")
-    });
-    $[17] = enableColumns;
-    $[18] = visibleDrawer;
-    $[19] = t;
-    $[20] = t10;
-  } else {
-    t10 = $[20];
-  }
-  let t11;
-  if ($[21] !== visibleDrawer) {
-    t11 = () => setVisibleDrawer(visibleDrawer !== "where" ? "where" : undefined);
-    $[21] = visibleDrawer;
-    $[22] = t11;
-  } else {
-    t11 = $[22];
-  }
-  let t12;
-  if ($[23] !== enableSort || $[24] !== visibleDrawer || $[25] !== t) {
-    t12 = enableSort && _jsx(Pill, {
-      "aria-controls": `${baseClass}-sort`,
-      "aria-expanded": visibleDrawer === "sort",
-      className: `${baseClass}__toggle-sort`,
-      icon: _jsx(ChevronIcon, {}),
-      onClick: () => setVisibleDrawer(visibleDrawer !== "sort" ? "sort" : undefined),
-      pillStyle: "light",
-      children: t("general:sort")
-    });
-    $[23] = enableSort;
-    $[24] = visibleDrawer;
-    $[25] = t;
-    $[26] = t12;
-  } else {
-    t12 = $[26];
-  }
-  let t13;
-  if ($[27] !== enableColumns || $[28] !== visibleDrawer || $[29] !== collectionConfig) {
-    t13 = enableColumns && _jsx(AnimateHeight, {
-      className: `${baseClass}__columns`,
-      height: visibleDrawer === "columns" ? "auto" : 0,
-      id: `${baseClass}-columns`,
-      children: _jsx(ColumnSelector, {
-        collectionSlug: collectionConfig.slug
-      })
-    });
-    $[27] = enableColumns;
-    $[28] = visibleDrawer;
-    $[29] = collectionConfig;
-    $[30] = t13;
-  } else {
-    t13 = $[30];
-  }
-  let t14;
-  if ($[31] !== enableSort || $[32] !== visibleDrawer) {
-    t14 = enableSort && _jsx(AnimateHeight, {
-      className: `${baseClass}__sort`,
-      height: visibleDrawer === "sort" ? "auto" : 0,
-      id: `${baseClass}-sort`,
-      children: _jsx("p", {
-        children: "Sort Complex"
-      })
-    });
-    $[31] = enableSort;
-    $[32] = visibleDrawer;
-    $[33] = t14;
-  } else {
-    t14 = $[33];
-  }
-  return _jsxs("div", {
+  }, [t, listSearchableFields, i18n, searchLabel]);
+  return /*#__PURE__*/_jsxs("div", {
     className: baseClass,
-    children: [_jsxs("div", {
+    children: [/*#__PURE__*/_jsxs("div", {
       className: `${baseClass}__wrap`,
-      children: [_jsx(SearchIcon, {}), _jsx(SearchFilter, {
-        fieldName: "name" in titleField ? titleField?.name : null,
-        handleChange: t9,
-        initialParams: searchParams,
-        label: searchLabelTranslated.current,
-        setValue: setSearch,
-        value: search
-      }, collectionSlug), _jsx("div", {
+      children: [/*#__PURE__*/_jsx(SearchIcon, {}), /*#__PURE__*/_jsx(SearchFilter, {
+        fieldName: titleField && 'name' in titleField ? titleField?.name : null,
+        handleChange: search => {
+          return void handleSearchChange(search);
+        },
+        // @ts-expect-error @todo: fix types
+        initialParams: params,
+        label: searchLabelTranslated.current
+      }, collectionSlug), /*#__PURE__*/_jsx("div", {
         className: `${baseClass}__buttons`,
-        children: _jsxs("div", {
+        children: /*#__PURE__*/_jsxs("div", {
           className: `${baseClass}__buttons-wrap`,
-          children: [!smallBreak && _jsxs(React.Fragment, {
-            children: [_jsx(EditMany, {
-              collection: collectionConfig,
-              fields
-            }), _jsx(PublishMany, {
-              collection: collectionConfig
-            }), _jsx(UnpublishMany, {
-              collection: collectionConfig
-            }), _jsx(DeleteMany, {
+          children: [!smallBreak && /*#__PURE__*/_jsxs(React.Fragment, {
+            children: [beforeActions && beforeActions, !disableBulkEdit && /*#__PURE__*/_jsxs(Fragment, {
+              children: [/*#__PURE__*/_jsx(EditMany, {
+                collection: collectionConfig,
+                fields: fields
+              }), /*#__PURE__*/_jsx(PublishMany, {
+                collection: collectionConfig
+              }), /*#__PURE__*/_jsx(UnpublishMany, {
+                collection: collectionConfig
+              })]
+            }), !disableBulkDelete && /*#__PURE__*/_jsx(DeleteMany, {
               collection: collectionConfig
             })]
-          }), t10, _jsx(Pill, {
+          }), enableColumns && /*#__PURE__*/_jsx(Pill, {
+            "aria-controls": `${baseClass}-columns`,
+            "aria-expanded": visibleDrawer === 'columns',
+            className: `${baseClass}__toggle-columns`,
+            icon: /*#__PURE__*/_jsx(ChevronIcon, {
+              direction: visibleDrawer === 'columns' ? 'up' : 'down'
+            }),
+            onClick: () => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined),
+            pillStyle: "light",
+            children: t('general:columns')
+          }), /*#__PURE__*/_jsx(Pill, {
             "aria-controls": `${baseClass}-where`,
-            "aria-expanded": visibleDrawer === "where",
-            className: `${baseClass}__toggle-where ${visibleDrawer === "where" ? `${baseClass}__buttons-active` : ""}`,
-            icon: _jsx(ChevronIcon, {}),
-            onClick: t11,
+            "aria-expanded": visibleDrawer === 'where',
+            className: `${baseClass}__toggle-where`,
+            icon: /*#__PURE__*/_jsx(ChevronIcon, {
+              direction: visibleDrawer === 'where' ? 'up' : 'down'
+            }),
+            onClick: () => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined),
             pillStyle: "light",
-            children: t("general:filters")
-          }), t12]
+            children: t('general:filters')
+          }), enableSort && /*#__PURE__*/_jsx(Pill, {
+            "aria-controls": `${baseClass}-sort`,
+            "aria-expanded": visibleDrawer === 'sort',
+            className: `${baseClass}__toggle-sort`,
+            icon: /*#__PURE__*/_jsx(ChevronIcon, {}),
+            onClick: () => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined),
+            pillStyle: "light",
+            children: t('general:sort')
+          })]
         })
       })]
-    }), t13, _jsx(AnimateHeight, {
+    }), enableColumns && /*#__PURE__*/_jsx(AnimateHeight, {
+      className: `${baseClass}__columns`,
+      height: visibleDrawer === 'columns' ? 'auto' : 0,
+      id: `${baseClass}-columns`,
+      children: /*#__PURE__*/_jsx(ColumnSelector, {
+        collectionSlug: collectionConfig.slug
+      })
+    }), /*#__PURE__*/_jsx(AnimateHeight, {
       className: `${baseClass}__where`,
-      height: visibleDrawer === "where" ? "auto" : 0,
+      height: visibleDrawer === 'where' ? 'auto' : 0,
       id: `${baseClass}-where`,
-      children: _jsx(WhereBuilder, {
+      children: /*#__PURE__*/_jsx(WhereBuilder, {
         collectionPluralLabel: collectionConfig?.labels?.plural,
         collectionSlug: collectionConfig.slug,
-        fields
-      }, String(hasWhereParam.current && !searchParams?.where))
-    }), t14]
+        fields: fields
+      }, String(hasWhereParam.current && !params?.where))
+    }), enableSort && /*#__PURE__*/_jsx(AnimateHeight, {
+      className: `${baseClass}__sort`,
+      height: visibleDrawer === 'sort' ? 'auto' : 0,
+      id: `${baseClass}-sort`,
+      children: /*#__PURE__*/_jsx("p", {
+        children: "Sort Complex"
+      })
+    })]
   });
 };
 //# sourceMappingURL=index.js.map