@payloadcms/ui 3.23.0-canary.fa36283 → 3.24.0-canary.10637cd

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

@@ -1,4 +1,4 @@
-import type { ClientCollectionConfig, Where } from 'payload';
+import type { ClientCollectionConfig, ResolvedFilterOptions, Where } from 'payload';
 import React from 'react';
 import './index.scss';
 export type ListControlsProps = {
@@ -13,6 +13,7 @@ export type ListControlsProps = {
     readonly handleSortChange?: (sort: string) => void;
     readonly handleWhereChange?: (where: Where) => void;
     readonly renderedFilters?: Map<string, React.ReactNode>;
+    readonly resolvedFilterOptions?: Map<string, ResolvedFilterOptions>;
 };
 /**
  * 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,KAAK,EAAE,MAAM,SAAS,CAAA;AAI5D,OAAO,KAAgD,MAAM,OAAO,CAAA;AAiBpE,OAAO,cAAc,CAAA;AAKrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IACpC,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,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;IACnD,QAAQ,CAAC,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;CACxD,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA6LpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAInF,OAAO,KAAgD,MAAM,OAAO,CAAA;AAkBpE,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IACpC,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,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;IACnD,QAAQ,CAAC,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACvD,QAAQ,CAAC,qBAAqB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAA;CACpE,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA8LpD,CAAA"}

package/dist/elements/ListControls/index.js

@@ -19,8 +19,8 @@ import { SearchFilter } from '../SearchFilter/index.js';
 import { UnpublishMany } from '../UnpublishMany/index.js';
 import { WhereBuilder } from '../WhereBuilder/index.js';
 import validateWhereQuery from '../WhereBuilder/validateWhereQuery.js';
-import './index.scss';
 import { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js';
+import './index.scss';
 const baseClass = 'list-controls';
 /**
  * The ListControls component is used to render the controls (search, filter, where)
@@ -36,7 +36,8 @@ export const ListControls = props => {
     disableBulkEdit,
     enableColumns = true,
     enableSort = false,
-    renderedFilters
+    renderedFilters,
+    resolvedFilterOptions
   } = props;
   const {
     handleSearchChange,
@@ -161,8 +162,9 @@ export const ListControls = props => {
         collectionPluralLabel: collectionConfig?.labels?.plural,
         collectionSlug: collectionConfig.slug,
         fields: collectionConfig?.fields,
-        renderedFilters: renderedFilters
-      }, String(hasWhereParam.current && !query?.where))
+        renderedFilters: renderedFilters,
+        resolvedFilterOptions: resolvedFilterOptions
+      })
     }), enableSort && /*#__PURE__*/_jsx(AnimateHeight, {
       className: `${baseClass}__sort`,
       height: visibleDrawer === 'sort' ? 'auto' : 0,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useWindowInfo","getTranslation","React","Fragment","useEffect","useRef","useState","useUseTitleField","ChevronIcon","SearchIcon","useListQuery","useTranslation","AnimateHeight","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","beforeActions","collectionConfig","collectionSlug","disableBulkDelete","disableBulkEdit","enableColumns","enableSort","renderedFilters","handleSearchChange","query","titleField","i18n","t","breakpoints","s","smallBreak","searchLabel","label","name","listSearchableFields","admin","fields","searchLabelTranslated","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","length","reduce","placeholderText","field","i","_jsxs","className","_jsx","fieldName","handleChange","search","initialParams","collection","icon","direction","onClick","pillStyle","height","id","slug","collectionPluralLabel","labels","plural","String"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Where } from 'payload'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\n\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { 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'\nimport { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n  readonly beforeActions?: React.ReactNode[]\n  readonly collectionConfig: ClientCollectionConfig\n  readonly collectionSlug: string\n  readonly disableBulkDelete?: boolean\n  readonly disableBulkEdit?: boolean\n  readonly enableColumns?: boolean\n  readonly enableSort?: boolean\n  readonly handleSearchChange?: (search: string) => void\n  readonly handleSortChange?: (sort: string) => void\n  readonly handleWhereChange?: (where: Where) => void\n  readonly renderedFilters?: Map<string, React.ReactNode>\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    beforeActions,\n    collectionConfig,\n    collectionSlug,\n    disableBulkDelete,\n    disableBulkEdit,\n    enableColumns = true,\n    enableSort = false,\n    renderedFilters,\n  } = props\n\n  const { handleSearchChange, query } = useListQuery()\n  const titleField = useUseTitleField(collectionConfig)\n  const { i18n, t } = useTranslation()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const searchLabel =\n    (titleField &&\n      getTranslation(\n        'label' in titleField && typeof titleField.label === 'string'\n          ? titleField.label\n          : 'name' in titleField\n            ? titleField.name\n            : null,\n        i18n,\n      )) ??\n    'ID'\n\n  const listSearchableFields = getTextFieldsToBeSearched(\n    collectionConfig.admin.listSearchableFields,\n    collectionConfig.fields,\n  )\n\n  const searchLabelTranslated = useRef(\n    t('general:searchBy', { label: getTranslation(searchLabel, i18n) }),\n  )\n\n  const hasWhereParam = useRef(Boolean(query?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(query?.where)\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !query?.where) {\n      hasWhereParam.current = false\n    } else if (query?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, query?.where])\n\n  useEffect(() => {\n    if (listSearchableFields?.length > 0) {\n      searchLabelTranslated.current = listSearchableFields.reduce(\n        (placeholderText: string, field, i: number) => {\n          const label =\n            'label' in field && field.label ? field.label : 'name' in field ? field.name : null\n\n          if (i === 0) {\n            return `${t('general:searchBy', {\n              label: getTranslation(label, i18n),\n            })}`\n          }\n\n          if (i === listSearchableFields.length - 1) {\n            return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`\n          }\n\n          return `${placeholderText}, ${getTranslation(label, i18n)}`\n        },\n        '',\n      )\n    } else {\n      searchLabelTranslated.current = t('general:searchBy', {\n        label: getTranslation(searchLabel, i18n),\n      })\n    }\n  }, [t, listSearchableFields, i18n, searchLabel])\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <SearchIcon />\n        <SearchFilter\n          fieldName={titleField && 'name' in titleField ? titleField?.name : null}\n          handleChange={(search) => {\n            return void handleSearchChange(search)\n          }}\n          // @ts-expect-error @todo: fix types\n          initialParams={query}\n          key={collectionSlug}\n          label={searchLabelTranslated.current}\n        />\n        <div className={`${baseClass}__buttons`}>\n          <div className={`${baseClass}__buttons-wrap`}>\n            {!smallBreak && (\n              <React.Fragment>\n                {beforeActions && beforeActions}\n                {!disableBulkEdit && (\n                  <Fragment>\n                    <EditMany collection={collectionConfig} />\n                    <PublishMany collection={collectionConfig} />\n                    <UnpublishMany collection={collectionConfig} />\n                  </Fragment>\n                )}\n                {!disableBulkDelete && <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                icon={<ChevronIcon direction={visibleDrawer === 'columns' ? 'up' : 'down'} />}\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              icon={<ChevronIcon direction={visibleDrawer === 'where' ? 'up' : 'down'} />}\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={<ChevronIcon />}\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          fields={collectionConfig?.fields}\n          key={String(hasWhereParam.current && !query?.where)}\n          renderedFilters={renderedFilters}\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useWindowInfo","getTranslation","React","Fragment","useEffect","useRef","useState","useUseTitleField","ChevronIcon","SearchIcon","useListQuery","useTranslation","AnimateHeight","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","beforeActions","collectionConfig","collectionSlug","disableBulkDelete","disableBulkEdit","enableColumns","enableSort","renderedFilters","resolvedFilterOptions","handleSearchChange","query","titleField","i18n","t","breakpoints","s","smallBreak","searchLabel","label","name","listSearchableFields","admin","fields","searchLabelTranslated","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","length","reduce","placeholderText","field","i","_jsxs","className","_jsx","fieldName","handleChange","search","initialParams","collection","icon","direction","onClick","pillStyle","height","id","slug","collectionPluralLabel","labels","plural"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, ResolvedFilterOptions, Where } from 'payload'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\nimport { getTranslation } from '@payloadcms/translations'\nimport React, { Fragment, useEffect, useRef, useState } from 'react'\n\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { 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 { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js'\nimport './index.scss'\n\nconst baseClass = 'list-controls'\n\nexport type ListControlsProps = {\n  readonly beforeActions?: React.ReactNode[]\n  readonly collectionConfig: ClientCollectionConfig\n  readonly collectionSlug: string\n  readonly disableBulkDelete?: boolean\n  readonly disableBulkEdit?: boolean\n  readonly enableColumns?: boolean\n  readonly enableSort?: boolean\n  readonly handleSearchChange?: (search: string) => void\n  readonly handleSortChange?: (sort: string) => void\n  readonly handleWhereChange?: (where: Where) => void\n  readonly renderedFilters?: Map<string, React.ReactNode>\n  readonly resolvedFilterOptions?: Map<string, ResolvedFilterOptions>\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    beforeActions,\n    collectionConfig,\n    collectionSlug,\n    disableBulkDelete,\n    disableBulkEdit,\n    enableColumns = true,\n    enableSort = false,\n    renderedFilters,\n    resolvedFilterOptions,\n  } = props\n\n  const { handleSearchChange, query } = useListQuery()\n  const titleField = useUseTitleField(collectionConfig)\n  const { i18n, t } = useTranslation()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const searchLabel =\n    (titleField &&\n      getTranslation(\n        'label' in titleField && typeof titleField.label === 'string'\n          ? titleField.label\n          : 'name' in titleField\n            ? titleField.name\n            : null,\n        i18n,\n      )) ??\n    'ID'\n\n  const listSearchableFields = getTextFieldsToBeSearched(\n    collectionConfig.admin.listSearchableFields,\n    collectionConfig.fields,\n  )\n\n  const searchLabelTranslated = useRef(\n    t('general:searchBy', { label: getTranslation(searchLabel, i18n) }),\n  )\n\n  const hasWhereParam = useRef(Boolean(query?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(query?.where)\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !query?.where) {\n      hasWhereParam.current = false\n    } else if (query?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, query?.where])\n\n  useEffect(() => {\n    if (listSearchableFields?.length > 0) {\n      searchLabelTranslated.current = listSearchableFields.reduce(\n        (placeholderText: string, field, i: number) => {\n          const label =\n            'label' in field && field.label ? field.label : 'name' in field ? field.name : null\n\n          if (i === 0) {\n            return `${t('general:searchBy', {\n              label: getTranslation(label, i18n),\n            })}`\n          }\n\n          if (i === listSearchableFields.length - 1) {\n            return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`\n          }\n\n          return `${placeholderText}, ${getTranslation(label, i18n)}`\n        },\n        '',\n      )\n    } else {\n      searchLabelTranslated.current = t('general:searchBy', {\n        label: getTranslation(searchLabel, i18n),\n      })\n    }\n  }, [t, listSearchableFields, i18n, searchLabel])\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__wrap`}>\n        <SearchIcon />\n        <SearchFilter\n          fieldName={titleField && 'name' in titleField ? titleField?.name : null}\n          handleChange={(search) => {\n            return void handleSearchChange(search)\n          }}\n          // @ts-expect-error @todo: fix types\n          initialParams={query}\n          key={collectionSlug}\n          label={searchLabelTranslated.current}\n        />\n        <div className={`${baseClass}__buttons`}>\n          <div className={`${baseClass}__buttons-wrap`}>\n            {!smallBreak && (\n              <React.Fragment>\n                {beforeActions && beforeActions}\n                {!disableBulkEdit && (\n                  <Fragment>\n                    <EditMany collection={collectionConfig} />\n                    <PublishMany collection={collectionConfig} />\n                    <UnpublishMany collection={collectionConfig} />\n                  </Fragment>\n                )}\n                {!disableBulkDelete && <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                icon={<ChevronIcon direction={visibleDrawer === 'columns' ? 'up' : 'down'} />}\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              icon={<ChevronIcon direction={visibleDrawer === 'where' ? 'up' : 'down'} />}\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={<ChevronIcon />}\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          fields={collectionConfig?.fields}\n          renderedFilters={renderedFilters}\n          resolvedFilterOptions={resolvedFilterOptions}\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"],"mappings":"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","ignoreList":[]}

package/dist/elements/Table/DefaultCell/fields/Blocks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAG3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,iBAAiB,CAAC;CAAG;AAExF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoChD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAG3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,WAAW,eAAgB,SAAQ,yBAAyB,CAAC,iBAAiB,CAAC;CAAG;AAExF,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2ChD,CAAA"}

package/dist/elements/Table/DefaultCell/fields/Blocks/index.js

@@ -4,6 +4,7 @@ import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
+import { useConfig } from '../../../../../providers/Config/index.js';
 import { useTranslation } from '../../../../../providers/Translation/index.js';
 export const BlocksCell = t0 => {
   const $ = _c(2);
@@ -12,17 +13,24 @@ export const BlocksCell = t0 => {
     field: t1
   } = t0;
   const {
+    blockReferences,
     blocks,
     labels
   } = t1;
   const {
     i18n
   } = useTranslation();
+  const {
+    config
+  } = useConfig();
   const selectedBlocks = Array.isArray(cellData) ? cellData.map(_temp) : [];
-  const translatedBlockLabels = blocks?.map(b => ({
-    slug: b.slug,
-    label: getTranslation(b.labels.singular, i18n)
-  }));
+  const translatedBlockLabels = (blockReferences ?? blocks)?.map(b => {
+    const block = typeof b === "string" ? config.blocksMap[b] : b;
+    return {
+      slug: block.slug,
+      label: getTranslation(block.labels.singular, i18n)
+    };
+  });
   let label = `0 ${getTranslation(labels?.plural, i18n)}`;
   const formatBlockList = blocks_0 => blocks_0.map(b_0 => {
     const filtered = translatedBlockLabels.filter(f => f.slug === b_0)?.[0];

package/dist/elements/Table/DefaultCell/fields/Blocks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","BlocksCell","t0","$","cellData","field","t1","blocks","labels","i18n","selectedBlocks","Array","isArray","map","_temp","translatedBlockLabels","b","slug","label","singular","plural","formatBlockList","blocks_0","b_0","filtered","filter","f","join","length","more","t","count","items","slice","t2","_jsx","children","blockType"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"sourcesContent":["'use client'\nimport type { BlocksFieldClient, DefaultCellComponentProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\n\nexport interface BlocksCellProps extends DefaultCellComponentProps<BlocksFieldClient> {}\n\nexport const BlocksCell: React.FC<BlocksCellProps> = ({ cellData, field: { blocks, labels } }) => {\n  const { i18n } = useTranslation()\n\n  const selectedBlocks = Array.isArray(cellData) ? cellData.map(({ blockType }) => blockType) : []\n\n  const translatedBlockLabels = blocks?.map((b) => ({\n    slug: b.slug,\n    label: getTranslation(b.labels.singular, i18n),\n  }))\n\n  let label = `0 ${getTranslation(labels?.plural, i18n)}`\n\n  const formatBlockList = (blocks) =>\n    blocks\n      .map((b) => {\n        const filtered = translatedBlockLabels.filter((f) => f.slug === b)?.[0]\n        return filtered?.label\n      })\n      .join(', ')\n\n  const itemsToShow = 5\n\n  if (selectedBlocks.length > itemsToShow) {\n    const more = selectedBlocks.length - itemsToShow\n    label = `${selectedBlocks.length} ${getTranslation(labels?.plural, i18n)} - ${i18n.t(\n      'fields:itemsAndMore',\n      { count: more, items: formatBlockList(selectedBlocks.slice(0, itemsToShow)) },\n    )}`\n  } else if (selectedBlocks.length > 0) {\n    label = `${selectedBlocks.length} ${getTranslation(\n      selectedBlocks.length === 1 ? labels?.singular : labels?.plural,\n      i18n,\n    )} - ${formatBlockList(selectedBlocks)}`\n  }\n\n  return <span>{label}</span>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAI/B,OAAO,MAAMC,UAAA,GAAwCC,EAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAAC;IAAAO,QAAA;IAAAC,KAAA,EAAAC;EAAA,IAAAJ,EAAuC;EAApB;IAAAK,MAAA;IAAAC;EAAA,IAAAF,EAAkB;EACzF;IAAAG;EAAA,IAAiBT,cAAA;EAEjB,MAAAU,cAAA,GAAuBC,KAAA,CAAAC,OAAA,CAAcR,QAAA,IAAYA,QAAA,CAAAS,GAAA,CAAAC,KAAgC,MAAe;EAEhG,MAAAC,qBAAA,GAA8BR,MAAA,EAAAM,GAAA,CAAAG,CAAA;IAAAC,IAAA,EACtBD,CAAA,CAAAC,IAAA;IAAAC,KAAA,EACCpB,cAAA,CAAekB,CAAA,CAAAR,MAAA,CAAAW,QAAA,EAAmBV,IAAA;EAAA;EAG3C,IAAAS,KAAA,GAAY,KAAKpB,cAAA,CAAeU,MAAA,EAAAY,MAAA,EAAgBX,IAAA,GAAO;EAEvD,MAAAY,eAAA,GAAAC,QAAA,IACEf,QAAA,CAAAM,GAAA,CAAAU,GAAA;IAEI,MAAAC,QAAA,GAAiBT,qBAAA,CAAAU,MAAA,CAAAC,CAAA,IAAoCA,CAAA,CAAAT,IAAA,KAAWD,GAAA;IAAO,OAChEQ,QAAA,EAAAN,KAAA;EAAA,CACT,EAAAS,IAAA,CACM;EAAA,IAINjB,cAAA,CAAAkB,MAAA,IAAwB;IAC1B,MAAAC,IAAA,GAAanB,cAAA,CAAAkB,MAAA,IAAwB;IACrCV,KAAA,CAAAA,CAAA,CAAQA,GAAGR,cAAA,CAAAkB,MAAA,IAAyB9B,cAAA,CAAeU,MAAA,EAAAY,MAAA,EAAgBX,IAAA,OAAWA,IAAA,CAAAqB,CAAA,CAC5E;MAAAC,KAAA,EACSF,IAAA;MAAAG,KAAA,EAAaX,eAAA,CAAgBX,cAAA,CAAAuB,KAAA,KAAwB;IAAA,CAAc,GAC3E;EAHH;IAAA,IAISvB,cAAA,CAAAkB,MAAA,IAAwB;MACjCV,KAAA,CAAAA,CAAA,CAAQA,GAAGR,cAAA,CAAAkB,MAAA,IAAyB9B,cAAA,CAClCY,cAAA,CAAAkB,MAAA,MAA0B,GAAIpB,MAAA,EAAAW,QAAA,GAAmBX,MAAA,EAAAY,MAAQ,EACzDX,IAAA,OACKY,eAAA,CAAgBX,cAAA,GAAiB;IAHxC;EAAA;EAAA,IAAAwB,EAAA;EAAA,IAAA/B,CAAA,QAAAe,KAAA;IAMKgB,EAAA,GAAAC,IAAA,CAAC;MAAAC,QAAA,EAAMlB;IAAA,C;;;;;;SAAPgB,E;CACT;AApCqD,SAAApB,MAAAZ,EAAA;EAGY;IAAAmC;EAAA,IAAAnC,EAAa;EAAA,OAAKmC,SAAA;AAAA","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useConfig","useTranslation","BlocksCell","t0","$","cellData","field","t1","blockReferences","blocks","labels","i18n","config","selectedBlocks","Array","isArray","map","_temp","translatedBlockLabels","b","block","blocksMap","slug","label","singular","plural","formatBlockList","blocks_0","b_0","filtered","filter","f","join","length","more","t","count","items","slice","t2","_jsx","children","blockType"],"sources":["../../../../../../src/elements/Table/DefaultCell/fields/Blocks/index.tsx"],"sourcesContent":["'use client'\nimport type { BlocksFieldClient, DefaultCellComponentProps } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useConfig } from '../../../../../providers/Config/index.js'\nimport { useTranslation } from '../../../../../providers/Translation/index.js'\n\nexport interface BlocksCellProps extends DefaultCellComponentProps<BlocksFieldClient> {}\n\nexport const BlocksCell: React.FC<BlocksCellProps> = ({\n  cellData,\n  field: { blockReferences, blocks, labels },\n}) => {\n  const { i18n } = useTranslation()\n  const { config } = useConfig()\n\n  const selectedBlocks = Array.isArray(cellData) ? cellData.map(({ blockType }) => blockType) : []\n\n  const translatedBlockLabels = (blockReferences ?? blocks)?.map((b) => {\n    const block = typeof b === 'string' ? config.blocksMap[b] : b\n    return {\n      slug: block.slug,\n      label: getTranslation(block.labels.singular, i18n),\n    }\n  })\n\n  let label = `0 ${getTranslation(labels?.plural, i18n)}`\n\n  const formatBlockList = (blocks) =>\n    blocks\n      .map((b) => {\n        const filtered = translatedBlockLabels.filter((f) => f.slug === b)?.[0]\n        return filtered?.label\n      })\n      .join(', ')\n\n  const itemsToShow = 5\n\n  if (selectedBlocks.length > itemsToShow) {\n    const more = selectedBlocks.length - itemsToShow\n    label = `${selectedBlocks.length} ${getTranslation(labels?.plural, i18n)} - ${i18n.t(\n      'fields:itemsAndMore',\n      { count: more, items: formatBlockList(selectedBlocks.slice(0, itemsToShow)) },\n    )}`\n  } else if (selectedBlocks.length > 0) {\n    label = `${selectedBlocks.length} ${getTranslation(\n      selectedBlocks.length === 1 ? labels?.singular : labels?.plural,\n      i18n,\n    )} - ${formatBlockList(selectedBlocks)}`\n  }\n\n  return <span>{label}</span>\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAI/B,OAAO,MAAMC,UAAA,GAAwCC,EAAA;EAAA,MAAAC,CAAA,GAAAP,EAAA;EAAC;IAAAQ,QAAA;IAAAC,KAAA,EAAAC;EAAA,IAAAJ,EAGrD;EADQ;IAAAK,eAAA;IAAAC,MAAA;IAAAC;EAAA,IAAAH,EAAmC;EAE1C;IAAAI;EAAA,IAAiBV,cAAA;EACjB;IAAAW;EAAA,IAAmBZ,SAAA;EAEnB,MAAAa,cAAA,GAAuBC,KAAA,CAAAC,OAAA,CAAcV,QAAA,IAAYA,QAAA,CAAAW,GAAA,CAAAC,KAAgC,MAAe;EAEhG,MAAAC,qBAAA,IAA+BV,eAAA,IAAmBC,MAAK,GAAAO,GAAA,CAAAG,CAAA;IACrD,MAAAC,KAAA,GAAc,OAAOD,CAAA,KAAM,WAAWP,MAAA,CAAAS,SAAA,CAAiBF,CAAA,IAAKA,CAAA;IAAA;MAAAG,IAAA,EAEpDF,KAAA,CAAAE,IAAA;MAAAC,KAAA,EACCzB,cAAA,CAAesB,KAAA,CAAAV,MAAA,CAAAc,QAAA,EAAuBb,IAAA;IAAA;EAAA;EAIjD,IAAAY,KAAA,GAAY,KAAKzB,cAAA,CAAeY,MAAA,EAAAe,MAAA,EAAgBd,IAAA,GAAO;EAEvD,MAAAe,eAAA,GAAAC,QAAA,IACElB,QAAA,CAAAO,GAAA,CAAAY,GAAA;IAEI,MAAAC,QAAA,GAAiBX,qBAAA,CAAAY,MAAA,CAAAC,CAAA,IAAoCA,CAAA,CAAAT,IAAA,KAAWH,GAAA;IAAO,OAChEU,QAAA,EAAAN,KAAA;EAAA,CACT,EAAAS,IAAA,CACM;EAAA,IAINnB,cAAA,CAAAoB,MAAA,IAAwB;IAC1B,MAAAC,IAAA,GAAarB,cAAA,CAAAoB,MAAA,IAAwB;IACrCV,KAAA,CAAAA,CAAA,CAAQA,GAAGV,cAAA,CAAAoB,MAAA,IAAyBnC,cAAA,CAAeY,MAAA,EAAAe,MAAA,EAAgBd,IAAA,OAAWA,IAAA,CAAAwB,CAAA,CAC5E;MAAAC,KAAA,EACSF,IAAA;MAAAG,KAAA,EAAaX,eAAA,CAAgBb,cAAA,CAAAyB,KAAA,KAAwB;IAAA,CAAc,GAC3E;EAHH;IAAA,IAISzB,cAAA,CAAAoB,MAAA,IAAwB;MACjCV,KAAA,CAAAA,CAAA,CAAQA,GAAGV,cAAA,CAAAoB,MAAA,IAAyBnC,cAAA,CAClCe,cAAA,CAAAoB,MAAA,MAA0B,GAAIvB,MAAA,EAAAc,QAAA,GAAmBd,MAAA,EAAAe,MAAQ,EACzDd,IAAA,OACKe,eAAA,CAAgBb,cAAA,GAAiB;IAHxC;EAAA;EAAA,IAAA0B,EAAA;EAAA,IAAAnC,CAAA,QAAAmB,KAAA;IAMKgB,EAAA,GAAAC,IAAA,CAAC;MAAAC,QAAA,EAAMlB;IAAA,C;;;;;;SAAPgB,E;CACT;AA3CqD,SAAAtB,MAAAd,EAAA;EAOY;IAAAuC;EAAA,IAAAvC,EAAa;EAAA,OAAKuC,SAAA;AAAA","ignoreList":[]}

package/dist/elements/Table/DefaultCell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","LinkImport","fieldAffectsData","fieldIsID","React","useConfig","useTranslation","formatAdminURL","CodeCell","cellComponents","Link","default","DefaultCell","props","$","cellData","className","classNameFromProps","collectionSlug","field","t0","link","onClick","onClickFromProps","rowData","admin","i18n","config","t1","getEntityConfig","routes","t2","adminRoute","t3","t4","Symbol","for","collectionConfig","classNameFromConfigContext","undefined","WrapElement","wrapElementProps","prefetch","href","slug","path","encodeURIComponent","id","type","_jsx","children","nowrap","DefaultCellComponent","CellComponent","upload","name","FileCellComponent","File","_jsxs","t","label","JSON","stringify"],"sources":["../../../../src/elements/Table/DefaultCell/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, DefaultCellComponentProps, UploadFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport LinkImport from 'next/link.js'\nimport { fieldAffectsData, fieldIsID } from 'payload/shared'\nimport React from 'react' // TODO: abstract this out to support all routers\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { formatAdminURL } from '../../../utilities/formatAdminURL.js'\nimport { CodeCell } from './fields/Code/index.js'\nimport { cellComponents } from './fields/index.js'\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nexport const DefaultCell: React.FC<DefaultCellComponentProps> = (props) => {\n  const {\n    cellData,\n    className: classNameFromProps,\n    collectionSlug,\n    field,\n    field: { admin },\n    link,\n    onClick: onClickFromProps,\n    rowData,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug }) as ClientCollectionConfig\n\n  const classNameFromConfigContext = admin && 'className' in admin ? admin.className : undefined\n\n  const className =\n    classNameFromProps ||\n    (field.admin && 'className' in field.admin ? field.admin.className : null) ||\n    classNameFromConfigContext\n\n  const onClick = onClickFromProps\n\n  let WrapElement: React.ComponentType<any> | string = 'span'\n\n  const wrapElementProps: {\n    className?: string\n    href?: string\n    onClick?: () => void\n    prefetch?: false\n    type?: 'button'\n  } = {\n    className,\n  }\n\n  if (link) {\n    wrapElementProps.prefetch = false\n    WrapElement = Link\n    wrapElementProps.href = collectionConfig?.slug\n      ? formatAdminURL({\n          adminRoute,\n          path: `/collections/${collectionConfig?.slug}/${encodeURIComponent(rowData.id)}`,\n        })\n      : ''\n  }\n\n  if (typeof onClick === 'function') {\n    WrapElement = 'button'\n    wrapElementProps.type = 'button'\n    wrapElementProps.onClick = () => {\n      onClick({\n        cellData,\n        collectionSlug: collectionConfig?.slug,\n        rowData,\n      })\n    }\n  }\n\n  if (fieldIsID(field)) {\n    return (\n      <WrapElement {...wrapElementProps}>\n        <CodeCell\n          cellData={`ID: ${cellData}`}\n          collectionConfig={collectionConfig}\n          collectionSlug={collectionSlug}\n          field={{\n            ...field,\n            type: 'code',\n          }}\n          nowrap\n          rowData={rowData}\n        />\n      </WrapElement>\n    )\n  }\n\n  const DefaultCellComponent: React.FC<DefaultCellComponentProps> =\n    typeof cellData !== 'undefined' && cellComponents[field.type]\n\n  let CellComponent: React.ReactNode = null\n\n  if (DefaultCellComponent) {\n    CellComponent = <DefaultCellComponent cellData={cellData} rowData={rowData} {...props} />\n  } else if (!DefaultCellComponent) {\n    // DefaultCellComponent does not exist for certain field types like `text`\n    if (\n      collectionConfig?.upload &&\n      fieldAffectsData(field) &&\n      field.name === 'filename' &&\n      field.type === 'text'\n    ) {\n      const FileCellComponent = cellComponents.File\n\n      CellComponent = (\n        <FileCellComponent\n          cellData={cellData}\n          rowData={rowData}\n          {...(props as DefaultCellComponentProps<UploadFieldClient>)}\n          collectionConfig={collectionConfig}\n          field={field}\n        />\n      )\n    } else {\n      return (\n        <WrapElement {...wrapElementProps}>\n          {(cellData === '' || typeof cellData === 'undefined' || cellData === null) &&\n            i18n.t('general:noLabel', {\n              label: getTranslation(('label' in field ? field.label : null) || 'data', i18n),\n            })}\n          {typeof cellData === 'string' && cellData}\n          {typeof cellData === 'number' && cellData}\n          {typeof cellData === 'object' && cellData !== null && JSON.stringify(cellData)}\n        </WrapElement>\n      )\n    }\n  }\n\n  return <WrapElement {...wrapElementProps}>{CellComponent}</WrapElement>\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","LinkImport","fieldAffectsData","fieldIsID","React","useConfig","useTranslation","formatAdminURL","CodeCell","cellComponents","Link","default","DefaultCell","props","$","cellData","className","classNameFromProps","collectionSlug","field","t0","link","onClick","onClickFromProps","rowData","admin","i18n","config","t1","getEntityConfig","routes","t2","adminRoute","t3","t4","Symbol","for","collectionConfig","classNameFromConfigContext","undefined","WrapElement","wrapElementProps","prefetch","href","slug","path","encodeURIComponent","id","type","_jsx","children","nowrap","DefaultCellComponent","CellComponent","upload","name","FileCellComponent","File","_jsxs","t","label","JSON","stringify"],"sources":["../../../../src/elements/Table/DefaultCell/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, DefaultCellComponentProps, UploadFieldClient } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport LinkImport from 'next/link.js'\nimport { fieldAffectsData, fieldIsID } from 'payload/shared'\nimport React from 'react' // TODO: abstract this out to support all routers\n\nimport { useConfig } from '../../../providers/Config/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\nimport { formatAdminURL } from '../../../utilities/formatAdminURL.js'\nimport { CodeCell } from './fields/Code/index.js'\nimport { cellComponents } from './fields/index.js'\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nexport const DefaultCell: React.FC<DefaultCellComponentProps> = (props) => {\n  const {\n    cellData,\n    className: classNameFromProps,\n    collectionSlug,\n    field,\n    field: { admin },\n    link,\n    onClick: onClickFromProps,\n    rowData,\n  } = props\n\n  const { i18n } = useTranslation()\n\n  const {\n    config: {\n      routes: { admin: adminRoute },\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n\n  const classNameFromConfigContext = admin && 'className' in admin ? admin.className : undefined\n\n  const className =\n    classNameFromProps ||\n    (field.admin && 'className' in field.admin ? field.admin.className : null) ||\n    classNameFromConfigContext\n\n  const onClick = onClickFromProps\n\n  let WrapElement: React.ComponentType<any> | string = 'span'\n\n  const wrapElementProps: {\n    className?: string\n    href?: string\n    onClick?: () => void\n    prefetch?: false\n    type?: 'button'\n  } = {\n    className,\n  }\n\n  if (link) {\n    wrapElementProps.prefetch = false\n    WrapElement = Link\n    wrapElementProps.href = collectionConfig?.slug\n      ? formatAdminURL({\n          adminRoute,\n          path: `/collections/${collectionConfig?.slug}/${encodeURIComponent(rowData.id)}`,\n        })\n      : ''\n  }\n\n  if (typeof onClick === 'function') {\n    WrapElement = 'button'\n    wrapElementProps.type = 'button'\n    wrapElementProps.onClick = () => {\n      onClick({\n        cellData,\n        collectionSlug: collectionConfig?.slug,\n        rowData,\n      })\n    }\n  }\n\n  if (fieldIsID(field)) {\n    return (\n      <WrapElement {...wrapElementProps}>\n        <CodeCell\n          cellData={`ID: ${cellData}`}\n          collectionConfig={collectionConfig}\n          collectionSlug={collectionSlug}\n          field={{\n            ...field,\n            type: 'code',\n          }}\n          nowrap\n          rowData={rowData}\n        />\n      </WrapElement>\n    )\n  }\n\n  const DefaultCellComponent: React.FC<DefaultCellComponentProps> =\n    typeof cellData !== 'undefined' && cellComponents[field.type]\n\n  let CellComponent: React.ReactNode = null\n\n  if (DefaultCellComponent) {\n    CellComponent = <DefaultCellComponent cellData={cellData} rowData={rowData} {...props} />\n  } else if (!DefaultCellComponent) {\n    // DefaultCellComponent does not exist for certain field types like `text`\n    if (\n      collectionConfig?.upload &&\n      fieldAffectsData(field) &&\n      field.name === 'filename' &&\n      field.type === 'text'\n    ) {\n      const FileCellComponent = cellComponents.File\n\n      CellComponent = (\n        <FileCellComponent\n          cellData={cellData}\n          rowData={rowData}\n          {...(props as DefaultCellComponentProps<UploadFieldClient>)}\n          collectionConfig={collectionConfig}\n          field={field}\n        />\n      )\n    } else {\n      return (\n        <WrapElement {...wrapElementProps}>\n          {(cellData === '' || typeof cellData === 'undefined' || cellData === null) &&\n            i18n.t('general:noLabel', {\n              label: getTranslation(('label' in field ? field.label : null) || 'data', i18n),\n            })}\n          {typeof cellData === 'string' && cellData}\n          {typeof cellData === 'number' && cellData}\n          {typeof cellData === 'object' && cellData !== null && JSON.stringify(cellData)}\n        </WrapElement>\n      )\n    }\n  }\n\n  return <WrapElement {...wrapElementProps}>{CellComponent}</WrapElement>\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,5 @@
 import type { DescriptionFunction, StaticDescription } from 'payload';
 import React from 'react';
-import './index.scss';
 export type ViewDescriptionComponent = React.ComponentType<any>;
 type Description = DescriptionFunction | StaticDescription | string | ViewDescriptionComponent;
 export type ViewDescriptionProps = {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ViewDescription/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAGrE,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,cAAc,CAAA;AAErB,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;AAE/D,KAAK,WAAW,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,MAAM,GAAG,wBAAwB,CAAA;AAE9F,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAA;CACzC,CAAA;AAED,wBAAgB,WAAW,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,IAAI,wBAAwB,CAE7F;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAS1D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ViewDescription/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAA;AAGrE,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,wBAAwB,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;AAE/D,KAAK,WAAW,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,MAAM,GAAG,wBAAwB,CAAA;AAE9F,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAA;CACzC,CAAA;AAED,wBAAgB,WAAW,CAAC,WAAW,EAAE,WAAW,GAAG,WAAW,IAAI,wBAAwB,CAE7F;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAS1D,CAAA"}

package/dist/elements/ViewDescription/index.js

@@ -5,7 +5,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { getTranslation } from '@payloadcms/translations';
 import React from 'react';
 import { useTranslation } from '../../providers/Translation/index.js';
-import './index.scss';
 export function isComponent(description) {
   return /*#__PURE__*/React.isValidElement(description);
 }
@@ -21,7 +20,7 @@ export const ViewDescription = props => {
     let t0;
     if ($[0] !== description || $[1] !== i18n) {
       t0 = _jsx("div", {
-        className: "view-description",
+        className: "custom-view-description",
         children: getTranslation(description, i18n)
       });
       $[0] = description;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","isComponent","description","isValidElement","ViewDescription","props","$","i18n","t0","_jsx","className","children"],"sources":["../../../src/elements/ViewDescription/index.tsx"],"sourcesContent":["'use client'\nimport type { DescriptionFunction, StaticDescription } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\n\nexport type ViewDescriptionComponent = React.ComponentType<any>\n\ntype Description = DescriptionFunction | StaticDescription | string | ViewDescriptionComponent\n\nexport type ViewDescriptionProps = {\n  readonly description?: StaticDescription\n}\n\nexport function isComponent(description: Description): description is ViewDescriptionComponent {\n  return React.isValidElement(description)\n}\n\nexport const ViewDescription: React.FC<ViewDescriptionProps> = (props) => {\n  const { i18n } = useTranslation()\n  const { description } = props\n\n  if (description) {\n    return <div className=\"view-description\">{getTranslation(description, i18n)}</div>\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAC/B,OAAO;AAUP,OAAO,SAASC,YAAYC,WAAwB;EAClD,oBAAOH,KAAA,CAAMI,cAAc,CAACD,WAAA;AAC9B;AAEA,OAAO,MAAME,eAAA,GAAkDC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAC7D;IAAAU;EAAA,IAAiBP,cAAA;EACjB;IAAAE;EAAA,IAAwBG,KAAA;EAAA,IAEpBH,WAAA;IAAA,IAAAM,EAAA;IAAA,IAAAF,CAAA,QAAAJ,WAAA,IAAAI,CAAA,QAAAC,IAAA;MACKC,EAAA,GAAAC,IAAA,CAAC;QAAAC,SAAA,EAAc;QAAAC,QAAA,EAAoBb,cAAA,CAAeI,WAAA,EAAaK,IAAA;MAAA,C;;;;;;;WAA/DC,E;;;CAIX","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","getTranslation","React","useTranslation","isComponent","description","isValidElement","ViewDescription","props","$","i18n","t0","_jsx","className","children"],"sources":["../../../src/elements/ViewDescription/index.tsx"],"sourcesContent":["'use client'\nimport type { DescriptionFunction, StaticDescription } from 'payload'\n\nimport { getTranslation } from '@payloadcms/translations'\nimport React from 'react'\n\nimport { useTranslation } from '../../providers/Translation/index.js'\n\nexport type ViewDescriptionComponent = React.ComponentType<any>\n\ntype Description = DescriptionFunction | StaticDescription | string | ViewDescriptionComponent\n\nexport type ViewDescriptionProps = {\n  readonly description?: StaticDescription\n}\n\nexport function isComponent(description: Description): description is ViewDescriptionComponent {\n  return React.isValidElement(description)\n}\n\nexport const ViewDescription: React.FC<ViewDescriptionProps> = (props) => {\n  const { i18n } = useTranslation()\n  const { description } = props\n\n  if (description) {\n    return <div className=\"custom-view-description\">{getTranslation(description, i18n)}</div>\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,SAASC,cAAc,QAAQ;AAC/B,OAAOC,KAAA,MAAW;AAElB,SAASC,cAAc,QAAQ;AAU/B,OAAO,SAASC,YAAYC,WAAwB;EAClD,oBAAOH,KAAA,CAAMI,cAAc,CAACD,WAAA;AAC9B;AAEA,OAAO,MAAME,eAAA,GAAkDC,KAAA;EAAA,MAAAC,CAAA,GAAAT,EAAA;EAC7D;IAAAU;EAAA,IAAiBP,cAAA;EACjB;IAAAE;EAAA,IAAwBG,KAAA;EAAA,IAEpBH,WAAA;IAAA,IAAAM,EAAA;IAAA,IAAAF,CAAA,QAAAJ,WAAA,IAAAI,CAAA,QAAAC,IAAA;MACKC,EAAA,GAAAC,IAAA,CAAC;QAAAC,SAAA,EAAc;QAAAC,QAAA,EAA2Bb,cAAA,CAAeI,WAAA,EAAaK,IAAA;MAAA,C;;;;;;;WAAtEC,E;;;CAIX","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/DefaultFilter/index.d.ts

@@ -1,10 +1,11 @@
-import type { Operator, Option } from 'payload';
+import type { Operator, Option, ResolvedFilterOptions } from 'payload';
 import React from 'react';
-import type { FieldCondition } from '../../types.js';
+import type { ReducedField } from '../../types.js';
 type Props = {
     booleanSelect: boolean;
     disabled: boolean;
-    internalField: FieldCondition;
+    filterOptions: ResolvedFilterOptions;
+    internalField: ReducedField;
     onChange: React.Dispatch<React.SetStateAction<string>>;
     operator: Operator;
     options: Option[];

package/dist/elements/WhereBuilder/Condition/DefaultFilter/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/DefaultFilter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAsC,MAAM,SAAS,CAAA;AAEnF,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAQpD,KAAK,KAAK,GAAG;IACX,aAAa,EAAE,OAAO,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,cAAc,CAAA;IAC7B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAA;IACtD,QAAQ,EAAE,QAAQ,CAAA;IAClB,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuEzC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/DefaultFilter/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,QAAQ,EACR,MAAM,EACN,qBAAqB,EAGtB,MAAM,SAAS,CAAA;AAEhB,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAQlD,KAAK,KAAK,GAAG;IACX,aAAa,EAAE,OAAO,CAAA;IACtB,QAAQ,EAAE,OAAO,CAAA;IACjB,aAAa,EAAE,qBAAqB,CAAA;IACpC,aAAa,EAAE,YAAY,CAAA;IAC3B,QAAQ,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAA;IACtD,QAAQ,EAAE,QAAQ,CAAA;IAClB,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0EzC,CAAA"}

package/dist/elements/WhereBuilder/Condition/DefaultFilter/index.js

@@ -8,6 +8,7 @@ import { Text } from '../Text/index.js';
 export const DefaultFilter = ({
   booleanSelect,
   disabled,
+  filterOptions,
   internalField,
   onChange,
   operator,
@@ -18,6 +19,7 @@ export const DefaultFilter = ({
     return /*#__PURE__*/_jsx(Select, {
       disabled: disabled,
       field: internalField.field,
+      isClearable: !booleanSelect,
       onChange: onChange,
       operator: operator,
       options: options,
@@ -50,6 +52,7 @@ export const DefaultFilter = ({
         return /*#__PURE__*/_jsx(RelationshipFilter, {
           disabled: disabled,
           field: internalField.field,
+          filterOptions: filterOptions,
           onChange: onChange,
           operator: operator,
           value: value

package/dist/elements/WhereBuilder/Condition/DefaultFilter/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","DateFilter","NumberFilter","RelationshipFilter","Select","Text","DefaultFilter","booleanSelect","disabled","internalField","onChange","operator","options","value","includes","field","type","_jsx"],"sources":["../../../../../src/elements/WhereBuilder/Condition/DefaultFilter/index.tsx"],"sourcesContent":["import type { Operator, Option, SelectFieldClient, TextFieldClient } from 'payload'\n\nimport React from 'react'\n\nimport type { FieldCondition } from '../../types.js'\n\nimport { DateFilter } from '../Date/index.js'\nimport { NumberFilter } from '../Number/index.js'\nimport { RelationshipFilter } from '../Relationship/index.js'\nimport { Select } from '../Select/index.js'\nimport { Text } from '../Text/index.js'\n\ntype Props = {\n  booleanSelect: boolean\n  disabled: boolean\n  internalField: FieldCondition\n  onChange: React.Dispatch<React.SetStateAction<string>>\n  operator: Operator\n  options: Option[]\n  value: string\n}\n\nexport const DefaultFilter: React.FC<Props> = ({\n  booleanSelect,\n  disabled,\n  internalField,\n  onChange,\n  operator,\n  options,\n  value,\n}) => {\n  if (booleanSelect || ['radio', 'select'].includes(internalField?.field?.type)) {\n    return (\n      <Select\n        disabled={disabled}\n        field={internalField.field as SelectFieldClient}\n        onChange={onChange}\n        operator={operator}\n        options={options}\n        value={value}\n      />\n    )\n  }\n\n  switch (internalField?.field?.type) {\n    case 'date': {\n      return (\n        <DateFilter\n          disabled={disabled}\n          field={internalField.field}\n          onChange={onChange}\n          operator={operator}\n          value={value}\n        />\n      )\n    }\n\n    case 'number': {\n      return (\n        <NumberFilter\n          disabled={disabled}\n          field={internalField.field}\n          onChange={onChange}\n          operator={operator}\n          value={value}\n        />\n      )\n    }\n\n    case 'relationship': {\n      return (\n        <RelationshipFilter\n          disabled={disabled}\n          field={internalField.field}\n          onChange={onChange}\n          operator={operator}\n          value={value}\n        />\n      )\n    }\n\n    default: {\n      return (\n        <Text\n          disabled={disabled}\n          field={internalField?.field as TextFieldClient}\n          onChange={onChange}\n          operator={operator}\n          value={value}\n        />\n      )\n    }\n  }\n}\n"],"mappings":";AAEA,OAAOA,KAAA,MAAW;AAIlB,SAASC,UAAU,QAAQ;AAC3B,SAASC,YAAY,QAAQ;AAC7B,SAASC,kBAAkB,QAAQ;AACnC,SAASC,MAAM,QAAQ;AACvB,SAASC,IAAI,QAAQ;AAYrB,OAAO,MAAMC,aAAA,GAAiCA,CAAC;EAC7CC,aAAa;EACbC,QAAQ;EACRC,aAAa;EACbC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC;AAAK,CACN;EACC,IAAIN,aAAA,IAAiB,CAAC,SAAS,SAAS,CAACO,QAAQ,CAACL,aAAA,EAAeM,KAAA,EAAOC,IAAA,GAAO;IAC7E,oBACEC,IAAA,CAACb,MAAA;MACCI,QAAA,EAAUA,QAAA;MACVO,KAAA,EAAON,aAAA,CAAcM,KAAK;MAC1BL,QAAA,EAAUA,QAAA;MACVC,QAAA,EAAUA,QAAA;MACVC,OAAA,EAASA,OAAA;MACTC,KAAA,EAAOA;;EAGb;EAEA,QAAQJ,aAAA,EAAeM,KAAA,EAAOC,IAAA;IAC5B,KAAK;MAAQ;QACX,oBACEC,IAAA,CAAChB,UAAA;UACCO,QAAA,EAAUA,QAAA;UACVO,KAAA,EAAON,aAAA,CAAcM,KAAK;UAC1BL,QAAA,EAAUA,QAAA;UACVC,QAAA,EAAUA,QAAA;UACVE,KAAA,EAAOA;;MAGb;IAEA,KAAK;MAAU;QACb,oBACEI,IAAA,CAACf,YAAA;UACCM,QAAA,EAAUA,QAAA;UACVO,KAAA,EAAON,aAAA,CAAcM,KAAK;UAC1BL,QAAA,EAAUA,QAAA;UACVC,QAAA,EAAUA,QAAA;UACVE,KAAA,EAAOA;;MAGb;IAEA,KAAK;MAAgB;QACnB,oBACEI,IAAA,CAACd,kBAAA;UACCK,QAAA,EAAUA,QAAA;UACVO,KAAA,EAAON,aAAA,CAAcM,KAAK;UAC1BL,QAAA,EAAUA,QAAA;UACVC,QAAA,EAAUA,QAAA;UACVE,KAAA,EAAOA;;MAGb;IAEA;MAAS;QACP,oBACEI,IAAA,CAACZ,IAAA;UACCG,QAAA,EAAUA,QAAA;UACVO,KAAA,EAAON,aAAA,EAAeM,KAAA;UACtBL,QAAA,EAAUA,QAAA;UACVC,QAAA,EAAUA,QAAA;UACVE,KAAA,EAAOA;;MAGb;EACF;AACF","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","DateFilter","NumberFilter","RelationshipFilter","Select","Text","DefaultFilter","booleanSelect","disabled","filterOptions","internalField","onChange","operator","options","value","includes","field","type","_jsx","isClearable"],"sources":["../../../../../src/elements/WhereBuilder/Condition/DefaultFilter/index.tsx"],"sourcesContent":["import type {\n  Operator,\n  Option,\n  ResolvedFilterOptions,\n  SelectFieldClient,\n  TextFieldClient,\n} from 'payload'\n\nimport React from 'react'\n\nimport type { ReducedField } from '../../types.js'\n\nimport { DateFilter } from '../Date/index.js'\nimport { NumberFilter } from '../Number/index.js'\nimport { RelationshipFilter } from '../Relationship/index.js'\nimport { Select } from '../Select/index.js'\nimport { Text } from '../Text/index.js'\n\ntype Props = {\n  booleanSelect: boolean\n  disabled: boolean\n  filterOptions: ResolvedFilterOptions\n  internalField: ReducedField\n  onChange: React.Dispatch<React.SetStateAction<string>>\n  operator: Operator\n  options: Option[]\n  value: string\n}\n\nexport const DefaultFilter: React.FC<Props> = ({\n  booleanSelect,\n  disabled,\n  filterOptions,\n  internalField,\n  onChange,\n  operator,\n  options,\n  value,\n}) => {\n  if (booleanSelect || ['radio', 'select'].includes(internalField?.field?.type)) {\n    return (\n      <Select\n        disabled={disabled}\n        field={internalField.field as SelectFieldClient}\n        isClearable={!booleanSelect}\n        onChange={onChange}\n        operator={operator}\n        options={options}\n        value={value}\n      />\n    )\n  }\n\n  switch (internalField?.field?.type) {\n    case 'date': {\n      return (\n        <DateFilter\n          disabled={disabled}\n          field={internalField.field}\n          onChange={onChange}\n          operator={operator}\n          value={value}\n        />\n      )\n    }\n\n    case 'number': {\n      return (\n        <NumberFilter\n          disabled={disabled}\n          field={internalField.field}\n          onChange={onChange}\n          operator={operator}\n          value={value}\n        />\n      )\n    }\n\n    case 'relationship': {\n      return (\n        <RelationshipFilter\n          disabled={disabled}\n          field={internalField.field}\n          filterOptions={filterOptions}\n          onChange={onChange}\n          operator={operator}\n          value={value}\n        />\n      )\n    }\n\n    default: {\n      return (\n        <Text\n          disabled={disabled}\n          field={internalField?.field as TextFieldClient}\n          onChange={onChange}\n          operator={operator}\n          value={value}\n        />\n      )\n    }\n  }\n}\n"],"mappings":";AAQA,OAAOA,KAAA,MAAW;AAIlB,SAASC,UAAU,QAAQ;AAC3B,SAASC,YAAY,QAAQ;AAC7B,SAASC,kBAAkB,QAAQ;AACnC,SAASC,MAAM,QAAQ;AACvB,SAASC,IAAI,QAAQ;AAarB,OAAO,MAAMC,aAAA,GAAiCA,CAAC;EAC7CC,aAAa;EACbC,QAAQ;EACRC,aAAa;EACbC,aAAa;EACbC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC;AAAK,CACN;EACC,IAAIP,aAAA,IAAiB,CAAC,SAAS,SAAS,CAACQ,QAAQ,CAACL,aAAA,EAAeM,KAAA,EAAOC,IAAA,GAAO;IAC7E,oBACEC,IAAA,CAACd,MAAA;MACCI,QAAA,EAAUA,QAAA;MACVQ,KAAA,EAAON,aAAA,CAAcM,KAAK;MAC1BG,WAAA,EAAa,CAACZ,aAAA;MACdI,QAAA,EAAUA,QAAA;MACVC,QAAA,EAAUA,QAAA;MACVC,OAAA,EAASA,OAAA;MACTC,KAAA,EAAOA;;EAGb;EAEA,QAAQJ,aAAA,EAAeM,KAAA,EAAOC,IAAA;IAC5B,KAAK;MAAQ;QACX,oBACEC,IAAA,CAACjB,UAAA;UACCO,QAAA,EAAUA,QAAA;UACVQ,KAAA,EAAON,aAAA,CAAcM,KAAK;UAC1BL,QAAA,EAAUA,QAAA;UACVC,QAAA,EAAUA,QAAA;UACVE,KAAA,EAAOA;;MAGb;IAEA,KAAK;MAAU;QACb,oBACEI,IAAA,CAAChB,YAAA;UACCM,QAAA,EAAUA,QAAA;UACVQ,KAAA,EAAON,aAAA,CAAcM,KAAK;UAC1BL,QAAA,EAAUA,QAAA;UACVC,QAAA,EAAUA,QAAA;UACVE,KAAA,EAAOA;;MAGb;IAEA,KAAK;MAAgB;QACnB,oBACEI,IAAA,CAACf,kBAAA;UACCK,QAAA,EAAUA,QAAA;UACVQ,KAAA,EAAON,aAAA,CAAcM,KAAK;UAC1BP,aAAA,EAAeA,aAAA;UACfE,QAAA,EAAUA,QAAA;UACVC,QAAA,EAAUA,QAAA;UACVE,KAAA,EAAOA;;MAGb;IAEA;MAAS;QACP,oBACEI,IAAA,CAACb,IAAA;UACCG,QAAA,EAAUA,QAAA;UACVQ,KAAA,EAAON,aAAA,EAAeM,KAAA;UACtBL,QAAA,EAAUA,QAAA;UACVC,QAAA,EAAUA,QAAA;UACVE,KAAA,EAAOA;;MAGb;EACF;AACF","ignoreList":[]}

package/dist/elements/WhereBuilder/Condition/Relationship/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Relationship/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAG3E,OAAO,KAAK,EAAE,KAAK,EAAqB,MAAM,YAAY,CAAA;AAM1D,OAAO,cAAc,CAAA;AAOrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAuV9C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/elements/WhereBuilder/Condition/Relationship/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAG3E,OAAO,KAAK,EAAE,KAAK,EAAqB,MAAM,YAAY,CAAA;AAQ1D,OAAO,cAAc,CAAA;AAMrB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA6Y9C,CAAA"}

package/dist/elements/WhereBuilder/Condition/Relationship/index.js

@@ -4,11 +4,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as qs from 'qs-esm';
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
 import { useDebounce } from '../../../../hooks/useDebounce.js';
+import { useEffectEvent } from '../../../../hooks/useEffectEvent.js';
 import { useConfig } from '../../../../providers/Config/index.js';
 import { useTranslation } from '../../../../providers/Translation/index.js';
 import { ReactSelect } from '../../../ReactSelect/index.js';
-import './index.scss';
 import optionsReducer from './optionsReducer.js';
+import './index.scss';
 const baseClass = 'condition-value-relationship';
 const maxResultsPerRequest = 10;
 export const RelationshipFilter = props => {
@@ -21,6 +22,7 @@ export const RelationshipFilter = props => {
       hasMany,
       relationTo
     },
+    filterOptions,
     onChange,
     value
   } = props;
@@ -36,23 +38,18 @@ export const RelationshipFilter = props => {
   const hasMultipleRelations = Array.isArray(relationTo);
   const [options, dispatchOptions] = useReducer(optionsReducer, []);
   const [search, setSearch] = useState('');
+  const debouncedSearch = useDebounce(search, 300);
   const [errorLoading, setErrorLoading] = useState('');
   const [hasLoadedFirstOptions, setHasLoadedFirstOptions] = useState(false);
-  const debouncedSearch = useDebounce(search, 300);
   const {
     i18n,
     t
   } = useTranslation();
   const relationSlugs = hasMultipleRelations ? relationTo : [relationTo];
-  const initialRelationMap = () => {
-    const map = new Map();
-    relationSlugs.forEach(relation => {
-      map.set(relation, 1);
-    });
-    return map;
-  };
-  const nextPageByRelationshipRef = React.useRef(initialRelationMap());
-  const partiallyLoadedRelationshipSlugs = React.useRef(relationSlugs);
+  const loadedRelationships = React.useRef(new Map(relationSlugs.map(relation => [relation, {
+    hasLoadedAll: false,
+    nextPage: 1
+  }])));
   const addOptions = useCallback((data, relation_0) => {
     const collection = getEntityConfig({
       collectionSlug: relation_0
@@ -66,28 +63,31 @@ export const RelationshipFilter = props => {
       relation: relation_0
     });
   }, [hasMultipleRelations, i18n, getEntityConfig]);
-  const loadRelationOptions = React.useCallback(async ({
+  const loadOptions = useEffectEvent(async ({
     abortController,
     relationSlug
   }) => {
-    if (relationSlug && partiallyLoadedRelationshipSlugs.current.includes(relationSlug)) {
+    const loadedRelationship = loadedRelationships.current.get(relationSlug);
+    if (relationSlug && !loadedRelationship.hasLoadedAll) {
       const collection_0 = getEntityConfig({
         collectionSlug: relationSlug
       });
       const fieldToSearch = collection_0?.admin?.useAsTitle || 'id';
-      const pageIndex = nextPageByRelationshipRef.current.get(relationSlug);
       const where = {
         and: []
       };
       const query = {
         depth: 0,
         limit: maxResultsPerRequest,
-        page: pageIndex,
+        page: loadedRelationship.nextPage,
         select: {
           [fieldToSearch]: true
         },
         where
       };
+      if (filterOptions && filterOptions?.[relationSlug]) {
+        query.where.and.push(filterOptions[relationSlug]);
+      }
       if (debouncedSearch) {
         query.where.and.push({
           [fieldToSearch]: {
@@ -110,9 +110,15 @@ export const RelationshipFilter = props => {
           if (data_0.docs.length > 0) {
             addOptions(data_0, relationSlug);
             if (data_0.nextPage) {
-              nextPageByRelationshipRef.current.set(relationSlug, data_0.nextPage);
+              loadedRelationships.current.set(relationSlug, {
+                hasLoadedAll: false,
+                nextPage: data_0.nextPage
+              });
             } else {
-              partiallyLoadedRelationshipSlugs.current = partiallyLoadedRelationshipSlugs.current.filter(partiallyLoadedRelation => partiallyLoadedRelation !== relationSlug);
+              loadedRelationships.current.set(relationSlug, {
+                hasLoadedAll: true,
+                nextPage: null
+              });
             }
           }
         } else {
@@ -120,21 +126,23 @@ export const RelationshipFilter = props => {
         }
       } catch (e) {
         if (!abortController.signal.aborted) {
-          console.error(e);
+          console.error(e) // eslint-disable-line no-console
+          ;
         }
       }
     }
     setHasLoadedFirstOptions(true);
-  }, [addOptions, api, debouncedSearch, getEntityConfig, i18n.language, serverURL, t]);
-  const loadMoreOptions = React.useCallback(() => {
-    if (partiallyLoadedRelationshipSlugs.current.length > 0) {
+  });
+  const handleScrollToBottom = React.useCallback(() => {
+    const relationshipToLoad = loadedRelationships.current.entries().next().value;
+    if (relationshipToLoad[0] && !relationshipToLoad[1].hasLoadedAll) {
       const abortController_0 = new AbortController();
-      void loadRelationOptions({
+      void loadOptions({
         abortController: abortController_0,
-        relationSlug: partiallyLoadedRelationshipSlugs.current[0]
+        relationSlug: relationshipToLoad[0]
       });
     }
-  }, [loadRelationOptions]);
+  }, []);
   const findOptionsByValue = useCallback(() => {
     if (value) {
       if (hasMany) {
@@ -180,22 +188,24 @@ export const RelationshipFilter = props => {
     }
     return undefined;
   }, [hasMany, hasMultipleRelations, value, options]);
-  const handleInputChange = input => {
+  const handleInputChange = useCallback(input => {
     if (input !== search) {
       dispatchOptions({
         type: 'CLEAR',
         i18n,
         required: false
       });
-      const relationSlug_0 = partiallyLoadedRelationshipSlugs.current[0];
-      partiallyLoadedRelationshipSlugs.current = relationSlugs;
-      nextPageByRelationshipRef.current.set(relationSlug_0, 1);
+      const relationSlugs_0 = Array.isArray(relationTo) ? relationTo : [relationTo];
+      loadedRelationships.current = new Map(relationSlugs_0.map(relation_1 => [relation_1, {
+        hasLoadedAll: false,
+        nextPage: 1
+      }]));
       setSearch(input);
     }
-  };
-  const addOptionByID = useCallback(async (id, relation_1) => {
-    if (!errorLoading && id !== 'null' && id && relation_1) {
-      const response_0 = await fetch(`${serverURL}${api}/${relation_1}/${id}?depth=0`, {
+  }, [i18n, relationTo, search]);
+  const addOptionByID = useCallback(async (id, relation_2) => {
+    if (!errorLoading && id !== 'null' && id && relation_2) {
+      const response_0 = await fetch(`${serverURL}${api}/${relation_2}/${id}?depth=0`, {
         credentials: 'include',
         headers: {
           'Accept-Language': i18n.language
@@ -205,7 +215,7 @@ export const RelationshipFilter = props => {
         const data_1 = await response_0.json();
         addOptions({
           docs: [data_1]
-        }, relation_1);
+        }, relation_2);
       } else {
         // eslint-disable-next-line no-console
         console.error(t('error:loadingDocument', {
@@ -215,18 +225,29 @@ export const RelationshipFilter = props => {
     }
   }, [i18n, addOptions, api, errorLoading, serverURL, t]);
   /**
-  * 1. Trigger initial relationship options fetch
-  * 2. When search changes, loadRelationOptions will
-  *    fire off again
+  * When `relationTo` changes externally, reset the options and reload them from scratch
+  * The `loadOptions` dependency is a useEffectEvent which has no dependencies of its own
+  * This means we can safely depend on it without it triggering this effect to run
+  * This is useful because this effect should _only_ run when `relationTo` changes
   */
   useEffect(() => {
     const relations = Array.isArray(relationTo) ? relationTo : [relationTo];
+    loadedRelationships.current = new Map(relations.map(relation_3 => [relation_3, {
+      hasLoadedAll: false,
+      nextPage: 1
+    }]));
+    dispatchOptions({
+      type: 'CLEAR',
+      i18n,
+      required: false
+    });
+    setHasLoadedFirstOptions(false);
     const abortControllers = [];
-    relations.forEach(relation_2 => {
+    relations.forEach(relation_4 => {
       const abortController_1 = new AbortController();
-      void loadRelationOptions({
+      void loadOptions({
         abortController: abortController_1,
-        relationSlug: relation_2
+        relationSlug: relation_4
       });
       abortControllers.push(abortController_1);
     });
@@ -241,10 +262,9 @@ export const RelationshipFilter = props => {
         }
       });
     };
-  }, [i18n, loadRelationOptions, relationTo]);
+  }, [i18n, relationTo, debouncedSearch]);
   /**
-  * Load any options that were not returned
-  * in the first 10 of each relation fetch
+  * Load any other options that might exist in the value that were not loaded already
   */
   useEffect(() => {
     if (value && hasLoadedFirstOptions) {
@@ -305,7 +325,7 @@ export const RelationshipFilter = props => {
         }
       },
       onInputChange: handleInputChange,
-      onMenuScrollToBottom: loadMoreOptions,
+      onMenuScrollToBottom: handleScrollToBottom,
       options: options,
       placeholder: t('general:selectValue'),
       value: valueToRender