payload 1.4.2 → 1.5.0

package/dist/admin/components/elements/Gutter/index.d.ts

@@ -1,6 +1,6 @@
 import React, { Ref } from 'react';
 import './index.scss';
-declare type Props = {
+type Props = {
     left?: boolean;
     right?: boolean;
     negativeLeft?: boolean;

package/dist/admin/components/elements/Gutter/index.js

@@ -1,11 +1,37 @@
-import React, { forwardRef } from 'react';
-import './index.scss';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Gutter = void 0;
+const react_1 = __importStar(require("react"));
+require("./index.scss");
 const baseClass = 'gutter';
-export const Gutter = forwardRef((props, ref) => {
+exports.Gutter = (0, react_1.forwardRef)((props, ref) => {
     const { left = true, right = true, negativeLeft = false, negativeRight = false, className, children, } = props;
     const shouldPadLeft = left && !negativeLeft;
     const shouldPadRight = right && !negativeRight;
-    return (React.createElement("div", { ref: ref, className: [
+    return (react_1.default.createElement("div", { ref: ref, className: [
             shouldPadLeft && `${baseClass}--left`,
             shouldPadRight && `${baseClass}--right`,
             negativeLeft && `${baseClass}--negative-left`,
@@ -13,4 +39,4 @@ export const Gutter = forwardRef((props, ref) => {
             className,
         ].filter(Boolean).join(' ') }, children));
 });
-Gutter.displayName = 'Gutter';
+exports.Gutter.displayName = 'Gutter';

package/dist/admin/components/elements/IDLabel/index.js

@@ -1,8 +1,13 @@
-import React from 'react';
-import './index.scss';
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+require("./index.scss");
 const baseClass = 'id-label';
-const IDLabel = ({ id, prefix = 'ID:' }) => (React.createElement("div", { className: baseClass },
+const IDLabel = ({ id, prefix = 'ID:' }) => (react_1.default.createElement("div", { className: baseClass },
     prefix,
     "\u00A0\u00A0",
     id));
-export default IDLabel;
+exports.default = IDLabel;

package/dist/admin/components/elements/ListControls/getTextFieldsToBeSearched.js

@@ -1,9 +1,16 @@
-import { fieldAffectsData } from '../../../../fields/config/types';
-import flattenFields from '../../../../utilities/flattenTopLevelFields';
-export const getTextFieldsToBeSearched = (listSearchableFields, fields) => () => {
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTextFieldsToBeSearched = void 0;
+const types_1 = require("../../../../fields/config/types");
+const flattenTopLevelFields_1 = __importDefault(require("../../../../utilities/flattenTopLevelFields"));
+const getTextFieldsToBeSearched = (listSearchableFields, fields) => () => {
     if (listSearchableFields) {
-        const flattenedFields = flattenFields(fields);
-        return flattenedFields.filter((field) => fieldAffectsData(field) && listSearchableFields.includes(field.name));
+        const flattenedFields = (0, flattenTopLevelFields_1.default)(fields);
+        return flattenedFields.filter((field) => (0, types_1.fieldAffectsData)(field) && listSearchableFields.includes(field.name));
     }
     return null;
 };
+exports.getTextFieldsToBeSearched = getTextFieldsToBeSearched;

package/dist/admin/components/elements/ListControls/index.js

@@ -1,40 +1,68 @@
-import React, { useState } from 'react';
-import AnimateHeight from 'react-animate-height';
-import { useTranslation } from 'react-i18next';
-import { fieldAffectsData } from '../../../../fields/config/types';
-import SearchFilter from '../SearchFilter';
-import ColumnSelector from '../ColumnSelector';
-import WhereBuilder from '../WhereBuilder';
-import SortComplex from '../SortComplex';
-import Button from '../Button';
-import { useSearchParams } from '../../utilities/SearchParams';
-import validateWhereQuery from '../WhereBuilder/validateWhereQuery';
-import { getTextFieldsToBeSearched } from './getTextFieldsToBeSearched';
-import { getTranslation } from '../../../../utilities/getTranslation';
-import './index.scss';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_animate_height_1 = __importDefault(require("react-animate-height"));
+const react_i18next_1 = require("react-i18next");
+const types_1 = require("../../../../fields/config/types");
+const SearchFilter_1 = __importDefault(require("../SearchFilter"));
+const ColumnSelector_1 = __importDefault(require("../ColumnSelector"));
+const WhereBuilder_1 = __importDefault(require("../WhereBuilder"));
+const SortComplex_1 = __importDefault(require("../SortComplex"));
+const Button_1 = __importDefault(require("../Button"));
+const SearchParams_1 = require("../../utilities/SearchParams");
+const validateWhereQuery_1 = __importDefault(require("../WhereBuilder/validateWhereQuery"));
+const getTextFieldsToBeSearched_1 = require("./getTextFieldsToBeSearched");
+const getTranslation_1 = require("../../../../utilities/getTranslation");
+require("./index.scss");
 const baseClass = 'list-controls';
 const ListControls = (props) => {
     var _a;
     const { collection, enableColumns = true, enableSort = false, columns, setColumns, handleSortChange, handleWhereChange, modifySearchQuery = true, collection: { fields, admin: { useAsTitle, listSearchableFields, }, }, } = props;
-    const params = useSearchParams();
-    const shouldInitializeWhereOpened = validateWhereQuery(params === null || params === void 0 ? void 0 : params.where);
-    const [titleField] = useState(() => fields.find((field) => fieldAffectsData(field) && field.name === useAsTitle));
-    const [textFieldsToBeSearched] = useState(getTextFieldsToBeSearched(listSearchableFields, fields));
-    const [visibleDrawer, setVisibleDrawer] = useState(shouldInitializeWhereOpened ? 'where' : undefined);
-    const { t, i18n } = useTranslation('general');
-    return (React.createElement("div", { className: baseClass },
-        React.createElement("div", { className: `${baseClass}__wrap` },
-            React.createElement(SearchFilter, { fieldName: titleField && fieldAffectsData(titleField) ? titleField.name : undefined, handleChange: handleWhereChange, modifySearchQuery: modifySearchQuery, fieldLabel: (_a = (titleField && fieldAffectsData(titleField) && getTranslation(titleField.label || titleField.name, i18n))) !== null && _a !== void 0 ? _a : undefined, listSearchableFields: textFieldsToBeSearched }),
-            React.createElement("div", { className: `${baseClass}__buttons` },
-                React.createElement("div", { className: `${baseClass}__buttons-wrap` },
-                    enableColumns && (React.createElement(Button, { className: `${baseClass}__toggle-columns`, buttonStyle: visibleDrawer === 'columns' ? undefined : 'secondary', onClick: () => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined), icon: "chevron", iconStyle: "none" }, t('columns'))),
-                    React.createElement(Button, { className: `${baseClass}__toggle-where`, buttonStyle: visibleDrawer === 'where' ? undefined : 'secondary', onClick: () => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined), icon: "chevron", iconStyle: "none" }, t('filters')),
-                    enableSort && (React.createElement(Button, { className: `${baseClass}__toggle-sort`, buttonStyle: visibleDrawer === 'sort' ? undefined : 'secondary', onClick: () => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined), icon: "chevron", iconStyle: "none" }, t('sort')))))),
-        enableColumns && (React.createElement(AnimateHeight, { className: `${baseClass}__columns`, height: visibleDrawer === 'columns' ? 'auto' : 0 },
-            React.createElement(ColumnSelector, { collection: collection, columns: columns, setColumns: setColumns }))),
-        React.createElement(AnimateHeight, { className: `${baseClass}__where`, height: visibleDrawer === 'where' ? 'auto' : 0 },
-            React.createElement(WhereBuilder, { collection: collection, modifySearchQuery: modifySearchQuery, handleChange: handleWhereChange })),
-        enableSort && (React.createElement(AnimateHeight, { className: `${baseClass}__sort`, height: visibleDrawer === 'sort' ? 'auto' : 0 },
-            React.createElement(SortComplex, { modifySearchQuery: modifySearchQuery, collection: collection, handleChange: handleSortChange })))));
+    const params = (0, SearchParams_1.useSearchParams)();
+    const shouldInitializeWhereOpened = (0, validateWhereQuery_1.default)(params === null || params === void 0 ? void 0 : params.where);
+    const [titleField] = (0, react_1.useState)(() => fields.find((field) => (0, types_1.fieldAffectsData)(field) && field.name === useAsTitle));
+    const [textFieldsToBeSearched] = (0, react_1.useState)((0, getTextFieldsToBeSearched_1.getTextFieldsToBeSearched)(listSearchableFields, fields));
+    const [visibleDrawer, setVisibleDrawer] = (0, react_1.useState)(shouldInitializeWhereOpened ? 'where' : undefined);
+    const { t, i18n } = (0, react_i18next_1.useTranslation)('general');
+    return (react_1.default.createElement("div", { className: baseClass },
+        react_1.default.createElement("div", { className: `${baseClass}__wrap` },
+            react_1.default.createElement(SearchFilter_1.default, { fieldName: titleField && (0, types_1.fieldAffectsData)(titleField) ? titleField.name : undefined, handleChange: handleWhereChange, modifySearchQuery: modifySearchQuery, fieldLabel: (_a = (titleField && (0, types_1.fieldAffectsData)(titleField) && (0, getTranslation_1.getTranslation)(titleField.label || titleField.name, i18n))) !== null && _a !== void 0 ? _a : undefined, listSearchableFields: textFieldsToBeSearched }),
+            react_1.default.createElement("div", { className: `${baseClass}__buttons` },
+                react_1.default.createElement("div", { className: `${baseClass}__buttons-wrap` },
+                    enableColumns && (react_1.default.createElement(Button_1.default, { className: `${baseClass}__toggle-columns`, buttonStyle: visibleDrawer === 'columns' ? undefined : 'secondary', onClick: () => setVisibleDrawer(visibleDrawer !== 'columns' ? 'columns' : undefined), icon: "chevron", iconStyle: "none" }, t('columns'))),
+                    react_1.default.createElement(Button_1.default, { className: `${baseClass}__toggle-where`, buttonStyle: visibleDrawer === 'where' ? undefined : 'secondary', onClick: () => setVisibleDrawer(visibleDrawer !== 'where' ? 'where' : undefined), icon: "chevron", iconStyle: "none" }, t('filters')),
+                    enableSort && (react_1.default.createElement(Button_1.default, { className: `${baseClass}__toggle-sort`, buttonStyle: visibleDrawer === 'sort' ? undefined : 'secondary', onClick: () => setVisibleDrawer(visibleDrawer !== 'sort' ? 'sort' : undefined), icon: "chevron", iconStyle: "none" }, t('sort')))))),
+        enableColumns && (react_1.default.createElement(react_animate_height_1.default, { className: `${baseClass}__columns`, height: visibleDrawer === 'columns' ? 'auto' : 0 },
+            react_1.default.createElement(ColumnSelector_1.default, { collection: collection, columns: columns, setColumns: setColumns }))),
+        react_1.default.createElement(react_animate_height_1.default, { className: `${baseClass}__where`, height: visibleDrawer === 'where' ? 'auto' : 0 },
+            react_1.default.createElement(WhereBuilder_1.default, { collection: collection, modifySearchQuery: modifySearchQuery, handleChange: handleWhereChange })),
+        enableSort && (react_1.default.createElement(react_animate_height_1.default, { className: `${baseClass}__sort`, height: visibleDrawer === 'sort' ? 'auto' : 0 },
+            react_1.default.createElement(SortComplex_1.default, { modifySearchQuery: modifySearchQuery, collection: collection, handleChange: handleSortChange })))));
 };
-export default ListControls;
+exports.default = ListControls;

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

@@ -1,6 +1,6 @@
 import { Where } from '../../../../types';
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export declare type Props = {
+export type Props = {
     enableColumns?: boolean;
     enableSort?: boolean;
     modifySearchQuery?: boolean;
@@ -10,7 +10,7 @@ export declare type Props = {
     setColumns?: (columns: string[]) => void;
     collection: SanitizedCollectionConfig;
 };
-export declare type ListControls = {
+export type ListControls = {
     where?: unknown;
     columns?: string[];
 };

package/dist/admin/components/elements/ListControls/types.js

@@ -1 +1,2 @@
-export {};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/admin/components/elements/ListDrawer/DrawerContent.js

@@ -1,25 +1,54 @@
-import React, { Fragment, useCallback, useEffect, useReducer, useState } from 'react';
-import { useModal } from '@faceless-ui/modal';
-import { useTranslation } from 'react-i18next';
-import { getTranslation } from '../../../../utilities/getTranslation';
-import { useConfig } from '../../utilities/Config';
-import { useAuth } from '../../utilities/Auth';
-import { DocumentInfoProvider } from '../../utilities/DocumentInfo';
-import RenderCustomComponent from '../../utilities/RenderCustomComponent';
-import usePayloadAPI from '../../../hooks/usePayloadAPI';
-import DefaultList from '../../views/collections/List/Default';
-import Label from '../../forms/Label';
-import ReactSelect from '../ReactSelect';
-import { useDocumentDrawer } from '../DocumentDrawer';
-import Pill from '../Pill';
-import X from '../../icons/X';
-import ViewDescription from '../ViewDescription';
-import getInitialColumnState from '../../views/collections/List/getInitialColumns';
-import buildListColumns from '../../views/collections/List/buildColumns';
-import formatFields from '../../views/collections/List/formatFields';
-import { usePreferences } from '../../utilities/Preferences';
-import { baseClass } from '.';
-const buildColumns = ({ collectionConfig, columns, onSelect, t, }) => buildListColumns({
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListDrawerContent = void 0;
+const react_1 = __importStar(require("react"));
+const modal_1 = require("@faceless-ui/modal");
+const react_i18next_1 = require("react-i18next");
+const getTranslation_1 = require("../../../../utilities/getTranslation");
+const Config_1 = require("../../utilities/Config");
+const Auth_1 = require("../../utilities/Auth");
+const DocumentInfo_1 = require("../../utilities/DocumentInfo");
+const RenderCustomComponent_1 = __importDefault(require("../../utilities/RenderCustomComponent"));
+const usePayloadAPI_1 = __importDefault(require("../../../hooks/usePayloadAPI"));
+const Default_1 = __importDefault(require("../../views/collections/List/Default"));
+const Label_1 = __importDefault(require("../../forms/Label"));
+const ReactSelect_1 = __importDefault(require("../ReactSelect"));
+const DocumentDrawer_1 = require("../DocumentDrawer");
+const Pill_1 = __importDefault(require("../Pill"));
+const X_1 = __importDefault(require("../../icons/X"));
+const ViewDescription_1 = __importDefault(require("../ViewDescription"));
+const getInitialColumns_1 = __importDefault(require("../../views/collections/List/getInitialColumns"));
+const buildColumns_1 = __importDefault(require("../../views/collections/List/buildColumns"));
+const formatFields_1 = __importDefault(require("../../views/collections/List/formatFields"));
+const Preferences_1 = require("../../utilities/Preferences");
+const _1 = require(".");
+const buildColumns = ({ collectionConfig, columns, onSelect, t, }) => (0, buildColumns_1.default)({
     collection: collectionConfig,
     columns,
     t,
@@ -33,23 +62,23 @@ const buildColumns = ({ collectionConfig, columns, onSelect, t, }) => buildListC
                     });
                 }
             },
-            className: `${baseClass}__first-cell`,
+            className: `${_1.baseClass}__first-cell`,
         }],
 });
 const shouldIncludeCollection = ({ coll: { admin: { enableRichTextRelationship }, upload, slug, }, uploads, collectionSlugs, }) => (enableRichTextRelationship && ((uploads && Boolean(upload)) || (collectionSlugs === null || collectionSlugs === void 0 ? void 0 : collectionSlugs.includes(slug))));
-export const ListDrawerContent = ({ drawerSlug, onSelect, customHeader, collectionSlugs, uploads, selectedCollection, }) => {
+const ListDrawerContent = ({ drawerSlug, onSelect, customHeader, collectionSlugs, uploads, selectedCollection, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-    const { t, i18n } = useTranslation(['upload', 'general']);
-    const { permissions } = useAuth();
-    const { getPreference, setPreference } = usePreferences();
-    const { isModalOpen, closeModal } = useModal();
-    const [limit, setLimit] = useState();
-    const [sort, setSort] = useState(null);
-    const [page, setPage] = useState(1);
-    const [where, setWhere] = useState(null);
-    const { serverURL, routes: { api }, collections } = useConfig();
-    const [enabledCollectionConfigs] = useState(() => collections.filter((coll) => shouldIncludeCollection({ coll, uploads, collectionSlugs })));
-    const [selectedCollectionConfig, setSelectedCollectionConfig] = useState(() => {
+    const { t, i18n } = (0, react_i18next_1.useTranslation)(['upload', 'general']);
+    const { permissions } = (0, Auth_1.useAuth)();
+    const { getPreference, setPreference } = (0, Preferences_1.usePreferences)();
+    const { isModalOpen, closeModal } = (0, modal_1.useModal)();
+    const [limit, setLimit] = (0, react_1.useState)();
+    const [sort, setSort] = (0, react_1.useState)(null);
+    const [page, setPage] = (0, react_1.useState)(1);
+    const [where, setWhere] = (0, react_1.useState)(null);
+    const { serverURL, routes: { api }, collections } = (0, Config_1.useConfig)();
+    const [enabledCollectionConfigs] = (0, react_1.useState)(() => collections.filter((coll) => shouldIncludeCollection({ coll, uploads, collectionSlugs })));
+    const [selectedCollectionConfig, setSelectedCollectionConfig] = (0, react_1.useState)(() => {
         let initialSelection;
         if (selectedCollection) {
             // if passed a selection, find it and check if it's enabled
@@ -64,10 +93,10 @@ export const ListDrawerContent = ({ drawerSlug, onSelect, customHeader, collecti
         }
         return initialSelection;
     });
-    const [selectedOption, setSelectedOption] = useState(() => (selectedCollectionConfig ? { label: getTranslation(selectedCollectionConfig.labels.singular, i18n), value: selectedCollectionConfig.slug } : undefined));
-    const [fields, setFields] = useState(() => formatFields(selectedCollectionConfig, t));
-    const [tableColumns, setTableColumns] = useState(() => {
-        const initialColumns = getInitialColumnState(fields, selectedCollectionConfig.admin.useAsTitle, selectedCollectionConfig.admin.defaultColumns);
+    const [selectedOption, setSelectedOption] = (0, react_1.useState)(() => (selectedCollectionConfig ? { label: (0, getTranslation_1.getTranslation)(selectedCollectionConfig.labels.singular, i18n), value: selectedCollectionConfig.slug } : undefined));
+    const [fields, setFields] = (0, react_1.useState)(() => (0, formatFields_1.default)(selectedCollectionConfig, t));
+    const [tableColumns, setTableColumns] = (0, react_1.useState)(() => {
+        const initialColumns = (0, getInitialColumns_1.default)(fields, selectedCollectionConfig.admin.useAsTitle, selectedCollectionConfig.admin.defaultColumns);
         return buildColumns({
             collectionConfig: selectedCollectionConfig,
             columns: initialColumns,
@@ -76,7 +105,7 @@ export const ListDrawerContent = ({ drawerSlug, onSelect, customHeader, collecti
         });
     });
     // allow external control of selected collection, same as the initial state logic above
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         let newSelection;
         if (selectedCollection) {
             // if passed a selection, find it and check if it's enabled
@@ -95,10 +124,10 @@ export const ListDrawerContent = ({ drawerSlug, onSelect, customHeader, collecti
     const stringifiedActiveColumns = JSON.stringify(activeColumnNames);
     const preferenceKey = `${selectedCollectionConfig.slug}-list`;
     // this is the 'create new' drawer
-    const [DocumentDrawer, DocumentDrawerToggler, { drawerSlug: documentDrawerSlug, },] = useDocumentDrawer({
+    const [DocumentDrawer, DocumentDrawerToggler, { drawerSlug: documentDrawerSlug, },] = (0, DocumentDrawer_1.useDocumentDrawer)({
         collectionSlug: selectedCollectionConfig.slug,
     });
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (selectedOption) {
             setSelectedCollectionConfig(collections.find(({ slug }) => selectedOption.value === slug));
         }
@@ -108,10 +137,10 @@ export const ListDrawerContent = ({ drawerSlug, onSelect, customHeader, collecti
     // 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 }, { setParams }] = usePayloadAPI(apiURL, {});
+    const [cacheBust, dispatchCacheBust] = (0, react_1.useReducer)((state) => state + 1, 0); // used to force a re-fetch even when apiURL is unchanged
+    const [{ data, isError }, { setParams }] = (0, usePayloadAPI_1.default)(apiURL, {});
     const moreThanOneAvailableCollection = enabledCollectionConfigs.length > 1;
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const params = {};
         if (page)
             params.page = page;
@@ -125,12 +154,12 @@ export const ListDrawerContent = ({ drawerSlug, onSelect, customHeader, collecti
             params.cacheBust = cacheBust;
         setParams(params);
     }, [setParams, page, sort, where, limit, cacheBust]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const syncColumnsFromPrefs = async () => {
             const currentPreferences = await getPreference(preferenceKey);
-            const newFields = formatFields(selectedCollectionConfig, t);
+            const newFields = (0, formatFields_1.default)(selectedCollectionConfig, t);
             setFields(newFields);
-            const initialColumns = getInitialColumnState(newFields, selectedCollectionConfig.admin.useAsTitle, selectedCollectionConfig.admin.defaultColumns);
+            const initialColumns = (0, getInitialColumns_1.default)(newFields, selectedCollectionConfig.admin.useAsTitle, selectedCollectionConfig.admin.defaultColumns);
             setTableColumns(buildColumns({
                 collectionConfig: selectedCollectionConfig,
                 columns: (currentPreferences === null || currentPreferences === void 0 ? void 0 : currentPreferences.columns) || initialColumns,
@@ -140,7 +169,7 @@ export const ListDrawerContent = ({ drawerSlug, onSelect, customHeader, collecti
         };
         syncColumnsFromPrefs();
     }, [t, getPreference, preferenceKey, onSelect, selectedCollectionConfig]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         const newPreferences = {
             limit,
             sort,
@@ -148,7 +177,7 @@ export const ListDrawerContent = ({ drawerSlug, onSelect, customHeader, collecti
         };
         setPreference(preferenceKey, newPreferences);
     }, [sort, limit, stringifiedActiveColumns, setPreference, preferenceKey]);
-    const setActiveColumns = useCallback((columns) => {
+    const setActiveColumns = (0, react_1.useCallback)((columns) => {
         setTableColumns(buildColumns({
             collectionConfig: selectedCollectionConfig,
             columns,
@@ -156,7 +185,7 @@ export const ListDrawerContent = ({ drawerSlug, onSelect, customHeader, collecti
             onSelect,
         }));
     }, [selectedCollectionConfig, t, onSelect]);
-    const onCreateNew = useCallback(({ doc }) => {
+    const onCreateNew = (0, react_1.useCallback)(({ doc }) => {
         if (typeof onSelect === 'function') {
             onSelect({
                 docID: doc.id,
@@ -170,28 +199,28 @@ export const ListDrawerContent = ({ drawerSlug, onSelect, customHeader, collecti
     if (!selectedCollectionConfig || isError) {
         return null;
     }
-    return (React.createElement(Fragment, null,
-        React.createElement(DocumentInfoProvider, { collection: selectedCollectionConfig },
-            React.createElement(RenderCustomComponent, { DefaultComponent: DefaultList, CustomComponent: (_e = (_d = (_c = selectedCollectionConfig === null || selectedCollectionConfig === void 0 ? void 0 : selectedCollectionConfig.admin) === null || _c === void 0 ? void 0 : _c.components) === null || _d === void 0 ? void 0 : _d.views) === null || _e === void 0 ? void 0 : _e.List, componentProps: {
+    return (react_1.default.createElement(react_1.Fragment, null,
+        react_1.default.createElement(DocumentInfo_1.DocumentInfoProvider, { collection: selectedCollectionConfig },
+            react_1.default.createElement(RenderCustomComponent_1.default, { DefaultComponent: Default_1.default, CustomComponent: (_e = (_d = (_c = selectedCollectionConfig === null || selectedCollectionConfig === void 0 ? void 0 : selectedCollectionConfig.admin) === null || _c === void 0 ? void 0 : _c.components) === null || _d === void 0 ? void 0 : _d.views) === null || _e === void 0 ? void 0 : _e.List, componentProps: {
                     collection: {
                         ...selectedCollectionConfig,
                         fields,
                     },
-                    customHeader: (React.createElement("header", { className: `${baseClass}__header` },
-                        React.createElement("div", { className: `${baseClass}__header-wrap` },
-                            React.createElement("div", { className: `${baseClass}__header-content` },
-                                React.createElement("h2", { className: `${baseClass}__header-text` }, !customHeader ? getTranslation((_f = selectedCollectionConfig === null || selectedCollectionConfig === void 0 ? void 0 : selectedCollectionConfig.labels) === null || _f === void 0 ? void 0 : _f.plural, i18n) : customHeader),
-                                hasCreatePermission && (React.createElement(DocumentDrawerToggler, { className: `${baseClass}__create-new-button` },
-                                    React.createElement(Pill, null, t('general:createNew'))))),
-                            React.createElement("button", { type: "button", onClick: () => {
+                    customHeader: (react_1.default.createElement("header", { className: `${_1.baseClass}__header` },
+                        react_1.default.createElement("div", { className: `${_1.baseClass}__header-wrap` },
+                            react_1.default.createElement("div", { className: `${_1.baseClass}__header-content` },
+                                react_1.default.createElement("h2", { className: `${_1.baseClass}__header-text` }, !customHeader ? (0, getTranslation_1.getTranslation)((_f = selectedCollectionConfig === null || selectedCollectionConfig === void 0 ? void 0 : selectedCollectionConfig.labels) === null || _f === void 0 ? void 0 : _f.plural, i18n) : customHeader),
+                                hasCreatePermission && (react_1.default.createElement(DocumentDrawerToggler, { className: `${_1.baseClass}__create-new-button` },
+                                    react_1.default.createElement(Pill_1.default, null, t('general:createNew'))))),
+                            react_1.default.createElement("button", { type: "button", onClick: () => {
                                     closeModal(drawerSlug);
-                                }, className: `${baseClass}__header-close` },
-                                React.createElement(X, null))),
-                        ((_g = selectedCollectionConfig === null || selectedCollectionConfig === void 0 ? void 0 : selectedCollectionConfig.admin) === null || _g === void 0 ? void 0 : _g.description) && (React.createElement("div", { className: `${baseClass}__sub-header` },
-                            React.createElement(ViewDescription, { description: selectedCollectionConfig.admin.description }))),
-                        moreThanOneAvailableCollection && (React.createElement("div", { className: `${baseClass}__select-collection-wrap` },
-                            React.createElement(Label, { label: t('selectCollectionToBrowse') }),
-                            React.createElement(ReactSelect, { className: `${baseClass}__select-collection`, value: selectedOption, onChange: setSelectedOption, options: enabledCollectionConfigs.map((coll) => ({ label: getTranslation(coll.labels.singular, i18n), value: coll.slug })) }))))),
+                                }, className: `${_1.baseClass}__header-close` },
+                                react_1.default.createElement(X_1.default, null))),
+                        ((_g = selectedCollectionConfig === null || selectedCollectionConfig === void 0 ? void 0 : selectedCollectionConfig.admin) === null || _g === void 0 ? void 0 : _g.description) && (react_1.default.createElement("div", { className: `${_1.baseClass}__sub-header` },
+                            react_1.default.createElement(ViewDescription_1.default, { description: selectedCollectionConfig.admin.description }))),
+                        moreThanOneAvailableCollection && (react_1.default.createElement("div", { className: `${_1.baseClass}__select-collection-wrap` },
+                            react_1.default.createElement(Label_1.default, { label: t('selectCollectionToBrowse') }),
+                            react_1.default.createElement(ReactSelect_1.default, { className: `${_1.baseClass}__select-collection`, value: selectedOption, onChange: setSelectedOption, options: enabledCollectionConfigs.map((coll) => ({ label: (0, getTranslation_1.getTranslation)(coll.labels.singular, i18n), value: coll.slug })) }))))),
                     data,
                     limit: limit || ((_j = (_h = selectedCollectionConfig === null || selectedCollectionConfig === void 0 ? void 0 : selectedCollectionConfig.admin) === null || _h === void 0 ? void 0 : _h.pagination) === null || _j === void 0 ? void 0 : _j.defaultLimit),
                     setLimit,
@@ -218,5 +247,6 @@ export const ListDrawerContent = ({ drawerSlug, onSelect, customHeader, collecti
                     handlePageChange: setPage,
                     handlePerPageChange: setLimit,
                 } })),
-        React.createElement(DocumentDrawer, { onSave: onCreateNew })));
+        react_1.default.createElement(DocumentDrawer, { onSave: onCreateNew })));
 };
+exports.ListDrawerContent = ListDrawerContent;

package/dist/admin/components/elements/ListDrawer/index.js

@@ -1,51 +1,79 @@
-import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
-import { useModal } from '@faceless-ui/modal';
-import { Drawer, DrawerToggler } from '../Drawer';
-import { useEditDepth } from '../../utilities/EditDepth';
-import { ListDrawerContent } from './DrawerContent';
-import './index.scss';
-export const baseClass = 'list-drawer';
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useListDrawer = exports.ListDrawer = exports.ListDrawerToggler = exports.baseClass = void 0;
+const react_1 = __importStar(require("react"));
+const modal_1 = require("@faceless-ui/modal");
+const Drawer_1 = require("../Drawer");
+const EditDepth_1 = require("../../utilities/EditDepth");
+const DrawerContent_1 = require("./DrawerContent");
+require("./index.scss");
+exports.baseClass = 'list-drawer';
 const formatListDrawerSlug = ({ depth, uuid, }) => `list-drawer_${depth}_${uuid}`;
-export const ListDrawerToggler = ({ children, className, drawerSlug, disabled, ...rest }) => {
-    return (React.createElement(DrawerToggler, { slug: drawerSlug, formatSlug: false, className: [
+const ListDrawerToggler = ({ children, className, drawerSlug, disabled, ...rest }) => {
+    return (react_1.default.createElement(Drawer_1.DrawerToggler, { slug: drawerSlug, formatSlug: false, className: [
             className,
-            `${baseClass}__toggler`,
+            `${exports.baseClass}__toggler`,
         ].filter(Boolean).join(' '), disabled: disabled, ...rest }, children));
 };
-export const ListDrawer = (props) => {
+exports.ListDrawerToggler = ListDrawerToggler;
+const ListDrawer = (props) => {
     const { drawerSlug } = props;
-    return (React.createElement(Drawer, { slug: drawerSlug, formatSlug: false, className: baseClass },
-        React.createElement(ListDrawerContent, { ...props })));
+    return (react_1.default.createElement(Drawer_1.Drawer, { slug: drawerSlug, formatSlug: false, className: exports.baseClass },
+        react_1.default.createElement(DrawerContent_1.ListDrawerContent, { ...props })));
 };
-export const useListDrawer = ({ collectionSlugs, uploads, selectedCollection }) => {
-    const drawerDepth = useEditDepth();
-    const uuid = useId();
-    const { modalState, toggleModal, closeModal, openModal } = useModal();
-    const [isOpen, setIsOpen] = useState(false);
+exports.ListDrawer = ListDrawer;
+const useListDrawer = ({ collectionSlugs, uploads, selectedCollection }) => {
+    const drawerDepth = (0, EditDepth_1.useEditDepth)();
+    const uuid = (0, react_1.useId)();
+    const { modalState, toggleModal, closeModal, openModal } = (0, modal_1.useModal)();
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const drawerSlug = formatListDrawerSlug({
         depth: drawerDepth,
         uuid,
     });
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         var _a;
         setIsOpen(Boolean((_a = modalState[drawerSlug]) === null || _a === void 0 ? void 0 : _a.isOpen));
     }, [modalState, drawerSlug]);
-    const toggleDrawer = useCallback(() => {
+    const toggleDrawer = (0, react_1.useCallback)(() => {
         toggleModal(drawerSlug);
     }, [toggleModal, drawerSlug]);
-    const closeDrawer = useCallback(() => {
+    const closeDrawer = (0, react_1.useCallback)(() => {
         closeModal(drawerSlug);
     }, [drawerSlug, closeModal]);
-    const openDrawer = useCallback(() => {
+    const openDrawer = (0, react_1.useCallback)(() => {
         openModal(drawerSlug);
     }, [drawerSlug, openModal]);
-    const MemoizedDrawer = useMemo(() => {
-        return ((props) => (React.createElement(ListDrawer, { ...props, drawerSlug: drawerSlug, collectionSlugs: collectionSlugs, uploads: uploads, closeDrawer: closeDrawer, key: drawerSlug, selectedCollection: selectedCollection })));
+    const MemoizedDrawer = (0, react_1.useMemo)(() => {
+        return ((props) => (react_1.default.createElement(exports.ListDrawer, { ...props, drawerSlug: drawerSlug, collectionSlugs: collectionSlugs, uploads: uploads, closeDrawer: closeDrawer, key: drawerSlug, selectedCollection: selectedCollection })));
     }, [drawerSlug, collectionSlugs, uploads, closeDrawer, selectedCollection]);
-    const MemoizedDrawerToggler = useMemo(() => {
-        return ((props) => (React.createElement(ListDrawerToggler, { ...props, drawerSlug: drawerSlug })));
+    const MemoizedDrawerToggler = (0, react_1.useMemo)(() => {
+        return ((props) => (react_1.default.createElement(exports.ListDrawerToggler, { ...props, drawerSlug: drawerSlug })));
     }, [drawerSlug]);
-    const MemoizedDrawerState = useMemo(() => ({
+    const MemoizedDrawerState = (0, react_1.useMemo)(() => ({
         drawerSlug,
         drawerDepth,
         isDrawerOpen: isOpen,
@@ -59,3 +87,4 @@ export const useListDrawer = ({ collectionSlugs, uploads, selectedCollection })
         MemoizedDrawerState,
     ];
 };
+exports.useListDrawer = useListDrawer;