@payloadcms/ui 4.0.0-internal.e16cf59 → 4.0.0-internal.e38d3ac

package/dist/elements/Link/index.js

@@ -1,19 +1,13 @@
 'use client';
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import NextLinkImport from 'next/link.js';
-import { useRouter } from 'next/navigation.js';
 import React from 'react';
+import { PayloadLink, useRouter } from '../../providers/RouterAdapter/index.js';
 import { useRouteTransition } from '../../providers/RouteTransition/index.js';
-import { formatUrl } from './formatUrl.js';
-const NextLink = 'default' in NextLinkImport ? NextLinkImport.default : NextLinkImport;
-// Copied from  https://github.com/vercel/next.js/blob/canary/packages/next/src/client/link.tsx#L180-L191
 function isModifiedEvent(event) {
   const eventTarget = event.currentTarget;
   const target = eventTarget.getAttribute('target');
-  return target && target !== '_self' || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey ||
-  // triggers resource download
-  event.nativeEvent && event.nativeEvent.which === 2;
+  return target && target !== '_self' || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey || event.nativeEvent && event.nativeEvent.which === 2;
 }
 export const Link = ({
   children,
@@ -30,7 +24,7 @@ export const Link = ({
   const {
     startRouteTransition
   } = useRouteTransition();
-  return /*#__PURE__*/_jsx(NextLink, {
+  return /*#__PURE__*/_jsx(PayloadLink, {
     href: href,
     onClick: e => {
       if (isModifiedEvent(e)) {
@@ -39,12 +33,10 @@ export const Link = ({
       if (onClick) {
         onClick(e);
       }
-      // We need a preventDefault here so that a clicked link doesn't trigger twice,
-      // once for default browser navigation and once for startRouteTransition
       if (preventDefault) {
         e.preventDefault();
       }
-      const url = typeof href === 'string' ? href : formatUrl(href);
+      const url = href;
       if (forceReload) {
         window.location.href = url;
         return;
@@ -60,7 +52,6 @@ export const Link = ({
           });
         }
       };
-      // Call startRouteTransition if available, otherwise navigate directly
       startRouteTransition(navigate);
     },
     ref: ref,

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/ListColumnSelectionButton/index.d.ts

@@ -0,0 +1,11 @@
+import type { SanitizedCollectionConfig } from 'payload';
+import React from 'react';
+export type ListColumnSelectionButtonProps = {
+    readonly collectionSlug: SanitizedCollectionConfig['slug'];
+};
+/**
+ * Connects the presentational {@link ColumnSelectionButton} to the table columns state, so the
+ * button itself stays unaware of where its column state is stored.
+ */
+export declare const ListColumnSelectionButton: React.FC<ListColumnSelectionButtonProps>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ListColumnSelectionButton/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAA;AAExD,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,MAAM,8BAA8B,GAAG;IAC3C,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAC3D,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,yBAAyB,EAAE,KAAK,CAAC,EAAE,CAAC,8BAA8B,CAY9E,CAAA"}

package/dist/elements/ListColumnSelectionButton/index.js

@@ -0,0 +1,37 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { useTableColumns } from '../../providers/TableColumns/index.js';
+import { ColumnSelectionButton } from '../ColumnSelection/index.js';
+/**
+ * Connects the presentational {@link ColumnSelectionButton} to the table columns state, so the
+ * button itself stays unaware of where its column state is stored.
+ */
+export const ListColumnSelectionButton = t0 => {
+  const $ = _c(4);
+  const {
+    collectionSlug
+  } = t0;
+  const {
+    columns,
+    setColumns
+  } = useTableColumns();
+  let t1;
+  if ($[0] !== collectionSlug || $[1] !== columns || $[2] !== setColumns) {
+    t1 = _jsx(ColumnSelectionButton, {
+      collectionSlug,
+      columns,
+      onChange: setColumns
+    });
+    $[0] = collectionSlug;
+    $[1] = columns;
+    $[2] = setColumns;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useTableColumns","ColumnSelectionButton","ListColumnSelectionButton","t0","$","collectionSlug","columns","setColumns","t1","_jsx","onChange"],"sources":["../../../src/elements/ListColumnSelectionButton/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport React from 'react'\n\nimport { useTableColumns } from '../../providers/TableColumns/index.js'\nimport { ColumnSelectionButton } from '../ColumnSelection/index.js'\n\nexport type ListColumnSelectionButtonProps = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n}\n\n/**\n * Connects the presentational {@link ColumnSelectionButton} to the table columns state, so the\n * button itself stays unaware of where its column state is stored.\n */\nexport const ListColumnSelectionButton: React.FC<ListColumnSelectionButtonProps> = ({\n  collectionSlug,\n}) => {\n  const { columns, setColumns } = useTableColumns()\n\n  return (\n    <ColumnSelectionButton\n      collectionSlug={collectionSlug}\n      columns={columns}\n      onChange={setColumns}\n    />\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAIA,OAAOC,KAAA,MAAW;AAElB,SAASC,eAAe,QAAQ;AAChC,SAASC,qBAAqB,QAAQ;AAMtC;;;;AAIA,OAAO,MAAMC,yBAAA,GAAsEC,EAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EAAC;IAAAO;EAAA,IAAAF,EAEnF;EACC;IAAAG,OAAA;IAAAC;EAAA,IAAgCP,eAAA;EAAA,IAAAQ,EAAA;EAAA,IAAAJ,CAAA,QAAAC,cAAA,IAAAD,CAAA,QAAAE,OAAA,IAAAF,CAAA,QAAAG,UAAA;IAG9BC,EAAA,GAAAC,IAAA,CAAAR,qBAAA;MAAAI,cAAA;MAAAC,OAAA;MAAAI,QAAA,EAGYH;IAAA,C;;;;;;;;SAHZC,E;CAMJ","ignoreList":[]}

package/dist/elements/ListControls/index.css

@@ -0,0 +1,74 @@
+@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,
+    .sort-complex,
+    .group-by-builder {
+      margin-top: var(--spacer-2);
+    }
+  }
+
+  .drawer .list-controls {
+    padding-left: var(--spacer-3);
+    padding-right: var(--spacer-3);
+  }
+
+  .list-controls__search-row {
+    display: flex;
+    gap: var(--spacer-2);
+  }
+
+  .list-controls__left {
+    display: flex;
+    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-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":"AAGA,OAAO,KAAgD,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAanD,OAAO,aAAa,CAAA;AAIpB;;;;GAIG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA0JpD,CAAA"}

package/dist/elements/ListControls/index.js

@@ -1,25 +1,21 @@
 '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 { ColumnSelector } from '../ColumnSelector/index.js';
-import { GroupByBuilder } from '../GroupByBuilder/index.js';
-import { Pill } from '../Pill/index.js';
+import { Button } from '../Button/index.js';
+import { ListColumnSelectionButton } from '../ListColumnSelectionButton/index.js';
+import { ListGroupByButton } from '../ListGroupByButton/index.js';
+import { ListWhereBuilder } from '../ListWhereBuilder/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 { ListSearchFilter } from '../Search/ListSearchFilter/index.js';
+import './index.css';
 const baseClass = 'list-controls';
 /**
  * The ListControls component is used to render the controls (search, filter, where)
@@ -27,167 +23,178 @@ const baseClass = 'list-controls';
  * the collection's documents.
  */
 export const ListControls = props => {
+  const $ = _c(8);
   const {
     beforeActions,
     collectionConfig,
     collectionSlug,
     disableQueryPresets,
-    enableColumns = true,
-    enableFilters = true,
-    enableSort = false,
+    enableColumns: t0,
+    enableFilters: t1,
+    enableSort: t2,
+    hasCreatePermission,
+    isWhereOpen: isWhereOpenFromProps,
     listMenuItems,
+    newDocumentURL,
+    onWhereToggle,
     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 isControlled = typeof onWhereToggle === "function";
   const {
     handleSearchChange,
+    hasActiveFilters,
     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(hasActiveFilters ? "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);
+  const isWhereOpen = isControlled ? Boolean(isWhereOpenFromProps) : visibleDrawer === "where";
+  let t7;
+  if ($[4] !== isControlled || $[5] !== onWhereToggle || $[6] !== visibleDrawer) {
+    t7 = isControlled ? onWhereToggle : () => setVisibleDrawer(visibleDrawer !== "where" ? "where" : undefined);
+    $[4] = isControlled;
+    $[5] = onWhereToggle;
+    $[6] = visibleDrawer;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  const handleWhereToggle = t7;
+  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, {
-      className: `${baseClass}__columns`,
-      height: visibleDrawer === 'columns' ? 'auto' : 0,
-      id: `${baseClass}-columns`,
-      children: /*#__PURE__*/_jsx(ColumnSelector, {
-        collectionSlug: collectionConfig.slug
-      })
-    }), /*#__PURE__*/_jsx(AnimateHeight, {
+    children: [_jsxs("div", {
+      className: `${baseClass}__search-row`,
+      children: [_jsxs("div", {
+        className: `${baseClass}__left`,
+        children: [_jsx(ListSearchFilter, {
+          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": isWhereOpen
+          },
+          icon: _jsx(ChevronIcon, {
+            direction: isWhereOpen ? "up" : "down",
+            size: 16
+          }),
+          id: "toggle-list-filters",
+          onClick: handleWhereToggle,
+          selected: isWhereOpen || hasActiveFilters,
+          size: "medium",
+          children: t("general:filters")
+        }), _jsx(ListGroupByButton, {
+          collectionSlug: collectionConfig.slug,
+          fields: collectionConfig.fields
+        }), enableColumns && _jsx(ListColumnSelectionButton, {
+          collectionSlug: collectionConfig.slug
+        }), 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",
+          verticalAlign: "bottom",
+          children: _jsx(PopupList.ButtonGroup, {
+            children: listMenuItems.map(_temp)
+          })
+        })]
+      })]
+    }), !isControlled && isWhereOpen && _jsx("div", {
       className: `${baseClass}__where`,
-      height: visibleDrawer === 'where' ? 'auto' : 0,
       id: `${baseClass}-where`,
-      children: /*#__PURE__*/_jsx(WhereBuilder, {
+      children: _jsx(ListWhereBuilder, {
         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
+        onEmptyRemove: () => setVisibleDrawer(undefined),
+        renderedFilters,
+        resolvedFilterOptions
       })
     })]
   });
 };
+function _temp(item, i) {
+  return _jsx(Fragment, {
+    children: item
+  }, `list-menu-item-${i}`);
+}
 //# sourceMappingURL=index.js.map