@payloadcms/ui 3.0.0-alpha.49 → 3.0.0-alpha.50

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/FileDetails/index.tsx"],"sourcesContent":["import { isImage } from 'payload/utilities'\nimport React from 'react'\n\nimport { UploadActions } from '../../elements/Upload/index.js'\nimport { Button } from '../Button/index.js'\nimport { Thumbnail } from '../Thumbnail/index.js'\nimport { FileMeta } from './FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload/types'\n\nexport type FileDetailsProps = {\n  canEdit?: boolean\n  collectionSlug: string\n  doc: Data & {\n    sizes?: FileSizes\n  }\n  handleRemove?: () => void\n  hasImageSizes?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const FileDetails: React.FC<FileDetailsProps> = (props) => {\n  const { canEdit, collectionSlug, doc, handleRemove, hasImageSizes, imageCacheTag, uploadConfig } =\n    props\n\n  const { id, filename, filesize, height, mimeType, url, width } = doc\n\n  return (\n    <div className={baseClass}>\n      <header>\n        <Thumbnail\n          collectionSlug={collectionSlug}\n          doc={doc}\n          imageCacheTag={imageCacheTag}\n          uploadConfig={uploadConfig}\n        />\n        <div className={`${baseClass}__main-detail`}>\n          <FileMeta\n            collection={collectionSlug}\n            filename={filename as string}\n            filesize={filesize as number}\n            height={height as number}\n            id={id as string}\n            mimeType={mimeType as string}\n            url={url as string}\n            width={width as number}\n          />\n\n          {isImage(mimeType as string) && mimeType !== 'image/svg+xml' && (\n            <UploadActions canEdit={canEdit} showSizePreviews={hasImageSizes && doc.filename} />\n          )}\n        </div>\n        {handleRemove && (\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={handleRemove}\n            round\n          />\n        )}\n      </header>\n    </div>\n  )\n}\n"],"names":["isImage","React","UploadActions","Button","Thumbnail","FileMeta","baseClass","FileDetails","props","canEdit","collectionSlug","doc","handleRemove","hasImageSizes","imageCacheTag","uploadConfig","id","filename","filesize","height","mimeType","url","width","div","className","header","collection","showSizePreviews","buttonStyle","icon","iconStyle","onClick","round"],"mappings":"AAAA,SAASA,OAAO,QAAQ,oBAAmB;AAC3C,OAAOC,WAAW,QAAO;AAEzB,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,SAAS,QAAQ,wBAAuB;AACjD,SAASC,QAAQ,QAAQ,sBAAqB;AAG9C,MAAMC,YAAY;AAgBlB,OAAO,MAAMC,cAA0C,CAACC;IACtD,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,GAAG,EAAEC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,YAAY,EAAE,GAC9FP;IAEF,MAAM,EAAEQ,EAAE,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,GAAG,EAAEC,KAAK,EAAE,GAAGX;IAEjE,qBACE,oBAACY;QAAIC,WAAWlB;qBACd,oBAACmB,8BACC,oBAACrB;QACCM,gBAAgBA;QAChBC,KAAKA;QACLG,eAAeA;QACfC,cAAcA;sBAEhB,oBAACQ;QAAIC,WAAW,CAAC,EAAElB,UAAU,aAAa,CAAC;qBACzC,oBAACD;QACCqB,YAAYhB;QACZO,UAAUA;QACVC,UAAUA;QACVC,QAAQA;QACRH,IAAIA;QACJI,UAAUA;QACVC,KAAKA;QACLC,OAAOA;QAGRtB,QAAQoB,aAAuBA,aAAa,iCAC3C,oBAAClB;QAAcO,SAASA;QAASkB,kBAAkBd,iBAAiBF,IAAIM,QAAQ;SAGnFL,8BACC,oBAACT;QACCyB,aAAY;QACZJ,WAAW,CAAC,EAAElB,UAAU,QAAQ,CAAC;QACjCuB,MAAK;QACLC,WAAU;QACVC,SAASnB;QACToB,OAAAA;;AAMZ,EAAC"}
+{"version":3,"sources":["../../../src/elements/FileDetails/index.tsx"],"sourcesContent":["import { isImage } from 'payload/utilities'\nimport React from 'react'\n\nimport { UploadActions } from '../../elements/Upload/index.js'\nimport { Button } from '../Button/index.js'\nimport { Thumbnail } from '../Thumbnail/index.js'\nimport { FileMeta } from './FileMeta/index.js'\nimport './index.scss'\n\nconst baseClass = 'file-details'\n\nimport type { Data, FileSizes, SanitizedCollectionConfig } from 'payload/types'\n\nexport type FileDetailsProps = {\n  canEdit?: boolean\n  collectionSlug: string\n  doc: Data & {\n    sizes?: FileSizes\n  }\n  handleRemove?: () => void\n  hasImageSizes?: boolean\n  imageCacheTag?: string\n  uploadConfig: SanitizedCollectionConfig['upload']\n}\n\nexport const FileDetails: React.FC<FileDetailsProps> = (props) => {\n  const { canEdit, collectionSlug, doc, handleRemove, hasImageSizes, imageCacheTag, uploadConfig } =\n    props\n\n  const { id, filename, filesize, height, mimeType, thumbnailURL, url, width } = doc\n\n  return (\n    <div className={baseClass}>\n      <header>\n        <Thumbnail\n          collectionSlug={collectionSlug}\n          doc={doc}\n          fileSrc={thumbnailURL}\n          imageCacheTag={imageCacheTag}\n          uploadConfig={uploadConfig}\n        />\n        <div className={`${baseClass}__main-detail`}>\n          <FileMeta\n            collection={collectionSlug}\n            filename={filename as string}\n            filesize={filesize as number}\n            height={height as number}\n            id={id as string}\n            mimeType={mimeType as string}\n            url={url as string}\n            width={width as number}\n          />\n\n          {isImage(mimeType as string) && mimeType !== 'image/svg+xml' && (\n            <UploadActions canEdit={canEdit} showSizePreviews={hasImageSizes && doc.filename} />\n          )}\n        </div>\n        {handleRemove && (\n          <Button\n            buttonStyle=\"icon-label\"\n            className={`${baseClass}__remove`}\n            icon=\"x\"\n            iconStyle=\"with-border\"\n            onClick={handleRemove}\n            round\n          />\n        )}\n      </header>\n    </div>\n  )\n}\n"],"names":["isImage","React","UploadActions","Button","Thumbnail","FileMeta","baseClass","FileDetails","props","canEdit","collectionSlug","doc","handleRemove","hasImageSizes","imageCacheTag","uploadConfig","id","filename","filesize","height","mimeType","thumbnailURL","url","width","div","className","header","fileSrc","collection","showSizePreviews","buttonStyle","icon","iconStyle","onClick","round"],"mappings":"AAAA,SAASA,OAAO,QAAQ,oBAAmB;AAC3C,OAAOC,WAAW,QAAO;AAEzB,SAASC,aAAa,QAAQ,iCAAgC;AAC9D,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,SAAS,QAAQ,wBAAuB;AACjD,SAASC,QAAQ,QAAQ,sBAAqB;AAG9C,MAAMC,YAAY;AAgBlB,OAAO,MAAMC,cAA0C,CAACC;IACtD,MAAM,EAAEC,OAAO,EAAEC,cAAc,EAAEC,GAAG,EAAEC,YAAY,EAAEC,aAAa,EAAEC,aAAa,EAAEC,YAAY,EAAE,GAC9FP;IAEF,MAAM,EAAEQ,EAAE,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,GAAG,EAAEC,KAAK,EAAE,GAAGZ;IAE/E,qBACE,oBAACa;QAAIC,WAAWnB;qBACd,oBAACoB,8BACC,oBAACtB;QACCM,gBAAgBA;QAChBC,KAAKA;QACLgB,SAASN;QACTP,eAAeA;QACfC,cAAcA;sBAEhB,oBAACS;QAAIC,WAAW,CAAC,EAAEnB,UAAU,aAAa,CAAC;qBACzC,oBAACD;QACCuB,YAAYlB;QACZO,UAAUA;QACVC,UAAUA;QACVC,QAAQA;QACRH,IAAIA;QACJI,UAAUA;QACVE,KAAKA;QACLC,OAAOA;QAGRvB,QAAQoB,aAAuBA,aAAa,iCAC3C,oBAAClB;QAAcO,SAASA;QAASoB,kBAAkBhB,iBAAiBF,IAAIM,QAAQ;SAGnFL,8BACC,oBAACT;QACC2B,aAAY;QACZL,WAAW,CAAC,EAAEnB,UAAU,QAAQ,CAAC;QACjCyB,MAAK;QACLC,WAAU;QACVC,SAASrB;QACTsB,OAAAA;;AAMZ,EAAC"}

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

@@ -11,7 +11,6 @@ export type ListControlsProps = {
     handleSortChange?: (sort: string) => void;
     handleWhereChange?: (where: Where) => void;
     textFieldsToBeSearched?: FieldAffectingData[];
-    titleField: FieldAffectingData;
 };
 /**
  * The ListControls component is used to render the controls (search, filter, where)

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,kBAAkB,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAKtF,OAAO,KAAmB,MAAM,OAAO,CAAA;AAMvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAA;AAepE,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,QAAQ,CAAA;IAClB,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAC1C,sBAAsB,CAAC,EAAE,kBAAkB,EAAE,CAAA;IAC7C,UAAU,EAAE,kBAAkB,CAAA;CAC/B,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA2HpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAItF,OAAO,KAAmB,MAAM,OAAO,CAAA;AAQvC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAA;AAepE,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,gBAAgB,EAAE,sBAAsB,CAAA;IACxC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,QAAQ,CAAA;IAClB,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IAC1C,sBAAsB,CAAC,EAAE,kBAAkB,EAAE,CAAA;CAC9C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmIpD,CAAA"}

package/dist/elements/ListControls/index.js

@@ -1,10 +1,10 @@
 'use client';
 import * as facelessUIImport from '@faceless-ui/window-info';
 import { getTranslation } from '@payloadcms/translations';
-import { fieldAffectsData } from 'payload/types';
 import React, { useState } from 'react';
 import AnimateHeightImport from 'react-animate-height';
 const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
+import { useUseTitleField } from '@payloadcms/ui/hooks/useUseAsTitle';
 import { Chevron } from '../../icons/Chevron/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useSearchParams } from '../../providers/SearchParams/index.js';
@@ -24,21 +24,22 @@ const baseClass = 'list-controls';
  * for a collection's list view. You can find those directly above the table which lists
  * the collection's documents.
  */ export const ListControls = (props)=>{
-    const { collectionConfig, enableColumns = true, enableSort = false, fieldMap, textFieldsToBeSearched, titleField } = props;
+    const { collectionConfig, enableColumns = true, enableSort = false, fieldMap, textFieldsToBeSearched } = props;
     const { useWindowInfo } = facelessUIImport;
     const { handleSearchChange } = useListQuery();
     const { searchParams } = useSearchParams();
-    const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where);
-    const [visibleDrawer, setVisibleDrawer] = useState(shouldInitializeWhereOpened ? 'where' : undefined);
+    const titleField = useUseTitleField(collectionConfig, fieldMap);
     const { i18n, t } = useTranslation();
     const { breakpoints: { s: smallBreak } } = useWindowInfo();
+    const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where);
+    const [visibleDrawer, setVisibleDrawer] = useState(shouldInitializeWhereOpened ? 'where' : undefined);
     return /*#__PURE__*/ React.createElement("div", {
         className: baseClass
     }, /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__wrap`
     }, /*#__PURE__*/ React.createElement(SearchFilter, {
-        fieldLabel: (titleField && getTranslation(titleField.label || titleField.name, i18n)) ?? undefined,
-        fieldName: titleField && fieldAffectsData(titleField) ? titleField.name : undefined,
+        fieldLabel: (titleField && getTranslation('label' in titleField.fieldComponentProps && typeof titleField.fieldComponentProps.label === 'string' ? titleField.fieldComponentProps.label : titleField.name, i18n)) ?? undefined,
+        fieldName: titleField.name,
         handleChange: handleSearchChange,
         listSearchableFields: textFieldsToBeSearched
     }), /*#__PURE__*/ React.createElement("div", {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, FieldAffectingData, Where } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport { fieldAffectsData } from 'payload/types'\nimport React, { useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport type { FieldMap } from '../../utilities/buildComponentMap.js'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n  collectionConfig: ClientCollectionConfig\n  enableColumns?: boolean\n  enableSort?: boolean\n  fieldMap: FieldMap\n  handleSearchChange?: (search: string) => void\n  handleSortChange?: (sort: string) => void\n  handleWhereChange?: (where: Where) => void\n  textFieldsToBeSearched?: FieldAffectingData[]\n  titleField: FieldAffectingData\n}\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    collectionConfig,\n    enableColumns = true,\n    enableSort = false,\n    fieldMap,\n    textFieldsToBeSearched,\n    titleField,\n  } = props\n\n  const { useWindowInfo } = facelessUIImport\n  const { handleSearchChange } = useListQuery()\n\n  const { searchParams } = useSearchParams()\n  const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n  const { i18n, t } = useTranslation()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <SearchFilter\n          fieldLabel={\n            (titleField && getTranslation(titleField.label || titleField.name, i18n)) ?? undefined\n          }\n          fieldName={titleField && fieldAffectsData(titleField) ? titleField.name : undefined}\n          handleChange={handleSearchChange}\n          listSearchableFields={textFieldsToBeSearched}\n        />\n        <div className={`${baseClass}__buttons`}>\n          <div className={`${baseClass}__buttons-wrap`}>\n            {!smallBreak && (\n              <React.Fragment>\n                <EditMany collection={collectionConfig} fieldMap={fieldMap} />\n                <PublishMany collection={collectionConfig} />\n                <UnpublishMany collection={collectionConfig} />\n                <DeleteMany collection={collectionConfig} />\n              </React.Fragment>\n            )}\n            {enableColumns && (\n              <Pill\n                aria-controls={`${baseClass}-columns`}\n                aria-expanded={visibleDrawer === 'columns'}\n                className={`${baseClass}__toggle-columns ${\n                  visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n                }`}\n                icon={<Chevron />}\n                onClick={() =>\n                  setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n                }\n                pillStyle=\"light\"\n              >\n                {t('general:columns')}\n              </Pill>\n            )}\n            <Pill\n              aria-controls={`${baseClass}-where`}\n              aria-expanded={visibleDrawer === 'where'}\n              className={`${baseClass}__toggle-where ${\n                visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n              }`}\n              icon={<Chevron />}\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              pillStyle=\"light\"\n            >\n              {t('general:filters')}\n            </Pill>\n            {enableSort && (\n              <Pill\n                aria-controls={`${baseClass}-sort`}\n                aria-expanded={visibleDrawer === 'sort'}\n                className={`${baseClass}__toggle-sort`}\n                icon={<Chevron />}\n                onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n                pillStyle=\"light\"\n              >\n                {t('general:sort')}\n              </Pill>\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        />\n      </AnimateHeight>\n      {enableSort && (\n        <AnimateHeight\n          className={`${baseClass}__sort`}\n          height={visibleDrawer === 'sort' ? 'auto' : 0}\n          id={`${baseClass}-sort`}\n        >\n          <p>Sort Complex</p>\n          {/* <SortComplex\n            collection={collection}\n            handleChange={handleSortChange}\n            modifySearchQuery={modifySearchQuery}\n          /> */}\n        </AnimateHeight>\n      )}\n    </div>\n  )\n}\n"],"names":["facelessUIImport","getTranslation","fieldAffectsData","React","useState","AnimateHeightImport","AnimateHeight","default","Chevron","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fieldMap","textFieldsToBeSearched","titleField","useWindowInfo","handleSearchChange","searchParams","shouldInitializeWhereOpened","where","visibleDrawer","setVisibleDrawer","undefined","i18n","t","breakpoints","s","smallBreak","div","className","fieldLabel","label","name","fieldName","handleChange","listSearchableFields","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","collectionSlug","slug","collectionPluralLabel","labels","plural","p"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, FieldAffectingData, Where } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default ||\n  AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport { useUseTitleField } from '@payloadcms/ui/hooks/useUseAsTitle'\n\nimport type { FieldMap } from '../../utilities/buildComponentMap.js'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n  collectionConfig: ClientCollectionConfig\n  enableColumns?: boolean\n  enableSort?: boolean\n  fieldMap: FieldMap\n  handleSearchChange?: (search: string) => void\n  handleSortChange?: (sort: string) => void\n  handleWhereChange?: (where: Where) => void\n  textFieldsToBeSearched?: FieldAffectingData[]\n}\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    collectionConfig,\n    enableColumns = true,\n    enableSort = false,\n    fieldMap,\n    textFieldsToBeSearched,\n  } = props\n\n  const { useWindowInfo } = facelessUIImport\n\n  const { handleSearchChange } = useListQuery()\n  const { searchParams } = useSearchParams()\n  const titleField = useUseTitleField(collectionConfig, fieldMap)\n  const { i18n, t } = useTranslation()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <SearchFilter\n          fieldLabel={\n            (titleField &&\n              getTranslation(\n                'label' in titleField.fieldComponentProps &&\n                  typeof titleField.fieldComponentProps.label === 'string'\n                  ? titleField.fieldComponentProps.label\n                  : titleField.name,\n                i18n,\n              )) ??\n            undefined\n          }\n          fieldName={titleField.name}\n          handleChange={handleSearchChange}\n          listSearchableFields={textFieldsToBeSearched}\n        />\n        <div className={`${baseClass}__buttons`}>\n          <div className={`${baseClass}__buttons-wrap`}>\n            {!smallBreak && (\n              <React.Fragment>\n                <EditMany collection={collectionConfig} fieldMap={fieldMap} />\n                <PublishMany collection={collectionConfig} />\n                <UnpublishMany collection={collectionConfig} />\n                <DeleteMany collection={collectionConfig} />\n              </React.Fragment>\n            )}\n            {enableColumns && (\n              <Pill\n                aria-controls={`${baseClass}-columns`}\n                aria-expanded={visibleDrawer === 'columns'}\n                className={`${baseClass}__toggle-columns ${\n                  visibleDrawer === 'columns' ? `${baseClass}__buttons-active` : ''\n                }`}\n                icon={<Chevron />}\n                onClick={() =>\n                  setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n                }\n                pillStyle=\"light\"\n              >\n                {t('general:columns')}\n              </Pill>\n            )}\n            <Pill\n              aria-controls={`${baseClass}-where`}\n              aria-expanded={visibleDrawer === 'where'}\n              className={`${baseClass}__toggle-where ${\n                visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n              }`}\n              icon={<Chevron />}\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              pillStyle=\"light\"\n            >\n              {t('general:filters')}\n            </Pill>\n            {enableSort && (\n              <Pill\n                aria-controls={`${baseClass}-sort`}\n                aria-expanded={visibleDrawer === 'sort'}\n                className={`${baseClass}__toggle-sort`}\n                icon={<Chevron />}\n                onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n                pillStyle=\"light\"\n              >\n                {t('general:sort')}\n              </Pill>\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        />\n      </AnimateHeight>\n      {enableSort && (\n        <AnimateHeight\n          className={`${baseClass}__sort`}\n          height={visibleDrawer === 'sort' ? 'auto' : 0}\n          id={`${baseClass}-sort`}\n        >\n          <p>Sort Complex</p>\n          {/* <SortComplex\n            collection={collection}\n            handleChange={handleSortChange}\n            modifySearchQuery={modifySearchQuery}\n          /> */}\n        </AnimateHeight>\n      )}\n    </div>\n  )\n}\n"],"names":["facelessUIImport","getTranslation","React","useState","AnimateHeightImport","AnimateHeight","default","useUseTitleField","Chevron","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fieldMap","textFieldsToBeSearched","useWindowInfo","handleSearchChange","searchParams","titleField","i18n","t","breakpoints","s","smallBreak","shouldInitializeWhereOpened","where","visibleDrawer","setVisibleDrawer","undefined","div","className","fieldLabel","fieldComponentProps","label","name","fieldName","handleChange","listSearchableFields","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","collectionSlug","slug","collectionPluralLabel","labels","plural","p"],"mappings":"AAAA;AAGA,YAAYA,sBAAsB,2BAA0B;AAC5D,SAASC,cAAc,QAAQ,2BAA0B;AACzD,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AACvC,OAAOC,yBAAyB,uBAAsB;AAEtD,MAAMC,gBAAiBD,oBAAoBE,OAAO,IAChDF;AAEF,SAASG,gBAAgB,QAAQ,qCAAoC;AAIrE,SAASC,OAAO,QAAQ,+BAA8B;AACtD,SAASC,YAAY,QAAQ,qCAAoC;AACjE,SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,cAAc,QAAQ,6BAA4B;AAC3D,SAASC,UAAU,QAAQ,yBAAwB;AACnD,SAASC,QAAQ,QAAQ,uBAAsB;AAC/C,SAASC,IAAI,QAAQ,mBAAkB;AACvC,SAASC,WAAW,QAAQ,0BAAyB;AACrD,SAASC,YAAY,QAAQ,2BAA0B;AACvD,SAASC,aAAa,QAAQ,4BAA2B;AACzD,SAASC,YAAY,QAAQ,2BAA0B;AACvD,OAAOC,wBAAwB,wCAAuC;AAGtE,MAAMC,YAAY;AAalB;;;;CAIC,GACD,OAAO,MAAMC,eAA4C,CAACC;IACxD,MAAM,EACJC,gBAAgB,EAChBC,gBAAgB,IAAI,EACpBC,aAAa,KAAK,EAClBC,QAAQ,EACRC,sBAAsB,EACvB,GAAGL;IAEJ,MAAM,EAAEM,aAAa,EAAE,GAAG7B;IAE1B,MAAM,EAAE8B,kBAAkB,EAAE,GAAGrB;IAC/B,MAAM,EAAEsB,YAAY,EAAE,GAAGrB;IACzB,MAAMsB,aAAazB,iBAAiBiB,kBAAkBG;IACtD,MAAM,EAAEM,IAAI,EAAEC,CAAC,EAAE,GAAGvB;IACpB,MAAM,EACJwB,aAAa,EAAEC,GAAGC,UAAU,EAAE,EAC/B,GAAGR;IAEJ,MAAMS,8BAA8BlB,mBAAmBW,cAAcQ;IACrE,MAAM,CAACC,eAAeC,iBAAiB,GAAGtC,SACxCmC,8BAA8B,UAAUI;IAG1C,qBACE,oBAACC;QAAIC,WAAWvB;qBACd,oBAACsB;QAAIC,WAAW,CAAC,EAAEvB,UAAU,MAAM,CAAC;qBAClC,oBAACJ;QACC4B,YACE,AAACb,CAAAA,cACC/B,eACE,WAAW+B,WAAWc,mBAAmB,IACvC,OAAOd,WAAWc,mBAAmB,CAACC,KAAK,KAAK,WAC9Cf,WAAWc,mBAAmB,CAACC,KAAK,GACpCf,WAAWgB,IAAI,EACnBf,KACF,KACFS;QAEFO,WAAWjB,WAAWgB,IAAI;QAC1BE,cAAcpB;QACdqB,sBAAsBvB;sBAExB,oBAACe;QAAIC,WAAW,CAAC,EAAEvB,UAAU,SAAS,CAAC;qBACrC,oBAACsB;QAAIC,WAAW,CAAC,EAAEvB,UAAU,cAAc,CAAC;OACzC,CAACgB,4BACA,oBAACnC,MAAMkD,QAAQ,sBACb,oBAACtC;QAASuC,YAAY7B;QAAkBG,UAAUA;sBAClD,oBAACX;QAAYqC,YAAY7B;sBACzB,oBAACN;QAAcmC,YAAY7B;sBAC3B,oBAACX;QAAWwC,YAAY7B;SAG3BC,+BACC,oBAACV;QACCuC,iBAAe,CAAC,EAAEjC,UAAU,QAAQ,CAAC;QACrCkC,iBAAef,kBAAkB;QACjCI,WAAW,CAAC,EAAEvB,UAAU,iBAAiB,EACvCmB,kBAAkB,YAAY,CAAC,EAAEnB,UAAU,gBAAgB,CAAC,GAAG,GAChE,CAAC;QACFmC,oBAAM,oBAAChD;QACPiD,SAAS,IACPhB,iBAAiBD,kBAAkB,YAAY,YAAYE;QAE7DgB,WAAU;OAETxB,EAAE,mCAGP,oBAACnB;QACCuC,iBAAe,CAAC,EAAEjC,UAAU,MAAM,CAAC;QACnCkC,iBAAef,kBAAkB;QACjCI,WAAW,CAAC,EAAEvB,UAAU,eAAe,EACrCmB,kBAAkB,UAAU,CAAC,EAAEnB,UAAU,gBAAgB,CAAC,GAAG,GAC9D,CAAC;QACFmC,oBAAM,oBAAChD;QACPiD,SAAS,IAAMhB,iBAAiBD,kBAAkB,UAAU,UAAUE;QACtEgB,WAAU;OAETxB,EAAE,qBAEJR,4BACC,oBAACX;QACCuC,iBAAe,CAAC,EAAEjC,UAAU,KAAK,CAAC;QAClCkC,iBAAef,kBAAkB;QACjCI,WAAW,CAAC,EAAEvB,UAAU,aAAa,CAAC;QACtCmC,oBAAM,oBAAChD;QACPiD,SAAS,IAAMhB,iBAAiBD,kBAAkB,SAAS,SAASE;QACpEgB,WAAU;OAETxB,EAAE,qBAMZT,+BACC,oBAACpB;QACCuC,WAAW,CAAC,EAAEvB,UAAU,SAAS,CAAC;QAClCsC,QAAQnB,kBAAkB,YAAY,SAAS;QAC/CoB,IAAI,CAAC,EAAEvC,UAAU,QAAQ,CAAC;qBAE1B,oBAACT;QAAeiD,gBAAgBrC,iBAAiBsC,IAAI;uBAGzD,oBAACzD;QACCuC,WAAW,CAAC,EAAEvB,UAAU,OAAO,CAAC;QAChCsC,QAAQnB,kBAAkB,UAAU,SAAS;QAC7CoB,IAAI,CAAC,EAAEvC,UAAU,MAAM,CAAC;qBAExB,oBAACF;QACC4C,uBAAuBvC,kBAAkBwC,QAAQC;QACjDJ,gBAAgBrC,iBAAiBsC,IAAI;SAGxCpC,4BACC,oBAACrB;QACCuC,WAAW,CAAC,EAAEvB,UAAU,MAAM,CAAC;QAC/BsC,QAAQnB,kBAAkB,SAAS,SAAS;QAC5CoB,IAAI,CAAC,EAAEvC,UAAU,KAAK,CAAC;qBAEvB,oBAAC6C,WAAE;AAUb,EAAC"}

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":"AAMA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAE3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAqCjD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAqRvD,CAAA"}
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAE3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAoCjD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2QvD,CAAA"}

package/dist/elements/ListDrawer/DrawerContent.js

@@ -4,7 +4,6 @@ import { getTranslation } from '@payloadcms/translations';
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
 import { FieldLabel } from '../../forms/FieldLabel/index.js';
 import usePayloadAPI from '../../hooks/usePayloadAPI.js';
-import { useUseTitleField } from '../../hooks/useUseAsTitle.js';
 import { X } from '../../icons/X/index.js';
 import { useAuth } from '../../providers/Auth/index.js';
 import { useComponentMap } from '../../providers/ComponentMap/index.js';
@@ -44,7 +43,7 @@ export const ListDrawerContent = ({ collectionSlugs, customHeader, drawerSlug, f
     const { useModal } = facelessUIImport;
     const { i18n, t } = useTranslation();
     const { permissions } = useAuth();
-    const { getPreference, setPreference } = usePreferences();
+    const { setPreference } = usePreferences();
     const { closeModal, isModalOpen } = useModal();
     const [limit, setLimit] = useState();
     const [sort, setSort] = useState(null);
@@ -65,7 +64,6 @@ export const ListDrawerContent = ({ collectionSlugs, customHeader, drawerSlug, f
             value: selectedCollectionConfig.slug
         } : undefined);
     // const [fields, setFields] = useState<Field[]>(() => formatFields(selectedCollectionConfig))
-    const titleField = useUseTitleField(selectedCollectionConfig);
     useEffect(()=>{
     // setFields(formatFields(selectedCollectionConfig))
     }, [
@@ -107,7 +105,7 @@ export const ListDrawerContent = ({ collectionSlugs, customHeader, drawerSlug, f
     const [{ data, isError, isLoading: isLoadingList }, { setParams }] = usePayloadAPI(apiURL, {});
     const moreThanOneAvailableCollection = enabledCollectionConfigs.length > 1;
     useEffect(()=>{
-        const { slug, admin: { listSearchableFields } = {}, versions } = selectedCollectionConfig;
+        const { slug, admin: { listSearchableFields, useAsTitle } = {}, versions } = selectedCollectionConfig;
         const params = {};
         let copyOfWhere = {
             ...where || {}
@@ -118,7 +116,7 @@ export const ListDrawerContent = ({ collectionSlugs, customHeader, drawerSlug, f
         }
         if (search) {
             const searchAsConditions = (listSearchableFields || [
-                titleField?.name
+                useAsTitle
             ]).map((fieldName)=>{
                 return {
                     [fieldName]: {
@@ -150,8 +148,7 @@ export const ListDrawerContent = ({ collectionSlugs, customHeader, drawerSlug, f
         filterOptions,
         selectedCollectionConfig,
         t,
-        setParams,
-        titleField?.name
+        setParams
     ]);
     useEffect(()=>{
         const newPreferences = {
@@ -226,8 +223,7 @@ export const ListDrawerContent = ({ collectionSlugs, customHeader, drawerSlug, f
         collectionConfig: selectedCollectionConfig,
         collectionSlug: selectedCollectionConfig.slug,
         hasCreatePermission: hasCreatePermission,
-        newDocumentURL: null,
-        titleField: titleField
+        newDocumentURL: null
     }, /*#__PURE__*/ React.createElement(ListQueryProvider, {
         data: data,
         defaultLimit: limit || selectedCollectionConfig?.admin?.pagination?.defaultLimit,

package/dist/elements/ListDrawer/DrawerContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload/types'\nimport type { Where } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useEffect, useReducer, useState } from 'react'\n\nimport type { ListDrawerProps } from './types.js'\n\nimport { FieldLabel } from '../../forms/FieldLabel/index.js'\nimport usePayloadAPI from '../../hooks/usePayloadAPI.js'\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { X } from '../../icons/X/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useComponentMap } from '../../providers/ComponentMap/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { ListInfoProvider } from '../../providers/ListInfo/index.js'\nimport { ListQueryProvider } from '../../providers/ListQuery/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { useDocumentDrawer } from '../DocumentDrawer/index.js'\nimport { LoadingOverlay } from '../Loading/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { TableColumnsProvider } from '../TableColumns/index.js'\nimport { ViewDescription } from '../ViewDescription/index.js'\nimport { baseClass } from './index.js'\n\nconst hoistQueryParamsToAnd = (where: Where, queryParams: Where) => {\n  if ('and' in where) {\n    where.and.push(queryParams)\n  } else if ('or' in where) {\n    where = {\n      and: [where, queryParams],\n    }\n  } else {\n    where = {\n      and: [where, queryParams],\n    }\n  }\n\n  return where\n}\n\nexport const ListDrawerContent: React.FC<ListDrawerProps> = ({\n  collectionSlugs,\n  customHeader,\n  drawerSlug,\n  filterOptions,\n  onSelect,\n  selectedCollection,\n}) => {\n  const { useModal } = facelessUIImport\n\n  const { i18n, t } = useTranslation()\n  const { permissions } = useAuth()\n  const { getPreference, setPreference } = usePreferences()\n  const { closeModal, isModalOpen } = useModal()\n  const [limit, setLimit] = useState<number>()\n  const [sort, setSort] = useState<string>(null)\n  const [page, setPage] = useState<number>(1)\n  const [where, setWhere] = useState<Where>(null)\n  const [search, setSearch] = useState<string>('')\n\n  const { componentMap } = useComponentMap()\n\n  const {\n    collections,\n    routes: { api },\n    serverURL,\n  } = useConfig()\n\n  const enabledCollectionConfigs = collections.filter(({ slug }) => {\n    return collectionSlugs.includes(slug)\n  })\n\n  const [selectedCollectionConfig, setSelectedCollectionConfig] = useState<ClientCollectionConfig>(\n    () => {\n      return (\n        enabledCollectionConfigs.find(({ slug }) => slug === selectedCollection) ||\n        enabledCollectionConfigs?.[0]\n      )\n    },\n  )\n\n  const { List } = componentMap.collections?.[selectedCollectionConfig?.slug] || {}\n\n  const [selectedOption, setSelectedOption] = useState<{ label: string; value: string }>(() =>\n    selectedCollectionConfig\n      ? {\n          label: getTranslation(selectedCollectionConfig.labels.singular, i18n),\n          value: selectedCollectionConfig.slug,\n        }\n      : undefined,\n  )\n\n  // const [fields, setFields] = useState<Field[]>(() => formatFields(selectedCollectionConfig))\n\n  const titleField = useUseTitleField(selectedCollectionConfig)\n\n  useEffect(() => {\n    // setFields(formatFields(selectedCollectionConfig))\n  }, [selectedCollectionConfig])\n\n  // allow external control of selected collection, same as the initial state logic above\n  useEffect(() => {\n    if (selectedCollection) {\n      // if passed a selection, find it and check if it's enabled\n      const selectedConfig =\n        enabledCollectionConfigs.find(({ slug }) => slug === selectedCollection) ||\n        enabledCollectionConfigs?.[0]\n      setSelectedCollectionConfig(selectedConfig)\n    }\n  }, [selectedCollection, enabledCollectionConfigs, onSelect, t])\n\n  const preferenceKey = `${selectedCollectionConfig.slug}-list`\n\n  // this is the 'create new' drawer\n  const [DocumentDrawer, DocumentDrawerToggler, { drawerSlug: documentDrawerSlug }] =\n    useDocumentDrawer({\n      collectionSlug: selectedCollectionConfig.slug,\n    })\n\n  useEffect(() => {\n    if (selectedOption) {\n      setSelectedCollectionConfig(\n        enabledCollectionConfigs.find(({ slug }) => selectedOption.value === slug),\n      )\n    }\n  }, [selectedOption, enabledCollectionConfigs])\n\n  const collectionPermissions = permissions?.collections?.[selectedCollectionConfig?.slug]\n  const hasCreatePermission = collectionPermissions?.create?.permission\n\n  // If modal is open, get active page of upload gallery\n  const isOpen = isModalOpen(drawerSlug)\n  const apiURL = isOpen ? `${serverURL}${api}/${selectedCollectionConfig.slug}` : null\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0) // used to force a re-fetch even when apiURL is unchanged\n  const [{ data, isError, isLoading: isLoadingList }, { setParams }] = usePayloadAPI(apiURL, {})\n  const moreThanOneAvailableCollection = enabledCollectionConfigs.length > 1\n\n  useEffect(() => {\n    const { slug, admin: { listSearchableFields } = {}, versions } = selectedCollectionConfig\n    const params: {\n      cacheBust?: number\n      draft?: string\n      limit?: number\n      page?: number\n      search?: string\n      sort?: string\n      where?: unknown\n    } = {}\n\n    let copyOfWhere = { ...(where || {}) }\n    const filterOption = filterOptions?.[slug]\n\n    if (filterOptions && typeof filterOption !== 'boolean') {\n      copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, filterOption)\n    }\n\n    if (search) {\n      const searchAsConditions = (listSearchableFields || [titleField?.name]).map((fieldName) => {\n        return {\n          [fieldName]: {\n            like: search,\n          },\n        }\n      }, [])\n\n      if (searchAsConditions.length > 0) {\n        const searchFilter: Where = {\n          or: [...searchAsConditions],\n        }\n\n        copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, searchFilter)\n      }\n    }\n\n    if (page) params.page = page\n    if (sort) params.sort = sort\n    if (cacheBust) params.cacheBust = cacheBust\n    if (copyOfWhere) params.where = copyOfWhere\n    if (versions?.drafts) params.draft = 'true'\n\n    setParams(params)\n  }, [\n    page,\n    sort,\n    where,\n    search,\n    cacheBust,\n    filterOptions,\n    selectedCollectionConfig,\n    t,\n    setParams,\n    titleField?.name,\n  ])\n\n  useEffect(() => {\n    const newPreferences = {\n      limit,\n      sort,\n    }\n\n    void setPreference(preferenceKey, newPreferences, true)\n  }, [sort, limit, setPreference, preferenceKey])\n\n  const onCreateNew = useCallback(\n    ({ doc }) => {\n      if (typeof onSelect === 'function') {\n        onSelect({\n          collectionSlug: selectedCollectionConfig.slug,\n          docID: doc.id,\n        })\n      }\n      dispatchCacheBust()\n      closeModal(documentDrawerSlug)\n      closeModal(drawerSlug)\n    },\n    [closeModal, documentDrawerSlug, drawerSlug, onSelect, selectedCollectionConfig],\n  )\n\n  if (!selectedCollectionConfig || isError) {\n    return null\n  }\n\n  if (isLoadingList) {\n    return <LoadingOverlay />\n  }\n\n  return (\n    <ListInfoProvider\n      Header={\n        <header className={`${baseClass}__header`}>\n          <div className={`${baseClass}__header-wrap`}>\n            <div className={`${baseClass}__header-content`}>\n              <h2 className={`${baseClass}__header-text`}>\n                {!customHeader\n                  ? getTranslation(selectedCollectionConfig?.labels?.plural, i18n)\n                  : customHeader}\n              </h2>\n              {hasCreatePermission && (\n                <DocumentDrawerToggler className={`${baseClass}__create-new-button`}>\n                  <Pill>{t('general:createNew')}</Pill>\n                </DocumentDrawerToggler>\n              )}\n            </div>\n            <button\n              aria-label={t('general:close')}\n              className={`${baseClass}__header-close`}\n              onClick={() => {\n                closeModal(drawerSlug)\n              }}\n              type=\"button\"\n            >\n              <X />\n            </button>\n          </div>\n          {selectedCollectionConfig?.admin?.description && (\n            <div className={`${baseClass}__sub-header`}>\n              <ViewDescription description={selectedCollectionConfig.admin.description} />\n            </div>\n          )}\n          {moreThanOneAvailableCollection && (\n            <div className={`${baseClass}__select-collection-wrap`}>\n              <FieldLabel label={t('upload:selectCollectionToBrowse')} />\n              <ReactSelect\n                className={`${baseClass}__select-collection`}\n                onChange={setSelectedOption} // this is only changing the options which is not rerunning my effect\n                options={enabledCollectionConfigs.map((coll) => ({\n                  label: getTranslation(coll.labels.singular, i18n),\n                  value: coll.slug,\n                }))}\n                value={selectedOption}\n              />\n            </div>\n          )}\n        </header>\n      }\n      collectionConfig={selectedCollectionConfig}\n      collectionSlug={selectedCollectionConfig.slug}\n      hasCreatePermission={hasCreatePermission}\n      newDocumentURL={null}\n      titleField={titleField}\n    >\n      <ListQueryProvider\n        data={data}\n        defaultLimit={limit || selectedCollectionConfig?.admin?.pagination?.defaultLimit}\n        defaultSort={sort}\n        handlePageChange={setPage}\n        handlePerPageChange={setLimit}\n        handleSearchChange={setSearch}\n        handleSortChange={setSort}\n        handleWhereChange={setWhere}\n        modifySearchParams={false}\n        preferenceKey={preferenceKey}\n      >\n        <TableColumnsProvider\n          cellProps={[\n            {\n              className: `${baseClass}__first-cell`,\n              link: false,\n              onClick: ({ collectionSlug: rowColl, rowData }) => {\n                if (typeof onSelect === 'function') {\n                  onSelect({\n                    collectionSlug: rowColl,\n                    docID: rowData.id as string,\n                  })\n                }\n              },\n            },\n          ]}\n          collectionSlug={selectedCollectionConfig.slug}\n          preferenceKey={preferenceKey}\n        >\n          {List}\n          <DocumentDrawer onSave={onCreateNew} />\n        </TableColumnsProvider>\n      </ListQueryProvider>\n    </ListInfoProvider>\n  )\n}\n"],"names":["facelessUIImport","getTranslation","React","useCallback","useEffect","useReducer","useState","FieldLabel","usePayloadAPI","useUseTitleField","X","useAuth","useComponentMap","useConfig","ListInfoProvider","ListQueryProvider","usePreferences","useTranslation","useDocumentDrawer","LoadingOverlay","Pill","ReactSelect","TableColumnsProvider","ViewDescription","baseClass","hoistQueryParamsToAnd","where","queryParams","and","push","ListDrawerContent","collectionSlugs","customHeader","drawerSlug","filterOptions","onSelect","selectedCollection","useModal","i18n","t","permissions","getPreference","setPreference","closeModal","isModalOpen","limit","setLimit","sort","setSort","page","setPage","setWhere","search","setSearch","componentMap","collections","routes","api","serverURL","enabledCollectionConfigs","filter","slug","includes","selectedCollectionConfig","setSelectedCollectionConfig","find","List","selectedOption","setSelectedOption","label","labels","singular","value","undefined","titleField","selectedConfig","preferenceKey","DocumentDrawer","DocumentDrawerToggler","documentDrawerSlug","collectionSlug","collectionPermissions","hasCreatePermission","create","permission","isOpen","apiURL","cacheBust","dispatchCacheBust","state","data","isError","isLoading","isLoadingList","setParams","moreThanOneAvailableCollection","length","admin","listSearchableFields","versions","params","copyOfWhere","filterOption","searchAsConditions","name","map","fieldName","like","searchFilter","or","drafts","draft","newPreferences","onCreateNew","doc","docID","id","Header","header","className","div","h2","plural","button","aria-label","onClick","type","description","onChange","options","coll","collectionConfig","newDocumentURL","defaultLimit","pagination","defaultSort","handlePageChange","handlePerPageChange","handleSearchChange","handleSortChange","handleWhereChange","modifySearchParams","cellProps","link","rowColl","rowData","onSave"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig } from 'payload/types'\nimport type { Where } from 'payload/types'\n\nimport * as facelessUIImport from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { useCallback, useEffect, useReducer, useState } from 'react'\n\nimport type { ListDrawerProps } from './types.js'\n\nimport { FieldLabel } from '../../forms/FieldLabel/index.js'\nimport usePayloadAPI from '../../hooks/usePayloadAPI.js'\nimport { X } from '../../icons/X/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useComponentMap } from '../../providers/ComponentMap/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { ListInfoProvider } from '../../providers/ListInfo/index.js'\nimport { ListQueryProvider } from '../../providers/ListQuery/index.js'\nimport { usePreferences } from '../../providers/Preferences/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { useDocumentDrawer } from '../DocumentDrawer/index.js'\nimport { LoadingOverlay } from '../Loading/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { ReactSelect } from '../ReactSelect/index.js'\nimport { TableColumnsProvider } from '../TableColumns/index.js'\nimport { ViewDescription } from '../ViewDescription/index.js'\nimport { baseClass } from './index.js'\n\nconst hoistQueryParamsToAnd = (where: Where, queryParams: Where) => {\n  if ('and' in where) {\n    where.and.push(queryParams)\n  } else if ('or' in where) {\n    where = {\n      and: [where, queryParams],\n    }\n  } else {\n    where = {\n      and: [where, queryParams],\n    }\n  }\n\n  return where\n}\n\nexport const ListDrawerContent: React.FC<ListDrawerProps> = ({\n  collectionSlugs,\n  customHeader,\n  drawerSlug,\n  filterOptions,\n  onSelect,\n  selectedCollection,\n}) => {\n  const { useModal } = facelessUIImport\n\n  const { i18n, t } = useTranslation()\n  const { permissions } = useAuth()\n  const { setPreference } = usePreferences()\n  const { closeModal, isModalOpen } = useModal()\n  const [limit, setLimit] = useState<number>()\n  const [sort, setSort] = useState<string>(null)\n  const [page, setPage] = useState<number>(1)\n  const [where, setWhere] = useState<Where>(null)\n  const [search, setSearch] = useState<string>('')\n\n  const { componentMap } = useComponentMap()\n\n  const {\n    collections,\n    routes: { api },\n    serverURL,\n  } = useConfig()\n\n  const enabledCollectionConfigs = collections.filter(({ slug }) => {\n    return collectionSlugs.includes(slug)\n  })\n\n  const [selectedCollectionConfig, setSelectedCollectionConfig] = useState<ClientCollectionConfig>(\n    () => {\n      return (\n        enabledCollectionConfigs.find(({ slug }) => slug === selectedCollection) ||\n        enabledCollectionConfigs?.[0]\n      )\n    },\n  )\n\n  const { List } = componentMap.collections?.[selectedCollectionConfig?.slug] || {}\n\n  const [selectedOption, setSelectedOption] = useState<{ label: string; value: string }>(() =>\n    selectedCollectionConfig\n      ? {\n          label: getTranslation(selectedCollectionConfig.labels.singular, i18n),\n          value: selectedCollectionConfig.slug,\n        }\n      : undefined,\n  )\n\n  // const [fields, setFields] = useState<Field[]>(() => formatFields(selectedCollectionConfig))\n\n  useEffect(() => {\n    // setFields(formatFields(selectedCollectionConfig))\n  }, [selectedCollectionConfig])\n\n  // allow external control of selected collection, same as the initial state logic above\n  useEffect(() => {\n    if (selectedCollection) {\n      // if passed a selection, find it and check if it's enabled\n      const selectedConfig =\n        enabledCollectionConfigs.find(({ slug }) => slug === selectedCollection) ||\n        enabledCollectionConfigs?.[0]\n      setSelectedCollectionConfig(selectedConfig)\n    }\n  }, [selectedCollection, enabledCollectionConfigs, onSelect, t])\n\n  const preferenceKey = `${selectedCollectionConfig.slug}-list`\n\n  // this is the 'create new' drawer\n  const [DocumentDrawer, DocumentDrawerToggler, { drawerSlug: documentDrawerSlug }] =\n    useDocumentDrawer({\n      collectionSlug: selectedCollectionConfig.slug,\n    })\n\n  useEffect(() => {\n    if (selectedOption) {\n      setSelectedCollectionConfig(\n        enabledCollectionConfigs.find(({ slug }) => selectedOption.value === slug),\n      )\n    }\n  }, [selectedOption, enabledCollectionConfigs])\n\n  const collectionPermissions = permissions?.collections?.[selectedCollectionConfig?.slug]\n  const hasCreatePermission = collectionPermissions?.create?.permission\n\n  // If modal is open, get active page of upload gallery\n  const isOpen = isModalOpen(drawerSlug)\n  const apiURL = isOpen ? `${serverURL}${api}/${selectedCollectionConfig.slug}` : null\n  const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0) // used to force a re-fetch even when apiURL is unchanged\n  const [{ data, isError, isLoading: isLoadingList }, { setParams }] = usePayloadAPI(apiURL, {})\n  const moreThanOneAvailableCollection = enabledCollectionConfigs.length > 1\n\n  useEffect(() => {\n    const {\n      slug,\n      admin: { listSearchableFields, useAsTitle } = {},\n      versions,\n    } = selectedCollectionConfig\n    const params: {\n      cacheBust?: number\n      draft?: string\n      limit?: number\n      page?: number\n      search?: string\n      sort?: string\n      where?: unknown\n    } = {}\n\n    let copyOfWhere = { ...(where || {}) }\n    const filterOption = filterOptions?.[slug]\n\n    if (filterOptions && typeof filterOption !== 'boolean') {\n      copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, filterOption)\n    }\n\n    if (search) {\n      const searchAsConditions = (listSearchableFields || [useAsTitle]).map((fieldName) => {\n        return {\n          [fieldName]: {\n            like: search,\n          },\n        }\n      }, [])\n\n      if (searchAsConditions.length > 0) {\n        const searchFilter: Where = {\n          or: [...searchAsConditions],\n        }\n\n        copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, searchFilter)\n      }\n    }\n\n    if (page) params.page = page\n    if (sort) params.sort = sort\n    if (cacheBust) params.cacheBust = cacheBust\n    if (copyOfWhere) params.where = copyOfWhere\n    if (versions?.drafts) params.draft = 'true'\n\n    setParams(params)\n  }, [page, sort, where, search, cacheBust, filterOptions, selectedCollectionConfig, t, setParams])\n\n  useEffect(() => {\n    const newPreferences = {\n      limit,\n      sort,\n    }\n\n    void setPreference(preferenceKey, newPreferences, true)\n  }, [sort, limit, setPreference, preferenceKey])\n\n  const onCreateNew = useCallback(\n    ({ doc }) => {\n      if (typeof onSelect === 'function') {\n        onSelect({\n          collectionSlug: selectedCollectionConfig.slug,\n          docID: doc.id,\n        })\n      }\n      dispatchCacheBust()\n      closeModal(documentDrawerSlug)\n      closeModal(drawerSlug)\n    },\n    [closeModal, documentDrawerSlug, drawerSlug, onSelect, selectedCollectionConfig],\n  )\n\n  if (!selectedCollectionConfig || isError) {\n    return null\n  }\n\n  if (isLoadingList) {\n    return <LoadingOverlay />\n  }\n\n  return (\n    <ListInfoProvider\n      Header={\n        <header className={`${baseClass}__header`}>\n          <div className={`${baseClass}__header-wrap`}>\n            <div className={`${baseClass}__header-content`}>\n              <h2 className={`${baseClass}__header-text`}>\n                {!customHeader\n                  ? getTranslation(selectedCollectionConfig?.labels?.plural, i18n)\n                  : customHeader}\n              </h2>\n              {hasCreatePermission && (\n                <DocumentDrawerToggler className={`${baseClass}__create-new-button`}>\n                  <Pill>{t('general:createNew')}</Pill>\n                </DocumentDrawerToggler>\n              )}\n            </div>\n            <button\n              aria-label={t('general:close')}\n              className={`${baseClass}__header-close`}\n              onClick={() => {\n                closeModal(drawerSlug)\n              }}\n              type=\"button\"\n            >\n              <X />\n            </button>\n          </div>\n          {selectedCollectionConfig?.admin?.description && (\n            <div className={`${baseClass}__sub-header`}>\n              <ViewDescription description={selectedCollectionConfig.admin.description} />\n            </div>\n          )}\n          {moreThanOneAvailableCollection && (\n            <div className={`${baseClass}__select-collection-wrap`}>\n              <FieldLabel label={t('upload:selectCollectionToBrowse')} />\n              <ReactSelect\n                className={`${baseClass}__select-collection`}\n                onChange={setSelectedOption} // this is only changing the options which is not rerunning my effect\n                options={enabledCollectionConfigs.map((coll) => ({\n                  label: getTranslation(coll.labels.singular, i18n),\n                  value: coll.slug,\n                }))}\n                value={selectedOption}\n              />\n            </div>\n          )}\n        </header>\n      }\n      collectionConfig={selectedCollectionConfig}\n      collectionSlug={selectedCollectionConfig.slug}\n      hasCreatePermission={hasCreatePermission}\n      newDocumentURL={null}\n    >\n      <ListQueryProvider\n        data={data}\n        defaultLimit={limit || selectedCollectionConfig?.admin?.pagination?.defaultLimit}\n        defaultSort={sort}\n        handlePageChange={setPage}\n        handlePerPageChange={setLimit}\n        handleSearchChange={setSearch}\n        handleSortChange={setSort}\n        handleWhereChange={setWhere}\n        modifySearchParams={false}\n        preferenceKey={preferenceKey}\n      >\n        <TableColumnsProvider\n          cellProps={[\n            {\n              className: `${baseClass}__first-cell`,\n              link: false,\n              onClick: ({ collectionSlug: rowColl, rowData }) => {\n                if (typeof onSelect === 'function') {\n                  onSelect({\n                    collectionSlug: rowColl,\n                    docID: rowData.id as string,\n                  })\n                }\n              },\n            },\n          ]}\n          collectionSlug={selectedCollectionConfig.slug}\n          preferenceKey={preferenceKey}\n        >\n          {List}\n          <DocumentDrawer onSave={onCreateNew} />\n        </TableColumnsProvider>\n      </ListQueryProvider>\n    </ListInfoProvider>\n  )\n}\n"],"names":["facelessUIImport","getTranslation","React","useCallback","useEffect","useReducer","useState","FieldLabel","usePayloadAPI","X","useAuth","useComponentMap","useConfig","ListInfoProvider","ListQueryProvider","usePreferences","useTranslation","useDocumentDrawer","LoadingOverlay","Pill","ReactSelect","TableColumnsProvider","ViewDescription","baseClass","hoistQueryParamsToAnd","where","queryParams","and","push","ListDrawerContent","collectionSlugs","customHeader","drawerSlug","filterOptions","onSelect","selectedCollection","useModal","i18n","t","permissions","setPreference","closeModal","isModalOpen","limit","setLimit","sort","setSort","page","setPage","setWhere","search","setSearch","componentMap","collections","routes","api","serverURL","enabledCollectionConfigs","filter","slug","includes","selectedCollectionConfig","setSelectedCollectionConfig","find","List","selectedOption","setSelectedOption","label","labels","singular","value","undefined","selectedConfig","preferenceKey","DocumentDrawer","DocumentDrawerToggler","documentDrawerSlug","collectionSlug","collectionPermissions","hasCreatePermission","create","permission","isOpen","apiURL","cacheBust","dispatchCacheBust","state","data","isError","isLoading","isLoadingList","setParams","moreThanOneAvailableCollection","length","admin","listSearchableFields","useAsTitle","versions","params","copyOfWhere","filterOption","searchAsConditions","map","fieldName","like","searchFilter","or","drafts","draft","newPreferences","onCreateNew","doc","docID","id","Header","header","className","div","h2","plural","button","aria-label","onClick","type","description","onChange","options","coll","collectionConfig","newDocumentURL","defaultLimit","pagination","defaultSort","handlePageChange","handlePerPageChange","handleSearchChange","handleSortChange","handleWhereChange","modifySearchParams","cellProps","link","rowColl","rowData","onSave"],"mappings":"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"}

package/dist/elements/Nav/index.client.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const DefaultNavClient: React.FC;
+//# sourceMappingURL=index.client.d.ts.map

package/dist/elements/Nav/index.client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.client.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/index.client.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAcvC,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAuFpC,CAAA"}

package/dist/elements/Nav/index.client.js

@@ -0,0 +1,77 @@
+'use client';
+import { getTranslation } from '@payloadcms/translations';
+import { useEntityVisibility } from '@payloadcms/ui/providers/EntityVisibility';
+import LinkWithDefault from 'next/link.js';
+import React, { Fragment } from 'react';
+import { Chevron } from '../../icons/Chevron/index.js';
+import { useAuth } from '../../providers/Auth/index.js';
+import { useConfig } from '../../providers/Config/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { EntityType, groupNavItems } from '../../utilities/groupNavItems.js';
+import { NavGroup } from '../NavGroup/index.js';
+import { useNav } from './context.js';
+const baseClass = 'nav';
+export const DefaultNavClient = ()=>{
+    const { permissions } = useAuth();
+    const { isEntityVisible } = useEntityVisibility();
+    const { collections, globals, routes: { admin } } = useConfig();
+    const { i18n } = useTranslation();
+    const { navOpen } = useNav();
+    const groups = groupNavItems([
+        ...collections.filter(({ slug })=>isEntityVisible({
+                collectionSlug: slug
+            })).map((collection)=>{
+            const entityToGroup = {
+                type: EntityType.collection,
+                entity: collection
+            };
+            return entityToGroup;
+        }),
+        ...globals.filter(({ slug })=>isEntityVisible({
+                globalSlug: slug
+            })).map((global)=>{
+            const entityToGroup = {
+                type: EntityType.global,
+                entity: global
+            };
+            return entityToGroup;
+        })
+    ], permissions, i18n);
+    return /*#__PURE__*/ React.createElement(Fragment, null, groups.map(({ entities, label }, key)=>{
+        return /*#__PURE__*/ React.createElement(NavGroup, {
+            key: key,
+            label: label
+        }, entities.map(({ type, entity }, i)=>{
+            let entityLabel;
+            let href;
+            let id;
+            if (type === EntityType.collection) {
+                href = `${admin}/collections/${entity.slug}`;
+                entityLabel = getTranslation(entity.labels.plural, i18n);
+                id = `nav-${entity.slug}`;
+            }
+            if (type === EntityType.global) {
+                href = `${admin}/globals/${entity.slug}`;
+                entityLabel = getTranslation(entity.label, i18n);
+                id = `nav-global-${entity.slug}`;
+            }
+            const Link = LinkWithDefault.default || LinkWithDefault;
+            const LinkElement = Link || 'a';
+            return /*#__PURE__*/ React.createElement(LinkElement, {
+                className: `${baseClass}__link`,
+                href: href,
+                id: id,
+                key: i,
+                tabIndex: !navOpen ? -1 : undefined
+            }, /*#__PURE__*/ React.createElement("span", {
+                className: `${baseClass}__link-icon`
+            }, /*#__PURE__*/ React.createElement(Chevron, {
+                direction: "right"
+            })), /*#__PURE__*/ React.createElement("span", {
+                className: `${baseClass}__link-label`
+            }, entityLabel));
+        }));
+    }));
+};
+
+//# sourceMappingURL=index.client.js.map

package/dist/elements/Nav/index.client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/elements/Nav/index.client.tsx"],"sourcesContent":["'use client'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport { useEntityVisibility } from '@payloadcms/ui/providers/EntityVisibility'\nimport LinkWithDefault from 'next/link.js'\nimport React, { Fragment } from 'react'\n\nimport type { EntityToGroup } from '../../utilities/groupNavItems.js'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useAuth } from '../../providers/Auth/index.js'\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { EntityType, groupNavItems } from '../../utilities/groupNavItems.js'\nimport { NavGroup } from '../NavGroup/index.js'\nimport { useNav } from './context.js'\n\nconst baseClass = 'nav'\n\nexport const DefaultNavClient: React.FC = () => {\n  const { permissions } = useAuth()\n  const { isEntityVisible } = useEntityVisibility()\n\n  const {\n    collections,\n    globals,\n    routes: { admin },\n  } = useConfig()\n\n  const { i18n } = useTranslation()\n  const { navOpen } = useNav()\n\n  const groups = groupNavItems(\n    [\n      ...collections\n        .filter(({ slug }) => isEntityVisible({ collectionSlug: slug }))\n        .map((collection) => {\n          const entityToGroup: EntityToGroup = {\n            type: EntityType.collection,\n            entity: collection,\n          }\n\n          return entityToGroup\n        }),\n      ...globals\n        .filter(({ slug }) => isEntityVisible({ globalSlug: slug }))\n        .map((global) => {\n          const entityToGroup: EntityToGroup = {\n            type: EntityType.global,\n            entity: global,\n          }\n\n          return entityToGroup\n        }),\n    ],\n    permissions,\n    i18n,\n  )\n\n  return (\n    <Fragment>\n      {groups.map(({ entities, label }, key) => {\n        return (\n          <NavGroup key={key} label={label}>\n            {entities.map(({ type, entity }, i) => {\n              let entityLabel: string\n              let href: string\n              let id: string\n\n              if (type === EntityType.collection) {\n                href = `${admin}/collections/${entity.slug}`\n                entityLabel = getTranslation(entity.labels.plural, i18n)\n                id = `nav-${entity.slug}`\n              }\n\n              if (type === EntityType.global) {\n                href = `${admin}/globals/${entity.slug}`\n                entityLabel = getTranslation(entity.label, i18n)\n                id = `nav-global-${entity.slug}`\n              }\n\n              const Link = (LinkWithDefault.default ||\n                LinkWithDefault) as typeof LinkWithDefault.default\n\n              const LinkElement = Link || 'a'\n\n              return (\n                <LinkElement\n                  className={`${baseClass}__link`}\n                  href={href}\n                  id={id}\n                  key={i}\n                  tabIndex={!navOpen ? -1 : undefined}\n                >\n                  <span className={`${baseClass}__link-icon`}>\n                    <Chevron direction=\"right\" />\n                  </span>\n                  <span className={`${baseClass}__link-label`}>{entityLabel}</span>\n                </LinkElement>\n              )\n            })}\n          </NavGroup>\n        )\n      })}\n    </Fragment>\n  )\n}\n"],"names":["getTranslation","useEntityVisibility","LinkWithDefault","React","Fragment","Chevron","useAuth","useConfig","useTranslation","EntityType","groupNavItems","NavGroup","useNav","baseClass","DefaultNavClient","permissions","isEntityVisible","collections","globals","routes","admin","i18n","navOpen","groups","filter","slug","collectionSlug","map","collection","entityToGroup","type","entity","globalSlug","global","entities","label","key","i","entityLabel","href","id","labels","plural","Link","default","LinkElement","className","tabIndex","undefined","span","direction"],"mappings":"AAAA;AAEA,SAASA,cAAc,QAAQ,2BAA0B;AACzD,SAASC,mBAAmB,QAAQ,4CAA2C;AAC/E,OAAOC,qBAAqB,eAAc;AAC1C,OAAOC,SAASC,QAAQ,QAAQ,QAAO;AAIvC,SAASC,OAAO,QAAQ,+BAA8B;AACtD,SAASC,OAAO,QAAQ,gCAA+B;AACvD,SAASC,SAAS,QAAQ,kCAAiC;AAC3D,SAASC,cAAc,QAAQ,uCAAsC;AACrE,SAASC,UAAU,EAAEC,aAAa,QAAQ,mCAAkC;AAC5E,SAASC,QAAQ,QAAQ,uBAAsB;AAC/C,SAASC,MAAM,QAAQ,eAAc;AAErC,MAAMC,YAAY;AAElB,OAAO,MAAMC,mBAA6B;IACxC,MAAM,EAAEC,WAAW,EAAE,GAAGT;IACxB,MAAM,EAAEU,eAAe,EAAE,GAAGf;IAE5B,MAAM,EACJgB,WAAW,EACXC,OAAO,EACPC,QAAQ,EAAEC,KAAK,EAAE,EAClB,GAAGb;IAEJ,MAAM,EAAEc,IAAI,EAAE,GAAGb;IACjB,MAAM,EAAEc,OAAO,EAAE,GAAGV;IAEpB,MAAMW,SAASb,cACb;WACKO,YACAO,MAAM,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKT,gBAAgB;gBAAEU,gBAAgBD;YAAK,IAC5DE,GAAG,CAAC,CAACC;YACJ,MAAMC,gBAA+B;gBACnCC,MAAMrB,WAAWmB,UAAU;gBAC3BG,QAAQH;YACV;YAEA,OAAOC;QACT;WACCX,QACAM,MAAM,CAAC,CAAC,EAAEC,IAAI,EAAE,GAAKT,gBAAgB;gBAAEgB,YAAYP;YAAK,IACxDE,GAAG,CAAC,CAACM;YACJ,MAAMJ,gBAA+B;gBACnCC,MAAMrB,WAAWwB,MAAM;gBACvBF,QAAQE;YACV;YAEA,OAAOJ;QACT;KACH,EACDd,aACAM;IAGF,qBACE,oBAACjB,gBACEmB,OAAOI,GAAG,CAAC,CAAC,EAAEO,QAAQ,EAAEC,KAAK,EAAE,EAAEC;QAChC,qBACE,oBAACzB;YAASyB,KAAKA;YAAKD,OAAOA;WACxBD,SAASP,GAAG,CAAC,CAAC,EAAEG,IAAI,EAAEC,MAAM,EAAE,EAAEM;YAC/B,IAAIC;YACJ,IAAIC;YACJ,IAAIC;YAEJ,IAAIV,SAASrB,WAAWmB,UAAU,EAAE;gBAClCW,OAAO,CAAC,EAAEnB,MAAM,aAAa,EAAEW,OAAON,IAAI,CAAC,CAAC;gBAC5Ca,cAActC,eAAe+B,OAAOU,MAAM,CAACC,MAAM,EAAErB;gBACnDmB,KAAK,CAAC,IAAI,EAAET,OAAON,IAAI,CAAC,CAAC;YAC3B;YAEA,IAAIK,SAASrB,WAAWwB,MAAM,EAAE;gBAC9BM,OAAO,CAAC,EAAEnB,MAAM,SAAS,EAAEW,OAAON,IAAI,CAAC,CAAC;gBACxCa,cAActC,eAAe+B,OAAOI,KAAK,EAAEd;gBAC3CmB,KAAK,CAAC,WAAW,EAAET,OAAON,IAAI,CAAC,CAAC;YAClC;YAEA,MAAMkB,OAAQzC,gBAAgB0C,OAAO,IACnC1C;YAEF,MAAM2C,cAAcF,QAAQ;YAE5B,qBACE,oBAACE;gBACCC,WAAW,CAAC,EAAEjC,UAAU,MAAM,CAAC;gBAC/B0B,MAAMA;gBACNC,IAAIA;gBACJJ,KAAKC;gBACLU,UAAU,CAACzB,UAAU,CAAC,IAAI0B;6BAE1B,oBAACC;gBAAKH,WAAW,CAAC,EAAEjC,UAAU,WAAW,CAAC;6BACxC,oBAACR;gBAAQ6C,WAAU;+BAErB,oBAACD;gBAAKH,WAAW,CAAC,EAAEjC,UAAU,YAAY,CAAC;eAAGyB;QAGpD;IAGN;AAGN,EAAC"}

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

@@ -1,12 +1,8 @@
-import type { I18n } from '@payloadcms/translations';
-import type { Permissions, User } from 'payload/auth';
 import type { SanitizedConfig } from 'payload/types';
 import React from 'react';
 import './index.scss';
-export declare const DefaultNav: React.FC<{
+export type NavProps = {
     config: SanitizedConfig;
-    i18n: I18n;
-    permissions: Permissions;
-    user: User;
-}>;
+};
+export declare const DefaultNav: React.FC<NavProps>;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACrD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAKpD,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,MAAM,EAAE,eAAe,CAAA;IACvB,IAAI,EAAE,IAAI,CAAA;IACV,WAAW,EAAE,WAAW,CAAA;IACxB,IAAI,EAAE,IAAI,CAAA;CACX,CAwGA,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Nav/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAA;AAEpD,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,QAAQ,GAAG;IACrB,MAAM,EAAE,eAAe,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CA+BzC,CAAA"}

package/dist/elements/Nav/index.js

@@ -1,84 +1,22 @@
-import { getTranslation } from '@payloadcms/translations';
-import LinkWithDefault from 'next/link.js';
-import { isEntityHidden } from 'payload/utilities';
 import React from 'react';
-import { Chevron } from '../../icons/Chevron/index.js';
-import { EntityType, groupNavItems } from '../../utilities/groupNavItems.js';
 import { Logout } from '../Logout/index.js';
-import { NavGroup } from '../NavGroup/index.js';
 import { NavHamburger } from './NavHamburger/index.js';
 import { NavWrapper } from './NavWrapper/index.js';
 const baseClass = 'nav';
+import { DefaultNavClient } from './index.client.js';
 export const DefaultNav = (props)=>{
-    const { config, i18n, permissions, user } = props;
+    const { config } = props;
     if (!config) {
         return null;
     }
-    const { admin: { components: { afterNavLinks, beforeNavLinks } }, collections, globals, routes: { admin } } = config;
-    const groups = groupNavItems([
-        ...collections.filter(({ admin: { hidden } })=>!isEntityHidden({
-                hidden,
-                user
-            })).map((collection)=>{
-            const entityToGroup = {
-                type: EntityType.collection,
-                entity: collection
-            };
-            return entityToGroup;
-        }),
-        ...globals.filter(({ admin: { hidden } })=>!isEntityHidden({
-                hidden,
-                user
-            })).map((global)=>{
-            const entityToGroup = {
-                type: EntityType.global,
-                entity: global
-            };
-            return entityToGroup;
-        })
-    ], permissions, i18n);
+    const { admin: { components: { afterNavLinks, beforeNavLinks } } } = config;
     return /*#__PURE__*/ React.createElement(NavWrapper, {
         baseClass: baseClass
     }, /*#__PURE__*/ React.createElement("nav", {
         className: `${baseClass}__wrap`
     }, Array.isArray(beforeNavLinks) && beforeNavLinks.map((Component, i)=>/*#__PURE__*/ React.createElement(Component, {
             key: i
-        })), groups.map(({ entities, label }, key)=>{
-        return /*#__PURE__*/ React.createElement(NavGroup, {
-            key: key,
-            label: label
-        }, entities.map(({ type, entity }, i)=>{
-            let entityLabel;
-            let href;
-            let id;
-            if (type === EntityType.collection) {
-                href = `${admin}/collections/${entity.slug}`;
-                entityLabel = getTranslation(entity.labels.plural, i18n);
-                id = `nav-${entity.slug}`;
-            }
-            if (type === EntityType.global) {
-                href = `${admin}/globals/${entity.slug}`;
-                entityLabel = getTranslation(entity.label, i18n);
-                id = `nav-global-${entity.slug}`;
-            }
-            const Link = LinkWithDefault.default || LinkWithDefault;
-            const LinkElement = Link || 'a';
-            return /*#__PURE__*/ React.createElement(LinkElement, {
-                // activeClassName="active"
-                className: `${baseClass}__link`,
-                href: href,
-                id: id,
-                // tabIndex={!navOpen ? -1 : undefined}
-                key: i
-            }, /*#__PURE__*/ React.createElement("span", {
-                className: `${baseClass}__link-icon`
-            }, /*#__PURE__*/ React.createElement(Chevron, {
-                direction: "right"
-            })), /*#__PURE__*/ React.createElement("span", {
-                className: `${baseClass}__link-label`
-            }, entityLabel));
-        }));
-    }), Array.isArray(afterNavLinks) && afterNavLinks.map((Component, i)=>/*#__PURE__*/ React.createElement(Component, {
+        })), /*#__PURE__*/ React.createElement(DefaultNavClient, null), Array.isArray(afterNavLinks) && afterNavLinks.map((Component, i)=>/*#__PURE__*/ React.createElement(Component, {
             key: i
         })), /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__controls`

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Nav/index.tsx"],"sourcesContent":["import type { I18n } from '@payloadcms/translations'\nimport type { Permissions, User } from 'payload/auth'\nimport type { SanitizedConfig } from 'payload/types'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport LinkWithDefault from 'next/link.js'\nimport { isEntityHidden } from 'payload/utilities'\nimport React from 'react'\n\nimport type { EntityToGroup } from '../../utilities/groupNavItems.js'\n\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { EntityType, groupNavItems } from '../../utilities/groupNavItems.js'\nimport { Logout } from '../Logout/index.js'\nimport { NavGroup } from '../NavGroup/index.js'\nimport { NavHamburger } from './NavHamburger/index.js'\nimport { NavWrapper } from './NavWrapper/index.js'\nimport './index.scss'\n\nconst baseClass = 'nav'\n\nexport const DefaultNav: React.FC<{\n  config: SanitizedConfig\n  i18n: I18n\n  permissions: Permissions\n  user: User\n}> = (props) => {\n  const { config, i18n, permissions, user } = props\n\n  if (!config) {\n    return null\n  }\n\n  const {\n    admin: {\n      components: { afterNavLinks, beforeNavLinks },\n    },\n    collections,\n    globals,\n    routes: { admin },\n  } = config\n\n  const groups = groupNavItems(\n    [\n      ...collections\n        .filter(({ admin: { hidden } }) => !isEntityHidden({ hidden, user }))\n        .map((collection) => {\n          const entityToGroup: EntityToGroup = {\n            type: EntityType.collection,\n            entity: collection,\n          }\n\n          return entityToGroup\n        }),\n      ...globals\n        .filter(({ admin: { hidden } }) => !isEntityHidden({ hidden, user }))\n        .map((global) => {\n          const entityToGroup: EntityToGroup = {\n            type: EntityType.global,\n            entity: global,\n          }\n\n          return entityToGroup\n        }),\n    ],\n    permissions,\n    i18n,\n  )\n\n  return (\n    <NavWrapper baseClass={baseClass}>\n      <nav className={`${baseClass}__wrap`}>\n        {Array.isArray(beforeNavLinks) &&\n          beforeNavLinks.map((Component, i) => <Component key={i} />)}\n        {groups.map(({ entities, label }, key) => {\n          return (\n            <NavGroup key={key} label={label}>\n              {entities.map(({ type, entity }, i) => {\n                let entityLabel: string\n                let href: string\n                let id: string\n\n                if (type === EntityType.collection) {\n                  href = `${admin}/collections/${entity.slug}`\n                  entityLabel = getTranslation(entity.labels.plural, i18n)\n                  id = `nav-${entity.slug}`\n                }\n\n                if (type === EntityType.global) {\n                  href = `${admin}/globals/${entity.slug}`\n                  entityLabel = getTranslation(entity.label, i18n)\n                  id = `nav-global-${entity.slug}`\n                }\n\n                const Link = (LinkWithDefault.default ||\n                  LinkWithDefault) as typeof LinkWithDefault.default\n\n                const LinkElement = Link || 'a'\n\n                return (\n                  <LinkElement\n                    // activeClassName=\"active\"\n                    className={`${baseClass}__link`}\n                    href={href}\n                    id={id}\n                    // tabIndex={!navOpen ? -1 : undefined}\n                    key={i}\n                  >\n                    <span className={`${baseClass}__link-icon`}>\n                      <Chevron direction=\"right\" />\n                    </span>\n                    <span className={`${baseClass}__link-label`}>{entityLabel}</span>\n                  </LinkElement>\n                )\n              })}\n            </NavGroup>\n          )\n        })}\n        {Array.isArray(afterNavLinks) && afterNavLinks.map((Component, i) => <Component key={i} />)}\n        <div className={`${baseClass}__controls`}>\n          <Logout />\n        </div>\n      </nav>\n      <div className={`${baseClass}__header`}>\n        <div className={`${baseClass}__header-content`}>\n          <NavHamburger baseClass={baseClass} />\n        </div>\n      </div>\n    </NavWrapper>\n  )\n}\n"],"names":["getTranslation","LinkWithDefault","isEntityHidden","React","Chevron","EntityType","groupNavItems","Logout","NavGroup","NavHamburger","NavWrapper","baseClass","DefaultNav","props","config","i18n","permissions","user","admin","components","afterNavLinks","beforeNavLinks","collections","globals","routes","groups","filter","hidden","map","collection","entityToGroup","type","entity","global","nav","className","Array","isArray","Component","i","key","entities","label","entityLabel","href","id","slug","labels","plural","Link","default","LinkElement","span","direction","div"],"mappings":"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"}
+{"version":3,"sources":["../../../src/elements/Nav/index.tsx"],"sourcesContent":["import type { SanitizedConfig } from 'payload/types'\n\nimport React from 'react'\n\nimport { Logout } from '../Logout/index.js'\nimport { NavHamburger } from './NavHamburger/index.js'\nimport { NavWrapper } from './NavWrapper/index.js'\nimport './index.scss'\n\nconst baseClass = 'nav'\n\nimport { DefaultNavClient } from './index.client.js'\n\nexport type NavProps = {\n  config: SanitizedConfig\n}\n\nexport const DefaultNav: React.FC<NavProps> = (props) => {\n  const { config } = props\n\n  if (!config) {\n    return null\n  }\n\n  const {\n    admin: {\n      components: { afterNavLinks, beforeNavLinks },\n    },\n  } = config\n\n  return (\n    <NavWrapper baseClass={baseClass}>\n      <nav className={`${baseClass}__wrap`}>\n        {Array.isArray(beforeNavLinks) &&\n          beforeNavLinks.map((Component, i) => <Component key={i} />)}\n        <DefaultNavClient />\n        {Array.isArray(afterNavLinks) && afterNavLinks.map((Component, i) => <Component key={i} />)}\n        <div className={`${baseClass}__controls`}>\n          <Logout />\n        </div>\n      </nav>\n      <div className={`${baseClass}__header`}>\n        <div className={`${baseClass}__header-content`}>\n          <NavHamburger baseClass={baseClass} />\n        </div>\n      </div>\n    </NavWrapper>\n  )\n}\n"],"names":["React","Logout","NavHamburger","NavWrapper","baseClass","DefaultNavClient","DefaultNav","props","config","admin","components","afterNavLinks","beforeNavLinks","nav","className","Array","isArray","map","Component","i","key","div"],"mappings":"AAEA,OAAOA,WAAW,QAAO;AAEzB,SAASC,MAAM,QAAQ,qBAAoB;AAC3C,SAASC,YAAY,QAAQ,0BAAyB;AACtD,SAASC,UAAU,QAAQ,wBAAuB;AAGlD,MAAMC,YAAY;AAElB,SAASC,gBAAgB,QAAQ,oBAAmB;AAMpD,OAAO,MAAMC,aAAiC,CAACC;IAC7C,MAAM,EAAEC,MAAM,EAAE,GAAGD;IAEnB,IAAI,CAACC,QAAQ;QACX,OAAO;IACT;IAEA,MAAM,EACJC,OAAO,EACLC,YAAY,EAAEC,aAAa,EAAEC,cAAc,EAAE,EAC9C,EACF,GAAGJ;IAEJ,qBACE,oBAACL;QAAWC,WAAWA;qBACrB,oBAACS;QAAIC,WAAW,CAAC,EAAEV,UAAU,MAAM,CAAC;OACjCW,MAAMC,OAAO,CAACJ,mBACbA,eAAeK,GAAG,CAAC,CAACC,WAAWC,kBAAM,oBAACD;YAAUE,KAAKD;2BACvD,oBAACd,yBACAU,MAAMC,OAAO,CAACL,kBAAkBA,cAAcM,GAAG,CAAC,CAACC,WAAWC,kBAAM,oBAACD;YAAUE,KAAKD;2BACrF,oBAACE;QAAIP,WAAW,CAAC,EAAEV,UAAU,UAAU,CAAC;qBACtC,oBAACH,+BAGL,oBAACoB;QAAIP,WAAW,CAAC,EAAEV,UAAU,QAAQ,CAAC;qBACpC,oBAACiB;QAAIP,WAAW,CAAC,EAAEV,UAAU,gBAAgB,CAAC;qBAC5C,oBAACF;QAAaE,WAAWA;;AAKnC,EAAC"}

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import './index.scss';
 export type PerPageProps = {
+    defaultLimit?: number;
     handleChange?: (limit: number) => void;
     limit: number;
     limits: number[];

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PerPage/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,YAAY,GAAG;IACzB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAiD1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PerPage/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,OAAO,cAAc,CAAA;AAMrB,MAAM,MAAM,YAAY,GAAG;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoD1C,CAAA"}

package/dist/elements/PerPage/index.js

@@ -1,21 +1,23 @@
 'use client';
 // TODO: abstract the `next/navigation` dependency out from this component
 import { collectionDefaults } from 'payload/config';
+import { isNumber } from 'payload/utilities';
 import React from 'react';
 import { Chevron } from '../../icons/Chevron/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { Popup, PopupList } from '../Popup/index.js';
 const baseClass = 'per-page';
 const defaultLimits = collectionDefaults.admin.pagination.limits;
-export const PerPage = ({ handleChange, limit, limits = defaultLimits })=>{
+export const PerPage = ({ defaultLimit = 10, handleChange, limit, limits = defaultLimits })=>{
     const { t } = useTranslation();
+    const limitToUse = isNumber(limit) ? limit : defaultLimit;
     return /*#__PURE__*/ React.createElement("div", {
         className: baseClass
     }, /*#__PURE__*/ React.createElement(Popup, {
         button: /*#__PURE__*/ React.createElement("div", {
             className: `${baseClass}__base-button`
         }, /*#__PURE__*/ React.createElement("span", null, t('general:perPage', {
-            limit
+            limit: limitToUse
         })), " ", /*#__PURE__*/ React.createElement(Chevron, {
             className: `${baseClass}__icon`
         })),
@@ -23,14 +25,14 @@ export const PerPage = ({ handleChange, limit, limits = defaultLimits })=>{
         render: ({ close })=>/*#__PURE__*/ React.createElement(PopupList.ButtonGroup, null, limits.map((limitNumber, i)=>/*#__PURE__*/ React.createElement(PopupList.Button, {
                     className: [
                         `${baseClass}__button`,
-                        limitNumber === Number(limit) && `${baseClass}__button-active`
+                        limitNumber === limitToUse && `${baseClass}__button-active`
                     ].filter(Boolean).join(' '),
                     key: i,
                     onClick: ()=>{
                         close();
                         if (handleChange) handleChange(limitNumber);
                     }
-                }, limitNumber === Number(limit) && /*#__PURE__*/ React.createElement("div", {
+                }, limitNumber === limitToUse && /*#__PURE__*/ React.createElement("div", {
                     className: `${baseClass}__chevron`
                 }, /*#__PURE__*/ React.createElement(Chevron, {
                     direction: "right"