@payloadcms/ui 3.0.0-beta.127 → 3.0.0-beta.128

package/dist/elements/ListDrawer/DrawerContent.js

@@ -1,637 +1,145 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
-import { getTranslation } from '@payloadcms/translations';
-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 React, { useCallback, useEffect, useState } from 'react';
+import { useDocumentDrawer } from '../../elements/DocumentDrawer/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';
-import { useTranslation } from '../../providers/Translation/index.js';
-import { useDocumentDrawer } from '../DocumentDrawer/index.js';
+import { useServerFunctions } from '../../providers/ServerFunctions/index.js';
+import { hoistQueryParamsToAnd } from '../../utilities/mergeListSearchAndWhere.js';
+import { ListDrawerContextProvider } from '../ListDrawer/Provider.js';
 import { LoadingOverlay } from '../Loading/index.js';
-import { Pill } from '../Pill/index.js';
-import { ReactSelect } from '../ReactSelect/index.js';
-import { TableColumnsProvider } from '../TableColumns/index.js';
-import { ViewDescription } from '../ViewDescription/index.js';
-import { baseClass } from './index.js';
-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 = t0 => {
-  const $ = _c(95);
-  const {
-    allowCreate: t1,
-    collectionSlugs,
-    customHeader,
-    drawerSlug,
-    enableRowSelections,
-    filterOptions,
-    onBulkSelect,
-    onSelect,
-    selectedCollection
-  } = t0;
-  const allowCreate = t1 === undefined ? true : t1;
-  const {
-    i18n,
-    t
-  } = useTranslation();
-  const {
-    permissions
-  } = useAuth();
-  const {
-    getPreference,
-    setPreference
-  } = usePreferences();
+export const ListDrawerContent = ({
+  allowCreate = true,
+  collectionSlugs,
+  drawerSlug,
+  enableRowSelections,
+  filterOptions,
+  onBulkSelect,
+  onSelect,
+  selectedCollection: selectedCollectionFromProps
+}) => {
   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: t2
-  } = useConfig();
   const {
-    collections,
-    routes: t3,
-    serverURL
-  } = t2;
+    serverFunction
+  } = useServerFunctions();
+  const [ListView, setListView] = useState(undefined);
+  const [isLoading, setIsLoading] = useState(true);
   const {
-    api
-  } = t3;
-  let t4;
-  if ($[0] !== collectionSlugs || $[1] !== collections) {
-    let t5;
-    if ($[3] !== collectionSlugs) {
-      t5 = t6 => {
-        const {
-          slug
-        } = t6;
-        return collectionSlugs.includes(slug);
-      };
-      $[3] = collectionSlugs;
-      $[4] = t5;
-    } else {
-      t5 = $[4];
-    }
-    t4 = collections.filter(t5);
-    $[0] = collectionSlugs;
-    $[1] = collections;
-    $[2] = t4;
-  } else {
-    t4 = $[2];
-  }
-  const enabledCollectionConfigs = t4;
-  let t5;
-  if ($[5] !== enabledCollectionConfigs || $[6] !== selectedCollection) {
-    t5 = () => enabledCollectionConfigs.find(t6 => {
-      const {
-        slug: slug_0
-      } = t6;
-      return slug_0 === selectedCollection;
-    }) || enabledCollectionConfigs?.[0];
-    $[5] = enabledCollectionConfigs;
-    $[6] = selectedCollection;
-    $[7] = t5;
-  } else {
-    t5 = $[7];
-  }
-  const [selectedCollectionConfig, setSelectedCollectionConfig] = useState(t5);
-  const List = selectedCollectionConfig?.admin?.components.views.list.Component;
-  let t6;
-  if ($[8] !== selectedCollectionConfig || $[9] !== i18n) {
-    t6 = () => selectedCollectionConfig ? {
-      label: getTranslation(selectedCollectionConfig.labels.singular, i18n),
-      value: selectedCollectionConfig.slug
+    config: {
+      collections
+    },
+    getEntityConfig
+  } = useConfig();
+  const isOpen = isModalOpen(drawerSlug);
+  const enabledCollections = collections.filter(({
+    slug
+  }) => {
+    return collectionSlugs.includes(slug);
+  });
+  const [selectedOption, setSelectedOption] = useState(() => {
+    const initialSelection = selectedCollectionFromProps || enabledCollections[0]?.slug;
+    const found = getEntityConfig({
+      collectionSlug: initialSelection
+    });
+    return found ? {
+      label: found.labels,
+      value: found.slug
     } : undefined;
-    $[8] = selectedCollectionConfig;
-    $[9] = i18n;
-    $[10] = t6;
-  } else {
-    t6 = $[10];
-  }
-  const [selectedOption, setSelectedOption] = useState(t6);
-  let t7;
-  if ($[11] !== selectedCollection || $[12] !== enabledCollectionConfigs) {
-    t7 = () => {
-      if (selectedCollection) {
-        const selectedConfig = enabledCollectionConfigs.find(t8 => {
-          const {
-            slug: slug_1
-          } = t8;
-          return slug_1 === selectedCollection;
-        }) || enabledCollectionConfigs?.[0];
-        setSelectedCollectionConfig(selectedConfig);
-      }
-    };
-    $[11] = selectedCollection;
-    $[12] = enabledCollectionConfigs;
-    $[13] = t7;
-  } else {
-    t7 = $[13];
-  }
-  let t8;
-  if ($[14] !== selectedCollection || $[15] !== enabledCollectionConfigs || $[16] !== onSelect || $[17] !== t) {
-    t8 = [selectedCollection, enabledCollectionConfigs, onSelect, t];
-    $[14] = selectedCollection;
-    $[15] = enabledCollectionConfigs;
-    $[16] = onSelect;
-    $[17] = t;
-    $[18] = t8;
-  } else {
-    t8 = $[18];
-  }
-  useEffect(t7, t8);
-  const preferencesKey = `${selectedCollectionConfig.slug}-list`;
-  let t9;
-  if ($[19] !== selectedCollectionConfig.slug) {
-    t9 = {
-      collectionSlug: selectedCollectionConfig.slug
-    };
-    $[19] = selectedCollectionConfig.slug;
-    $[20] = t9;
-  } else {
-    t9 = $[20];
-  }
-  const [DocumentDrawer, DocumentDrawerToggler, t10] = useDocumentDrawer(t9);
-  const {
+  });
+  const [DocumentDrawer, DocumentDrawerToggler, {
     drawerSlug: documentDrawerSlug
-  } = t10;
-  let t11;
-  let t12;
-  if ($[21] !== selectedOption || $[22] !== enabledCollectionConfigs) {
-    t11 = () => {
-      if (selectedOption && !Array.isArray(selectedOption)) {
-        setSelectedCollectionConfig(enabledCollectionConfigs.find(t13 => {
-          const {
-            slug: slug_2
-          } = t13;
-          return selectedOption.value === slug_2;
-        }));
-      }
-    };
-    t12 = [selectedOption, enabledCollectionConfigs];
-    $[21] = selectedOption;
-    $[22] = enabledCollectionConfigs;
-    $[23] = t11;
-    $[24] = t12;
-  } else {
-    t11 = $[23];
-    t12 = $[24];
-  }
-  useEffect(t11, t12);
-  const collectionPermissions = permissions?.collections?.[selectedCollectionConfig?.slug];
-  const hasCreatePermission = collectionPermissions?.create?.permission && allowCreate;
-  let t13;
-  if ($[25] !== isModalOpen || $[26] !== drawerSlug) {
-    t13 = isModalOpen(drawerSlug);
-    $[25] = isModalOpen;
-    $[26] = drawerSlug;
-    $[27] = t13;
-  } else {
-    t13 = $[27];
-  }
-  const isOpen = t13;
-  const apiURL = isOpen ? `${serverURL}${api}/${selectedCollectionConfig.slug}` : null;
-  const [cacheBust, dispatchCacheBust] = useReducer(_temp, 0);
-  let t14;
-  if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
-    t14 = {
-      initialParams: {
-        depth: 0
-      }
-    };
-    $[28] = t14;
-  } else {
-    t14 = $[28];
-  }
-  const [t15, t16] = usePayloadAPI(apiURL, t14);
-  const {
-    data,
-    isError,
-    isLoading: isLoadingList
-  } = t15;
-  const {
-    setParams
-  } = t16;
-  const moreThanOneAvailableCollection = enabledCollectionConfigs.length > 1;
-  let t17;
-  if ($[29] !== selectedCollectionConfig || $[30] !== where || $[31] !== filterOptions || $[32] !== search || $[33] !== page || $[34] !== sort || $[35] !== cacheBust || $[36] !== limit || $[37] !== setParams) {
-    t17 = () => {
-      const {
-        slug: slug_3,
-        admin: t18,
-        versions
-      } = selectedCollectionConfig;
-      const {
-        listSearchableFields,
-        useAsTitle
-      } = t18 === undefined ? {} : t18;
-      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 (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);
+  }] = useDocumentDrawer({
+    collectionSlug: selectedOption.value
+  });
+  useEffect(() => {
+    if (selectedCollectionFromProps && selectedCollectionFromProps !== selectedOption?.value) {
+      setSelectedOption({
+        label: collections.find(({
+          slug: slug_0
+        }) => slug_0 === selectedCollectionFromProps).labels,
+        value: selectedCollectionFromProps
+      });
+    }
+  }, [selectedCollectionFromProps, collections, selectedOption]);
+  const renderList = useCallback(async (slug_1, query) => {
+    try {
+      const newQuery = {
+        ...(query || {}),
+        where: {
+          ...(query?.where || {})
         }
-      }
-      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] = t17;
-  } else {
-    t17 = $[38];
-  }
-  let t18;
-  if ($[39] !== page || $[40] !== sort || $[41] !== where || $[42] !== search || $[43] !== limit || $[44] !== cacheBust || $[45] !== filterOptions || $[46] !== selectedCollectionConfig || $[47] !== t || $[48] !== setParams) {
-    t18 = [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] = t18;
-  } else {
-    t18 = $[49];
-  }
-  useEffect(t17, t18);
-  let t19;
-  let t20;
-  if ($[50] !== limit || $[51] !== sort || $[52] !== setPreference || $[53] !== preferencesKey) {
-    t19 = () => {
-      const newPreferences = {
-        limit,
-        sort
       };
-      if (limit || sort) {
-        setPreference(preferencesKey, newPreferences, true);
-      }
-    };
-    t20 = [sort, limit, setPreference, preferencesKey];
-    $[50] = limit;
-    $[51] = sort;
-    $[52] = setPreference;
-    $[53] = preferencesKey;
-    $[54] = t19;
-    $[55] = t20;
-  } else {
-    t19 = $[54];
-    t20 = $[55];
-  }
-  useEffect(t19, t20);
-  let t21;
-  let t22;
-  if ($[56] !== preferencesKey || $[57] !== limit || $[58] !== getPreference) {
-    t21 = () => {
-      if (preferencesKey && !limit) {
-        const getInitialPref = async () => {
-          const existingPreferences = await getPreference(preferencesKey);
-          if (existingPreferences?.limit) {
-            setLimit(existingPreferences?.limit);
-          }
-        };
-        getInitialPref();
+      const filterOption = filterOptions?.[slug_1];
+      if (filterOptions && typeof filterOption !== 'boolean') {
+        newQuery.where = hoistQueryParamsToAnd(newQuery.where, filterOption);
       }
-    };
-    t22 = [getPreference, limit, preferencesKey];
-    $[56] = preferencesKey;
-    $[57] = limit;
-    $[58] = getPreference;
-    $[59] = t21;
-    $[60] = t22;
-  } else {
-    t21 = $[59];
-    t22 = $[60];
-  }
-  useEffect(t21, t22);
-  let t23;
-  if ($[61] !== isLoadingList) {
-    t23 = () => {
-      if (isLoadingList) {
-        setShowLoadingOverlay(true);
-      }
-    };
-    $[61] = isLoadingList;
-    $[62] = t23;
-  } else {
-    t23 = $[62];
-  }
-  let t24;
-  if ($[63] !== isLoadingList) {
-    t24 = [isLoadingList, setShowLoadingOverlay];
-    $[63] = isLoadingList;
-    $[64] = t24;
-  } else {
-    t24 = $[64];
-  }
-  useThrottledEffect(t23, 1750, t24);
-  let t25;
-  let t26;
-  if ($[65] !== isOpen) {
-    t25 = () => {
-      if (isOpen) {
-        hasInitialised.current = true;
-      } else {
-        hasInitialised.current = false;
-      }
-    };
-    t26 = [isOpen];
-    $[65] = isOpen;
-    $[66] = t25;
-    $[67] = t26;
-  } else {
-    t25 = $[66];
-    t26 = $[67];
-  }
-  useEffect(t25, t26);
-  let t27;
-  let t28;
-  if ($[68] !== isLoadingList || $[69] !== showLoadingOverlay) {
-    t27 = () => {
-      if (!isLoadingList && showLoadingOverlay) {
-        setShowLoadingOverlay(false);
-      }
-    };
-    t28 = [isLoadingList, showLoadingOverlay];
-    $[68] = isLoadingList;
-    $[69] = showLoadingOverlay;
-    $[70] = t27;
-    $[71] = t28;
-  } else {
-    t27 = $[70];
-    t28 = $[71];
-  }
-  useEffect(t27, t28);
-  let t29;
-  if ($[72] !== onSelect || $[73] !== selectedCollectionConfig.slug || $[74] !== closeModal || $[75] !== documentDrawerSlug || $[76] !== drawerSlug) {
-    t29 = t30 => {
       const {
-        doc
-      } = t30;
-      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] = t29;
-  } else {
-    t29 = $[77];
-  }
-  const onCreateNew = t29;
-  if (!selectedCollectionConfig || isError) {
-    return null;
-  }
-  let t30;
-  if ($[78] !== onSelect) {
-    t30 = t31 => {
-      const {
-        collectionSlug: rowColl,
-        rowData
-      } = t31;
-      if (typeof onSelect === "function") {
-        onSelect({
-          collectionSlug: rowColl,
-          docID: rowData.id
-        });
-      }
-    };
-    $[78] = onSelect;
-    $[79] = t30;
-  } else {
-    t30 = $[79];
-  }
-  const tableColumnCellProps = [{
-    className: `${baseClass}__first-cell`,
-    link: false,
-    onClick: t30
-  }];
-  if (enableRowSelections) {
-    tableColumnCellProps.unshift(undefined);
-  }
-  let t31;
-  if ($[80] !== showLoadingOverlay) {
-    t31 = showLoadingOverlay && _jsx(LoadingOverlay, {});
-    $[80] = showLoadingOverlay;
-    $[81] = t31;
-  } else {
-    t31 = $[81];
-  }
-  let t32;
-  if ($[82] !== customHeader || $[83] !== selectedCollectionConfig || $[84] !== i18n) {
-    t32 = !customHeader ? getTranslation(selectedCollectionConfig?.labels?.plural, i18n) : customHeader;
-    $[82] = customHeader;
-    $[83] = selectedCollectionConfig;
-    $[84] = i18n;
-    $[85] = t32;
-  } else {
-    t32 = $[85];
-  }
-  let t33;
-  if ($[86] !== hasCreatePermission || $[87] !== t || $[88] !== DocumentDrawerToggler) {
-    t33 = hasCreatePermission && _jsx(DocumentDrawerToggler, {
-      className: `${baseClass}__create-new-button`,
-      children: _jsx(Pill, {
-        children: t("general:createNew")
-      })
-    });
-    $[86] = hasCreatePermission;
-    $[87] = t;
-    $[88] = DocumentDrawerToggler;
-    $[89] = t33;
-  } else {
-    t33 = $[89];
-  }
-  let t34;
-  if ($[90] !== closeModal || $[91] !== drawerSlug) {
-    t34 = () => {
-      closeModal(drawerSlug);
-    };
-    $[90] = closeModal;
-    $[91] = drawerSlug;
-    $[92] = t34;
-  } else {
-    t34 = $[92];
-  }
-  let t35;
-  if ($[93] !== selectedCollectionConfig?.admin) {
-    t35 = (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
-      })
-    });
-    $[93] = selectedCollectionConfig?.admin;
-    $[94] = t35;
-  } else {
-    t35 = $[94];
-  }
-  return _jsxs(_Fragment, {
-    children: [t31, _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: t32
-            }), t33]
-          }), _jsx("button", {
-            "aria-label": t("general:close"),
-            className: `${baseClass}__header-close`,
-            onClick: t34,
-            type: "button",
-            children: _jsx(XIcon, {})
-          })]
-        }), t35, 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: tableColumnCellProps,
-          collectionSlug: selectedCollectionConfig.slug,
+        List: ViewResult
+      } = await serverFunction({
+        name: 'render-list',
+        args: {
+          collectionSlug: slug_1,
+          disableBulkDelete: true,
+          disableBulkEdit: true,
+          drawerSlug,
           enableRowSelections,
-          preferenceKey: preferencesKey,
-          children: [_jsx(RenderComponent, {
-            mappedComponent: List
-          }), _jsx(DocumentDrawer, {
-            onSave: onCreateNew
-          })]
-        })
-      })
+          query: newQuery
+        }
+      });
+      setListView(ViewResult);
+      setIsLoading(false);
+    } catch (_err) {
+      console.error('Error rendering List View: ', _err) // eslint-disable-line no-console
+      ;
+      if (isOpen) {
+        closeModal(drawerSlug);
+      }
+    }
+  }, [serverFunction, closeModal, drawerSlug, isOpen, enableRowSelections, filterOptions]);
+  useEffect(() => {
+    if (!ListView) {
+      void renderList(selectedOption.value);
+    }
+  }, [renderList, ListView, selectedOption.value]);
+  const onCreateNew = useCallback(({
+    doc
+  }) => {
+    if (typeof onSelect === 'function') {
+      onSelect({
+        collectionSlug: selectedOption.value,
+        docID: doc.id
+      });
+    }
+    closeModal(documentDrawerSlug);
+    closeModal(drawerSlug);
+  }, [closeModal, documentDrawerSlug, drawerSlug, onSelect, selectedOption.value]);
+  const onQueryChange = useCallback(query_0 => {
+    void renderList(selectedOption.value, query_0);
+  }, [renderList, selectedOption.value]);
+  const setMySelectedOption = useCallback(incomingSelection => {
+    setSelectedOption(incomingSelection);
+    void renderList(incomingSelection.value);
+  }, [renderList]);
+  if (isLoading) {
+    return /*#__PURE__*/_jsx(LoadingOverlay, {});
+  }
+  return /*#__PURE__*/_jsxs(ListDrawerContextProvider, {
+    createNewDrawerSlug: documentDrawerSlug,
+    DocumentDrawerToggler: DocumentDrawerToggler,
+    drawerSlug: drawerSlug,
+    enabledCollections: collectionSlugs,
+    onBulkSelect: onBulkSelect,
+    onQueryChange: onQueryChange,
+    onSelect: onSelect,
+    selectedOption: selectedOption,
+    setSelectedOption: setMySelectedOption,
+    children: [ListView, /*#__PURE__*/_jsx(DocumentDrawer, {
+      onSave: onCreateNew
     })]
   });
 };
-function _temp(state) {
-  return state + 1;
-}
 //# sourceMappingURL=DrawerContent.js.map