npm - @payloadcms/ui - Versions diffs - 3.0.0-beta.64 → 3.0.0-beta.66 - Mend

@payloadcms/ui 3.0.0-beta.64 → 3.0.0-beta.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/dist/elements/DatePicker/index.scss CHANGED Viewed

@@ -189,7 +189,9 @@ $cal-icon-width: 18px;
       border-right: 1px solid var(--theme-elevation-150);
     }
-    &__time {
+    &__time,
+    &__time-container,
+    .react-datepicker__time-container .react-datepicker__time {
       background: none;
     }

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

	@@ -1 +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,KAAsC,MAAM,OAAO,CAAA;~~AAM1D~~,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yDAAyD,CAAA;AAiBvF,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;CAC3C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,~~CA2IpD~~,CAAA"}
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,KAAsC,MAAM,OAAO,CAAA;AAQ1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,yDAAyD,CAAA;AAiBvF,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;CAC3C,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyLpD,CAAA"}

package/dist/elements/ListControls/index.js CHANGED Viewed

@@ -5,6 +5,7 @@ import { getTranslation } from '@payloadcms/translations';
 import React, { useEffect, useRef, useState } from 'react';
 import AnimateHeightImport from 'react-animate-height';
 const AnimateHeight = AnimateHeightImport.default || AnimateHeightImport;
+import { useListInfo } from '@payloadcms/ui';
 import { useUseTitleField } from '../../hooks/useUseAsTitle.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { useListQuery } from '../../providers/ListQuery/index.js';
@@ -29,10 +30,17 @@ const baseClass = 'list-controls';
  */ export const ListControls = (props)=>{
     const { collectionConfig, enableColumns = true, enableSort = false, fieldMap } = props;
     const { handleSearchChange } = useListQuery();
+    const { collectionSlug } = useListInfo();
     const { searchParams } = useSearchParams();
     const titleField = useUseTitleField(collectionConfig, fieldMap);
     const { i18n, t } = useTranslation();
     const { breakpoints: { s: smallBreak } } = useWindowInfo();
+    const [search, setSearch] = useState(typeof searchParams?.search === 'string' ? searchParams?.search : '');
+    const searchLabel = (titleField && getTranslation('label' in titleField.fieldComponentProps && typeof titleField.fieldComponentProps.label === 'string' ? titleField.fieldComponentProps.label : titleField.name, i18n)) ?? 'ID';
+    const listSearchableFields = getTextFieldsToBeSearched(collectionConfig.admin.listSearchableFields, fieldMap);
+    const searchLabelTranslated = useRef(t('general:searchBy', {
+        label: getTranslation(searchLabel, i18n)
+    }));
     const hasWhereParam = useRef(Boolean(searchParams?.where));
     const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where);
     const [visibleDrawer, setVisibleDrawer] = useState(shouldInitializeWhereOpened ? 'where' : undefined);
@@ -47,6 +55,31 @@ const baseClass = 'list-controls';
         setVisibleDrawer,
         searchParams?.where
     ]);
+    useEffect(()=>{
+        if (listSearchableFields?.length > 0) {
+            searchLabelTranslated.current = listSearchableFields.reduce((placeholderText, field, i)=>{
+                const label = 'fieldComponentProps' in field && 'label' in field.fieldComponentProps && field.fieldComponentProps.label ? field.fieldComponentProps.label : field.name;
+                if (i === 0) {
+                    return `${t('general:searchBy', {
+                        label: getTranslation(label, i18n)
+                    })}`;
+                }
+                if (i === listSearchableFields.length - 1) {
+                    return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`;
+                }
+                return `${placeholderText}, ${getTranslation(label, i18n)}`;
+            }, '');
+        } else {
+            searchLabelTranslated.current = t('general:searchBy', {
+                label: getTranslation(searchLabel, i18n)
+            });
+        }
+    }, [
+        t,
+        listSearchableFields,
+        i18n,
+        searchLabel
+    ]);
     return /*#__PURE__*/ _jsxs("div", {
         className: baseClass,
         children: [
@@ -54,11 +87,13 @@ const baseClass = 'list-controls';
                 className: `${baseClass}__wrap`,
                 children: [
                     /*#__PURE__*/ _jsx(SearchFilter, {
-                        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: getTextFieldsToBeSearched(collectionConfig.admin.listSearchableFields, fieldMap)
-                    }),
+                        initialParams: searchParams,
+                        label: searchLabelTranslated.current,
+                        setValue: setSearch,
+                        value: search
+                    }, collectionSlug),
                     /*#__PURE__*/ _jsx("div", {
                         className: `${baseClass}__buttons`,
                         children: /*#__PURE__*/ _jsxs("div", {

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

	@@ -1 +1 @@
1	- {"version":3,"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, { useEffect, useRef, 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 '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { ChevronIcon } 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 { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.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}\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 { collectionConfig, enableColumns = true, enableSort = false, fieldMap } = props\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 hasWhereParam = useRef(Boolean(searchParams?.where))\n\n const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n const [visibleDrawer, setVisibleDrawer] = useState<'columns' \| 'sort' \| 'where'>(\n shouldInitializeWhereOpened ? 'where' : undefined,\n )\n\n useEffect(() => {\n if (hasWhereParam.current && !searchParams?.where) {\n setVisibleDrawer(undefined)\n hasWhereParam.current = false\n } else if (searchParams?.where) {\n hasWhereParam.current = true\n }\n }, [setVisibleDrawer, searchParams?.where])\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={getTextFieldsToBeSearched(\n collectionConfig.admin.listSearchableFields,\n fieldMap,\n )}\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={<ChevronIcon />}\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={<ChevronIcon />}\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 fieldMap={fieldMap}\n key={String(hasWhereParam.current && !searchParams?.where)}\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":["useWindowInfo","getTranslation","React","useEffect","useRef","useState","AnimateHeightImport","AnimateHeight","default","useUseTitleField","ChevronIcon","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fieldMap","handleSearchChange","searchParams","titleField","i18n","t","breakpoints","s","smallBreak","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","div","className","fieldLabel","fieldComponentProps","label","name","fieldName","handleChange","listSearchableFields","admin","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","collectionSlug","slug","collectionPluralLabel","labels","plural","String","p"],"mappings":"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"}
1	+ {"version":3,"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, { useEffect, useRef, useState } from 'react'\nimport AnimateHeightImport from 'react-animate-height'\n\nconst AnimateHeight = (AnimateHeightImport.default \|\|\n AnimateHeightImport) as typeof AnimateHeightImport.default\n\nimport { useListInfo } from '@payloadcms/ui'\n\nimport type { FieldMap } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { ChevronIcon } 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 { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.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}\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 { collectionConfig, enableColumns = true, enableSort = false, fieldMap } = props\n\n const { handleSearchChange } = useListQuery()\n const { collectionSlug } = useListInfo()\n const { searchParams } = useSearchParams()\n const titleField = useUseTitleField(collectionConfig, fieldMap)\n const { i18n, t } = useTranslation()\n const {\n breakpoints: { s: smallBreak },\n } = useWindowInfo()\n const [search, setSearch] = useState(\n typeof searchParams?.search === 'string' ? searchParams?.search : '',\n )\n\n const searchLabel =\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 'ID'\n\n const listSearchableFields = getTextFieldsToBeSearched(\n collectionConfig.admin.listSearchableFields,\n fieldMap,\n )\n\n const searchLabelTranslated = useRef(\n t('general:searchBy', { label: getTranslation(searchLabel, i18n) }),\n )\n\n const hasWhereParam = useRef(Boolean(searchParams?.where))\n\n const shouldInitializeWhereOpened = validateWhereQuery(searchParams?.where)\n const [visibleDrawer, setVisibleDrawer] = useState<'columns' \| 'sort' \| 'where'>(\n shouldInitializeWhereOpened ? 'where' : undefined,\n )\n\n useEffect(() => {\n if (hasWhereParam.current && !searchParams?.where) {\n setVisibleDrawer(undefined)\n hasWhereParam.current = false\n } else if (searchParams?.where) {\n hasWhereParam.current = true\n }\n }, [setVisibleDrawer, searchParams?.where])\n\n useEffect(() => {\n if (listSearchableFields?.length > 0) {\n searchLabelTranslated.current = listSearchableFields.reduce(\n (placeholderText: string, field, i: number) => {\n const label =\n 'fieldComponentProps' in field &&\n 'label' in field.fieldComponentProps &&\n field.fieldComponentProps.label\n ? field.fieldComponentProps.label\n : field.name\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 <SearchFilter\n fieldName={titleField?.name}\n handleChange={handleSearchChange}\n initialParams={searchParams}\n key={collectionSlug}\n label={searchLabelTranslated.current}\n setValue={setSearch}\n value={search}\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={<ChevronIcon />}\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={<ChevronIcon />}\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 fieldMap={fieldMap}\n key={String(hasWhereParam.current && !searchParams?.where)}\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":["useWindowInfo","getTranslation","React","useEffect","useRef","useState","AnimateHeightImport","AnimateHeight","default","useListInfo","useUseTitleField","ChevronIcon","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fieldMap","handleSearchChange","collectionSlug","searchParams","titleField","i18n","t","breakpoints","s","smallBreak","search","setSearch","searchLabel","fieldComponentProps","label","name","listSearchableFields","admin","searchLabelTranslated","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","length","reduce","placeholderText","field","i","div","className","fieldName","handleChange","initialParams","setValue","value","Fragment","collection","aria-controls","aria-expanded","icon","onClick","pillStyle","height","id","slug","collectionPluralLabel","labels","plural","String","p"],"mappings":"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"}

package/dist/elements/SearchFilter/index.d.ts CHANGED Viewed

@@ -1,11 +1,13 @@
 import React from 'react';
 export type SearchFilterProps = {
-    fieldLabel?: string;
     fieldName?: string;
     handleChange?: (search: string) => void;
-    listSearchableFields?: MappedField[];
+    initialParams?: ParsedQs;
+    label: string;
+    setValue?: (arg: string) => void;
+    value?: string;
 };
-import type { MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js';
+import type { ParsedQs } from 'qs-esm';
 import './index.scss';
 export declare const SearchFilter: React.FC<SearchFilterProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/elements/SearchFilter/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SearchFilter/index.tsx"],"names":[],"mappings":"~~AAIA~~,OAAO,~~KAAsC~~,MAAM,OAAO,CAAA;~~AAE1D~~,MAAM,MAAM,iBAAiB,GAAG;IAC9B,~~UAAU~~,CAAC,EAAE,MAAM,CAAA;~~IACnB~~,~~SAAS~~,CAAC,EAAE,MAAM,CAAA;~~IAClB~~,~~YAAY~~,CAAC,EAAE,~~CAAC~~,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;~~IACvC~~,~~oBAAoB~~,CAAC,EAAE,~~WAAW~~,~~EAAE,~~CAAA;~~CACrC~~,CAAA;AAED,OAAO,KAAK,EAAE,~~WAAW~~,EAAE,MAAM,~~yDAAyD~~,CAAA;~~AAM1F~~,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,~~CA2EpD~~,CAAA"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/SearchFilter/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAA;AAEhD,MAAM,MAAM,iBAAiB,GAAG;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,aAAa,CAAC,EAAE,QAAQ,CAAA;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAItC,OAAO,cAAc,CAAA;AAIrB,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkCpD,CAAA"}

package/dist/elements/SearchFilter/index.js CHANGED Viewed

@@ -1,76 +1,37 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getTranslation } from '@payloadcms/translations';
-// TODO: abstract the `next/navigation` dependency out from this component
-import { usePathname, useRouter } from 'next/navigation.js';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useDebounce } from '../../hooks/useDebounce.js';
 import { SearchIcon } from '../../icons/Search/index.js';
-import { useSearchParams } from '../../providers/SearchParams/index.js';
-import { useTranslation } from '../../providers/Translation/index.js';
 import './index.scss';
 const baseClass = 'search-filter';
 export const SearchFilter = (props)=>{
-    const { fieldLabel = 'ID', fieldName = 'id', handleChange, listSearchableFields } = props;
-    const { searchParams } = useSearchParams();
-    const router = useRouter();
-    const pathname = usePathname();
-    const { i18n, t } = useTranslation();
-    const [search, setSearch] = useState(typeof searchParams?.search === 'string' ? searchParams?.search : '');
-    const [previousSearch, setPreviousSearch] = useState('');
-    const placeholder = useRef(t('general:searchBy', {
-        label: getTranslation(fieldLabel, i18n)
-    }));
-    const debouncedSearch = useDebounce(search, 300);
+    const { handleChange, initialParams, label, setValue, value } = props;
+    const previousSearch = useRef(typeof initialParams?.search === 'string' ? initialParams?.search : '');
+    const debouncedSearch = useDebounce(value, 300);
     useEffect(()=>{
-        if (debouncedSearch !== previousSearch) {
+        if (debouncedSearch !== previousSearch.current) {
             if (handleChange) handleChange(debouncedSearch);
-            setPreviousSearch(debouncedSearch);
+            previousSearch.current = debouncedSearch;
         }
     }, [
         debouncedSearch,
         previousSearch,
-        router,
-        fieldName,
-        searchParams,
-        handleChange,
-        listSearchableFields,
-        pathname
-    ]);
-    useEffect(()=>{
-        if (listSearchableFields?.length > 0) {
-            placeholder.current = listSearchableFields.reduce((placeholderText, field, i)=>{
-                const label = 'fieldComponentProps' in field && 'label' in field.fieldComponentProps && field.fieldComponentProps.label ? field.fieldComponentProps.label : field.name;
-                if (i === 0) {
-                    return `${t('general:searchBy', {
-                        label: getTranslation(label, i18n)
-                    })}`;
-                }
-                if (i === listSearchableFields.length - 1) {
-                    return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`;
-                }
-                return `${placeholderText}, ${getTranslation(label, i18n)}`;
-            }, '');
-        } else {
-            placeholder.current = t('general:searchBy', {
-                label: getTranslation(fieldLabel, i18n)
-            });
-        }
-    }, [
-        t,
-        listSearchableFields,
-        i18n,
-        fieldLabel
+        handleChange
     ]);
+    // Cleans up the search input when the component is unmounted
+    useEffect(()=>()=>setValue(''), []);
     return /*#__PURE__*/ _jsxs("div", {
         className: baseClass,
         children: [
             /*#__PURE__*/ _jsx("input", {
+                "aria-label": label,
                 className: `${baseClass}__input`,
-                onChange: (e)=>setSearch(e.target.value),
-                placeholder: placeholder.current,
+                id: "search-filter-input",
+                onChange: (e)=>setValue(e.target.value),
+                placeholder: label,
                 type: "text",
-                value: search || ''
+                value: value || ''
             }),
             /*#__PURE__*/ _jsx(SearchIcon, {})
         ]

package/dist/elements/SearchFilter/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/elements/SearchFilter/index.tsx"],"sourcesContent":["'use client'\nimport ~~{ getTranslation } from '@payloadcms/translations'\n// TODO: abstract the `next/navigation` dependency out from this component\nimport { usePathname, useRouter } from 'next/navigation.js'\nimport~~ React, { useEffect, useRef, ~~useState~~ } from 'react'\n\nexport type SearchFilterProps = {\n ~~fieldLabel~~?: string\n ~~fieldName~~?: string\n ~~handleChange~~?: (~~search~~: string) => void\n ~~listSearchableFields~~?: ~~MappedField[]~~\n}\n\nimport type { ~~MappedField~~ } from '~~../../providers/ComponentMap/buildComponentMap/types.js~~'\n\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport ~~{ useSearchParams } from~~ '~~../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport '~~./index.scss'\n\nconst baseClass = 'search-filter'\n\nexport const SearchFilter: React.FC<SearchFilterProps> = (props) => {\n const { ~~fieldLabel~~ ~~= 'ID'~~, ~~fieldName = 'id'~~, ~~handleChange~~, ~~listSearchableFields~~ } = props\n\n const { ~~searchParams }~~ = ~~useSearchParams~~()\n ~~const router = useRouter()\n const pathname = usePathname()\n const { i18n, t } = useTranslation()\n\n const [search, setSearch] = useState(\n~~ typeof ~~searchParams~~?.search === 'string' ? ~~searchParams~~?.search : '',\n )\n ~~const [previousSearch, setPreviousSearch] = useState('')~~\n\n const ~~placeholder = useRef(t('general:searchBy', { label: getTranslation(fieldLabel, i18n) }))\n\n const~~ debouncedSearch = useDebounce(~~search~~, 300)\n\n useEffect(() => {\n if (debouncedSearch !== previousSearch) {\n if (handleChange) handleChange(debouncedSearch)\n ~~setPreviousSearch(~~debouncedSearch)\n }\n }, [\n debouncedSearch~~,\n~~ previousSearch~~,\n router,\n fieldName,\n searchParams,\n~~ handleChange~~,\n listSearchableFields,\n pathname,\n~~ ])\n\n ~~useEffect(()~~ => ~~{\n if~~ ~~(listSearchableFields?.length~~ > 0) ~~{\n placeholder.current~~ = ~~listSearchableFields.reduce(\n (placeholderText:~~ ~~string,~~ ~~field, i: number) => {~~\n const label =\n 'fieldComponentProps' in field &&\n 'label' in field.fieldComponentProps &&\n field.fieldComponentProps.label\n ? field.fieldComponentProps.label\n : field.name\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 placeholder.current = t('general:searchBy'~~, ~~{ label: getTranslation(fieldLabel, i18n) })\n }\n },~~ [~~t, listSearchableFields, i18n, fieldLabel~~])\n\n return (\n <div className={baseClass}>\n <input\n className={`${baseClass}__input`}\n onChange={(e) => ~~setSearch~~(e.target.value)}\n placeholder={~~placeholder.current~~}\n type=\"text\"\n value={~~search~~ \|\| ''}\n />\n <SearchIcon />\n </div>\n )\n}\n"],"names":["~~getTranslation","usePathname","useRouter","~~React","useEffect","useRef","~~useState","~~useDebounce","SearchIcon","~~useSearchParams","useTranslation","~~baseClass","SearchFilter","props","~~fieldLabel","fieldName","~~handleChange","~~listSearchableFields~~","~~searchParams~~","~~router~~","~~pathname~~","~~i18n~~","~~t","~~search","~~setSearch","previousSearch","setPreviousSearch","placeholder","label","~~debouncedSearch","~~length","~~current","~~reduce~~","~~placeholderText~~","~~field~~","i","~~fieldComponentProps~~","~~name","div","className","input","~~onChange","e","target","~~value~~","type"],"mappings":"AAAA;;AACA,~~SAASA~~,~~cAAc,QAAQ,2BAA0B;AACzD,0EAA0E;AAC1E,~~SAASC,~~WAAW,EAAEC,~~SAAS,~~QAAQ,qBAAoB;AAC3D,OAAOC,SAASC,SAAS,~~EAAEC,MAAM,~~EAAEC,~~QAAQ,~~QAAQ,~~QAAO;~~AAW1D~~,SAASC,WAAW,QAAQ,6BAA4B;AACxD,SAASC,UAAU,QAAQ,8BAA6B;AACxD,~~SAASC,eAAe,QAAQ,wCAAuC;AACvE,SAASC,cAAc,QAAQ,uCAAsC;AACrE,~~OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,eAA4C,CAACC;IACxD,MAAM,EAAEC,~~aAAa~~,~~IAAI,~~EAAEC,~~YAAY~~,~~IAAI,~~EAAEC,~~YAAY~~,EAAEC,~~oBAAoB~~,~~EAAE,GAAGJ;IAEpF,MAAM,EAAEK,YAAY,EAAE,GAAGT;IACzB,MAAMU,SAASjB;IACf,MAAMkB,WAAWnB;IACjB,MAAM,EAAEoB,IAAI,~~EAAEC,~~CAAC~~,EAAE,~~GAAGZ~~;~~IAEpB~~,~~MAAM~~,~~CAACa~~,~~QAAQC~~,~~UAAU~~,~~GAAGlB~~,~~SAC1B,OAAOY,cAAcK,~~WAAW,WAAWL,~~cAAcK~~,SAAS;~~IAEpE~~,~~MAAM~~,~~CAACE~~,~~gBAAgBC~~,~~kBAAkB,GAAGpB,SAAS~~;~~IAErD~~,~~MAAMqB,cAActB,OAAOiB,EAAE,oBAAoB;QAAEM,OAAO5B,eAAec,YAAYO;IAAM;IAE3F,MAAMQ,kBAAkBtB,YAAYgB,QAAQ;IAE5CnB,~~UAAU;QACR,~~IAAIyB~~,~~oBAAoBJ~~,~~gBAAgB;YACtC~~,~~IAAIT~~,~~cAAcA,aAAaa~~;~~YAC/BH~~,~~kBAAkBG;QACpB;IACF~~,~~GAAG;QACDA;QACAJ;QACAN;QACAJ;QACAG;QACAF;QACAC;QACAG;KACD;IAEDhB~~,~~UAAU~~;~~QACR,IAAIa,sBAAsBa,SAAS,GAAG;YACpCH,YAAYI,OAAO,GAAGd,qBAAqBe,MAAM,CAC~~/C,~~CAACC~~,~~iBAAyBC,OAAOC;gBAC/B,MAAMP,QACJ,yBAAyBM,SACzB,WAAWA,MAAME,mBAAmB,IACpCF,MAAME,mBAAmB,CAACR,KAAK,GAC3BM,MAAME,mBAAmB,CAACR,KAAK,GAC/BM,MAAMG,IAAI;gBAEhB,IAAIF,MAAM,GAAG;oBACX,~~OAAO,~~CAAC,EAAEb,EAAE,oBAAoB~~;~~wBAC9BM,OAAO5B,eAAe4B,OAAOP~~;~~oBAC/B~~,GAAG~~,CAAC~~;~~gBACN~~;~~gBAEA,IAAIc,MAAMlB,qBAAqBa,MAAM,GAAG,GAAG~~;~~oBACzC,OAAO,CAAC,EAAEG,gBAAgB,CAAC,EAAEX,EAAE,cAAc,CAAC,EAAEtB,eAAe4B,OAAOP,MAAM,CAAC~~;~~gBAC/E~~;~~gBAEA~~,~~OAAO,CAAC,EAAEY,gBAAgB,EAAE,EAAEjC,eAAe4B,OAAOP,MAAM,CAAC~~;~~YAC7D~~,~~GACA;QAEJ~~,~~OAAO;YACLM~~,~~YAAYI~~,~~OAAO~~,~~GAAGT~~,EAAE~~,oBAAoB~~;~~gBAAEM~~,~~OAAO5B,eAAec,YAAYO;YAAM;QACxF;IACF,GAAG;QAACC;QAAGL;QAAsBI;QAAMP;KAAW;IAE9C,~~qBACE,~~MAACwB~~;QAAIC,~~WAAW5B~~;;0BACd,~~KAAC6B~~;~~gBACCD~~,WAAW,CAAC,~~EAAE5B~~,UAAU,OAAO,CAAC;~~gBAChC8B~~,UAAU,CAACC,~~IAAMlB~~,~~UAAUkB~~,EAAEC,MAAM,~~CAACC~~,KAAK;~~gBACzCjB~~,~~aAAaA,YAAYI,OAAO~~;~~gBAChCc~~,MAAK;~~gBACLD~~,~~OAAOrB~~,~~UAAU~~;;~~0BAEnB~~,~~KAACf~~;;;AAGP,EAAC"}
1	+ {"version":3,"sources":["../../../src/elements/SearchFilter/index.tsx"],"sourcesContent":["'use client'\nimport React, { useEffect, useRef } from 'react'\n\nexport type SearchFilterProps = {\n fieldName?: string\n handleChange?: (search: string) => void\n initialParams?: ParsedQs\n label: string\n setValue?: (arg: string) => void\n value?: string\n}\n\nimport type { ParsedQs } from 'qs-esm'\n\nimport { useDebounce } from '../../hooks/useDebounce.js'\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport './index.scss'\n\nconst baseClass = 'search-filter'\n\nexport const SearchFilter: React.FC<SearchFilterProps> = (props) => {\n const { handleChange, initialParams, label, setValue, value } = props\n\n const previousSearch = useRef(\n typeof initialParams?.search === 'string' ? initialParams?.search : '',\n )\n\n const debouncedSearch = useDebounce(value, 300)\n\n useEffect(() => {\n if (debouncedSearch !== previousSearch.current) {\n if (handleChange) handleChange(debouncedSearch)\n\n previousSearch.current = debouncedSearch\n }\n }, [debouncedSearch, previousSearch, handleChange])\n\n // Cleans up the search input when the component is unmounted\n useEffect(() => () => setValue(''), [])\n\n return (\n <div className={baseClass}>\n <input\n aria-label={label}\n className={`${baseClass}__input`}\n id=\"search-filter-input\"\n onChange={(e) => setValue(e.target.value)}\n placeholder={label}\n type=\"text\"\n value={value \|\| ''}\n />\n <SearchIcon />\n </div>\n )\n}\n"],"names":["React","useEffect","useRef","useDebounce","SearchIcon","baseClass","SearchFilter","props","handleChange","initialParams","label","setValue","value","previousSearch","search","debouncedSearch","current","div","className","input","aria-label","id","onChange","e","target","placeholder","type"],"mappings":"AAAA;;AACA,OAAOA,SAASC,SAAS,EAAEC,MAAM,QAAQ,QAAO;AAahD,SAASC,WAAW,QAAQ,6BAA4B;AACxD,SAASC,UAAU,QAAQ,8BAA6B;AACxD,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,OAAO,MAAMC,eAA4C,CAACC;IACxD,MAAM,EAAEC,YAAY,EAAEC,aAAa,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGL;IAEhE,MAAMM,iBAAiBX,OACrB,OAAOO,eAAeK,WAAW,WAAWL,eAAeK,SAAS;IAGtE,MAAMC,kBAAkBZ,YAAYS,OAAO;IAE3CX,UAAU;QACR,IAAIc,oBAAoBF,eAAeG,OAAO,EAAE;YAC9C,IAAIR,cAAcA,aAAaO;YAE/BF,eAAeG,OAAO,GAAGD;QAC3B;IACF,GAAG;QAACA;QAAiBF;QAAgBL;KAAa;IAElD,6DAA6D;IAC7DP,UAAU,IAAM,IAAMU,SAAS,KAAK,EAAE;IAEtC,qBACE,MAACM;QAAIC,WAAWb;;0BACd,KAACc;gBACCC,cAAYV;gBACZQ,WAAW,CAAC,EAAEb,UAAU,OAAO,CAAC;gBAChCgB,IAAG;gBACHC,UAAU,CAACC,IAAMZ,SAASY,EAAEC,MAAM,CAACZ,KAAK;gBACxCa,aAAaf;gBACbgB,MAAK;gBACLd,OAAOA,SAAS;;0BAElB,KAACR;;;AAGP,EAAC"}