payload 1.3.3 → 1.4.0

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

@@ -0,0 +1,100 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useModal } from '@faceless-ui/modal';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import DefaultEdit from '../../views/collections/Edit/Default';
+import X from '../../icons/X';
+import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
+import { getTranslation } from '../../../../utilities/getTranslation';
+import Button from '../Button';
+import { useConfig } from '../../utilities/Config';
+import { useLocale } from '../../utilities/Locale';
+import { useAuth } from '../../utilities/Auth';
+import { DocumentInfoProvider } from '../../utilities/DocumentInfo';
+import RenderCustomComponent from '../../utilities/RenderCustomComponent';
+import usePayloadAPI from '../../../hooks/usePayloadAPI';
+import formatFields from '../../views/collections/Edit/formatFields';
+import { useRelatedCollections } from '../../forms/field-types/Relationship/AddNew/useRelatedCollections';
+import IDLabel from '../IDLabel';
+import { baseClass } from '.';
+export const DocumentDrawerContent = ({ collectionSlug, id, drawerSlug, onSave: onSaveFromProps, customHeader, }) => {
+    var _a, _b, _c;
+    const { serverURL, routes: { api } } = useConfig();
+    const { toggleModal, modalState, closeModal } = useModal();
+    const locale = useLocale();
+    const { permissions, user } = useAuth();
+    const [initialState, setInitialState] = useState();
+    const { t, i18n } = useTranslation(['fields', 'general']);
+    const hasInitializedState = useRef(false);
+    const [isOpen, setIsOpen] = useState(false);
+    const [collectionConfig] = useRelatedCollections(collectionSlug);
+    const [fields, setFields] = useState(() => formatFields(collectionConfig, true));
+    useEffect(() => {
+        setFields(formatFields(collectionConfig, true));
+    }, [collectionSlug, collectionConfig]);
+    const [{ data, isLoading: isLoadingDocument, isError }] = usePayloadAPI((id ? `${serverURL}${api}/${collectionSlug}/${id}` : null), { initialParams: { 'fallback-locale': 'null', depth: 0, draft: 'true' } });
+    useEffect(() => {
+        if (isLoadingDocument) {
+            return;
+        }
+        const awaitInitialState = async () => {
+            const state = await buildStateFromSchema({
+                fieldSchema: fields,
+                data,
+                user,
+                operation: id ? 'update' : 'create',
+                id,
+                locale,
+                t,
+            });
+            setInitialState(state);
+        };
+        awaitInitialState();
+        hasInitializedState.current = true;
+    }, [data, fields, id, user, locale, isLoadingDocument, t]);
+    useEffect(() => {
+        var _a;
+        setIsOpen(Boolean((_a = modalState[drawerSlug]) === null || _a === void 0 ? void 0 : _a.isOpen));
+    }, [modalState, drawerSlug]);
+    useEffect(() => {
+        var _a;
+        if (isOpen && !isLoadingDocument && isError) {
+            closeModal(drawerSlug);
+            toast.error(((_a = data.errors) === null || _a === void 0 ? void 0 : _a[0].message) || t('error:unspecific'));
+        }
+    }, [isError, t, isOpen, data, drawerSlug, closeModal, isLoadingDocument]);
+    const onSave = useCallback((args) => {
+        if (typeof onSaveFromProps === 'function') {
+            onSaveFromProps({
+                ...args,
+                collectionConfig,
+            });
+        }
+    }, [collectionConfig, onSaveFromProps]);
+    if (isError)
+        return null;
+    return (React.createElement(DocumentInfoProvider, { collection: collectionConfig },
+        React.createElement(RenderCustomComponent, { DefaultComponent: DefaultEdit, CustomComponent: (_c = (_b = (_a = collectionConfig.admin) === null || _a === void 0 ? void 0 : _a.components) === null || _b === void 0 ? void 0 : _b.views) === null || _c === void 0 ? void 0 : _c.Edit, componentProps: {
+                isLoading: !initialState,
+                data,
+                id,
+                collection: collectionConfig,
+                permissions: permissions.collections[collectionConfig.slug],
+                isEditing: Boolean(id),
+                apiURL: id ? `${serverURL}${api}/${collectionSlug}/${id}` : null,
+                onSave,
+                initialState,
+                hasSavePermission: true,
+                action: `${serverURL}${api}/${collectionSlug}${id ? `/${id}` : ''}?locale=${locale}&depth=0&fallback-locale=null`,
+                disableEyebrow: true,
+                disableActions: true,
+                me: true,
+                disableLeaveWithoutSaving: true,
+                customHeader: (React.createElement("div", { className: `${baseClass}__header` },
+                    React.createElement("div", { className: `${baseClass}__header-content` },
+                        React.createElement("h2", { className: `${baseClass}__header-text` }, !customHeader ? t(!id ? 'fields:addNewLabel' : 'general:editLabel', { label: getTranslation(collectionConfig.labels.singular, i18n) }) : customHeader),
+                        React.createElement(Button, { buttonStyle: "none", className: `${baseClass}__header-close`, onClick: () => toggleModal(drawerSlug), "aria-label": t('general:close') },
+                            React.createElement(X, null))),
+                    id && (React.createElement(IDLabel, { id: id })))),
+            } })));
+};

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DocumentDrawerProps, DocumentTogglerProps, UseDocumentDrawer } from './types';
 import './index.scss';
+export declare const baseClass = "doc-drawer";
 export declare const DocumentDrawerToggler: React.FC<DocumentTogglerProps>;
 export declare const DocumentDrawer: React.FC<DocumentDrawerProps>;
 export declare const useDocumentDrawer: UseDocumentDrawer;

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

@@ -1,114 +1,31 @@
-import React, { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useId, useMemo, useState } from 'react';
 import { useModal } from '@faceless-ui/modal';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
-import DefaultEdit from '../../views/collections/Edit/Default';
-import X from '../../icons/X';
-import buildStateFromSchema from '../../forms/Form/buildStateFromSchema';
 import { getTranslation } from '../../../../utilities/getTranslation';
 import { Drawer, DrawerToggler } from '../Drawer';
-import Button from '../Button';
-import { useConfig } from '../../utilities/Config';
-import { useLocale } from '../../utilities/Locale';
-import { useAuth } from '../../utilities/Auth';
-import { DocumentInfoProvider } from '../../utilities/DocumentInfo';
-import RenderCustomComponent from '../../utilities/RenderCustomComponent';
-import usePayloadAPI from '../../../hooks/usePayloadAPI';
-import formatFields from '../../views/collections/Edit/formatFields';
 import { useRelatedCollections } from '../../forms/field-types/Relationship/AddNew/useRelatedCollections';
-import IDLabel from '../IDLabel';
 import { useEditDepth } from '../../utilities/EditDepth';
+import { DocumentDrawerContent } from './DrawerContent';
 import './index.scss';
-const baseClass = 'doc-drawer';
+export const baseClass = 'doc-drawer';
 const formatDocumentDrawerSlug = ({ collectionSlug, id, depth, uuid, }) => `doc-drawer_${collectionSlug}_${depth}${id ? `_${id}` : ''}_${uuid}`;
-export const DocumentDrawerToggler = ({ children, className, drawerSlug, id, collectionSlug, ...rest }) => {
+export const DocumentDrawerToggler = ({ children, className, drawerSlug, id, collectionSlug, disabled, ...rest }) => {
     const { t, i18n } = useTranslation(['fields', 'general']);
     const [collectionConfig] = useRelatedCollections(collectionSlug);
-    return (React.createElement(DrawerToggler, { slug: drawerSlug, formatSlug: false, className: className, "aria-label": t(!id ? 'fields:addNewLabel' : 'general:editLabel', { label: getTranslation(collectionConfig.labels.singular, i18n) }), ...rest }, children));
+    return (React.createElement(DrawerToggler, { slug: drawerSlug, formatSlug: false, className: [
+            className,
+            `${baseClass}__toggler`,
+        ].filter(Boolean).join(' '), disabled: disabled, "aria-label": t(!id ? 'fields:addNewLabel' : 'general:editLabel', { label: getTranslation(collectionConfig.labels.singular, i18n) }), ...rest }, children));
 };
-export const DocumentDrawer = ({ collectionSlug, id, drawerSlug, onSave, customHeader, }) => {
-    var _a, _b, _c;
-    const { serverURL, routes: { api } } = useConfig();
-    const { toggleModal, modalState, closeModal } = useModal();
-    const locale = useLocale();
-    const { permissions, user } = useAuth();
-    const [initialState, setInitialState] = useState();
-    const { t, i18n } = useTranslation(['fields', 'general']);
-    const hasInitializedState = useRef(false);
-    const [isOpen, setIsOpen] = useState(false);
-    const [collectionConfig] = useRelatedCollections(collectionSlug);
-    const [fields, setFields] = useState(() => formatFields(collectionConfig, true));
-    useEffect(() => {
-        setFields(formatFields(collectionConfig, true));
-    }, [collectionSlug, collectionConfig]);
-    const [{ data, isLoading: isLoadingDocument, isError }] = usePayloadAPI((id ? `${serverURL}${api}/${collectionSlug}/${id}` : null), { initialParams: { 'fallback-locale': 'null', depth: 0, draft: 'true' } });
-    useEffect(() => {
-        if (isLoadingDocument || hasInitializedState.current === true) {
-            return;
-        }
-        const awaitInitialState = async () => {
-            const state = await buildStateFromSchema({
-                fieldSchema: fields,
-                data,
-                user,
-                operation: id ? 'update' : 'create',
-                id,
-                locale,
-                t,
-            });
-            setInitialState(state);
-        };
-        awaitInitialState();
-        hasInitializedState.current = true;
-    }, [data, fields, id, user, locale, isLoadingDocument, t]);
-    useEffect(() => {
-        var _a;
-        setIsOpen(Boolean((_a = modalState[drawerSlug]) === null || _a === void 0 ? void 0 : _a.isOpen));
-    }, [modalState, drawerSlug]);
-    useEffect(() => {
-        var _a;
-        if (isOpen && !isLoadingDocument && isError) {
-            closeModal(drawerSlug);
-            toast.error(((_a = data.errors) === null || _a === void 0 ? void 0 : _a[0].message) || t('error:unspecific'));
-        }
-    }, [isError, t, isOpen, data, drawerSlug, closeModal, isLoadingDocument]);
-    if (isError)
-        return null;
-    if (isOpen) {
-        // IMPORTANT: we must ensure that modals are not recursively rendered
-        // to do this, do not render the drawer until it is open
-        return (React.createElement(Drawer, { slug: drawerSlug, formatSlug: false, className: baseClass },
-            React.createElement(DocumentInfoProvider, { collection: collectionConfig },
-                React.createElement(RenderCustomComponent, { DefaultComponent: DefaultEdit, CustomComponent: (_c = (_b = (_a = collectionConfig.admin) === null || _a === void 0 ? void 0 : _a.components) === null || _b === void 0 ? void 0 : _b.views) === null || _c === void 0 ? void 0 : _c.Edit, componentProps: {
-                        isLoading: !initialState,
-                        data,
-                        id,
-                        collection: collectionConfig,
-                        permissions: permissions.collections[collectionConfig.slug],
-                        isEditing: Boolean(id),
-                        apiURL: id ? `${serverURL}${api}/${collectionSlug}/${id}` : null,
-                        onSave,
-                        initialState,
-                        hasSavePermission: true,
-                        action: `${serverURL}${api}/${collectionSlug}${id ? `/${id}` : ''}?locale=${locale}&depth=0&fallback-locale=null`,
-                        disableEyebrow: true,
-                        disableActions: true,
-                        me: true,
-                        disableLeaveWithoutSaving: true,
-                        customHeader: (React.createElement("div", { className: `${baseClass}__header` },
-                            React.createElement("div", { className: `${baseClass}__header-content` },
-                                React.createElement("h2", null, !customHeader ? t(!id ? 'fields:addNewLabel' : 'general:editLabel', { label: getTranslation(collectionConfig.labels.singular, i18n) }) : customHeader),
-                                React.createElement(Button, { buttonStyle: "none", className: `${baseClass}__header-close`, onClick: () => toggleModal(drawerSlug), "aria-label": t('general:close') },
-                                    React.createElement(X, null))),
-                            id && (React.createElement(IDLabel, { id: id })))),
-                    } }))));
-    }
-    return null;
+export const DocumentDrawer = (props) => {
+    const { drawerSlug } = props;
+    return (React.createElement(Drawer, { slug: drawerSlug, formatSlug: false, className: baseClass },
+        React.createElement(DocumentDrawerContent, { ...props })));
 };
 export const useDocumentDrawer = ({ id, collectionSlug }) => {
     const drawerDepth = useEditDepth();
     const uuid = useId();
-    const { modalState, toggleModal } = useModal();
+    const { modalState, toggleModal, closeModal, openModal } = useModal();
     const [isOpen, setIsOpen] = useState(false);
     const drawerSlug = formatDocumentDrawerSlug({
         collectionSlug,
@@ -123,6 +40,12 @@ export const useDocumentDrawer = ({ id, collectionSlug }) => {
     const toggleDrawer = useCallback(() => {
         toggleModal(drawerSlug);
     }, [toggleModal, drawerSlug]);
+    const closeDrawer = useCallback(() => {
+        closeModal(drawerSlug);
+    }, [closeModal, drawerSlug]);
+    const openDrawer = useCallback(() => {
+        openModal(drawerSlug);
+    }, [openModal, drawerSlug]);
     const MemoizedDrawer = useMemo(() => {
         return ((props) => (React.createElement(DocumentDrawer, { ...props, collectionSlug: collectionSlug, id: id, drawerSlug: drawerSlug, key: drawerSlug })));
     }, [id, drawerSlug, collectionSlug]);
@@ -134,7 +57,9 @@ export const useDocumentDrawer = ({ id, collectionSlug }) => {
         drawerDepth,
         isDrawerOpen: isOpen,
         toggleDrawer,
-    }), [drawerDepth, drawerSlug, isOpen, toggleDrawer]);
+        closeDrawer,
+        openDrawer,
+    }), [drawerDepth, drawerSlug, isOpen, toggleDrawer, closeDrawer, openDrawer]);
     return [
         MemoizedDrawer,
         MemoizedDrawerToggler,

package/dist/admin/components/elements/DocumentDrawer/index.scss

@@ -2,34 +2,60 @@
 
 .doc-drawer {
   &__header {
+    margin-top: base(2.5);
     margin-bottom: base(1);
+
+    @include mid-break {
+      margin-top: base(1.5);
+    }
   }
 
   &__header-content {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
-    margin-top: base(2.5);
+    margin-bottom: base(1);
+  }
+
+  &__header-text {
+    margin: 0;
+  }
+
+  &__toggler {
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+
+    &:focus,
+    &:focus-within {
+      outline: none;
+    }
+
+    &:disabled {
+      pointer-events: none;
+    }
   }
 
   &__header-close {
+    border: 0;
+    background-color: transparent;
+    padding: 0;
+    cursor: pointer;
+    overflow: hidden;
+    width: base(1);
+    height: base(1);
+
     svg {
-      width: base(2.5);
-      height: base(2.5);
+      width: base(2.75);
+      height: base(2.75);
       position: relative;
-      top: base(-.5);
-      right: base(-.75);
+      left: base(-.825);
+      top: base(-.825);
 
       .stroke {
-        stroke-width: .5px;
-      }
-    }
-  }
-
-  @include mid-break {
-    &__header-close {
-      svg {
-        top: base(-.75);
+        stroke-width: 2px;
+        vector-effect: non-scaling-stroke;
       }
     }
   }

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

@@ -1,19 +1,25 @@
 import React, { HTMLAttributes } from 'react';
-export type DocumentDrawerProps = {
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+export declare type DocumentDrawerProps = {
     collectionSlug: string;
     id?: string;
-    onSave?: (json: Record<string, unknown>) => void;
+    onSave?: (json: {
+        doc: Record<string, any>;
+        message: string;
+        collectionConfig: SanitizedCollectionConfig;
+    }) => void;
     customHeader?: React.ReactNode;
     drawerSlug?: string;
 };
-export type DocumentTogglerProps = HTMLAttributes<HTMLButtonElement> & {
+export declare type DocumentTogglerProps = HTMLAttributes<HTMLButtonElement> & {
     children?: React.ReactNode;
     className?: string;
     drawerSlug?: string;
     id?: string;
     collectionSlug: string;
+    disabled?: boolean;
 };
-export type UseDocumentDrawer = (args: {
+export declare type UseDocumentDrawer = (args: {
     id?: string;
     collectionSlug: string;
 }) => [
@@ -24,5 +30,7 @@ export type UseDocumentDrawer = (args: {
         drawerDepth: number;
         isDrawerOpen: boolean;
         toggleDrawer: () => void;
+        closeDrawer: () => void;
+        openDrawer: () => void;
     }
 ];

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

@@ -1,5 +1,9 @@
 import React from 'react';
 import { Props, TogglerProps } from './types';
 import './index.scss';
+export declare const formatDrawerSlug: ({ slug, depth, }: {
+    slug: string;
+    depth: number;
+}) => string;
 export declare const DrawerToggler: React.FC<TogglerProps>;
 export declare const Drawer: React.FC<Props>;

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

@@ -6,8 +6,8 @@ import { EditDepthContext, useEditDepth } from '../../utilities/EditDepth';
 import './index.scss';
 const baseClass = 'drawer';
 const zBase = 100;
-const formatDrawerSlug = ({ slug, depth, }) => `drawer_${depth}_${slug}`;
-export const DrawerToggler = ({ slug, formatSlug, children, className, onClick, ...rest }) => {
+export const formatDrawerSlug = ({ slug, depth, }) => `drawer_${depth}_${slug}`;
+export const DrawerToggler = ({ slug, formatSlug, children, className, onClick, disabled, ...rest }) => {
     const { openModal } = useModal();
     const drawerDepth = useEditDepth();
     const handleClick = useCallback((e) => {
@@ -15,7 +15,7 @@ export const DrawerToggler = ({ slug, formatSlug, children, className, onClick,
         if (typeof onClick === 'function')
             onClick(e);
     }, [openModal, drawerDepth, slug, onClick, formatSlug]);
-    return (React.createElement("button", { onClick: handleClick, type: "button", className: className, ...rest }, children));
+    return (React.createElement("button", { onClick: handleClick, type: "button", className: className, disabled: disabled, ...rest }, children));
 };
 export const Drawer = ({ slug, formatSlug, children, className, }) => {
     const { t } = useTranslation('general');
@@ -23,22 +23,31 @@ export const Drawer = ({ slug, formatSlug, children, className, }) => {
     const { breakpoints: { m: midBreak } } = useWindowInfo();
     const drawerDepth = useEditDepth();
     const [isOpen, setIsOpen] = useState(false);
+    const [animateIn, setAnimateIn] = useState(false);
     const [modalSlug] = useState(() => (formatSlug !== false ? formatDrawerSlug({ slug, depth: drawerDepth }) : slug));
     useEffect(() => {
-        setIsOpen(modalState[modalSlug].isOpen);
+        var _a;
+        setIsOpen((_a = modalState[modalSlug]) === null || _a === void 0 ? void 0 : _a.isOpen);
     }, [modalSlug, modalState]);
-    return (React.createElement(Modal, { slug: modalSlug, className: [
-            className,
-            baseClass,
-            isOpen && `${baseClass}--is-open`,
-        ].filter(Boolean).join(' '), style: {
-            zIndex: zBase + drawerDepth,
-        } },
-        drawerDepth === 1 && (React.createElement("div", { className: `${baseClass}__blur-bg` })),
-        React.createElement("button", { className: `${baseClass}__close`, id: `close-drawer__${modalSlug}`, type: "button", onClick: () => closeModal(modalSlug), style: {
-                width: `calc(${midBreak ? 'var(--gutter-h)' : 'var(--nav-width)'} + ${drawerDepth - 1} * 25px)`,
-            }, "aria-label": t('close') }),
-        React.createElement("div", { className: `${baseClass}__content` },
-            React.createElement("div", { className: `${baseClass}__content-children` },
-                React.createElement(EditDepthContext.Provider, { value: drawerDepth + 1 }, children)))));
+    useEffect(() => {
+        setAnimateIn(isOpen);
+    }, [isOpen]);
+    if (isOpen) {
+        // IMPORTANT: do not render the drawer until it is explicitly open, this is to avoid large html trees especially when nesting drawers
+        return (React.createElement(Modal, { slug: modalSlug, className: [
+                className,
+                baseClass,
+                animateIn && `${baseClass}--is-open`,
+            ].filter(Boolean).join(' '), style: {
+                zIndex: zBase + drawerDepth,
+            } },
+            drawerDepth === 1 && (React.createElement("div", { className: `${baseClass}__blur-bg` })),
+            React.createElement("button", { className: `${baseClass}__close`, id: `close-drawer__${modalSlug}`, type: "button", onClick: () => closeModal(modalSlug), style: {
+                    width: `calc(${midBreak ? 'var(--gutter-h)' : 'var(--nav-width)'} + ${drawerDepth - 1} * 25px)`,
+                }, "aria-label": t('close') }),
+            React.createElement("div", { className: `${baseClass}__content` },
+                React.createElement("div", { className: `${baseClass}__content-children` },
+                    React.createElement(EditDepthContext.Provider, { value: drawerDepth + 1 }, children)))));
+    }
+    return null;
 };

package/dist/admin/components/elements/Drawer/index.scss

@@ -26,6 +26,7 @@
     z-index: 2;
     width: 100%;
     transition: all 300ms ease-out;
+    overflow: hidden;
   }
 
   &__content-children {

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

@@ -1,13 +1,14 @@
 import { HTMLAttributes } from 'react';
-export type Props = {
+export declare type Props = {
     slug: string;
     formatSlug?: boolean;
     children: React.ReactNode;
     className?: string;
 };
-export type TogglerProps = HTMLAttributes<HTMLButtonElement> & {
+export declare type TogglerProps = HTMLAttributes<HTMLButtonElement> & {
     slug: string;
     formatSlug?: boolean;
     children: React.ReactNode;
     className?: string;
+    disabled?: boolean;
 };

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

@@ -39,6 +39,10 @@ const Duplicate = ({ slug, collection, id }) => {
                 },
             });
             let data = await response.json();
+            if ('createdAt' in data)
+                delete data.createdAt;
+            if ('updatedAt' in data)
+                delete data.updatedAt;
             if (typeof ((_a = collection.admin.hooks) === null || _a === void 0 ? void 0 : _a.beforeDuplicate) === 'function') {
                 data = await collection.admin.hooks.beforeDuplicate({
                     data,

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

@@ -1,5 +1,5 @@
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export type Props = {
+export declare type Props = {
     slug: string;
     collection: SanitizedCollectionConfig;
     id: string;

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-export type Props = {
+export declare type Props = {
     actions?: React.ReactNode;
 };

package/dist/admin/components/elements/FileDetails/Meta/types.d.ts

@@ -1,4 +1,4 @@
-export type Props = {
+export declare type Props = {
     filename: string;
     mimeType: string;
     filesize: number;

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

@@ -1,5 +1,5 @@
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export type Props = {
+export declare type Props = {
     collection: SanitizedCollectionConfig;
     doc: Record<string, unknown>;
     handleRemove?: () => void;

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

@@ -1,4 +1,4 @@
-export type Props = {
+export declare type Props = {
     setKey: () => void;
     highlightField: (Boolean: any) => void;
 };

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

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

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

@@ -23,7 +23,11 @@
     display: flex;
     margin-left: - base(.5);
     margin-right: - base(.5);
-    width: calc(100% + #{$baseline});
+    width: calc(100% + #{base(1)});
+
+    .btn {
+      margin: 0 base(.5);
+    }
   }
 
   &__toggle-columns,
@@ -31,10 +35,6 @@
   &__toggle-sort {
     min-width: 140px;
 
-    &.btn {
-      margin: 0 base(.5);
-    }
-
     &.btn--style-primary {
       svg {
         transform: rotate(180deg);
@@ -52,6 +52,16 @@
     &__buttons {
       margin-left: base(.5);
     }
+
+    &__buttons-wrap {
+      margin-left: - base(.25);
+      margin-right: - base(.25);
+      width: calc(100% + #{base(0.5)});
+
+      .btn {
+        margin: 0 base(.25);
+      }
+    }
   }
 
   @include small-break {

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

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

package/dist/admin/components/elements/ListDrawer/DrawerContent.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ListDrawerProps } from './types';
+export declare const ListDrawerContent: React.FC<ListDrawerProps>;