npm - @payloadcms/ui - Versions diffs - 3.51.0-internal.62eeed3 → 3.51.0 - Mend

@payloadcms/ui 3.51.0-internal.62eeed3 → 3.51.0

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 (62) hide show

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

@@ -5,7 +5,7 @@ import { useWindowInfo } from '@faceless-ui/window-info';
 import { getTranslation } from '@payloadcms/translations';
 import { validateWhereQuery } from 'payload/shared';
 import React, { Fragment, useEffect, useRef, useState } from 'react';
-import { Popup, PopupList } from '../../elements/Popup/index.js';
+import { Popup } from '../../elements/Popup/index.js';
 import { useUseTitleField } from '../../hooks/useUseAsTitle.js';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { Dots } from '../../icons/Dots/index.js';
@@ -16,11 +16,10 @@ import { AnimateHeight } from '../AnimateHeight/index.js';
 import { ColumnSelector } from '../ColumnSelector/index.js';
 import { GroupByBuilder } from '../GroupByBuilder/index.js';
 import { Pill } from '../Pill/index.js';
+import { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js';
 import { SearchFilter } from '../SearchFilter/index.js';
 import { WhereBuilder } from '../WhereBuilder/index.js';
-import { ActiveQueryPreset } from './ActiveQueryPreset/index.js';
 import { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js';
-import { useQueryPresets } from './useQueryPresets.js';
 import './index.scss';
 const baseClass = 'list-controls';
 /**
@@ -37,7 +36,7 @@ export const ListControls = props => {
     enableColumns = true,
     enableFilters = true,
     enableSort = false,
-    listMenuItems: listMenuItemsFromProps,
+    listMenuItems,
     queryPreset: activePreset,
     queryPresetPermissions,
     renderedFilters,
@@ -47,20 +46,6 @@ export const ListControls = props => {
     handleSearchChange,
     query
   } = useListQuery();
-  const {
-    CreateNewPresetDrawer,
-    DeletePresetModal,
-    EditPresetDrawer,
-    hasModifiedPreset,
-    openPresetListDrawer,
-    PresetListDrawer,
-    queryPresetMenuItems,
-    resetPreset
-  } = useQueryPresets({
-    activePreset,
-    collectionSlug,
-    queryPresetPermissions
-  });
   const titleField = useUseTitleField(collectionConfig);
   const {
     i18n,
@@ -106,123 +91,114 @@ export const ListControls = props => {
       });
     }
   }, [t, listSearchableFields, i18n, searchLabel]);
-  let listMenuItems = listMenuItemsFromProps;
-  if (collectionConfig.enableQueryPresets && !disableQueryPresets && queryPresetMenuItems?.length > 0) {
-    // Cannot push or unshift into `listMenuItemsFromProps` as it will mutate the original array
-    listMenuItems = [...queryPresetMenuItems, listMenuItemsFromProps?.length > 0 ? /*#__PURE__*/_jsx(PopupList.Divider, {}, "divider") : null, ...(listMenuItemsFromProps || [])];
-  }
-  return /*#__PURE__*/_jsxs(Fragment, {
-    children: [/*#__PURE__*/_jsxs("div", {
-      className: baseClass,
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    children: [collectionConfig?.enableQueryPresets && !disableQueryPresets && /*#__PURE__*/_jsx(QueryPresetBar, {
+      activePreset: activePreset,
+      collectionSlug: collectionSlug,
+      queryPresetPermissions: queryPresetPermissions
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__wrap`,
       children: [/*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__wrap`,
+        className: `${baseClass}__search`,
         children: [/*#__PURE__*/_jsx(SearchIcon, {}), /*#__PURE__*/_jsx(SearchFilter, {
           handleChange: handleSearchChange,
           label: searchLabelTranslated.current,
           searchQueryParam: query?.search
-        }, collectionSlug), activePreset && hasModifiedPreset ? /*#__PURE__*/_jsx("div", {
-          className: `${baseClass}__modified`,
-          children: "Modified"
-        }) : null, /*#__PURE__*/_jsx("div", {
-          className: `${baseClass}__buttons`,
-          children: /*#__PURE__*/_jsxs("div", {
-            className: `${baseClass}__buttons-wrap`,
-            children: [!smallBreak && /*#__PURE__*/_jsx(React.Fragment, {
-              children: beforeActions && beforeActions
-            }), enableColumns && /*#__PURE__*/_jsx(Pill, {
-              "aria-controls": `${baseClass}-columns`,
-              "aria-expanded": visibleDrawer === 'columns',
-              className: `${baseClass}__toggle-columns`,
-              icon: /*#__PURE__*/_jsx(ChevronIcon, {
-                direction: visibleDrawer === 'columns' ? 'up' : 'down'
-              }),
-              id: "toggle-columns",
-              onClick: () => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined),
-              pillStyle: "light",
-              size: "small",
-              children: t('general:columns')
-            }), enableFilters && /*#__PURE__*/_jsx(Pill, {
-              "aria-controls": `${baseClass}-where`,
-              "aria-expanded": visibleDrawer === 'where',
-              className: `${baseClass}__toggle-where`,
-              icon: /*#__PURE__*/_jsx(ChevronIcon, {
-                direction: visibleDrawer === 'where' ? 'up' : 'down'
-              }),
-              id: "toggle-list-filters",
-              onClick: () => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined),
-              pillStyle: "light",
-              size: "small",
-              children: t('general:filters')
-            }), enableSort && /*#__PURE__*/_jsx(Pill, {
-              "aria-controls": `${baseClass}-sort`,
-              "aria-expanded": visibleDrawer === 'sort',
-              className: `${baseClass}__toggle-sort`,
-              icon: /*#__PURE__*/_jsx(ChevronIcon, {}),
-              onClick: () => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined),
-              pillStyle: "light",
-              size: "small",
-              children: t('general:sort')
-            }), !disableQueryPresets && /*#__PURE__*/_jsx(ActiveQueryPreset, {
-              activePreset: activePreset,
-              openPresetListDrawer: openPresetListDrawer,
-              resetPreset: resetPreset
-            }), collectionConfig.admin.groupBy && /*#__PURE__*/_jsx(Pill, {
-              "aria-controls": `${baseClass}-group-by`,
-              "aria-expanded": visibleDrawer === 'group-by',
-              className: `${baseClass}__toggle-group-by`,
-              icon: /*#__PURE__*/_jsx(ChevronIcon, {
-                direction: visibleDrawer === 'group-by' ? 'up' : 'down'
-              }),
-              id: "toggle-group-by",
-              onClick: () => setVisibleDrawer(visibleDrawer !== 'group-by' ? 'group-by' : undefined),
-              pillStyle: "light",
-              size: "small",
-              children: t('general:groupByLabel', {
-                label: ''
-              })
-            }), listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && /*#__PURE__*/_jsx(Popup, {
-              button: /*#__PURE__*/_jsx(Dots, {
-                ariaLabel: t('general:moreOptions')
-              }),
-              className: `${baseClass}__popup`,
-              horizontalAlign: "right",
-              id: "list-menu",
-              size: "medium",
-              verticalAlign: "bottom",
-              children: listMenuItems.map((item, i_0) => /*#__PURE__*/_jsx(Fragment, {
-                children: item
-              }, `list-menu-item-${i_0}`))
-            })]
+        }, collectionSlug)]
+      }), /*#__PURE__*/_jsxs("div", {
+        className: `${baseClass}__buttons`,
+        children: [!smallBreak && /*#__PURE__*/_jsx(React.Fragment, {
+          children: beforeActions && beforeActions
+        }), enableColumns && /*#__PURE__*/_jsx(Pill, {
+          "aria-controls": `${baseClass}-columns`,
+          "aria-expanded": visibleDrawer === 'columns',
+          className: `${baseClass}__toggle-columns`,
+          icon: /*#__PURE__*/_jsx(ChevronIcon, {
+            direction: visibleDrawer === 'columns' ? 'up' : 'down'
+          }),
+          id: "toggle-list-columns",
+          onClick: () => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined),
+          pillStyle: "light",
+          size: "small",
+          children: t('general:columns')
+        }), enableFilters && /*#__PURE__*/_jsx(Pill, {
+          "aria-controls": `${baseClass}-where`,
+          "aria-expanded": visibleDrawer === 'where',
+          className: `${baseClass}__toggle-where`,
+          icon: /*#__PURE__*/_jsx(ChevronIcon, {
+            direction: visibleDrawer === 'where' ? 'up' : 'down'
+          }),
+          id: "toggle-list-filters",
+          onClick: () => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined),
+          pillStyle: "light",
+          size: "small",
+          children: t('general:filters')
+        }), enableSort && /*#__PURE__*/_jsx(Pill, {
+          "aria-controls": `${baseClass}-sort`,
+          "aria-expanded": visibleDrawer === 'sort',
+          className: `${baseClass}__toggle-sort`,
+          icon: /*#__PURE__*/_jsx(ChevronIcon, {}),
+          id: "toggle-list-sort",
+          onClick: () => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined),
+          pillStyle: "light",
+          size: "small",
+          children: t('general:sort')
+        }), collectionConfig.admin.groupBy && /*#__PURE__*/_jsx(Pill, {
+          "aria-controls": `${baseClass}-group-by`,
+          "aria-expanded": visibleDrawer === 'group-by',
+          className: `${baseClass}__toggle-group-by`,
+          icon: /*#__PURE__*/_jsx(ChevronIcon, {
+            direction: visibleDrawer === 'group-by' ? 'up' : 'down'
+          }),
+          id: "toggle-group-by",
+          onClick: () => setVisibleDrawer(visibleDrawer !== 'group-by' ? 'group-by' : undefined),
+          pillStyle: "light",
+          size: "small",
+          children: t('general:groupByLabel', {
+            label: ''
           })
+        }), listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && /*#__PURE__*/_jsx(Popup, {
+          button: /*#__PURE__*/_jsx(Dots, {
+            ariaLabel: t('general:moreOptions')
+          }),
+          className: `${baseClass}__popup`,
+          horizontalAlign: "right",
+          id: "list-menu",
+          size: "small",
+          verticalAlign: "bottom",
+          children: listMenuItems.map((item, i_0) => /*#__PURE__*/_jsx(Fragment, {
+            children: item
+          }, `list-menu-item-${i_0}`))
         })]
-      }), enableColumns && /*#__PURE__*/_jsx(AnimateHeight, {
-        className: `${baseClass}__columns`,
-        height: visibleDrawer === 'columns' ? 'auto' : 0,
-        id: `${baseClass}-columns`,
-        children: /*#__PURE__*/_jsx(ColumnSelector, {
-          collectionSlug: collectionConfig.slug
-        })
-      }), /*#__PURE__*/_jsx(AnimateHeight, {
-        className: `${baseClass}__where`,
-        height: visibleDrawer === 'where' ? 'auto' : 0,
-        id: `${baseClass}-where`,
-        children: /*#__PURE__*/_jsx(WhereBuilder, {
-          collectionPluralLabel: collectionConfig.labels?.plural,
-          collectionSlug: collectionConfig.slug,
-          fields: collectionConfig.fields,
-          renderedFilters: renderedFilters,
-          resolvedFilterOptions: resolvedFilterOptions
-        })
-      }), collectionConfig.admin.groupBy && /*#__PURE__*/_jsx(AnimateHeight, {
-        className: `${baseClass}__group-by`,
-        height: visibleDrawer === 'group-by' ? 'auto' : 0,
-        id: `${baseClass}-group-by`,
-        children: /*#__PURE__*/_jsx(GroupByBuilder, {
-          collectionSlug: collectionConfig.slug,
-          fields: collectionConfig.fields
-        })
       })]
-    }), PresetListDrawer, EditPresetDrawer, CreateNewPresetDrawer, DeletePresetModal]
+    }), enableColumns && /*#__PURE__*/_jsx(AnimateHeight, {
+      className: `${baseClass}__columns`,
+      height: visibleDrawer === 'columns' ? 'auto' : 0,
+      id: `${baseClass}-columns`,
+      children: /*#__PURE__*/_jsx(ColumnSelector, {
+        collectionSlug: collectionConfig.slug
+      })
+    }), /*#__PURE__*/_jsx(AnimateHeight, {
+      className: `${baseClass}__where`,
+      height: visibleDrawer === 'where' ? 'auto' : 0,
+      id: `${baseClass}-where`,
+      children: /*#__PURE__*/_jsx(WhereBuilder, {
+        collectionPluralLabel: collectionConfig?.labels?.plural,
+        collectionSlug: collectionConfig.slug,
+        fields: collectionConfig?.fields,
+        renderedFilters: renderedFilters,
+        resolvedFilterOptions: resolvedFilterOptions
+      })
+    }), collectionConfig.admin.groupBy && /*#__PURE__*/_jsx(AnimateHeight, {
+      className: `${baseClass}__group-by`,
+      height: visibleDrawer === 'group-by' ? 'auto' : 0,
+      id: `${baseClass}-group-by`,
+      children: /*#__PURE__*/_jsx(GroupByBuilder, {
+        collectionSlug: collectionConfig.slug,
+        fields: collectionConfig.fields
+      })
+    })]
   });
 };
 //# sourceMappingURL=index.js.map

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

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

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

@@ -2,19 +2,48 @@
 @layer payload-default {
   .list-controls {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
     &__wrap {
       display: flex;
       align-items: center;
+      justify-content: space-between;
+      gap: base(0.5);
       background-color: var(--theme-elevation-50);
       border-radius: var(--style-radius-m);
-      padding: base(0.6);
-      gap: base(0.6);
+    }
+    &__search {
+      display: flex;
+      background-color: var(--theme-elevation-50);
+      border-radius: var(--style-radius-m);
+      gap: base(0.4);
+      flex-grow: 1;
+      position: relative;
+      .icon {
+        flex-shrink: 0;
+      }
+    }
+    .icon--search {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translate3d(0, -50%, 0);
+      inset-inline-start: base(0.4);
+      z-index: 1;
+      pointer-events: none;
     }
     .search-filter {
       flex-grow: 1;
       input {
+        height: 46px;
+        padding-left: 36px;
         margin: 0;
       }
     }
@@ -24,14 +53,11 @@
       border-radius: 0;
     }
-    &__modified {
-      color: var(--theme-elevation-500);
-    }
-    &__buttons-wrap {
+    &__buttons {
       display: flex;
       align-items: center;
       gap: calc(var(--base) / 4);
+      padding-right: 10px;
     }
     .pill-selector,
@@ -43,34 +69,25 @@
     @include small-break {
       &__wrap {
-        flex-wrap: wrap;
-        background-color: unset;
-        padding: 0;
-        position: relative;
-      }
-      .icon--search {
-        position: absolute;
-        top: base(0.4);
-        inset-inline-start: base(0.4);
-        z-index: 1;
+        flex-direction: column;
+        align-items: stretch;
+        background-color: transparent;
+        border-radius: 0;
       }
       .search-filter {
         width: 100%;
         input {
-          padding: base(0.4) base(2);
+          height: 40px;
+          padding: 0 base(1.5);
         }
       }
-      &__buttons-wrap {
-        [dir='ltr'] & {
-          margin-right: 0;
-        }
-        [dir='rtl'] & {
-          margin-left: 0;
-        }
+      &__buttons {
+        padding-right: 0;
+        margin: 0;
+        width: 100%;
         .pill {
           padding: base(0.2) base(0.2) base(0.2) base(0.4);
@@ -78,11 +95,6 @@
         }
       }
-      &__buttons {
-        margin: 0;
-        width: 100%;
-      }
       .pill-selector,
       .where-builder,
       .sort-complex {

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

@@ -39,7 +39,7 @@
       outline-offset: var(--accessibility-outline-offset);
     }
-    .icon {
+    &__icon .icon {
       flex-shrink: 0;
       width: var(--pill-icon-size);
       height: var(--pill-icon-size);

package/dist/elements/QueryPresets/QueryPresetBar/index.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import type { QueryPreset, SanitizedCollectionPermission } from 'payload';
+import React from 'react';
+import './index.scss';
+export declare const QueryPresetBar: React.FC<{
+    activePreset: QueryPreset;
+    collectionSlug?: string;
+    queryPresetPermissions: SanitizedCollectionPermission;
+}>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/QueryPresets/QueryPresetBar/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/QueryPresets/QueryPresetBar/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,6BAA6B,EAAE,MAAM,SAAS,CAAA;AAKzE,OAAO,KAAyC,MAAM,OAAO,CAAA;AAc7D,OAAO,cAAc,CAAA;AAQrB,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC;IACpC,YAAY,EAAE,WAAW,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,sBAAsB,EAAE,6BAA6B,CAAA;CACtD,CA2RA,CAAA"}