@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.c2b57ce

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["NextLinkImport","useRouter","React","useRouteTransition","formatUrl","NextLink","default","isModifiedEvent","event","eventTarget","currentTarget","target","getAttribute","metaKey","ctrlKey","shiftKey","altKey","nativeEvent","which","Link","children","forceReload","href","onClick","preventDefault","ref","replace","scroll","rest","router","startRouteTransition","_jsx","e","url","window","location","navigate","push"],"sources":["../../../src/elements/Link/index.tsx"],"sourcesContent":["'use client'\nimport NextLinkImport from 'next/link.js'\nimport { useRouter } from 'next/navigation.js'\nimport React from 'react'\n\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { formatUrl } from './formatUrl.js'\n\nconst NextLink = 'default' in NextLinkImport ? NextLinkImport.default : NextLinkImport\n\n// Copied from  https://github.com/vercel/next.js/blob/canary/packages/next/src/client/link.tsx#L180-L191\nfunction isModifiedEvent(event: React.MouseEvent): boolean {\n  const eventTarget = event.currentTarget as HTMLAnchorElement | SVGAElement\n  const target = eventTarget.getAttribute('target')\n  return (\n    (target && target !== '_self') ||\n    event.metaKey ||\n    event.ctrlKey ||\n    event.shiftKey ||\n    event.altKey || // triggers resource download\n    (event.nativeEvent && event.nativeEvent.which === 2)\n  )\n}\n\ntype Props = {\n  /**\n   * Force a hard navigation using window.location instead of client-side routing\n   */\n  forceReload?: boolean\n  /**\n   * Disable the e.preventDefault() call on click if you want to handle it yourself via onClick\n   *\n   * @default true\n   */\n  preventDefault?: boolean\n} & Parameters<typeof NextLink>[0]\n\nexport const Link: React.FC<Props> = ({\n  children,\n  forceReload = false,\n  href,\n  onClick,\n  preventDefault = true,\n  ref,\n  replace,\n  scroll,\n  ...rest\n}) => {\n  const router = useRouter()\n  const { startRouteTransition } = useRouteTransition()\n\n  return (\n    <NextLink\n      href={href}\n      onClick={(e) => {\n        if (isModifiedEvent(e)) {\n          return\n        }\n\n        if (onClick) {\n          onClick(e)\n        }\n\n        // We need a preventDefault here so that a clicked link doesn't trigger twice,\n        // once for default browser navigation and once for startRouteTransition\n        if (preventDefault) {\n          e.preventDefault()\n        }\n\n        const url = typeof href === 'string' ? href : formatUrl(href)\n\n        if (forceReload) {\n          window.location.href = url\n          return\n        }\n\n        const navigate = () => {\n          if (replace) {\n            void router.replace(url, { scroll })\n          } else {\n            void router.push(url, { scroll })\n          }\n        }\n\n        // Call startRouteTransition if available, otherwise navigate directly\n        startRouteTransition(navigate)\n      }}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </NextLink>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,cAAA,MAAoB;AAC3B,SAASC,SAAS,QAAQ;AAC1B,OAAOC,KAAA,MAAW;AAElB,SAASC,kBAAkB,QAAQ;AACnC,SAASC,SAAS,QAAQ;AAE1B,MAAMC,QAAA,GAAW,aAAaL,cAAA,GAAiBA,cAAA,CAAeM,OAAO,GAAGN,cAAA;AAExE;AACA,SAASO,gBAAgBC,KAAuB;EAC9C,MAAMC,WAAA,GAAcD,KAAA,CAAME,aAAa;EACvC,MAAMC,MAAA,GAASF,WAAA,CAAYG,YAAY,CAAC;EACxC,OACED,MAAC,IAAUA,MAAA,KAAW,WACtBH,KAAA,CAAMK,OAAO,IACbL,KAAA,CAAMM,OAAO,IACbN,KAAA,CAAMO,QAAQ,IACdP,KAAA,CAAMQ,MAAM;EAAI;EACfR,KAAA,CAAMS,WAAW,IAAIT,KAAA,CAAMS,WAAW,CAACC,KAAK,KAAK;AAEtD;AAeA,OAAO,MAAMC,IAAA,GAAwBA,CAAC;EACpCC,QAAQ;EACRC,WAAA,GAAc,KAAK;EACnBC,IAAI;EACJC,OAAO;EACPC,cAAA,GAAiB,IAAI;EACrBC,GAAG;EACHC,OAAO;EACPC,MAAM;EACN,GAAGC;AAAA,CACJ;EACC,MAAMC,MAAA,GAAS5B,SAAA;EACf,MAAM;IAAE6B;EAAoB,CAAE,GAAG3B,kBAAA;EAEjC,oBACE4B,IAAA,CAAC1B,QAAA;IACCiB,IAAA,EAAMA,IAAA;IACNC,OAAA,EAAUS,CAAA;MACR,IAAIzB,eAAA,CAAgByB,CAAA,GAAI;QACtB;MACF;MAEA,IAAIT,OAAA,EAAS;QACXA,OAAA,CAAQS,CAAA;MACV;MAEA;MACA;MACA,IAAIR,cAAA,EAAgB;QAClBQ,CAAA,CAAER,cAAc;MAClB;MAEA,MAAMS,GAAA,GAAM,OAAOX,IAAA,KAAS,WAAWA,IAAA,GAAOlB,SAAA,CAAUkB,IAAA;MAExD,IAAID,WAAA,EAAa;QACfa,MAAA,CAAOC,QAAQ,CAACb,IAAI,GAAGW,GAAA;QACvB;MACF;MAEA,MAAMG,QAAA,GAAWA,CAAA;QACf,IAAIV,OAAA,EAAS;UACX,KAAKG,MAAA,CAAOH,OAAO,CAACO,GAAA,EAAK;YAAEN;UAAO;QACpC,OAAO;UACL,KAAKE,MAAA,CAAOQ,IAAI,CAACJ,GAAA,EAAK;YAAEN;UAAO;QACjC;MACF;MAEA;MACAG,oBAAA,CAAqBM,QAAA;IACvB;IACAX,GAAA,EAAKA,GAAA;IACJ,GAAGG,IAAI;cAEPR;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PayloadLink","useRouter","useRouteTransition","isModifiedEvent","event","eventTarget","currentTarget","target","getAttribute","metaKey","ctrlKey","shiftKey","altKey","nativeEvent","which","Link","children","forceReload","href","onClick","preventDefault","ref","replace","scroll","rest","router","startRouteTransition","_jsx","e","url","window","location","navigate","push"],"sources":["../../../src/elements/Link/index.tsx"],"sourcesContent":["'use client'\nimport type { LinkAdapterProps } from 'payload'\n\nimport React from 'react'\n\nimport { PayloadLink, useRouter } from '../../providers/RouterAdapter/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\n\nfunction isModifiedEvent(event: React.MouseEvent): boolean {\n  const eventTarget = event.currentTarget as HTMLAnchorElement | SVGAElement\n  const target = eventTarget.getAttribute('target')\n  return (\n    (target && target !== '_self') ||\n    event.metaKey ||\n    event.ctrlKey ||\n    event.shiftKey ||\n    event.altKey ||\n    (event.nativeEvent && event.nativeEvent.which === 2)\n  )\n}\n\ntype Props = {\n  /**\n   * Force a hard navigation using window.location instead of client-side routing\n   */\n  forceReload?: boolean\n  /**\n   * Disable the e.preventDefault() call on click if you want to handle it yourself via onClick\n   *\n   * @default true\n   */\n  preventDefault?: boolean\n} & { ref?: React.Ref<HTMLAnchorElement> } & LinkAdapterProps\n\nexport const Link: React.FC<Props> = ({\n  children,\n  forceReload = false,\n  href,\n  onClick,\n  preventDefault = true,\n  ref,\n  replace,\n  scroll,\n  ...rest\n}) => {\n  const router = useRouter()\n  const { startRouteTransition } = useRouteTransition()\n\n  return (\n    <PayloadLink\n      href={href}\n      onClick={(e) => {\n        if (isModifiedEvent(e)) {\n          return\n        }\n\n        if (onClick) {\n          onClick(e)\n        }\n\n        if (preventDefault) {\n          e.preventDefault()\n        }\n\n        const url = href\n\n        if (forceReload) {\n          window.location.href = url\n          return\n        }\n\n        const navigate = () => {\n          if (replace) {\n            void router.replace(url, { scroll })\n          } else {\n            void router.push(url, { scroll })\n          }\n        }\n\n        startRouteTransition(navigate)\n      }}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </PayloadLink>\n  )\n}\n"],"mappings":"AAAA;;;AAGA,OAAOA,KAAA,MAAW;AAElB,SAASC,WAAW,EAAEC,SAAS,QAAQ;AACvC,SAASC,kBAAkB,QAAQ;AAEnC,SAASC,gBAAgBC,KAAuB;EAC9C,MAAMC,WAAA,GAAcD,KAAA,CAAME,aAAa;EACvC,MAAMC,MAAA,GAASF,WAAA,CAAYG,YAAY,CAAC;EACxC,OACED,MAAC,IAAUA,MAAA,KAAW,WACtBH,KAAA,CAAMK,OAAO,IACbL,KAAA,CAAMM,OAAO,IACbN,KAAA,CAAMO,QAAQ,IACdP,KAAA,CAAMQ,MAAM,IACXR,KAAA,CAAMS,WAAW,IAAIT,KAAA,CAAMS,WAAW,CAACC,KAAK,KAAK;AAEtD;AAeA,OAAO,MAAMC,IAAA,GAAwBA,CAAC;EACpCC,QAAQ;EACRC,WAAA,GAAc,KAAK;EACnBC,IAAI;EACJC,OAAO;EACPC,cAAA,GAAiB,IAAI;EACrBC,GAAG;EACHC,OAAO;EACPC,MAAM;EACN,GAAGC;AAAA,CACJ;EACC,MAAMC,MAAA,GAASxB,SAAA;EACf,MAAM;IAAEyB;EAAoB,CAAE,GAAGxB,kBAAA;EAEjC,oBACEyB,IAAA,CAAC3B,WAAA;IACCkB,IAAA,EAAMA,IAAA;IACNC,OAAA,EAAUS,CAAA;MACR,IAAIzB,eAAA,CAAgByB,CAAA,GAAI;QACtB;MACF;MAEA,IAAIT,OAAA,EAAS;QACXA,OAAA,CAAQS,CAAA;MACV;MAEA,IAAIR,cAAA,EAAgB;QAClBQ,CAAA,CAAER,cAAc;MAClB;MAEA,MAAMS,GAAA,GAAMX,IAAA;MAEZ,IAAID,WAAA,EAAa;QACfa,MAAA,CAAOC,QAAQ,CAACb,IAAI,GAAGW,GAAA;QACvB;MACF;MAEA,MAAMG,QAAA,GAAWA,CAAA;QACf,IAAIV,OAAA,EAAS;UACX,KAAKG,MAAA,CAAOH,OAAO,CAACO,GAAA,EAAK;YAAEN;UAAO;QACpC,OAAO;UACL,KAAKE,MAAA,CAAOQ,IAAI,CAACJ,GAAA,EAAK;YAAEN;UAAO;QACjC;MACF;MAEAG,oBAAA,CAAqBM,QAAA;IACvB;IACAX,GAAA,EAAKA,GAAA;IACJ,GAAGG,IAAI;cAEPR;;AAGP","ignoreList":[]}

package/dist/elements/ListControls/index.css

@@ -0,0 +1,79 @@
+@layer payload-default {
+  .list-controls {
+    display: flex;
+    flex-direction: column;
+    padding: var(--spacer-2-5) var(--gutter-h);
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+
+    .pill-selector,
+    .where-builder,
+    .sort-complex,
+    .group-by-builder {
+      margin-top: var(--spacer-2);
+    }
+
+    .search-bar {
+      min-width: 180px;
+      width: 180px;
+    }
+  }
+
+  .list-controls__search-row {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+  }
+
+  .list-controls__left {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    flex-shrink: 0;
+  }
+
+  .list-controls__spacer {
+    flex: 1;
+  }
+
+  .list-controls__actions {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    flex-shrink: 0;
+  }
+
+  @media (max-width: 768px) {
+    .list-controls__search-row {
+      flex-wrap: wrap;
+      row-gap: var(--spacer-2);
+    }
+
+    .list-controls .search-bar {
+      width: 100%;
+    }
+
+    .list-controls__left {
+      width: 100%;
+    }
+
+    .list-controls__spacer {
+      display: none;
+    }
+
+    .list-controls__actions {
+      width: 100%;
+
+      .pill {
+        padding: var(--spacer-1) var(--spacer-1) var(--spacer-1) var(--spacer-2);
+        justify-content: space-between;
+      }
+    }
+
+    .list-controls__toggle-columns,
+    .list-controls__toggle-where,
+    .list-controls__toggle-sort,
+    .list-controls__toggle-group-by {
+      flex: 1;
+    }
+  }
+}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ListControlsProps } from './types.js';
-import './index.scss';
+import './index.css';
 /**
  * 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

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":"AAKA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAE7E,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAgBnD,OAAO,cAAc,CAAA;AAIrB;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAyNpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAcnD,OAAO,aAAa,CAAA;AAIpB;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgLpD,CAAA"}

package/dist/elements/ListControls/index.js

@@ -1,25 +1,23 @@
 'use client';
 
+import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useWindowInfo } from '@faceless-ui/window-info';
-import { getTranslation } from '@payloadcms/translations';
 import { validateWhereQuery } from 'payload/shared';
-import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { Popup, PopupList } 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';
 import { useListQuery } from '../../providers/ListQuery/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { AnimateHeight } from '../AnimateHeight/index.js';
+import { Button } from '../Button/index.js';
 import { ColumnSelector } from '../ColumnSelector/index.js';
-import { GroupByBuilder } from '../GroupByBuilder/index.js';
-import { Pill } from '../Pill/index.js';
+import { GroupByControl } from '../GroupByControl/index.js';
 import { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js';
 import { SearchBar } from '../SearchBar/index.js';
 import { WhereBuilder } from '../WhereBuilder/index.js';
-import { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'list-controls';
 /**
  * The ListControls component is used to render the controls (search, filter, where)
@@ -27,167 +25,183 @@ const baseClass = 'list-controls';
  * the collection's documents.
  */
 export const ListControls = props => {
+  const $ = _c(4);
   const {
     beforeActions,
     collectionConfig,
     collectionSlug,
     disableQueryPresets,
-    enableColumns = true,
-    enableFilters = true,
-    enableSort = false,
+    enableColumns: t0,
+    enableFilters: t1,
+    enableSort: t2,
+    hasCreatePermission,
     listMenuItems,
+    newDocumentURL,
     queryPreset: activePreset,
     queryPresetPermissions,
     renderedFilters,
     resolvedFilterOptions
   } = props;
+  const enableColumns = t0 === undefined ? true : t0;
+  const enableFilters = t1 === undefined ? true : t1;
+  const enableSort = t2 === undefined ? false : t2;
   const {
     handleSearchChange,
     query
   } = useListQuery();
-  const titleField = useUseTitleField(collectionConfig);
   const {
-    i18n,
     t
   } = useTranslation();
   const {
-    breakpoints: {
-      s: smallBreak
-    }
+    breakpoints: t3
   } = useWindowInfo();
-  const searchLabel = (titleField && getTranslation('label' in titleField && (typeof titleField.label === 'string' || typeof titleField.label === 'object') ? titleField.label : 'name' in titleField ? titleField.name : null, i18n)) ?? 'ID';
-  const listSearchableFields = getTextFieldsToBeSearched(collectionConfig.admin.listSearchableFields, collectionConfig.fields, i18n);
-  const searchLabelTranslated = useMemo(() => {
-    if (listSearchableFields?.length > 0) {
-      return 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)
-          })}`;
-        }
-        if (i === listSearchableFields.length - 1) {
-          return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`;
-        }
-        return `${placeholderText}, ${getTranslation(label, i18n)}`;
-      }, '');
-    }
-    return t('general:searchBy', {
-      label: getTranslation(searchLabel, i18n)
-    });
-  }, [t, listSearchableFields, i18n, searchLabel]);
+  const {
+    s: smallBreak
+  } = t3;
+  const searchLabelTranslated = t("general:searchBy", {
+    label: ""
+  }).split(" ")[0];
   const hasWhereParam = useRef(Boolean(query?.where));
   const shouldInitializeWhereOpened = validateWhereQuery(query?.where);
-  const [visibleDrawer, setVisibleDrawer] = useState(shouldInitializeWhereOpened ? 'where' : undefined);
-  useEffect(() => {
-    if (hasWhereParam.current && !query?.where) {
-      hasWhereParam.current = false;
-    } else if (query?.where) {
-      hasWhereParam.current = true;
-    }
-  }, [setVisibleDrawer, query?.where]);
-  return /*#__PURE__*/_jsxs("div", {
+  const [visibleDrawer, setVisibleDrawer] = useState(shouldInitializeWhereOpened ? "where" : undefined);
+  let t4;
+  if ($[0] !== query?.where) {
+    t4 = () => {
+      if (hasWhereParam.current && !query?.where) {
+        hasWhereParam.current = false;
+      } else {
+        if (query?.where) {
+          hasWhereParam.current = true;
+        }
+      }
+    };
+    $[0] = query?.where;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  const t5 = query?.where;
+  let t6;
+  if ($[2] !== t5) {
+    t6 = [setVisibleDrawer, t5];
+    $[2] = t5;
+    $[3] = t6;
+  } else {
+    t6 = $[3];
+  }
+  useEffect(t4, t6);
+  return _jsxs("div", {
     className: baseClass,
-    children: [collectionConfig?.enableQueryPresets && !disableQueryPresets && /*#__PURE__*/_jsx(QueryPresetBar, {
-      activePreset: activePreset,
-      collectionSlug: collectionSlug,
-      queryPresetPermissions: queryPresetPermissions
-    }), /*#__PURE__*/_jsx(SearchBar, {
-      Actions: [!smallBreak && /*#__PURE__*/_jsx(React.Fragment, {
-        children: beforeActions && beforeActions
-      }, "before-actions"), 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')
-      }, "toggle-list-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')
-      }, "toggle-list-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')
-      }, "toggle-list-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: ''
-        })
-      }, "toggle-group-by"), 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: /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
-          children: listMenuItems.map((item, i_0) => /*#__PURE__*/_jsx(Fragment, {
-            children: item
-          }, `list-menu-item-${i_0}`))
-        })
-      }, "list-menu")].filter(Boolean),
-      label: searchLabelTranslated,
-      onSearchChange: handleSearchChange,
-      searchQueryParam: query?.search
-    }, collectionSlug), enableColumns && /*#__PURE__*/_jsx(AnimateHeight, {
+    children: [_jsxs("div", {
+      className: `${baseClass}__search-row`,
+      children: [_jsxs("div", {
+        className: `${baseClass}__left`,
+        children: [_jsx(SearchBar, {
+          label: searchLabelTranslated,
+          onSearchChange: handleSearchChange,
+          searchQueryParam: query?.search
+        }, collectionSlug), collectionConfig?.enableQueryPresets && !disableQueryPresets && _jsx(QueryPresetBar, {
+          activePreset,
+          collectionSlug,
+          queryPresetPermissions
+        })]
+      }), _jsx("div", {
+        className: `${baseClass}__spacer`
+      }), _jsxs("div", {
+        className: `${baseClass}__actions`,
+        children: [!smallBreak && beforeActions, enableFilters && _jsx(Button, {
+          buttonStyle: "secondary",
+          className: `${baseClass}__toggle-where`,
+          extraButtonProps: {
+            "aria-controls": `${baseClass}-where`,
+            "aria-expanded": visibleDrawer === "where"
+          },
+          icon: _jsx(ChevronIcon, {
+            direction: visibleDrawer === "where" ? "up" : "down",
+            size: 16
+          }),
+          id: "toggle-list-filters",
+          onClick: () => setVisibleDrawer(visibleDrawer !== "where" ? "where" : undefined),
+          size: "medium",
+          children: t("general:filters")
+        }), collectionConfig.admin.groupBy && _jsx(GroupByControl, {
+          collectionSlug: collectionConfig.slug,
+          fields: collectionConfig.fields
+        }), enableColumns && _jsx(Button, {
+          buttonStyle: "secondary",
+          className: `${baseClass}__toggle-columns`,
+          extraButtonProps: {
+            "aria-controls": `${baseClass}-columns`,
+            "aria-expanded": visibleDrawer === "columns"
+          },
+          icon: _jsx(ChevronIcon, {
+            direction: visibleDrawer === "columns" ? "up" : "down",
+            size: 16
+          }),
+          id: "toggle-list-columns",
+          onClick: () => setVisibleDrawer(visibleDrawer !== "columns" ? "columns" : undefined),
+          size: "medium",
+          children: t("general:columns")
+        }), enableSort && _jsx(Button, {
+          buttonStyle: "secondary",
+          className: `${baseClass}__toggle-sort`,
+          extraButtonProps: {
+            "aria-controls": `${baseClass}-sort`,
+            "aria-expanded": visibleDrawer === "sort"
+          },
+          icon: _jsx(ChevronIcon, {
+            size: 16
+          }),
+          id: "toggle-list-sort",
+          onClick: () => setVisibleDrawer(visibleDrawer !== "sort" ? "sort" : undefined),
+          size: "medium",
+          children: t("general:sort")
+        }), hasCreatePermission && newDocumentURL && _jsx(Button, {
+          buttonStyle: "primary",
+          className: `${baseClass}__create-new`,
+          el: "link",
+          id: "create-new-doc",
+          size: "medium",
+          to: newDocumentURL,
+          children: t("general:createNew")
+        }), listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && _jsx(Popup, {
+          button: _jsx(Dots, {
+            ariaLabel: t("general:moreOptions")
+          }),
+          className: `${baseClass}__popup`,
+          horizontalAlign: "right",
+          id: "list-menu",
+          size: "medium",
+          verticalAlign: "bottom",
+          children: _jsx(PopupList.ButtonGroup, {
+            children: listMenuItems.map(_temp)
+          })
+        })]
+      })]
+    }), enableColumns && _jsx(AnimateHeight, {
       className: `${baseClass}__columns`,
-      height: visibleDrawer === 'columns' ? 'auto' : 0,
+      height: visibleDrawer === "columns" ? "auto" : 0,
       id: `${baseClass}-columns`,
-      children: /*#__PURE__*/_jsx(ColumnSelector, {
+      children: _jsx(ColumnSelector, {
         collectionSlug: collectionConfig.slug
       })
-    }), /*#__PURE__*/_jsx(AnimateHeight, {
+    }), _jsx(AnimateHeight, {
       className: `${baseClass}__where`,
-      height: visibleDrawer === 'where' ? 'auto' : 0,
+      height: visibleDrawer === "where" ? "auto" : 0,
       id: `${baseClass}-where`,
-      children: /*#__PURE__*/_jsx(WhereBuilder, {
+      children: _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
+        renderedFilters,
+        resolvedFilterOptions
       })
     })]
   });
 };
+function _temp(item, i) {
+  return _jsx(Fragment, {
+    children: item
+  }, `list-menu-item-${i}`);
+}
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useWindowInfo","getTranslation","validateWhereQuery","React","Fragment","useEffect","useMemo","useRef","useState","Popup","PopupList","useUseTitleField","ChevronIcon","Dots","useListQuery","useTranslation","AnimateHeight","ColumnSelector","GroupByBuilder","Pill","QueryPresetBar","SearchBar","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","length","reduce","placeholderText","field","i","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","undefined","current","_jsxs","className","enableQueryPresets","_jsx","Actions","icon","direction","id","onClick","pillStyle","size","groupBy","Array","isArray","button","ariaLabel","horizontalAlign","verticalAlign","ButtonGroup","map","item","filter","onSearchChange","searchQueryParam","search","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, useMemo, 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 { 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 { SearchBar } from '../SearchBar/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 = useMemo(() => {\n    if (listSearchableFields?.length > 0) {\n      return listSearchableFields.reduce((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    return t('general:searchBy', { label: getTranslation(searchLabel, i18n) })\n  }, [t, listSearchableFields, i18n, searchLabel])\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  return (\n    <div className={baseClass}>\n      {collectionConfig?.enableQueryPresets && !disableQueryPresets && (\n        <QueryPresetBar\n          activePreset={activePreset}\n          collectionSlug={collectionSlug}\n          queryPresetPermissions={queryPresetPermissions}\n        />\n      )}\n      <SearchBar\n        Actions={[\n          !smallBreak && (\n            <React.Fragment key=\"before-actions\">{beforeActions && beforeActions}</React.Fragment>\n          ),\n          enableColumns && (\n            <Pill\n              aria-controls={`${baseClass}-columns`}\n              aria-expanded={visibleDrawer === 'columns'}\n              className={`${baseClass}__toggle-columns`}\n              icon={<ChevronIcon direction={visibleDrawer === 'columns' ? 'up' : 'down'} />}\n              id=\"toggle-list-columns\"\n              key=\"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              key=\"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              key=\"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              key=\"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              key=\"list-menu\"\n              size=\"small\"\n              verticalAlign=\"bottom\"\n            >\n              <PopupList.ButtonGroup>\n                {listMenuItems.map((item, i) => (\n                  <Fragment key={`list-menu-item-${i}`}>{item}</Fragment>\n                ))}\n              </PopupList.ButtonGroup>\n            </Popup>\n          ),\n        ].filter(Boolean)}\n        key={collectionSlug}\n        label={searchLabelTranslated}\n        onSearchChange={handleSearchChange}\n        searchQueryParam={query?.search}\n      />\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":[]}
+{"version":3,"file":"index.js","names":["c","_c","useWindowInfo","validateWhereQuery","React","Fragment","useEffect","useRef","useState","Popup","PopupList","ChevronIcon","Dots","useListQuery","useTranslation","AnimateHeight","Button","ColumnSelector","GroupByControl","QueryPresetBar","SearchBar","WhereBuilder","baseClass","ListControls","props","$","beforeActions","collectionConfig","collectionSlug","disableQueryPresets","enableColumns","t0","enableFilters","t1","enableSort","t2","hasCreatePermission","listMenuItems","newDocumentURL","queryPreset","activePreset","queryPresetPermissions","renderedFilters","resolvedFilterOptions","undefined","handleSearchChange","query","t","breakpoints","t3","s","smallBreak","searchLabelTranslated","label","split","hasWhereParam","Boolean","where","shouldInitializeWhereOpened","visibleDrawer","setVisibleDrawer","t4","current","t5","t6","_jsxs","className","children","_jsx","onSearchChange","searchQueryParam","search","enableQueryPresets","buttonStyle","extraButtonProps","icon","direction","size","onClick","admin","groupBy","slug","fields","el","id","to","Array","isArray","length","button","ariaLabel","horizontalAlign","verticalAlign","ButtonGroup","map","_temp","height","collectionPluralLabel","labels","plural","item","i"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\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 { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { Dots } from '../../icons/Dots/index.js'\nimport { useListQuery } from '../../providers/ListQuery/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { Button } from '../Button/index.js'\nimport { ColumnSelector } from '../ColumnSelector/index.js'\nimport { GroupByControl } from '../GroupByControl/index.js'\nimport { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js'\nimport { SearchBar } from '../SearchBar/index.js'\nimport { WhereBuilder } from '../WhereBuilder/index.js'\nimport './index.css'\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    hasCreatePermission,\n    listMenuItems,\n    newDocumentURL,\n    queryPreset: activePreset,\n    queryPresetPermissions,\n    renderedFilters,\n    resolvedFilterOptions,\n  } = props\n\n  const { handleSearchChange, query } = useListQuery()\n\n  const { t } = useTranslation()\n\n  const {\n    breakpoints: { s: smallBreak },\n  } = useWindowInfo()\n\n  // Simplified placeholder - just \"Search\" instead of \"Search by X, Y, Z\"\n  const searchLabelTranslated = t('general:searchBy', { label: '' }).split(' ')[0]\n\n  const hasWhereParam = useRef(Boolean(query?.where))\n\n  const shouldInitializeWhereOpened = validateWhereQuery(query?.where)\n\n  const [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    shouldInitializeWhereOpened ? 'where' : undefined,\n  )\n\n  useEffect(() => {\n    if (hasWhereParam.current && !query?.where) {\n      hasWhereParam.current = false\n    } else if (query?.where) {\n      hasWhereParam.current = true\n    }\n  }, [setVisibleDrawer, query?.where])\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__search-row`}>\n        <div className={`${baseClass}__left`}>\n          <SearchBar\n            key={collectionSlug}\n            label={searchLabelTranslated}\n            onSearchChange={handleSearchChange}\n            searchQueryParam={query?.search}\n          />\n          {collectionConfig?.enableQueryPresets && !disableQueryPresets && (\n            <QueryPresetBar\n              activePreset={activePreset}\n              collectionSlug={collectionSlug}\n              queryPresetPermissions={queryPresetPermissions}\n            />\n          )}\n        </div>\n        <div className={`${baseClass}__spacer`} />\n        <div className={`${baseClass}__actions`}>\n          {!smallBreak && beforeActions}\n          {enableFilters && (\n            <Button\n              buttonStyle=\"secondary\"\n              className={`${baseClass}__toggle-where`}\n              extraButtonProps={{\n                'aria-controls': `${baseClass}-where`,\n                'aria-expanded': visibleDrawer === 'where',\n              }}\n              icon={<ChevronIcon direction={visibleDrawer === 'where' ? 'up' : 'down'} size={16} />}\n              id=\"toggle-list-filters\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)}\n              size=\"medium\"\n            >\n              {t('general:filters')}\n            </Button>\n          )}\n          {collectionConfig.admin.groupBy && (\n            <GroupByControl\n              collectionSlug={collectionConfig.slug}\n              fields={collectionConfig.fields}\n            />\n          )}\n          {enableColumns && (\n            <Button\n              buttonStyle=\"secondary\"\n              className={`${baseClass}__toggle-columns`}\n              extraButtonProps={{\n                'aria-controls': `${baseClass}-columns`,\n                'aria-expanded': visibleDrawer === 'columns',\n              }}\n              icon={\n                <ChevronIcon direction={visibleDrawer === 'columns' ? 'up' : 'down'} size={16} />\n              }\n              id=\"toggle-list-columns\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)}\n              size=\"medium\"\n            >\n              {t('general:columns')}\n            </Button>\n          )}\n          {enableSort && (\n            <Button\n              buttonStyle=\"secondary\"\n              className={`${baseClass}__toggle-sort`}\n              extraButtonProps={{\n                'aria-controls': `${baseClass}-sort`,\n                'aria-expanded': visibleDrawer === 'sort',\n              }}\n              icon={<ChevronIcon size={16} />}\n              id=\"toggle-list-sort\"\n              onClick={() => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)}\n              size=\"medium\"\n            >\n              {t('general:sort')}\n            </Button>\n          )}\n          {hasCreatePermission && newDocumentURL && (\n            <Button\n              buttonStyle=\"primary\"\n              className={`${baseClass}__create-new`}\n              el=\"link\"\n              id=\"create-new-doc\"\n              size=\"medium\"\n              to={newDocumentURL}\n            >\n              {t('general:createNew')}\n            </Button>\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              <PopupList.ButtonGroup>\n                {listMenuItems.map((item, i) => (\n                  <Fragment key={`list-menu-item-${i}`}>{item}</Fragment>\n                ))}\n              </PopupList.ButtonGroup>\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    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -20,7 +20,9 @@ export type ListControlsProps = {
     readonly handleSearchChange?: (search: string) => void;
     readonly handleSortChange?: (sort: string) => void;
     readonly handleWhereChange?: (where: Where) => void;
+    readonly hasCreatePermission?: boolean;
     readonly listMenuItems?: React.ReactNode[];
+    readonly newDocumentURL?: string;
     readonly queryPreset?: QueryPreset;
     readonly queryPresetPermissions?: SanitizedCollectionPermission;
     readonly renderedFilters?: Map<string, React.ReactNode>;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EACtB,WAAW,EACX,qBAAqB,EACrB,6BAA6B,EAC7B,KAAK,EACN,MAAM,SAAS,CAAA;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B;;;OAGG;IACH,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IACpC;;;OAGG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACnD,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAA;IAClC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,6BAA6B,CAAA;IAC/D,QAAQ,CAAC,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACvD,QAAQ,CAAC,qBAAqB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAA;CACpE,CAAA"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControls/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,sBAAsB,EACtB,WAAW,EACX,qBAAqB,EACrB,6BAA6B,EAC7B,KAAK,EACN,MAAM,SAAS,CAAA;AAEhB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,gBAAgB,EAAE,sBAAsB,CAAA;IACjD,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAA;IAC/B;;;OAGG;IACH,QAAQ,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IACpC;;;OAGG;IACH,QAAQ,CAAC,eAAe,CAAC,EAAE,OAAO,CAAA;IAClC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAA;IAChC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;IAC7B,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACtD,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IAClD,QAAQ,CAAC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACnD,QAAQ,CAAC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IACtC,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,WAAW,CAAA;IAClC,QAAQ,CAAC,sBAAsB,CAAC,EAAE,6BAA6B,CAAA;IAC/D,QAAQ,CAAC,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC,CAAA;IACvD,QAAQ,CAAC,qBAAqB,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,qBAAqB,CAAC,CAAA;CACpE,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/ListControls/types.ts"],"sourcesContent":["import type {\n  ClientCollectionConfig,\n  QueryPreset,\n  ResolvedFilterOptions,\n  SanitizedCollectionPermission,\n  Where,\n} from 'payload'\n\nexport type ListControlsProps = {\n  readonly beforeActions?: React.ReactNode[]\n  readonly collectionConfig: ClientCollectionConfig\n  readonly collectionSlug: string\n  /**\n   * @deprecated\n   * These are now handled by the `ListSelection` component\n   */\n  readonly disableBulkDelete?: boolean\n  /**\n   * @deprecated\n   * These are now handled by the `ListSelection` component\n   */\n  readonly disableBulkEdit?: boolean\n  readonly disableQueryPresets?: boolean\n  readonly enableColumns?: boolean\n  readonly enableFilters?: boolean\n  readonly enableSort?: boolean\n  readonly handleSearchChange?: (search: string) => void\n  readonly handleSortChange?: (sort: string) => void\n  readonly handleWhereChange?: (where: Where) => void\n  readonly listMenuItems?: React.ReactNode[]\n  readonly queryPreset?: QueryPreset\n  readonly queryPresetPermissions?: SanitizedCollectionPermission\n  readonly renderedFilters?: Map<string, React.ReactNode>\n  readonly resolvedFilterOptions?: Map<string, ResolvedFilterOptions>\n}\n"],"mappings":"AAQA","ignoreList":[]}
+{"version":3,"file":"types.js","names":[],"sources":["../../../src/elements/ListControls/types.ts"],"sourcesContent":["import type {\n  ClientCollectionConfig,\n  QueryPreset,\n  ResolvedFilterOptions,\n  SanitizedCollectionPermission,\n  Where,\n} from 'payload'\n\nexport type ListControlsProps = {\n  readonly beforeActions?: React.ReactNode[]\n  readonly collectionConfig: ClientCollectionConfig\n  readonly collectionSlug: string\n  /**\n   * @deprecated\n   * These are now handled by the `ListSelection` component\n   */\n  readonly disableBulkDelete?: boolean\n  /**\n   * @deprecated\n   * These are now handled by the `ListSelection` component\n   */\n  readonly disableBulkEdit?: boolean\n  readonly disableQueryPresets?: boolean\n  readonly enableColumns?: boolean\n  readonly enableFilters?: boolean\n  readonly enableSort?: boolean\n  readonly handleSearchChange?: (search: string) => void\n  readonly handleSortChange?: (sort: string) => void\n  readonly handleWhereChange?: (where: Where) => void\n  readonly hasCreatePermission?: boolean\n  readonly listMenuItems?: React.ReactNode[]\n  readonly newDocumentURL?: string\n  readonly queryPreset?: QueryPreset\n  readonly queryPresetPermissions?: SanitizedCollectionPermission\n  readonly renderedFilters?: Map<string, React.ReactNode>\n  readonly resolvedFilterOptions?: Map<string, ResolvedFilterOptions>\n}\n"],"mappings":"AAQA","ignoreList":[]}

package/dist/elements/ListControlsBar/index.css

@@ -0,0 +1,20 @@
+@layer payload-default {
+  .list-controls-bar {
+    display: flex;
+    align-items: center;
+    gap: var(--spacer-2);
+    padding: var(--spacer-2-5) var(--gutter-h);
+  }
+
+  .list-controls-bar--border {
+    border-bottom: var(--stroke-width-small) solid var(--color-border);
+  }
+
+  @media (max-width: 768px) {
+    .list-controls-bar {
+      padding: var(--spacer-2-5) var(--spacer-3);
+      flex-wrap: wrap;
+      row-gap: var(--spacer-2);
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import './index.css';
+export type ListControlsBarProps = {
+    readonly children: React.ReactNode;
+    readonly className?: string;
+    /**
+     * Whether to show a bottom border. Defaults to true.
+     */
+    readonly showBorder?: boolean;
+};
+/**
+ * A simple container for list controls (search, filters, actions).
+ * Provides consistent padding and layout across list views.
+ */
+export declare const ListControlsBar: React.FC<ListControlsBarProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListControlsBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAA;IAC3B;;OAEG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAA;CAC9B,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAc1D,CAAA"}