@payloadcms/ui 3.0.0-canary.c13f9ba → 3.0.0-canary.c696728

package/dist/elements/ListDrawer/DrawerContent.js

@@ -1,14 +1,18 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as facelessUIImport from '@faceless-ui/modal';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
-import React, { useCallback, useEffect, useReducer, useState } from 'react';
-import { FieldLabel } from '../../forms/FieldLabel/index.js';
-import usePayloadAPI from '../../hooks/usePayloadAPI.js';
-import { X } from '../../icons/X/index.js';
+import React, { useCallback, useEffect, useReducer, useRef, useState } from 'react';
+import { SelectMany } from '../../elements/SelectMany/index.js';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
+import { usePayloadAPI } from '../../hooks/usePayloadAPI.js';
+import { useThrottledEffect } from '../../hooks/useThrottledEffect.js';
+import { XIcon } from '../../icons/X/index.js';
 import { useAuth } from '../../providers/Auth/index.js';
-import { useComponentMap } from '../../providers/ComponentMap/index.js';
 import { useConfig } from '../../providers/Config/index.js';
+import { RenderComponent } from '../../providers/Config/RenderComponent.js';
 import { ListInfoProvider } from '../../providers/ListInfo/index.js';
 import { ListQueryProvider } from '../../providers/ListQuery/index.js';
 import { usePreferences } from '../../providers/Preferences/index.js';
@@ -20,271 +24,608 @@ import { ReactSelect } from '../ReactSelect/index.js';
 import { TableColumnsProvider } from '../TableColumns/index.js';
 import { ViewDescription } from '../ViewDescription/index.js';
 import { baseClass } from './index.js';
-const hoistQueryParamsToAnd = (where, queryParams)=>{
-    if ('and' in where) {
-        where.and.push(queryParams);
-    } else if ('or' in where) {
-        where = {
-            and: [
-                where,
-                queryParams
-            ]
-        };
-    } else {
-        where = {
-            and: [
-                where,
-                queryParams
-            ]
-        };
-    }
-    return where;
+export const hoistQueryParamsToAnd = (where, queryParams) => {
+  if ('and' in where) {
+    where.and.push(queryParams);
+  } else if ('or' in where) {
+    where = {
+      and: [where, queryParams]
+    };
+  } else {
+    where = {
+      and: [where, queryParams]
+    };
+  }
+  return where;
 };
-export const ListDrawerContent = ({ collectionSlugs, customHeader, drawerSlug, filterOptions, onSelect, selectedCollection })=>{
-    const { useModal } = facelessUIImport;
-    const { i18n, t } = useTranslation();
-    const { permissions } = useAuth();
-    const { setPreference } = usePreferences();
-    const { closeModal, isModalOpen } = useModal();
-    const [limit, setLimit] = useState();
-    const [sort, setSort] = useState(null);
-    const [page, setPage] = useState(1);
-    const [where, setWhere] = useState(null);
-    const [search, setSearch] = useState('');
-    const { componentMap } = useComponentMap();
-    const { collections, routes: { api }, serverURL } = useConfig();
-    const enabledCollectionConfigs = collections.filter(({ slug })=>{
+export const ListDrawerContent = t0 => {
+  const $ = _c(95);
+  const {
+    collectionSlugs,
+    customHeader,
+    drawerSlug,
+    enableRowSelections,
+    filterOptions,
+    onBulkSelect,
+    onSelect,
+    selectedCollection
+  } = t0;
+  const {
+    i18n,
+    t
+  } = useTranslation();
+  const {
+    permissions
+  } = useAuth();
+  const {
+    getPreference,
+    setPreference
+  } = usePreferences();
+  const {
+    closeModal,
+    isModalOpen
+  } = useModal();
+  const [limit, setLimit] = useState();
+  const previousLimit = useRef(limit || null);
+  const [sort, setSort] = useState(null);
+  const [page, setPage] = useState(1);
+  const [where, setWhere] = useState(null);
+  const [search, setSearch] = useState("");
+  const [showLoadingOverlay, setShowLoadingOverlay] = useState(true);
+  const hasInitialised = useRef(false);
+  const params = {
+    limit,
+    page,
+    search,
+    sort,
+    where
+  };
+  const {
+    config: t1
+  } = useConfig();
+  const {
+    collections,
+    routes: t2,
+    serverURL
+  } = t1;
+  const {
+    api
+  } = t2;
+  let t3;
+  if ($[0] !== collectionSlugs || $[1] !== collections) {
+    let t4;
+    if ($[3] !== collectionSlugs) {
+      t4 = t5 => {
+        const {
+          slug
+        } = t5;
         return collectionSlugs.includes(slug);
-    });
-    const [selectedCollectionConfig, setSelectedCollectionConfig] = useState(()=>{
-        return enabledCollectionConfigs.find(({ slug })=>slug === selectedCollection) || enabledCollectionConfigs?.[0];
-    });
-    const { List } = componentMap.collections?.[selectedCollectionConfig?.slug] || {};
-    const [selectedOption, setSelectedOption] = useState(()=>selectedCollectionConfig ? {
-            label: getTranslation(selectedCollectionConfig.labels.singular, i18n),
-            value: selectedCollectionConfig.slug
-        } : undefined);
-    // const [fields, setFields] = useState<Field[]>(() => formatFields(selectedCollectionConfig))
-    useEffect(()=>{
-    // setFields(formatFields(selectedCollectionConfig))
-    }, [
-        selectedCollectionConfig
-    ]);
-    // allow external control of selected collection, same as the initial state logic above
-    useEffect(()=>{
-        if (selectedCollection) {
-            // if passed a selection, find it and check if it's enabled
-            const selectedConfig = enabledCollectionConfigs.find(({ slug })=>slug === selectedCollection) || enabledCollectionConfigs?.[0];
-            setSelectedCollectionConfig(selectedConfig);
-        }
-    }, [
-        selectedCollection,
-        enabledCollectionConfigs,
-        onSelect,
-        t
-    ]);
-    const preferenceKey = `${selectedCollectionConfig.slug}-list`;
-    // this is the 'create new' drawer
-    const [DocumentDrawer, DocumentDrawerToggler, { drawerSlug: documentDrawerSlug }] = useDocumentDrawer({
-        collectionSlug: selectedCollectionConfig.slug
-    });
-    useEffect(()=>{
-        if (selectedOption) {
-            setSelectedCollectionConfig(enabledCollectionConfigs.find(({ slug })=>selectedOption.value === slug));
-        }
-    }, [
-        selectedOption,
-        enabledCollectionConfigs
-    ]);
-    const collectionPermissions = permissions?.collections?.[selectedCollectionConfig?.slug];
-    const hasCreatePermission = collectionPermissions?.create?.permission;
-    // If modal is open, get active page of upload gallery
-    const isOpen = isModalOpen(drawerSlug);
-    const apiURL = isOpen ? `${serverURL}${api}/${selectedCollectionConfig.slug}` : null;
-    const [cacheBust, dispatchCacheBust] = useReducer((state)=>state + 1, 0) // used to force a re-fetch even when apiURL is unchanged
-    ;
-    const [{ data, isError, isLoading: isLoadingList }, { setParams }] = usePayloadAPI(apiURL, {});
-    const moreThanOneAvailableCollection = enabledCollectionConfigs.length > 1;
-    useEffect(()=>{
-        const { slug, admin: { listSearchableFields, useAsTitle } = {}, versions } = selectedCollectionConfig;
-        const params = {};
-        let copyOfWhere = {
-            ...where || {}
-        };
-        const filterOption = filterOptions?.[slug];
-        if (filterOptions && typeof filterOption !== 'boolean') {
-            copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, filterOption);
+      };
+      $[3] = collectionSlugs;
+      $[4] = t4;
+    } else {
+      t4 = $[4];
+    }
+    t3 = collections.filter(t4);
+    $[0] = collectionSlugs;
+    $[1] = collections;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  const enabledCollectionConfigs = t3;
+  let t4;
+  if ($[5] !== enabledCollectionConfigs || $[6] !== selectedCollection) {
+    t4 = () => enabledCollectionConfigs.find(t5 => {
+      const {
+        slug: slug_0
+      } = t5;
+      return slug_0 === selectedCollection;
+    }) || enabledCollectionConfigs?.[0];
+    $[5] = enabledCollectionConfigs;
+    $[6] = selectedCollection;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const [selectedCollectionConfig, setSelectedCollectionConfig] = useState(t4);
+  const List = selectedCollectionConfig?.admin?.components.views.list.Component;
+  let t5;
+  if ($[8] !== selectedCollectionConfig || $[9] !== i18n) {
+    t5 = () => selectedCollectionConfig ? {
+      label: getTranslation(selectedCollectionConfig.labels.singular, i18n),
+      value: selectedCollectionConfig.slug
+    } : undefined;
+    $[8] = selectedCollectionConfig;
+    $[9] = i18n;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  const [selectedOption, setSelectedOption] = useState(t5);
+  let t6;
+  if ($[11] !== selectedCollection || $[12] !== enabledCollectionConfigs) {
+    t6 = () => {
+      if (selectedCollection) {
+        const selectedConfig = enabledCollectionConfigs.find(t7 => {
+          const {
+            slug: slug_1
+          } = t7;
+          return slug_1 === selectedCollection;
+        }) || enabledCollectionConfigs?.[0];
+        setSelectedCollectionConfig(selectedConfig);
+      }
+    };
+    $[11] = selectedCollection;
+    $[12] = enabledCollectionConfigs;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  let t7;
+  if ($[14] !== selectedCollection || $[15] !== enabledCollectionConfigs || $[16] !== onSelect || $[17] !== t) {
+    t7 = [selectedCollection, enabledCollectionConfigs, onSelect, t];
+    $[14] = selectedCollection;
+    $[15] = enabledCollectionConfigs;
+    $[16] = onSelect;
+    $[17] = t;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  useEffect(t6, t7);
+  const preferencesKey = `${selectedCollectionConfig.slug}-list`;
+  let t8;
+  if ($[19] !== selectedCollectionConfig.slug) {
+    t8 = {
+      collectionSlug: selectedCollectionConfig.slug
+    };
+    $[19] = selectedCollectionConfig.slug;
+    $[20] = t8;
+  } else {
+    t8 = $[20];
+  }
+  const [DocumentDrawer, DocumentDrawerToggler, t9] = useDocumentDrawer(t8);
+  const {
+    drawerSlug: documentDrawerSlug
+  } = t9;
+  let t10;
+  let t11;
+  if ($[21] !== selectedOption || $[22] !== enabledCollectionConfigs) {
+    t10 = () => {
+      if (selectedOption && !Array.isArray(selectedOption)) {
+        setSelectedCollectionConfig(enabledCollectionConfigs.find(t12 => {
+          const {
+            slug: slug_2
+          } = t12;
+          return selectedOption.value === slug_2;
+        }));
+      }
+    };
+    t11 = [selectedOption, enabledCollectionConfigs];
+    $[21] = selectedOption;
+    $[22] = enabledCollectionConfigs;
+    $[23] = t10;
+    $[24] = t11;
+  } else {
+    t10 = $[23];
+    t11 = $[24];
+  }
+  useEffect(t10, t11);
+  const collectionPermissions = permissions?.collections?.[selectedCollectionConfig?.slug];
+  const hasCreatePermission = collectionPermissions?.create?.permission;
+  let t12;
+  if ($[25] !== isModalOpen || $[26] !== drawerSlug) {
+    t12 = isModalOpen(drawerSlug);
+    $[25] = isModalOpen;
+    $[26] = drawerSlug;
+    $[27] = t12;
+  } else {
+    t12 = $[27];
+  }
+  const isOpen = t12;
+  const apiURL = isOpen ? `${serverURL}${api}/${selectedCollectionConfig.slug}` : null;
+  const [cacheBust, dispatchCacheBust] = useReducer(_temp, 0);
+  let t13;
+  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = {
+      initialParams: {
+        depth: 0
+      }
+    };
+    $[28] = t13;
+  } else {
+    t13 = $[28];
+  }
+  const [t14, t15] = usePayloadAPI(apiURL, t13);
+  const {
+    data,
+    isError,
+    isLoading: isLoadingList
+  } = t14;
+  const {
+    setParams
+  } = t15;
+  const moreThanOneAvailableCollection = enabledCollectionConfigs.length > 1;
+  let t16;
+  if ($[29] !== selectedCollectionConfig || $[30] !== where || $[31] !== filterOptions || $[32] !== search || $[33] !== page || $[34] !== sort || $[35] !== cacheBust || $[36] !== limit || $[37] !== setParams) {
+    t16 = () => {
+      const {
+        slug: slug_3,
+        admin: t17,
+        versions
+      } = selectedCollectionConfig;
+      const {
+        listSearchableFields,
+        useAsTitle
+      } = t17 === undefined ? {} : t17;
+      const params_0 = {
+        depth: 0
+      };
+      let copyOfWhere = {
+        ...(where || {})
+      };
+      const filterOption = filterOptions?.[slug_3];
+      if (filterOptions && typeof filterOption !== "boolean") {
+        copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, filterOption);
+      }
+      if (search) {
+        const searchAsConditions = (listSearchableFields || [useAsTitle]).map(fieldName => ({
+          [fieldName]: {
+            like: search
+          }
+        }), []);
+        if (searchAsConditions.length > 0) {
+          const searchFilter = {
+            or: [...searchAsConditions]
+          };
+          copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, searchFilter);
         }
-        if (search) {
-            const searchAsConditions = (listSearchableFields || [
-                useAsTitle
-            ]).map((fieldName)=>{
-                return {
-                    [fieldName]: {
-                        like: search
-                    }
-                };
-            }, []);
-            if (searchAsConditions.length > 0) {
-                const searchFilter = {
-                    or: [
-                        ...searchAsConditions
-                    ]
-                };
-                copyOfWhere = hoistQueryParamsToAnd(copyOfWhere, searchFilter);
-            }
+      }
+      if (page) {
+        params_0.page = page;
+      }
+      if (sort) {
+        params_0.sort = sort;
+      }
+      if (cacheBust) {
+        params_0.cacheBust = cacheBust;
+      }
+      if (limit) {
+        params_0.limit = limit;
+        if (limit !== previousLimit.current) {
+          previousLimit.current = limit;
+          setPage(1);
         }
-        if (page) params.page = page;
-        if (sort) params.sort = sort;
-        if (cacheBust) params.cacheBust = cacheBust;
-        if (copyOfWhere) params.where = copyOfWhere;
-        if (versions?.drafts) params.draft = 'true';
-        setParams(params);
-    }, [
-        page,
-        sort,
-        where,
-        search,
-        cacheBust,
-        filterOptions,
-        selectedCollectionConfig,
-        t,
-        setParams
-    ]);
-    useEffect(()=>{
-        const newPreferences = {
-            limit,
-            sort
-        };
-        void setPreference(preferenceKey, newPreferences, true);
-    }, [
-        sort,
+      }
+      if (copyOfWhere) {
+        params_0.where = copyOfWhere;
+      }
+      if (versions?.drafts) {
+        params_0.draft = "true";
+      }
+      setParams(params_0);
+    };
+    $[29] = selectedCollectionConfig;
+    $[30] = where;
+    $[31] = filterOptions;
+    $[32] = search;
+    $[33] = page;
+    $[34] = sort;
+    $[35] = cacheBust;
+    $[36] = limit;
+    $[37] = setParams;
+    $[38] = t16;
+  } else {
+    t16 = $[38];
+  }
+  let t17;
+  if ($[39] !== page || $[40] !== sort || $[41] !== where || $[42] !== search || $[43] !== limit || $[44] !== cacheBust || $[45] !== filterOptions || $[46] !== selectedCollectionConfig || $[47] !== t || $[48] !== setParams) {
+    t17 = [page, sort, where, search, limit, cacheBust, filterOptions, selectedCollectionConfig, t, setParams];
+    $[39] = page;
+    $[40] = sort;
+    $[41] = where;
+    $[42] = search;
+    $[43] = limit;
+    $[44] = cacheBust;
+    $[45] = filterOptions;
+    $[46] = selectedCollectionConfig;
+    $[47] = t;
+    $[48] = setParams;
+    $[49] = t17;
+  } else {
+    t17 = $[49];
+  }
+  useEffect(t16, t17);
+  let t18;
+  let t19;
+  if ($[50] !== limit || $[51] !== sort || $[52] !== setPreference || $[53] !== preferencesKey) {
+    t18 = () => {
+      const newPreferences = {
         limit,
-        setPreference,
-        preferenceKey
-    ]);
-    const onCreateNew = useCallback(({ doc })=>{
-        if (typeof onSelect === 'function') {
-            onSelect({
-                collectionSlug: selectedCollectionConfig.slug,
-                docID: doc.id
-            });
-        }
-        dispatchCacheBust();
-        closeModal(documentDrawerSlug);
-        closeModal(drawerSlug);
-    }, [
-        closeModal,
-        documentDrawerSlug,
-        drawerSlug,
-        onSelect,
-        selectedCollectionConfig
-    ]);
-    if (!selectedCollectionConfig || isError) {
-        return null;
-    }
-    if (isLoadingList) {
-        return /*#__PURE__*/ _jsx(LoadingOverlay, {});
-    }
-    return /*#__PURE__*/ _jsx(ListInfoProvider, {
-        Header: /*#__PURE__*/ _jsxs("header", {
-            className: `${baseClass}__header`,
-            children: [
-                /*#__PURE__*/ _jsxs("div", {
-                    className: `${baseClass}__header-wrap`,
-                    children: [
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: `${baseClass}__header-content`,
-                            children: [
-                                /*#__PURE__*/ _jsx("h2", {
-                                    className: `${baseClass}__header-text`,
-                                    children: !customHeader ? getTranslation(selectedCollectionConfig?.labels?.plural, i18n) : customHeader
-                                }),
-                                hasCreatePermission && /*#__PURE__*/ _jsx(DocumentDrawerToggler, {
-                                    className: `${baseClass}__create-new-button`,
-                                    children: /*#__PURE__*/ _jsx(Pill, {
-                                        children: t('general:createNew')
-                                    })
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ _jsx("button", {
-                            "aria-label": t('general:close'),
-                            className: `${baseClass}__header-close`,
-                            onClick: ()=>{
-                                closeModal(drawerSlug);
-                            },
-                            type: "button",
-                            children: /*#__PURE__*/ _jsx(X, {})
-                        })
-                    ]
-                }),
-                selectedCollectionConfig?.admin?.description && /*#__PURE__*/ _jsx("div", {
-                    className: `${baseClass}__sub-header`,
-                    children: /*#__PURE__*/ _jsx(ViewDescription, {
-                        description: selectedCollectionConfig.admin.description
-                    })
-                }),
-                moreThanOneAvailableCollection && /*#__PURE__*/ _jsxs("div", {
-                    className: `${baseClass}__select-collection-wrap`,
-                    children: [
-                        /*#__PURE__*/ _jsx(FieldLabel, {
-                            label: t('upload:selectCollectionToBrowse')
-                        }),
-                        /*#__PURE__*/ _jsx(ReactSelect, {
-                            className: `${baseClass}__select-collection`,
-                            onChange: setSelectedOption,
-                            options: enabledCollectionConfigs.map((coll)=>({
-                                    label: getTranslation(coll.labels.singular, i18n),
-                                    value: coll.slug
-                                })),
-                            value: selectedOption
-                        })
-                    ]
-                })
-            ]
-        }),
-        collectionConfig: selectedCollectionConfig,
-        collectionSlug: selectedCollectionConfig.slug,
-        hasCreatePermission: hasCreatePermission,
-        newDocumentURL: null,
-        children: /*#__PURE__*/ _jsx(ListQueryProvider, {
-            data: data,
-            defaultLimit: limit || selectedCollectionConfig?.admin?.pagination?.defaultLimit,
-            defaultSort: sort,
-            handlePageChange: setPage,
-            handlePerPageChange: setLimit,
-            handleSearchChange: setSearch,
-            handleSortChange: setSort,
-            handleWhereChange: setWhere,
-            modifySearchParams: false,
-            preferenceKey: preferenceKey,
-            children: /*#__PURE__*/ _jsxs(TableColumnsProvider, {
-                cellProps: [
-                    {
-                        className: `${baseClass}__first-cell`,
-                        link: false,
-                        onClick: ({ collectionSlug: rowColl, rowData })=>{
-                            if (typeof onSelect === 'function') {
-                                onSelect({
-                                    collectionSlug: rowColl,
-                                    docID: rowData.id
-                                });
-                            }
-                        }
-                    }
-                ],
-                collectionSlug: selectedCollectionConfig.slug,
-                preferenceKey: preferenceKey,
-                children: [
-                    List,
-                    /*#__PURE__*/ _jsx(DocumentDrawer, {
-                        onSave: onCreateNew
-                    })
-                ]
-            })
-        })
+        sort
+      };
+      if (limit || sort) {
+        setPreference(preferencesKey, newPreferences, true);
+      }
+    };
+    t19 = [sort, limit, setPreference, preferencesKey];
+    $[50] = limit;
+    $[51] = sort;
+    $[52] = setPreference;
+    $[53] = preferencesKey;
+    $[54] = t18;
+    $[55] = t19;
+  } else {
+    t18 = $[54];
+    t19 = $[55];
+  }
+  useEffect(t18, t19);
+  let t20;
+  let t21;
+  if ($[56] !== preferencesKey || $[57] !== limit || $[58] !== getPreference) {
+    t20 = () => {
+      if (preferencesKey && !limit) {
+        const getInitialPref = async () => {
+          const existingPreferences = await getPreference(preferencesKey);
+          if (existingPreferences?.limit) {
+            setLimit(existingPreferences?.limit);
+          }
+        };
+        getInitialPref();
+      }
+    };
+    t21 = [getPreference, limit, preferencesKey];
+    $[56] = preferencesKey;
+    $[57] = limit;
+    $[58] = getPreference;
+    $[59] = t20;
+    $[60] = t21;
+  } else {
+    t20 = $[59];
+    t21 = $[60];
+  }
+  useEffect(t20, t21);
+  let t22;
+  if ($[61] !== isLoadingList) {
+    t22 = () => {
+      if (isLoadingList) {
+        setShowLoadingOverlay(true);
+      }
+    };
+    $[61] = isLoadingList;
+    $[62] = t22;
+  } else {
+    t22 = $[62];
+  }
+  let t23;
+  if ($[63] !== isLoadingList) {
+    t23 = [isLoadingList, setShowLoadingOverlay];
+    $[63] = isLoadingList;
+    $[64] = t23;
+  } else {
+    t23 = $[64];
+  }
+  useThrottledEffect(t22, 1750, t23);
+  let t24;
+  let t25;
+  if ($[65] !== isOpen) {
+    t24 = () => {
+      if (isOpen) {
+        hasInitialised.current = true;
+      } else {
+        hasInitialised.current = false;
+      }
+    };
+    t25 = [isOpen];
+    $[65] = isOpen;
+    $[66] = t24;
+    $[67] = t25;
+  } else {
+    t24 = $[66];
+    t25 = $[67];
+  }
+  useEffect(t24, t25);
+  let t26;
+  let t27;
+  if ($[68] !== isLoadingList || $[69] !== showLoadingOverlay) {
+    t26 = () => {
+      if (!isLoadingList && showLoadingOverlay) {
+        setShowLoadingOverlay(false);
+      }
+    };
+    t27 = [isLoadingList, showLoadingOverlay];
+    $[68] = isLoadingList;
+    $[69] = showLoadingOverlay;
+    $[70] = t26;
+    $[71] = t27;
+  } else {
+    t26 = $[70];
+    t27 = $[71];
+  }
+  useEffect(t26, t27);
+  let t28;
+  if ($[72] !== onSelect || $[73] !== selectedCollectionConfig.slug || $[74] !== closeModal || $[75] !== documentDrawerSlug || $[76] !== drawerSlug) {
+    t28 = t29 => {
+      const {
+        doc
+      } = t29;
+      if (typeof onSelect === "function") {
+        onSelect({
+          collectionSlug: selectedCollectionConfig.slug,
+          docID: doc.id
+        });
+      }
+      dispatchCacheBust();
+      closeModal(documentDrawerSlug);
+      closeModal(drawerSlug);
+    };
+    $[72] = onSelect;
+    $[73] = selectedCollectionConfig.slug;
+    $[74] = closeModal;
+    $[75] = documentDrawerSlug;
+    $[76] = drawerSlug;
+    $[77] = t28;
+  } else {
+    t28 = $[77];
+  }
+  const onCreateNew = t28;
+  if (!selectedCollectionConfig || isError) {
+    return null;
+  }
+  let t29;
+  if ($[78] !== showLoadingOverlay) {
+    t29 = showLoadingOverlay && _jsx(LoadingOverlay, {});
+    $[78] = showLoadingOverlay;
+    $[79] = t29;
+  } else {
+    t29 = $[79];
+  }
+  let t30;
+  if ($[80] !== customHeader || $[81] !== selectedCollectionConfig || $[82] !== i18n) {
+    t30 = !customHeader ? getTranslation(selectedCollectionConfig?.labels?.plural, i18n) : customHeader;
+    $[80] = customHeader;
+    $[81] = selectedCollectionConfig;
+    $[82] = i18n;
+    $[83] = t30;
+  } else {
+    t30 = $[83];
+  }
+  let t31;
+  if ($[84] !== hasCreatePermission || $[85] !== t || $[86] !== DocumentDrawerToggler) {
+    t31 = hasCreatePermission && _jsx(DocumentDrawerToggler, {
+      className: `${baseClass}__create-new-button`,
+      children: _jsx(Pill, {
+        children: t("general:createNew")
+      })
+    });
+    $[84] = hasCreatePermission;
+    $[85] = t;
+    $[86] = DocumentDrawerToggler;
+    $[87] = t31;
+  } else {
+    t31 = $[87];
+  }
+  let t32;
+  if ($[88] !== closeModal || $[89] !== drawerSlug) {
+    t32 = () => {
+      closeModal(drawerSlug);
+    };
+    $[88] = closeModal;
+    $[89] = drawerSlug;
+    $[90] = t32;
+  } else {
+    t32 = $[90];
+  }
+  let t33;
+  if ($[91] !== selectedCollectionConfig?.admin) {
+    t33 = (selectedCollectionConfig?.admin?.description || selectedCollectionConfig?.admin?.components?.Description) && _jsx("div", {
+      className: `${baseClass}__sub-header`,
+      children: _jsx(ViewDescription, {
+        Description: selectedCollectionConfig.admin?.components?.Description,
+        description: selectedCollectionConfig.admin?.description
+      })
     });
+    $[91] = selectedCollectionConfig?.admin;
+    $[92] = t33;
+  } else {
+    t33 = $[92];
+  }
+  let t34;
+  if ($[93] !== onSelect) {
+    t34 = t35 => {
+      const {
+        collectionSlug: rowColl,
+        rowData
+      } = t35;
+      if (typeof onSelect === "function") {
+        onSelect({
+          collectionSlug: rowColl,
+          docID: rowData.id
+        });
+      }
+    };
+    $[93] = onSelect;
+    $[94] = t34;
+  } else {
+    t34 = $[94];
+  }
+  return _jsxs(_Fragment, {
+    children: [t29, _jsx(ListInfoProvider, {
+      beforeActions: enableRowSelections ? [_jsx(SelectMany, {
+        onClick: onBulkSelect
+      }, "select-many")] : undefined,
+      collectionConfig: selectedCollectionConfig,
+      collectionSlug: selectedCollectionConfig.slug,
+      disableBulkDelete: true,
+      disableBulkEdit: true,
+      hasCreatePermission,
+      Header: _jsxs("header", {
+        className: `${baseClass}__header`,
+        children: [_jsxs("div", {
+          className: `${baseClass}__header-wrap`,
+          children: [_jsxs("div", {
+            className: `${baseClass}__header-content`,
+            children: [_jsx("h2", {
+              className: `${baseClass}__header-text`,
+              children: t30
+            }), t31]
+          }), _jsx("button", {
+            "aria-label": t("general:close"),
+            className: `${baseClass}__header-close`,
+            onClick: t32,
+            type: "button",
+            children: _jsx(XIcon, {})
+          })]
+        }), t33, moreThanOneAvailableCollection && _jsxs("div", {
+          className: `${baseClass}__select-collection-wrap`,
+          children: [_jsx(FieldLabel, {
+            field: null,
+            label: t("upload:selectCollectionToBrowse")
+          }), _jsx(ReactSelect, {
+            className: `${baseClass}__select-collection`,
+            onChange: setSelectedOption,
+            options: enabledCollectionConfigs.map(coll => ({
+              label: getTranslation(coll.labels.singular, i18n),
+              value: coll.slug
+            })),
+            value: selectedOption
+          })]
+        })]
+      }),
+      newDocumentURL: null,
+      children: _jsx(ListQueryProvider, {
+        data,
+        defaultLimit: limit || selectedCollectionConfig?.admin?.pagination?.defaultLimit,
+        defaultSort: sort,
+        handlePageChange: setPage,
+        handlePerPageChange: setLimit,
+        handleSearchChange: setSearch,
+        handleSortChange: setSort,
+        handleWhereChange: setWhere,
+        modifySearchParams: false,
+        params,
+        preferenceKey: preferencesKey,
+        children: _jsxs(TableColumnsProvider, {
+          cellProps: [{
+            className: `${baseClass}__first-cell`,
+            link: false,
+            onClick: t34
+          }],
+          collectionSlug: selectedCollectionConfig.slug,
+          enableRowSelections,
+          preferenceKey: preferencesKey,
+          children: [_jsx(RenderComponent, {
+            mappedComponent: List
+          }), _jsx(DocumentDrawer, {
+            onSave: onCreateNew
+          })]
+        })
+      })
+    })]
+  });
 };
-
+function _temp(state) {
+  return state + 1;
+}
 //# sourceMappingURL=DrawerContent.js.map