@payloadcms/ui 3.86.0-internal.ac46214 → 4.0.0-canary.1

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 { ColumnsButton } from '../ColumnsButton/index.js';
+import { GroupByControl } from '../GroupByControl/index.js';
 import { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js';
-import { SearchBar } from '../SearchBar/index.js';
+import { ListSearchFilter } from '../Search/ListSearchFilter/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 +23,179 @@ 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": visibleDrawer === "where"
+          },
+          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(GroupByControl, {
+          collectionSlug: collectionConfig.slug,
+          fields: collectionConfig.fields
+        }), enableColumns && _jsx(ColumnsButton, {
+          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",
+          size: "medium",
+          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(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
+        onClose: () => setVisibleDrawer(undefined),
+        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","React","Fragment","useEffect","useRef","useState","Popup","PopupList","ChevronIcon","Dots","useListQuery","useTranslation","Button","ColumnsButton","GroupByControl","QueryPresetBar","ListSearchFilter","WhereBuilder","baseClass","ListControls","props","$","beforeActions","collectionConfig","collectionSlug","disableQueryPresets","enableColumns","t0","enableFilters","t1","enableSort","t2","hasCreatePermission","isWhereOpen","isWhereOpenFromProps","listMenuItems","newDocumentURL","onWhereToggle","queryPreset","activePreset","queryPresetPermissions","renderedFilters","resolvedFilterOptions","undefined","isControlled","handleSearchChange","hasActiveFilters","query","t","breakpoints","t3","s","smallBreak","searchLabelTranslated","label","split","hasWhereParam","Boolean","where","visibleDrawer","setVisibleDrawer","t4","current","t5","t6","t7","handleWhereToggle","_jsxs","className","children","_jsx","onSearchChange","searchQueryParam","search","enableQueryPresets","buttonStyle","extraButtonProps","icon","direction","size","onClick","selected","slug","fields","el","id","to","Array","isArray","length","button","ariaLabel","horizontalAlign","verticalAlign","ButtonGroup","map","_temp","collectionPluralLabel","labels","plural","onClose","item","i"],"sources":["../../../src/elements/ListControls/index.tsx"],"sourcesContent":["'use client'\n\nimport { useWindowInfo } from '@faceless-ui/window-info'\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 { Button } from '../Button/index.js'\nimport { ColumnsButton } from '../ColumnsButton/index.js'\nimport { GroupByControl } from '../GroupByControl/index.js'\nimport { QueryPresetBar } from '../QueryPresets/QueryPresetBar/index.js'\nimport { ListSearchFilter } from '../Search/ListSearchFilter/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    isWhereOpen: isWhereOpenFromProps,\n    listMenuItems,\n    newDocumentURL,\n    onWhereToggle,\n    queryPreset: activePreset,\n    queryPresetPermissions,\n    renderedFilters,\n    resolvedFilterOptions,\n  } = props\n\n  const isControlled = typeof onWhereToggle === 'function'\n\n  const { handleSearchChange, hasActiveFilters, 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 [visibleDrawer, setVisibleDrawer] = useState<'columns' | 'sort' | 'where'>(\n    hasActiveFilters ? '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  const isWhereOpen = isControlled ? Boolean(isWhereOpenFromProps) : visibleDrawer === 'where'\n  const handleWhereToggle = isControlled\n    ? onWhereToggle\n    : () => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined)\n\n  return (\n    <div className={baseClass}>\n      <div className={`${baseClass}__search-row`}>\n        <div className={`${baseClass}__left`}>\n          <ListSearchFilter\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={isWhereOpen ? 'up' : 'down'} size={16} />}\n              id=\"toggle-list-filters\"\n              onClick={handleWhereToggle}\n              selected={isWhereOpen || hasActiveFilters}\n              size=\"medium\"\n            >\n              {t('general:filters')}\n            </Button>\n          )}\n          <GroupByControl collectionSlug={collectionConfig.slug} fields={collectionConfig.fields} />\n          {enableColumns && <ColumnsButton collectionSlug={collectionConfig.slug} />}\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      {!isControlled && isWhereOpen && (\n        <div className={`${baseClass}__where`} id={`${baseClass}-where`}>\n          <WhereBuilder\n            collectionPluralLabel={collectionConfig?.labels?.plural}\n            collectionSlug={collectionConfig.slug}\n            fields={collectionConfig?.fields}\n            onClose={() => setVisibleDrawer(undefined)}\n            renderedFilters={renderedFilters}\n            resolvedFilterOptions={resolvedFilterOptions}\n          />\n        </div>\n      )}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -20,7 +20,11 @@ export type ListControlsProps = {
     readonly handleSearchChange?: (search: string) => void;
     readonly handleSortChange?: (sort: string) => void;
     readonly handleWhereChange?: (where: Where) => void;
+    readonly hasCreatePermission?: boolean;
+    readonly isWhereOpen?: boolean;
     readonly listMenuItems?: React.ReactNode[];
+    readonly newDocumentURL?: string;
+    readonly onWhereToggle?: () => void;
     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,WAAW,CAAC,EAAE,OAAO,CAAA;IAC9B,QAAQ,CAAC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,CAAA;IAC1C,QAAQ,CAAC,cAAc,CAAC,EAAE,MAAM,CAAA;IAChC,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IACnC,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 isWhereOpen?: boolean\n  readonly listMenuItems?: React.ReactNode[]\n  readonly newDocumentURL?: string\n  readonly onWhereToggle?: () => void\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"}

package/dist/elements/ListControlsBar/index.js

@@ -0,0 +1,21 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import './index.css';
+const baseClass = 'list-controls-bar';
+/**
+ * A simple container for list controls (search, filters, actions).
+ * Provides consistent padding and layout across list views.
+ */
+export const ListControlsBar = ({
+  children,
+  className,
+  showBorder = true
+}) => {
+  return /*#__PURE__*/_jsx("div", {
+    className: [baseClass, showBorder && `${baseClass}--border`, className].filter(Boolean).join(' '),
+    children: children
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","baseClass","ListControlsBar","children","className","showBorder","_jsx","filter","Boolean","join"],"sources":["../../../src/elements/ListControlsBar/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'list-controls-bar'\n\nexport type ListControlsBarProps = {\n  readonly children: React.ReactNode\n  readonly className?: string\n  /**\n   * Whether to show a bottom border. Defaults to true.\n   */\n  readonly showBorder?: boolean\n}\n\n/**\n * A simple container for list controls (search, filters, actions).\n * Provides consistent padding and layout across list views.\n */\nexport const ListControlsBar: React.FC<ListControlsBarProps> = ({\n  children,\n  className,\n  showBorder = true,\n}) => {\n  return (\n    <div\n      className={[baseClass, showBorder && `${baseClass}--border`, className]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAWlB;;;;AAIA,OAAO,MAAMC,eAAA,GAAkDA,CAAC;EAC9DC,QAAQ;EACRC,SAAS;EACTC,UAAA,GAAa;AAAI,CAClB;EACC,oBACEC,IAAA,CAAC;IACCF,SAAA,EAAW,CAACH,SAAA,EAAWI,UAAA,IAAc,GAAGJ,SAAA,UAAmB,EAAEG,SAAA,CAAU,CACpEG,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;cAEPN;;AAGP","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EACV,eAAe,EAGhB,MAAM,YAAY,CAAA;AAUnB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA4LvD,CAAA"}
+{"version":3,"file":"DrawerContent.d.ts","sourceRoot":"","sources":["../../../src/elements/ListDrawer/DrawerContent.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAA;AAG/D,OAAO,KAAK,EACV,eAAe,EAGhB,MAAM,YAAY,CAAA;AAUnB,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6LvD,CAAA"}

package/dist/elements/ListDrawer/DrawerContent.js

@@ -1,6 +1,6 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
 import { hoistQueryParamsToAnd } from 'payload/shared';
 import React, { useCallback, useEffect, useState } from 'react';
@@ -162,9 +162,6 @@ export const ListDrawerContent = ({
       slug: selectedOption.value || incomingCollectionSlug
     });
   }, [getEntityConfig, refresh, selectedOption.value]);
-  if (isLoading) {
-    return /*#__PURE__*/_jsx(LoadingOverlay, {});
-  }
   return /*#__PURE__*/_jsxs(ListDrawerContextProvider, {
     allowCreate: allowCreate,
     createNewDrawerSlug: documentDrawerSlug,
@@ -177,8 +174,17 @@ export const ListDrawerContent = ({
     refresh: refreshSelf,
     selectedOption: selectedOption,
     setSelectedOption: setMySelectedOption,
-    children: [ListView, /*#__PURE__*/_jsx(DocumentDrawer, {
-      onSave: onCreateNew
+    children: [!isLoading && /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx("div", {
+        className: "drawer__fade-in",
+        children: ListView
+      }), /*#__PURE__*/_jsx(DocumentDrawer, {
+        onSave: onCreateNew
+      })]
+    }), /*#__PURE__*/_jsx(LoadingOverlay, {
+      animationDuration: "200ms",
+      overlayType: "drawer",
+      show: isLoading
     })]
   });
 };