@payloadcms/ui 3.0.0-canary.cee5702 → 3.0.0-canary.cf66341

package/dist/elements/IDLabel/index.scss

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

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

@@ -1,3 +1,3 @@
-import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js';
-export declare const getTextFieldsToBeSearched: (listSearchableFields: string[], fieldMap: FieldMap) => MappedField[];
+import type { ClientField } from 'payload';
+export declare const getTextFieldsToBeSearched: (listSearchableFields: string[], fields: ClientField[]) => ClientField[];
 //# sourceMappingURL=getTextFieldsToBeSearched.d.ts.map

package/dist/elements/ListControls/getTextFieldsToBeSearched.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getTextFieldsToBeSearched.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,yDAAyD,CAAA;AAIpG,eAAO,MAAM,yBAAyB,yBACd,MAAM,EAAE,yBAE7B,WAAW,EASb,CAAA"}
+{"version":3,"file":"getTextFieldsToBeSearched.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAM1C,eAAO,MAAM,yBAAyB,yBACd,MAAM,EAAE,UACtB,WAAW,EAAE,KACpB,WAAW,EASb,CAAA"}

package/dist/elements/ListControls/getTextFieldsToBeSearched.js

@@ -1,10 +1,12 @@
+'use client';
+
+import { fieldAffectsData } from 'payload/shared';
 import { flattenFieldMap } from '../../utilities/flattenFieldMap.js';
-export const getTextFieldsToBeSearched = (listSearchableFields, fieldMap)=>{
-    if (listSearchableFields) {
-        const flattenedFields = flattenFieldMap(fieldMap);
-        return flattenedFields.filter((field)=>field.isFieldAffectingData && listSearchableFields.includes(field.name));
-    }
-    return null;
+export const getTextFieldsToBeSearched = (listSearchableFields, fields) => {
+  if (listSearchableFields) {
+    const flattenedFields = flattenFieldMap(fields);
+    return flattenedFields.filter(field => fieldAffectsData(field) && listSearchableFields.includes(field.name));
+  }
+  return null;
 };
-
 //# sourceMappingURL=getTextFieldsToBeSearched.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"sourcesContent":["import type { FieldMap, MappedField } from '../../providers/ComponentMap/buildComponentMap/types.js'\n\nimport { flattenFieldMap } from '../../utilities/flattenFieldMap.js'\n\nexport const getTextFieldsToBeSearched = (\n  listSearchableFields: string[],\n  fieldMap: FieldMap,\n): MappedField[] => {\n  if (listSearchableFields) {\n    const flattenedFields = flattenFieldMap(fieldMap)\n    return flattenedFields.filter(\n      (field) => field.isFieldAffectingData && listSearchableFields.includes(field.name),\n    )\n  }\n\n  return null\n}\n"],"names":["flattenFieldMap","getTextFieldsToBeSearched","listSearchableFields","fieldMap","flattenedFields","filter","field","isFieldAffectingData","includes","name"],"rangeMappings":";;;;;;;","mappings":"AAEA,SAASA,eAAe,QAAQ,qCAAoC;AAEpE,OAAO,MAAMC,4BAA4B,CACvCC,sBACAC;IAEA,IAAID,sBAAsB;QACxB,MAAME,kBAAkBJ,gBAAgBG;QACxC,OAAOC,gBAAgBC,MAAM,CAC3B,CAACC,QAAUA,MAAMC,oBAAoB,IAAIL,qBAAqBM,QAAQ,CAACF,MAAMG,IAAI;IAErF;IAEA,OAAO;AACT,EAAC"}
+{"version":3,"file":"getTextFieldsToBeSearched.js","names":["fieldAffectsData","flattenFieldMap","getTextFieldsToBeSearched","listSearchableFields","fields","flattenedFields","filter","field","includes","name"],"sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"sourcesContent":["'use client'\nimport type { ClientField } from 'payload'\n\nimport { fieldAffectsData } from 'payload/shared'\n\nimport { flattenFieldMap } from '../../utilities/flattenFieldMap.js'\n\nexport const getTextFieldsToBeSearched = (\n  listSearchableFields: string[],\n  fields: ClientField[],\n): ClientField[] => {\n  if (listSearchableFields) {\n    const flattenedFields = flattenFieldMap(fields)\n    return flattenedFields.filter(\n      (field) => fieldAffectsData(field) && listSearchableFields.includes(field.name),\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAGA,SAASA,gBAAgB,QAAQ;AAEjC,SAASC,eAAe,QAAQ;AAEhC,OAAO,MAAMC,yBAAA,GAA4BA,CACvCC,oBAAA,EACAC,MAAA;EAEA,IAAID,oBAAA,EAAsB;IACxB,MAAME,eAAA,GAAkBJ,eAAA,CAAgBG,MAAA;IACxC,OAAOC,eAAA,CAAgBC,MAAM,CAC1BC,KAAA,IAAUP,gBAAA,CAAiBO,KAAA,KAAUJ,oBAAA,CAAqBK,QAAQ,CAACD,KAAA,CAAME,IAAI;EAElF;EAEA,OAAO;AACT","ignoreList":[]}

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

@@ -1,15 +1,14 @@
-import type { ClientCollectionConfig, Where } from 'payload/types';
+import type { ClientCollectionConfig, ClientField, Where } from 'payload';
 import React from 'react';
-import type { FieldMap } from '../../utilities/buildComponentMap.js';
 import './index.scss';
 export type ListControlsProps = {
-    collectionConfig: ClientCollectionConfig;
-    enableColumns?: boolean;
-    enableSort?: boolean;
-    fieldMap: FieldMap;
-    handleSearchChange?: (search: string) => void;
-    handleSortChange?: (sort: string) => void;
-    handleWhereChange?: (where: Where) => void;
+    readonly collectionConfig: ClientCollectionConfig;
+    readonly enableColumns?: boolean;
+    readonly enableSort?: boolean;
+    readonly fields: ClientField[];
+    readonly handleSearchChange?: (search: string) => void;
+    readonly handleSortChange?: (sort: string) => void;
+    readonly handleWhereChange?: (where: Where) => void;
 };
 /**
  * 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,eAAe,CAAA;AAIlE,OAAO,KAAsC,MAAM,OAAO,CAAA;AAM1D,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,sCAAsC,CAAA;AAiBpE,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,CA4IpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,sBAAsB,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAIzE,OAAO,KAAsC,MAAM,OAAO,CAAA;AAuB1D,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,MAAM,EAAE,WAAW,EAAE,CAAA;IAC9B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CACpD,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyLpD,CAAA"}

package/dist/elements/ListControls/index.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, Where } from 'payload/types'\n\nimport * as facelessUIImport 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 '../../utilities/buildComponentMap.js'\n\nimport { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { Chevron } from '../../icons/Chevron/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useSearchParams } from '../../providers/SearchParams/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { DeleteMany } from '../DeleteMany/index.js'\nimport { EditMany } from '../EditMany/index.js'\nimport { Pill } from '../Pill/index.js'\nimport { PublishMany } from '../PublishMany/index.js'\nimport { SearchFilter } from '../SearchFilter/index.js'\nimport { UnpublishMany } from '../UnpublishMany/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport validateWhereQuery from '../WhereBuilder/validateWhereQuery.js'\nimport { 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 { useWindowInfo } = facelessUIImport\n\n  const { handleSearchChange } = useListQuery()\n  const { searchParams } = useSearchParams()\n  const titleField = useUseTitleField(collectionConfig, fieldMap)\n  const { i18n, t } = useTranslation()\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  const 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={<Chevron />}\n                onClick={() =>\n                  setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)\n                }\n                pillStyle=\"light\"\n              >\n                {t('general:columns')}\n              </Pill>\n            )}\n            <Pill\n              aria-controls={`${baseClass}-where`}\n              aria-expanded={visibleDrawer === 'where'}\n              className={`${baseClass}__toggle-where ${\n                visibleDrawer === 'where' ? `${baseClass}__buttons-active` : ''\n              }`}\n              icon={<Chevron />}\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              pillStyle=\"light\"\n            >\n              {t('general:filters')}\n            </Pill>\n            {enableSort && (\n              <Pill\n                aria-controls={`${baseClass}-sort`}\n                aria-expanded={visibleDrawer === 'sort'}\n                className={`${baseClass}__toggle-sort`}\n                icon={<Chevron />}\n                onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n                pillStyle=\"light\"\n              >\n                {t('general:sort')}\n              </Pill>\n            )}\n          </div>\n        </div>\n      </div>\n      {enableColumns && (\n        <AnimateHeight\n          className={`${baseClass}__columns`}\n          height={visibleDrawer === 'columns' ? 'auto' : 0}\n          id={`${baseClass}-columns`}\n        >\n          <ColumnSelector collectionSlug={collectionConfig.slug} />\n        </AnimateHeight>\n      )}\n      <AnimateHeight\n        className={`${baseClass}__where`}\n        height={visibleDrawer === 'where' ? 'auto' : 0}\n        id={`${baseClass}-where`}\n      >\n        <WhereBuilder\n          collectionPluralLabel={collectionConfig?.labels?.plural}\n          collectionSlug={collectionConfig.slug}\n          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":["facelessUIImport","getTranslation","React","useEffect","useRef","useState","AnimateHeightImport","AnimateHeight","default","useUseTitleField","Chevron","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","collectionConfig","enableColumns","enableSort","fieldMap","useWindowInfo","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","getTranslation","React","useEffect","useRef","useState","AnimateHeightImport","AnimateHeight","default","useUseTitleField","ChevronIcon","SearchIcon","useListInfo","useListQuery","useSearchParams","useTranslation","ColumnSelector","DeleteMany","EditMany","Pill","PublishMany","SearchFilter","UnpublishMany","WhereBuilder","validateWhereQuery","getTextFieldsToBeSearched","baseClass","ListControls","props","$","collectionConfig","enableColumns","t0","enableSort","t1","fields","undefined","handleSearchChange","collectionSlug","searchParams","titleField","i18n","t","breakpoints","t2","s","smallBreak","search","setSearch","t3","label","name","searchLabel","t4","admin","listSearchableFields","searchLabelTranslated","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","t5","current","t6","t7","t8","length","reduce","placeholderText","field","i","t9","search_0","t10","_jsx","className","icon","onClick","pillStyle","children","t11","t12","t13","height","id","slug","t14","_jsxs","fieldName","handleChange","initialParams","setValue","value","Fragment","collection","collectionPluralLabel","labels","plural","String"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\nimport type { ClientCollectionConfig, ClientField, 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 { useUseTitleField } from '../../hooks/useUseAsTitle.js'\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { SearchIcon } from '../../icons/Search/index.js'\nimport { useListInfo } from '../../providers/ListInfo/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  readonly collectionConfig: ClientCollectionConfig\n  readonly enableColumns?: boolean\n  readonly enableSort?: boolean\n  readonly fields: ClientField[]\n  readonly handleSearchChange?: (search: string) => void\n  readonly handleSortChange?: (sort: string) => void\n  readonly 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, fields } = props\n\n  const { handleSearchChange } = useListQuery()\n  const { collectionSlug } = useListInfo()\n  const { searchParams } = useSearchParams()\n  const titleField = useUseTitleField(collectionConfig, fields)\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 && 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    fields,\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            '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={'name' in titleField ? titleField?.name : null}\n          handleChange={(search) => {\n            return void handleSearchChange(search)\n          }}\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} fields={fields} />\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          fields={fields}\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"],"mappings":"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","ignoreList":[]}

package/dist/elements/ListControls/index.scss

@@ -5,6 +5,9 @@
     display: flex;
     align-items: center;
     background-color: var(--theme-elevation-50);
+    border-radius: var(--style-radius-m);
+    padding: base(0.6);
+    gap: base(0.6);
   }
 
   .search-filter {
@@ -18,21 +21,13 @@
   &__buttons-wrap {
     display: flex;
     align-items: center;
-    gap: base(0.5);
-
-    [dir='ltr'] & {
-      margin-right: base(0.5);
-    }
-
-    [dir='rtl'] & {
-      margin-left: base(0.5);
-    }
+    gap: base(0.2);
 
     .pill {
-      background-color: var(--theme-elevation-200);
+      background-color: var(--theme-elevation-150);
 
       &:hover {
-        background-color: var(--theme-elevation-150);
+        background-color: var(--theme-elevation-100);
       }
     }
   }
@@ -53,11 +48,22 @@
     &__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;
     }
 
     .search-filter {
-      margin-bottom: base(0.5);
       width: 100%;
+      input {
+        padding: base(0.4) base(2);
+      }
     }
 
     &__buttons-wrap {
@@ -70,11 +76,8 @@
       }
 
       .pill {
-        padding: base(0.5) base(1);
-
-        svg {
-          margin-left: auto;
-        }
+        padding: base(0.2) base(0.2) base(0.2) base(0.4);
+        justify-content: space-between;
       }
     }
 

package/dist/elements/ListDrawer/DrawerContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAE3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAoCjD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA2QvD,CAAA"}
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAE3E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAA;AAoCjD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoRvD,CAAA"}