@payloadcms/ui 3.68.0-internal-debug.e9b66ee → 3.68.0-internal.35482da

package/dist/elements/Link/formatUrl.js

@@ -21,64 +21,67 @@
 // USE OR OTHER DEALINGS IN THE SOFTWARE.
 const slashedProtocols = /https?|ftp|gopher|file/;
 function stringifyUrlQueryParam(param) {
-    if (typeof param === 'string' || typeof param === 'number' && !isNaN(param) || typeof param === 'boolean') {
-        return String(param);
-    } else {
-        return '';
-    }
+  if (typeof param === 'string' || typeof param === 'number' && !isNaN(param) || typeof param === 'boolean') {
+    return String(param);
+  } else {
+    return '';
+  }
 }
 export function urlQueryToSearchParams(urlQuery) {
-    const result = new URLSearchParams();
-    Object.entries(urlQuery).forEach(([key, value])=>{
-        if (Array.isArray(value)) {
-            value.forEach((item)=>result.append(key, stringifyUrlQueryParam(item)));
-        } else {
-            result.set(key, stringifyUrlQueryParam(value));
-        }
-    });
-    return result;
+  const result = new URLSearchParams();
+  Object.entries(urlQuery).forEach(([key, value]) => {
+    if (Array.isArray(value)) {
+      value.forEach(item => result.append(key, stringifyUrlQueryParam(item)));
+    } else {
+      result.set(key, stringifyUrlQueryParam(value));
+    }
+  });
+  return result;
 }
 export function formatUrl(urlObj) {
-    let { auth } = urlObj;
-    const { hostname } = urlObj;
-    let protocol = urlObj.protocol || '';
-    let pathname = urlObj.pathname || '';
-    let hash = urlObj.hash || '';
-    let query = urlObj.query || '';
-    let host = false;
-    auth = auth ? encodeURIComponent(auth).replace(/%3A/i, ':') + '@' : '';
-    if (urlObj.host) {
-        host = auth + urlObj.host;
-    } else if (hostname) {
-        host = auth + (~hostname.indexOf(':') ? `[${hostname}]` : hostname);
-        if (urlObj.port) {
-            host += ':' + urlObj.port;
-        }
-    }
-    if (query && typeof query === 'object') {
-        query = String(urlQueryToSearchParams(query));
-    }
-    let search = urlObj.search || query && `?${query}` || '';
-    if (protocol && !protocol.endsWith(':')) {
-        protocol += ':';
-    }
-    if (urlObj.slashes || (!protocol || slashedProtocols.test(protocol)) && host !== false) {
-        host = '//' + (host || '');
-        if (pathname && pathname[0] !== '/') {
-            pathname = '/' + pathname;
-        }
-    } else if (!host) {
-        host = '';
-    }
-    if (hash && hash[0] !== '#') {
-        hash = '#' + hash;
+  let {
+    auth
+  } = urlObj;
+  const {
+    hostname
+  } = urlObj;
+  let protocol = urlObj.protocol || '';
+  let pathname = urlObj.pathname || '';
+  let hash = urlObj.hash || '';
+  let query = urlObj.query || '';
+  let host = false;
+  auth = auth ? encodeURIComponent(auth).replace(/%3A/i, ':') + '@' : '';
+  if (urlObj.host) {
+    host = auth + urlObj.host;
+  } else if (hostname) {
+    host = auth + (~hostname.indexOf(':') ? `[${hostname}]` : hostname);
+    if (urlObj.port) {
+      host += ':' + urlObj.port;
     }
-    if (search && search[0] !== '?') {
-        search = '?' + search;
+  }
+  if (query && typeof query === 'object') {
+    query = String(urlQueryToSearchParams(query));
+  }
+  let search = urlObj.search || query && `?${query}` || '';
+  if (protocol && !protocol.endsWith(':')) {
+    protocol += ':';
+  }
+  if (urlObj.slashes || (!protocol || slashedProtocols.test(protocol)) && host !== false) {
+    host = '//' + (host || '');
+    if (pathname && pathname[0] !== '/') {
+      pathname = '/' + pathname;
     }
-    pathname = pathname.replace(/[?#]/g, encodeURIComponent);
-    search = search.replace('#', '%23');
-    return `${protocol}${host}${pathname}${search}${hash}`;
+  } else if (!host) {
+    host = '';
+  }
+  if (hash && hash[0] !== '#') {
+    hash = '#' + hash;
+  }
+  if (search && search[0] !== '?') {
+    search = '?' + search;
+  }
+  pathname = pathname.replace(/[?#]/g, encodeURIComponent);
+  search = search.replace('#', '%23');
+  return `${protocol}${host}${pathname}${search}${hash}`;
 }
-
 //# sourceMappingURL=formatUrl.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Link/formatUrl.ts"],"sourcesContent":["// Format function modified from nodejs\n// Copyright Joyent, Inc. and other Node contributors.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a\n// copy of this software and associated documentation files (the\n// \"Software\"), to deal in the Software without restriction, including\n// without limitation the rights to use, copy, modify, merge, publish,\n// distribute, sublicense, and/or sell copies of the Software, and to permit\n// persons to whom the Software is furnished to do so, subject to the\n// following conditions:\n//\n// The above copyright notice and this permission notice shall be included\n// in all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS\n// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN\n// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,\n// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR\n// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE\n// USE OR OTHER DEALINGS IN THE SOFTWARE.\n\nimport type { UrlObject } from 'url'\n\nconst slashedProtocols = /https?|ftp|gopher|file/\n\nfunction stringifyUrlQueryParam(param: unknown): string {\n  if (\n    typeof param === 'string' ||\n    (typeof param === 'number' && !isNaN(param)) ||\n    typeof param === 'boolean'\n  ) {\n    return String(param)\n  } else {\n    return ''\n  }\n}\n\nexport function urlQueryToSearchParams(urlQuery: UrlObject['query']): URLSearchParams {\n  const result = new URLSearchParams()\n  Object.entries(urlQuery).forEach(([key, value]) => {\n    if (Array.isArray(value)) {\n      value.forEach((item) => result.append(key, stringifyUrlQueryParam(item)))\n    } else {\n      result.set(key, stringifyUrlQueryParam(value))\n    }\n  })\n  return result\n}\n\nexport function formatUrl(urlObj: UrlObject) {\n  let { auth } = urlObj\n  const { hostname } = urlObj\n  let protocol = urlObj.protocol || ''\n  let pathname = urlObj.pathname || ''\n  let hash = urlObj.hash || ''\n  let query = urlObj.query || ''\n  let host: false | string = false\n\n  auth = auth ? encodeURIComponent(auth).replace(/%3A/i, ':') + '@' : ''\n\n  if (urlObj.host) {\n    host = auth + urlObj.host\n  } else if (hostname) {\n    host = auth + (~hostname.indexOf(':') ? `[${hostname}]` : hostname)\n    if (urlObj.port) {\n      host += ':' + urlObj.port\n    }\n  }\n\n  if (query && typeof query === 'object') {\n    query = String(urlQueryToSearchParams(query))\n  }\n\n  let search = urlObj.search || (query && `?${query}`) || ''\n\n  if (protocol && !protocol.endsWith(':')) {\n    protocol += ':'\n  }\n\n  if (urlObj.slashes || ((!protocol || slashedProtocols.test(protocol)) && host !== false)) {\n    host = '//' + (host || '')\n    if (pathname && pathname[0] !== '/') {\n      pathname = '/' + pathname\n    }\n  } else if (!host) {\n    host = ''\n  }\n\n  if (hash && hash[0] !== '#') {\n    hash = '#' + hash\n  }\n  if (search && search[0] !== '?') {\n    search = '?' + search\n  }\n\n  pathname = pathname.replace(/[?#]/g, encodeURIComponent)\n  search = search.replace('#', '%23')\n\n  return `${protocol}${host}${pathname}${search}${hash}`\n}\n"],"names":["slashedProtocols","stringifyUrlQueryParam","param","isNaN","String","urlQueryToSearchParams","urlQuery","result","URLSearchParams","Object","entries","forEach","key","value","Array","isArray","item","append","set","formatUrl","urlObj","auth","hostname","protocol","pathname","hash","query","host","encodeURIComponent","replace","indexOf","port","search","endsWith","slashes","test"],"mappings":"AAAA,uCAAuC;AACvC,sDAAsD;AACtD,EAAE;AACF,0EAA0E;AAC1E,gEAAgE;AAChE,sEAAsE;AACtE,sEAAsE;AACtE,4EAA4E;AAC5E,qEAAqE;AACrE,wBAAwB;AACxB,EAAE;AACF,0EAA0E;AAC1E,yDAAyD;AACzD,EAAE;AACF,0EAA0E;AAC1E,6DAA6D;AAC7D,4EAA4E;AAC5E,2EAA2E;AAC3E,wEAAwE;AACxE,4EAA4E;AAC5E,yCAAyC;AAIzC,MAAMA,mBAAmB;AAEzB,SAASC,uBAAuBC,KAAc;IAC5C,IACE,OAAOA,UAAU,YAChB,OAAOA,UAAU,YAAY,CAACC,MAAMD,UACrC,OAAOA,UAAU,WACjB;QACA,OAAOE,OAAOF;IAChB,OAAO;QACL,OAAO;IACT;AACF;AAEA,OAAO,SAASG,uBAAuBC,QAA4B;IACjE,MAAMC,SAAS,IAAIC;IACnBC,OAAOC,OAAO,CAACJ,UAAUK,OAAO,CAAC,CAAC,CAACC,KAAKC,MAAM;QAC5C,IAAIC,MAAMC,OAAO,CAACF,QAAQ;YACxBA,MAAMF,OAAO,CAAC,CAACK,OAAST,OAAOU,MAAM,CAACL,KAAKX,uBAAuBe;QACpE,OAAO;YACLT,OAAOW,GAAG,CAACN,KAAKX,uBAAuBY;QACzC;IACF;IACA,OAAON;AACT;AAEA,OAAO,SAASY,UAAUC,MAAiB;IACzC,IAAI,EAAEC,IAAI,EAAE,GAAGD;IACf,MAAM,EAAEE,QAAQ,EAAE,GAAGF;IACrB,IAAIG,WAAWH,OAAOG,QAAQ,IAAI;IAClC,IAAIC,WAAWJ,OAAOI,QAAQ,IAAI;IAClC,IAAIC,OAAOL,OAAOK,IAAI,IAAI;IAC1B,IAAIC,QAAQN,OAAOM,KAAK,IAAI;IAC5B,IAAIC,OAAuB;IAE3BN,OAAOA,OAAOO,mBAAmBP,MAAMQ,OAAO,CAAC,QAAQ,OAAO,MAAM;IAEpE,IAAIT,OAAOO,IAAI,EAAE;QACfA,OAAON,OAAOD,OAAOO,IAAI;IAC3B,OAAO,IAAIL,UAAU;QACnBK,OAAON,OAAQ,CAAA,CAACC,SAASQ,OAAO,CAAC,OAAO,CAAC,CAAC,EAAER,SAAS,CAAC,CAAC,GAAGA,QAAO;QACjE,IAAIF,OAAOW,IAAI,EAAE;YACfJ,QAAQ,MAAMP,OAAOW,IAAI;QAC3B;IACF;IAEA,IAAIL,SAAS,OAAOA,UAAU,UAAU;QACtCA,QAAQtB,OAAOC,uBAAuBqB;IACxC;IAEA,IAAIM,SAASZ,OAAOY,MAAM,IAAKN,SAAS,CAAC,CAAC,EAAEA,OAAO,IAAK;IAExD,IAAIH,YAAY,CAACA,SAASU,QAAQ,CAAC,MAAM;QACvCV,YAAY;IACd;IAEA,IAAIH,OAAOc,OAAO,IAAK,AAAC,CAAA,CAACX,YAAYvB,iBAAiBmC,IAAI,CAACZ,SAAQ,KAAMI,SAAS,OAAQ;QACxFA,OAAO,OAAQA,CAAAA,QAAQ,EAAC;QACxB,IAAIH,YAAYA,QAAQ,CAAC,EAAE,KAAK,KAAK;YACnCA,WAAW,MAAMA;QACnB;IACF,OAAO,IAAI,CAACG,MAAM;QAChBA,OAAO;IACT;IAEA,IAAIF,QAAQA,IAAI,CAAC,EAAE,KAAK,KAAK;QAC3BA,OAAO,MAAMA;IACf;IACA,IAAIO,UAAUA,MAAM,CAAC,EAAE,KAAK,KAAK;QAC/BA,SAAS,MAAMA;IACjB;IAEAR,WAAWA,SAASK,OAAO,CAAC,SAASD;IACrCI,SAASA,OAAOH,OAAO,CAAC,KAAK;IAE7B,OAAO,GAAGN,WAAWI,OAAOH,WAAWQ,SAASP,MAAM;AACxD"}
+{"version":3,"file":"formatUrl.js","names":["slashedProtocols","stringifyUrlQueryParam","param","isNaN","String","urlQueryToSearchParams","urlQuery","result","URLSearchParams","Object","entries","forEach","key","value","Array","isArray","item","append","set","formatUrl","urlObj","auth","hostname","protocol","pathname","hash","query","host","encodeURIComponent","replace","indexOf","port","search","endsWith","slashes","test"],"sources":["../../../src/elements/Link/formatUrl.ts"],"sourcesContent":["// Format function modified from nodejs\n// Copyright Joyent, Inc. and other Node contributors.\n//\n// Permission is hereby granted, free of charge, to any person obtaining a\n// copy of this software and associated documentation files (the\n// \"Software\"), to deal in the Software without restriction, including\n// without limitation the rights to use, copy, modify, merge, publish,\n// distribute, sublicense, and/or sell copies of the Software, and to permit\n// persons to whom the Software is furnished to do so, subject to the\n// following conditions:\n//\n// The above copyright notice and this permission notice shall be included\n// in all copies or substantial portions of the Software.\n//\n// THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS\n// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN\n// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,\n// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR\n// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE\n// USE OR OTHER DEALINGS IN THE SOFTWARE.\n\nimport type { UrlObject } from 'url'\n\nconst slashedProtocols = /https?|ftp|gopher|file/\n\nfunction stringifyUrlQueryParam(param: unknown): string {\n  if (\n    typeof param === 'string' ||\n    (typeof param === 'number' && !isNaN(param)) ||\n    typeof param === 'boolean'\n  ) {\n    return String(param)\n  } else {\n    return ''\n  }\n}\n\nexport function urlQueryToSearchParams(urlQuery: UrlObject['query']): URLSearchParams {\n  const result = new URLSearchParams()\n  Object.entries(urlQuery).forEach(([key, value]) => {\n    if (Array.isArray(value)) {\n      value.forEach((item) => result.append(key, stringifyUrlQueryParam(item)))\n    } else {\n      result.set(key, stringifyUrlQueryParam(value))\n    }\n  })\n  return result\n}\n\nexport function formatUrl(urlObj: UrlObject) {\n  let { auth } = urlObj\n  const { hostname } = urlObj\n  let protocol = urlObj.protocol || ''\n  let pathname = urlObj.pathname || ''\n  let hash = urlObj.hash || ''\n  let query = urlObj.query || ''\n  let host: false | string = false\n\n  auth = auth ? encodeURIComponent(auth).replace(/%3A/i, ':') + '@' : ''\n\n  if (urlObj.host) {\n    host = auth + urlObj.host\n  } else if (hostname) {\n    host = auth + (~hostname.indexOf(':') ? `[${hostname}]` : hostname)\n    if (urlObj.port) {\n      host += ':' + urlObj.port\n    }\n  }\n\n  if (query && typeof query === 'object') {\n    query = String(urlQueryToSearchParams(query))\n  }\n\n  let search = urlObj.search || (query && `?${query}`) || ''\n\n  if (protocol && !protocol.endsWith(':')) {\n    protocol += ':'\n  }\n\n  if (urlObj.slashes || ((!protocol || slashedProtocols.test(protocol)) && host !== false)) {\n    host = '//' + (host || '')\n    if (pathname && pathname[0] !== '/') {\n      pathname = '/' + pathname\n    }\n  } else if (!host) {\n    host = ''\n  }\n\n  if (hash && hash[0] !== '#') {\n    hash = '#' + hash\n  }\n  if (search && search[0] !== '?') {\n    search = '?' + search\n  }\n\n  pathname = pathname.replace(/[?#]/g, encodeURIComponent)\n  search = search.replace('#', '%23')\n\n  return `${protocol}${host}${pathname}${search}${hash}`\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Link/index.js

@@ -1,50 +1,64 @@
 '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 { 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;
+  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;
 }
-/**
-   * Disable the e.preventDefault() call on click if you want to handle it yourself via onClick
-   *
-   * @default true
-   */ export const Link = ({ children, href, onClick, preventDefault = true, ref, replace, scroll, ...rest })=>{
-    const router = useRouter();
-    const { startRouteTransition } = useRouteTransition();
-    return <NextLink href={href} onClick={(e)=>{
-        if (isModifiedEvent(e)) {
-            return;
-        }
-        if (onClick) {
-            onClick(e);
+export const Link = ({
+  children,
+  href,
+  onClick,
+  preventDefault = true,
+  ref,
+  replace,
+  scroll,
+  ...rest
+}) => {
+  const router = useRouter();
+  const {
+    startRouteTransition
+  } = useRouteTransition();
+  return /*#__PURE__*/_jsx(NextLink, {
+    href: href,
+    onClick: e => {
+      if (isModifiedEvent(e)) {
+        return;
+      }
+      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();
+      }
+      startRouteTransition(() => {
+        const url = typeof href === 'string' ? href : formatUrl(href);
+        if (replace) {
+          void router.replace(url, {
+            scroll
+          });
+        } else {
+          void router.push(url, {
+            scroll
+          });
         }
-        // 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();
-        }
-        startRouteTransition(()=>{
-            const url = typeof href === 'string' ? href : formatUrl(href);
-            if (replace) {
-                void router.replace(url, {
-                    scroll
-                });
-            } else {
-                void router.push(url, {
-                    scroll
-                });
-            }
-        });
-    }} ref={ref} {...rest}>
-      {children}
-    </NextLink>;
+      });
+    },
+    ref: ref,
+    ...rest,
+    children: children
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"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   * 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  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        startRouteTransition(() => {\n          const url = typeof href === 'string' ? href : formatUrl(href)\n\n          if (replace) {\n            void router.replace(url, { scroll })\n          } else {\n            void router.push(url, { scroll })\n          }\n        })\n      }}\n      ref={ref}\n      {...rest}\n    >\n      {children}\n    </NextLink>\n  )\n}\n"],"names":["NextLinkImport","useRouter","useRouteTransition","formatUrl","NextLink","default","isModifiedEvent","event","eventTarget","currentTarget","target","getAttribute","metaKey","ctrlKey","shiftKey","altKey","nativeEvent","which","Link","children","href","onClick","preventDefault","ref","replace","scroll","rest","router","startRouteTransition","e","url","push"],"mappings":"AAAA;AACA,OAAOA,oBAAoB,eAAc;AACzC,SAASC,SAAS,QAAQ,qBAAoB;AAG9C,SAASC,kBAAkB,QAAQ,2CAA0C;AAC7E,SAASC,SAAS,QAAQ,iBAAgB;AAE1C,MAAMC,WAAW,aAAaJ,iBAAiBA,eAAeK,OAAO,GAAGL;AAExE,yGAAyG;AACzG,SAASM,gBAAgBC,KAAuB;IAC9C,MAAMC,cAAcD,MAAME,aAAa;IACvC,MAAMC,SAASF,YAAYG,YAAY,CAAC;IACxC,OACE,AAACD,UAAUA,WAAW,WACtBH,MAAMK,OAAO,IACbL,MAAMM,OAAO,IACbN,MAAMO,QAAQ,IACdP,MAAMQ,MAAM,IAAI,6BAA6B;IAC5CR,MAAMS,WAAW,IAAIT,MAAMS,WAAW,CAACC,KAAK,KAAK;AAEtD;AAGE;;;;GAIC,GAIH,OAAO,MAAMC,OAAwB,CAAC,EACpCC,QAAQ,EACRC,IAAI,EACJC,OAAO,EACPC,iBAAiB,IAAI,EACrBC,GAAG,EACHC,OAAO,EACPC,MAAM,EACN,GAAGC,MACJ;IACC,MAAMC,SAAS1B;IACf,MAAM,EAAE2B,oBAAoB,EAAE,GAAG1B;IAEjC,QACGE,SACCgB,MAAMA,MACNC,SAAS,CAACQ;QACR,IAAIvB,gBAAgBuB,IAAI;YACtB;QACF;QAEA,IAAIR,SAAS;YACXA,QAAQQ;QACV;QAEA,8EAA8E;QAC9E,wEAAwE;QACxE,IAAIP,gBAAgB;YAClBO,EAAEP,cAAc;QAClB;QAEAM,qBAAqB;YACnB,MAAME,MAAM,OAAOV,SAAS,WAAWA,OAAOjB,UAAUiB;YAExD,IAAII,SAAS;gBACX,KAAKG,OAAOH,OAAO,CAACM,KAAK;oBAAEL;gBAAO;YACpC,OAAO;gBACL,KAAKE,OAAOI,IAAI,CAACD,KAAK;oBAAEL;gBAAO;YACjC;QACF;IACF,GACAF,KAAKA,MACJ,GAAGG,IAAI,EACT;MACC,CAACP,SAAS;IACZ,EAAEf;AAEN,EAAC"}
+{"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","href","onClick","preventDefault","ref","replace","scroll","rest","router","startRouteTransition","_jsx","e","url","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   * 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  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        startRouteTransition(() => {\n          const url = typeof href === 'string' ? href : formatUrl(href)\n\n          if (replace) {\n            void router.replace(url, { scroll })\n          } else {\n            void router.push(url, { scroll })\n          }\n        })\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;AAWA,OAAO,MAAMC,IAAA,GAAwBA,CAAC;EACpCC,QAAQ;EACRC,IAAI;EACJC,OAAO;EACPC,cAAA,GAAiB,IAAI;EACrBC,GAAG;EACHC,OAAO;EACPC,MAAM;EACN,GAAGC;AAAA,CACJ;EACC,MAAMC,MAAA,GAAS3B,SAAA;EACf,MAAM;IAAE4B;EAAoB,CAAE,GAAG1B,kBAAA;EAEjC,oBACE2B,IAAA,CAACzB,QAAA;IACCgB,IAAA,EAAMA,IAAA;IACNC,OAAA,EAAUS,CAAA;MACR,IAAIxB,eAAA,CAAgBwB,CAAA,GAAI;QACtB;MACF;MAEA,IAAIT,OAAA,EAAS;QACXA,OAAA,CAAQS,CAAA;MACV;MAEA;MACA;MACA,IAAIR,cAAA,EAAgB;QAClBQ,CAAA,CAAER,cAAc;MAClB;MAEAM,oBAAA,CAAqB;QACnB,MAAMG,GAAA,GAAM,OAAOX,IAAA,KAAS,WAAWA,IAAA,GAAOjB,SAAA,CAAUiB,IAAA;QAExD,IAAII,OAAA,EAAS;UACX,KAAKG,MAAA,CAAOH,OAAO,CAACO,GAAA,EAAK;YAAEN;UAAO;QACpC,OAAO;UACL,KAAKE,MAAA,CAAOK,IAAI,CAACD,GAAA,EAAK;YAAEN;UAAO;QACjC;MACF;IACF;IACAF,GAAA,EAAKA,GAAA;IACJ,GAAGG,IAAI;cAEPP;;AAGP","ignoreList":[]}

package/dist/elements/ListControls/getTextFieldsToBeSearched.js

@@ -1,22 +1,22 @@
 'use client';
+
 import { fieldAffectsData, flattenTopLevelFields } from 'payload/shared';
-export const getTextFieldsToBeSearched = (listSearchableFields, fields, i18n)=>{
-    if (listSearchableFields) {
-        const flattenedFields = flattenTopLevelFields(fields, {
-            i18n,
-            moveSubFieldsToTop: true
-        });
-        const searchableFieldNames = new Set(listSearchableFields);
-        const matchingFields = [];
-        for (const field of flattenedFields){
-            if (fieldAffectsData(field) && searchableFieldNames.has(field.name)) {
-                matchingFields.push(field);
-                searchableFieldNames.delete(field.name);
-            }
-        }
-        return matchingFields;
+export const getTextFieldsToBeSearched = (listSearchableFields, fields, i18n) => {
+  if (listSearchableFields) {
+    const flattenedFields = flattenTopLevelFields(fields, {
+      i18n,
+      moveSubFieldsToTop: true
+    });
+    const searchableFieldNames = new Set(listSearchableFields);
+    const matchingFields = [];
+    for (const field of flattenedFields) {
+      if (fieldAffectsData(field) && searchableFieldNames.has(field.name)) {
+        matchingFields.push(field);
+        searchableFieldNames.delete(field.name);
+      }
     }
-    return null;
+    return matchingFields;
+  }
+  return null;
 };
-
 //# sourceMappingURL=getTextFieldsToBeSearched.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { ClientField } from 'payload'\n\nimport { fieldAffectsData, flattenTopLevelFields } from 'payload/shared'\n\nexport const getTextFieldsToBeSearched = (\n  listSearchableFields: string[],\n  fields: ClientField[],\n  i18n: I18nClient,\n): ClientField[] => {\n  if (listSearchableFields) {\n    const flattenedFields = flattenTopLevelFields(fields, {\n      i18n,\n      moveSubFieldsToTop: true,\n    }) as ClientField[]\n\n    const searchableFieldNames = new Set(listSearchableFields)\n    const matchingFields: typeof flattenedFields = []\n\n    for (const field of flattenedFields) {\n      if (fieldAffectsData(field) && searchableFieldNames.has(field.name)) {\n        matchingFields.push(field)\n        searchableFieldNames.delete(field.name)\n      }\n    }\n\n    return matchingFields\n  }\n\n  return null\n}\n"],"names":["fieldAffectsData","flattenTopLevelFields","getTextFieldsToBeSearched","listSearchableFields","fields","i18n","flattenedFields","moveSubFieldsToTop","searchableFieldNames","Set","matchingFields","field","has","name","push","delete"],"mappings":"AAAA;AAIA,SAASA,gBAAgB,EAAEC,qBAAqB,QAAQ,iBAAgB;AAExE,OAAO,MAAMC,4BAA4B,CACvCC,sBACAC,QACAC;IAEA,IAAIF,sBAAsB;QACxB,MAAMG,kBAAkBL,sBAAsBG,QAAQ;YACpDC;YACAE,oBAAoB;QACtB;QAEA,MAAMC,uBAAuB,IAAIC,IAAIN;QACrC,MAAMO,iBAAyC,EAAE;QAEjD,KAAK,MAAMC,SAASL,gBAAiB;YACnC,IAAIN,iBAAiBW,UAAUH,qBAAqBI,GAAG,CAACD,MAAME,IAAI,GAAG;gBACnEH,eAAeI,IAAI,CAACH;gBACpBH,qBAAqBO,MAAM,CAACJ,MAAME,IAAI;YACxC;QACF;QAEA,OAAOH;IACT;IAEA,OAAO;AACT,EAAC"}
+{"version":3,"file":"getTextFieldsToBeSearched.js","names":["fieldAffectsData","flattenTopLevelFields","getTextFieldsToBeSearched","listSearchableFields","fields","i18n","flattenedFields","moveSubFieldsToTop","searchableFieldNames","Set","matchingFields","field","has","name","push","delete"],"sources":["../../../src/elements/ListControls/getTextFieldsToBeSearched.ts"],"sourcesContent":["'use client'\nimport type { I18nClient } from '@payloadcms/translations'\nimport type { ClientField } from 'payload'\n\nimport { fieldAffectsData, flattenTopLevelFields } from 'payload/shared'\n\nexport const getTextFieldsToBeSearched = (\n  listSearchableFields: string[],\n  fields: ClientField[],\n  i18n: I18nClient,\n): ClientField[] => {\n  if (listSearchableFields) {\n    const flattenedFields = flattenTopLevelFields(fields, {\n      i18n,\n      moveSubFieldsToTop: true,\n    }) as ClientField[]\n\n    const searchableFieldNames = new Set(listSearchableFields)\n    const matchingFields: typeof flattenedFields = []\n\n    for (const field of flattenedFields) {\n      if (fieldAffectsData(field) && searchableFieldNames.has(field.name)) {\n        matchingFields.push(field)\n        searchableFieldNames.delete(field.name)\n      }\n    }\n\n    return matchingFields\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;AAIA,SAASA,gBAAgB,EAAEC,qBAAqB,QAAQ;AAExD,OAAO,MAAMC,yBAAA,GAA4BA,CACvCC,oBAAA,EACAC,MAAA,EACAC,IAAA;EAEA,IAAIF,oBAAA,EAAsB;IACxB,MAAMG,eAAA,GAAkBL,qBAAA,CAAsBG,MAAA,EAAQ;MACpDC,IAAA;MACAE,kBAAA,EAAoB;IACtB;IAEA,MAAMC,oBAAA,GAAuB,IAAIC,GAAA,CAAIN,oBAAA;IACrC,MAAMO,cAAA,GAAyC,EAAE;IAEjD,KAAK,MAAMC,KAAA,IAASL,eAAA,EAAiB;MACnC,IAAIN,gBAAA,CAAiBW,KAAA,KAAUH,oBAAA,CAAqBI,GAAG,CAACD,KAAA,CAAME,IAAI,GAAG;QACnEH,cAAA,CAAeI,IAAI,CAACH,KAAA;QACpBH,oBAAA,CAAqBO,MAAM,CAACJ,KAAA,CAAME,IAAI;MACxC;IACF;IAEA,OAAOH,cAAA;EACT;EAEA,OAAO;AACT","ignoreList":[]}

package/dist/elements/ListControls/index.js

@@ -1,4 +1,6 @@
 'use client';
+
+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';
@@ -23,87 +25,171 @@ 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 { beforeActions, collectionConfig, collectionSlug, disableQueryPresets, enableColumns = true, enableFilters = true, enableSort = false, listMenuItems, queryPreset: activePreset, queryPresetPermissions, renderedFilters, resolvedFilterOptions } = props;
-    const { handleSearchChange, query } = useListQuery();
-    const titleField = useUseTitleField(collectionConfig);
-    const { i18n, t } = useTranslation();
-    const { breakpoints: { s: smallBreak } } = 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 = useRef(t('general:searchBy', {
-        label: getTranslation(searchLabel, i18n)
-    }));
-    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;
+ */
+export const ListControls = props => {
+  const {
+    beforeActions,
+    collectionConfig,
+    collectionSlug,
+    disableQueryPresets,
+    enableColumns = true,
+    enableFilters = true,
+    enableSort = false,
+    listMenuItems,
+    queryPreset: activePreset,
+    queryPresetPermissions,
+    renderedFilters,
+    resolvedFilterOptions
+  } = props;
+  const {
+    handleSearchChange,
+    query
+  } = useListQuery();
+  const titleField = useUseTitleField(collectionConfig);
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    breakpoints: {
+      s: smallBreak
+    }
+  } = 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 = useRef(t('general:searchBy', {
+    label: getTranslation(searchLabel, i18n)
+  }));
+  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]);
+  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,
-        query?.where
-    ]);
-    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)
-                    })}`;
-                }
-                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)
-            });
+        if (i === listSearchableFields.length - 1) {
+          return `${placeholderText} ${t('general:or')} ${getTranslation(label, i18n)}`;
         }
-    }, [
-        t,
-        listSearchableFields,
-        i18n,
-        searchLabel
-    ]);
-    return <div className={baseClass}>
-      {collectionConfig?.enableQueryPresets && !disableQueryPresets && <QueryPresetBar activePreset={activePreset} collectionSlug={collectionSlug} queryPresetPermissions={queryPresetPermissions}/>}
-      <SearchBar Actions={[
-        !smallBreak && <React.Fragment key="before-actions">{beforeActions && beforeActions}</React.Fragment>,
-        enableColumns && <Pill aria-controls={`${baseClass}-columns`} aria-expanded={visibleDrawer === 'columns'} className={`${baseClass}__toggle-columns`} icon={<ChevronIcon direction={visibleDrawer === 'columns' ? 'up' : 'down'}/>} id="toggle-list-columns" key="toggle-list-columns" onClick={()=>setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined)} pillStyle="light" size="small">
-              {t('general:columns')}
-            </Pill>,
-        enableFilters && <Pill aria-controls={`${baseClass}-where`} aria-expanded={visibleDrawer === 'where'} className={`${baseClass}__toggle-where`} icon={<ChevronIcon direction={visibleDrawer === 'where' ? 'up' : 'down'}/>} id="toggle-list-filters" key="toggle-list-filters" onClick={()=>setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)} pillStyle="light" size="small">
-              {t('general:filters')}
-            </Pill>,
-        enableSort && <Pill aria-controls={`${baseClass}-sort`} aria-expanded={visibleDrawer === 'sort'} className={`${baseClass}__toggle-sort`} icon={<ChevronIcon/>} id="toggle-list-sort" key="toggle-list-sort" onClick={()=>setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined)} pillStyle="light" size="small">
-              {t('general:sort')}
-            </Pill>,
-        collectionConfig.admin.groupBy && <Pill aria-controls={`${baseClass}-group-by`} aria-expanded={visibleDrawer === 'group-by'} className={`${baseClass}__toggle-group-by`} icon={<ChevronIcon direction={visibleDrawer === 'group-by' ? 'up' : 'down'}/>} id="toggle-group-by" key="toggle-group-by" onClick={()=>setVisibleDrawer(visibleDrawer !== 'group-by' ? 'group-by' : undefined)} pillStyle="light" size="small">
-              {t('general:groupByLabel', {
-            label: ''
-        })}
-            </Pill>,
-        listMenuItems && Array.isArray(listMenuItems) && listMenuItems.length > 0 && <Popup button={<Dots ariaLabel={t('general:moreOptions')}/>} className={`${baseClass}__popup`} horizontalAlign="right" id="list-menu" key="list-menu" size="small" verticalAlign="bottom">
-              {listMenuItems.map((item, i)=><Fragment key={`list-menu-item-${i}`}>{item}</Fragment>)}
-            </Popup>
-    ].filter(Boolean)} key={collectionSlug} label={searchLabelTranslated.current} onSearchChange={handleSearchChange} searchQueryParam={query?.search}/>
-      {enableColumns && <AnimateHeight className={`${baseClass}__columns`} height={visibleDrawer === 'columns' ? 'auto' : 0} id={`${baseClass}-columns`}>
-          <ColumnSelector collectionSlug={collectionConfig.slug}/>
-        </AnimateHeight>}
-      <AnimateHeight className={`${baseClass}__where`} height={visibleDrawer === 'where' ? 'auto' : 0} id={`${baseClass}-where`}>
-        <WhereBuilder collectionPluralLabel={collectionConfig?.labels?.plural} collectionSlug={collectionConfig.slug} fields={collectionConfig?.fields} renderedFilters={renderedFilters} resolvedFilterOptions={resolvedFilterOptions}/>
-      </AnimateHeight>
-      {collectionConfig.admin.groupBy && <AnimateHeight className={`${baseClass}__group-by`} height={visibleDrawer === 'group-by' ? 'auto' : 0} id={`${baseClass}-group-by`}>
-          <GroupByBuilder collectionSlug={collectionConfig.slug} fields={collectionConfig.fields}/>
-        </AnimateHeight>}
-    </div>;
+        return `${placeholderText}, ${getTranslation(label, i18n)}`;
+      }, '');
+    } else {
+      searchLabelTranslated.current = t('general:searchBy', {
+        label: getTranslation(searchLabel, i18n)
+      });
+    }
+  }, [t, listSearchableFields, i18n, searchLabel]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: baseClass,
+    children: [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: listMenuItems.map((item, i_0) => /*#__PURE__*/_jsx(Fragment, {
+          children: item
+        }, `list-menu-item-${i_0}`))
+      }, "list-menu")].filter(Boolean),
+      label: searchLabelTranslated.current,
+      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, {
+      className: `${baseClass}__where`,
+      height: visibleDrawer === 'where' ? 'auto' : 0,
+      id: `${baseClass}-where`,
+      children: /*#__PURE__*/_jsx(WhereBuilder, {
+        collectionPluralLabel: collectionConfig?.labels?.plural,
+        collectionSlug: collectionConfig.slug,
+        fields: collectionConfig?.fields,
+        renderedFilters: renderedFilters,
+        resolvedFilterOptions: resolvedFilterOptions
+      })
+    }), collectionConfig.admin.groupBy && /*#__PURE__*/_jsx(AnimateHeight, {
+      className: `${baseClass}__group-by`,
+      height: visibleDrawer === 'group-by' ? 'auto' : 0,
+      id: `${baseClass}-group-by`,
+      children: /*#__PURE__*/_jsx(GroupByBuilder, {
+        collectionSlug: collectionConfig.slug,
+        fields: collectionConfig.fields
+      })
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map