payload 1.3.4 → 1.4.0

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

@@ -0,0 +1,222 @@
+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({
+    collection: collectionConfig,
+    columns,
+    t,
+    cellProps: [{
+            link: false,
+            onClick: ({ collection, rowData }) => {
+                if (typeof onSelect === 'function') {
+                    onSelect({
+                        docID: rowData.id,
+                        collectionConfig: collection,
+                    });
+                }
+            },
+            className: `${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, }) => {
+    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(() => {
+        let initialSelection;
+        if (selectedCollection) {
+            // if passed a selection, find it and check if it's enabled
+            const foundSelection = collections.find(({ slug }) => slug === selectedCollection);
+            if (foundSelection && shouldIncludeCollection({ coll: foundSelection, uploads, collectionSlugs })) {
+                initialSelection = foundSelection;
+            }
+        }
+        else {
+            // return the first one that is enabled
+            initialSelection = collections.find((coll) => shouldIncludeCollection({ coll, uploads, collectionSlugs }));
+        }
+        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);
+        return buildColumns({
+            collectionConfig: selectedCollectionConfig,
+            columns: initialColumns,
+            t,
+            onSelect,
+        });
+    });
+    // allow external control of selected collection, same as the initial state logic above
+    useEffect(() => {
+        let newSelection;
+        if (selectedCollection) {
+            // if passed a selection, find it and check if it's enabled
+            const foundSelection = collections.find(({ slug }) => slug === selectedCollection);
+            if (foundSelection && shouldIncludeCollection({ coll: foundSelection, uploads, collectionSlugs })) {
+                newSelection = foundSelection;
+            }
+        }
+        else {
+            // return the first one that is enabled
+            newSelection = collections.find((coll) => shouldIncludeCollection({ coll, uploads, collectionSlugs }));
+        }
+        setSelectedCollectionConfig(newSelection);
+    }, [selectedCollection, collectionSlugs, uploads, collections, onSelect, t]);
+    const activeColumnNames = tableColumns.map(({ accessor }) => accessor);
+    const stringifiedActiveColumns = JSON.stringify(activeColumnNames);
+    const preferenceKey = `${selectedCollectionConfig.slug}-list`;
+    // this is the 'create new' drawer
+    const [DocumentDrawer, DocumentDrawerToggler, { drawerSlug: documentDrawerSlug, },] = useDocumentDrawer({
+        collectionSlug: selectedCollectionConfig.slug,
+    });
+    useEffect(() => {
+        if (selectedOption) {
+            setSelectedCollectionConfig(collections.find(({ slug }) => selectedOption.value === slug));
+        }
+    }, [selectedOption, collections]);
+    const collectionPermissions = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[selectedCollectionConfig === null || selectedCollectionConfig === void 0 ? void 0 : selectedCollectionConfig.slug];
+    const hasCreatePermission = (_b = collectionPermissions === null || collectionPermissions === void 0 ? void 0 : collectionPermissions.create) === null || _b === void 0 ? void 0 : _b.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 }, { setParams }] = usePayloadAPI(apiURL, {});
+    const moreThanOneAvailableCollection = enabledCollectionConfigs.length > 1;
+    useEffect(() => {
+        const params = {};
+        if (page)
+            params.page = page;
+        if (where)
+            params.where = where;
+        if (sort)
+            params.sort = sort;
+        if (limit)
+            params.limit = limit;
+        if (cacheBust)
+            params.cacheBust = cacheBust;
+        setParams(params);
+    }, [setParams, page, sort, where, limit, cacheBust]);
+    useEffect(() => {
+        const syncColumnsFromPrefs = async () => {
+            const currentPreferences = await getPreference(preferenceKey);
+            const newFields = formatFields(selectedCollectionConfig, t);
+            setFields(newFields);
+            const initialColumns = getInitialColumnState(newFields, selectedCollectionConfig.admin.useAsTitle, selectedCollectionConfig.admin.defaultColumns);
+            setTableColumns(buildColumns({
+                collectionConfig: selectedCollectionConfig,
+                columns: (currentPreferences === null || currentPreferences === void 0 ? void 0 : currentPreferences.columns) || initialColumns,
+                t,
+                onSelect,
+            }));
+        };
+        syncColumnsFromPrefs();
+    }, [t, getPreference, preferenceKey, onSelect, selectedCollectionConfig]);
+    useEffect(() => {
+        const newPreferences = {
+            limit,
+            sort,
+            columns: JSON.parse(stringifiedActiveColumns),
+        };
+        setPreference(preferenceKey, newPreferences);
+    }, [sort, limit, stringifiedActiveColumns, setPreference, preferenceKey]);
+    const setActiveColumns = useCallback((columns) => {
+        setTableColumns(buildColumns({
+            collectionConfig: selectedCollectionConfig,
+            columns,
+            t,
+            onSelect,
+        }));
+    }, [selectedCollectionConfig, t, onSelect]);
+    const onCreateNew = useCallback(({ doc }) => {
+        if (typeof onSelect === 'function') {
+            onSelect({
+                docID: doc.id,
+                collectionConfig: selectedCollectionConfig,
+            });
+        }
+        dispatchCacheBust();
+        closeModal(documentDrawerSlug);
+        closeModal(drawerSlug);
+    }, [closeModal, documentDrawerSlug, drawerSlug, onSelect, selectedCollectionConfig]);
+    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: {
+                    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: () => {
+                                    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 })) }))))),
+                    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,
+                    tableColumns,
+                    setColumns: setActiveColumns,
+                    setSort,
+                    newDocumentURL: null,
+                    hasCreatePermission,
+                    columnNames: activeColumnNames,
+                    disableEyebrow: true,
+                    modifySearchParams: false,
+                    onCardClick: (doc) => {
+                        if (typeof onSelect === 'function') {
+                            onSelect({
+                                docID: doc.id,
+                                collectionConfig: selectedCollectionConfig,
+                            });
+                        }
+                        closeModal(drawerSlug);
+                    },
+                    disableCardLink: true,
+                    handleSortChange: setSort,
+                    handleWhereChange: setWhere,
+                    handlePageChange: setPage,
+                    handlePerPageChange: setLimit,
+                } })),
+        React.createElement(DocumentDrawer, { onSave: onCreateNew })));
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ListDrawerProps, ListTogglerProps, UseListDrawer } from './types';
+import './index.scss';
+export declare const baseClass = "list-drawer";
+export declare const ListDrawerToggler: React.FC<ListTogglerProps>;
+export declare const ListDrawer: React.FC<ListDrawerProps>;
+export declare const useListDrawer: UseListDrawer;

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

@@ -0,0 +1,61 @@
+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';
+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: [
+            className,
+            `${baseClass}__toggler`,
+        ].filter(Boolean).join(' '), disabled: disabled, ...rest }, children));
+};
+export const ListDrawer = (props) => {
+    const { drawerSlug } = props;
+    return (React.createElement(Drawer, { slug: drawerSlug, formatSlug: false, className: baseClass },
+        React.createElement(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);
+    const drawerSlug = formatListDrawerSlug({
+        depth: drawerDepth,
+        uuid,
+    });
+    useEffect(() => {
+        var _a;
+        setIsOpen(Boolean((_a = modalState[drawerSlug]) === null || _a === void 0 ? void 0 : _a.isOpen));
+    }, [modalState, drawerSlug]);
+    const toggleDrawer = useCallback(() => {
+        toggleModal(drawerSlug);
+    }, [toggleModal, drawerSlug]);
+    const closeDrawer = useCallback(() => {
+        closeModal(drawerSlug);
+    }, [drawerSlug, closeModal]);
+    const openDrawer = 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 })));
+    }, [drawerSlug, collectionSlugs, uploads, closeDrawer, selectedCollection]);
+    const MemoizedDrawerToggler = useMemo(() => {
+        return ((props) => (React.createElement(ListDrawerToggler, { ...props, drawerSlug: drawerSlug })));
+    }, [drawerSlug]);
+    const MemoizedDrawerState = useMemo(() => ({
+        drawerSlug,
+        drawerDepth,
+        isDrawerOpen: isOpen,
+        toggleDrawer,
+        closeDrawer,
+        openDrawer,
+    }), [drawerDepth, drawerSlug, isOpen, toggleDrawer, closeDrawer, openDrawer]);
+    return [
+        MemoizedDrawer,
+        MemoizedDrawerToggler,
+        MemoizedDrawerState,
+    ];
+};

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

@@ -0,0 +1,97 @@
+@import '../../../scss/styles.scss';
+
+.list-drawer {
+  &__header {
+    margin-top: base(2.5);
+    width: 100%;
+
+    @include mid-break {
+      margin-top: base(1.5);
+    }
+  }
+
+  &__header-wrap {
+    display: flex;
+  }
+
+  &__header-content {
+    display: flex;
+    flex-wrap: wrap;
+    flex-grow: 1;
+    align-items: flex-start;
+
+    .pill {
+      pointer-events: none;
+      margin: 0;
+      margin-top: base(0.25);
+      margin-left: base(0.5);
+
+      @include mid-break {
+        margin-top: 0;
+      }
+    }
+  }
+
+  &__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.75);
+      height: base(2.75);
+      position: relative;
+      left: base(-.825);
+      top: base(-.825);
+
+      .stroke {
+        stroke-width: 2px;
+        vector-effect: non-scaling-stroke;
+      }
+    }
+  }
+
+  &__select-collection-wrap {
+    margin-top: base(1);
+  }
+
+  &__first-cell {
+    border: 0;
+    background-color: transparent;
+    padding: 0;
+    cursor: pointer;
+    text-decoration: underline;
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  @include mid-break {
+    .collection-list__header {
+      margin-bottom: base(0.5);
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+import React, { HTMLAttributes } from 'react';
+import { SanitizedCollectionConfig } from '../../../../collections/config/types';
+export declare type ListDrawerProps = {
+    onSelect?: (args: {
+        docID: string;
+        collectionConfig: SanitizedCollectionConfig;
+    }) => void;
+    customHeader?: React.ReactNode;
+    drawerSlug?: string;
+    collectionSlugs?: string[];
+    uploads?: boolean;
+    selectedCollection?: string;
+};
+export declare type ListTogglerProps = HTMLAttributes<HTMLButtonElement> & {
+    children?: React.ReactNode;
+    className?: string;
+    drawerSlug?: string;
+    disabled?: boolean;
+};
+export declare type UseListDrawer = (args: {
+    collectionSlugs?: string[];
+    selectedCollection?: string;
+    uploads?: boolean;
+}) => [
+    React.FC<Omit<ListDrawerProps, 'collectionSlug' | 'id'>>,
+    React.FC<Omit<ListTogglerProps, 'collectionSlug' | 'id'>>,
+    {
+        drawerSlug: string;
+        drawerDepth: number;
+        isDrawerOpen: boolean;
+        toggleDrawer: () => void;
+        closeDrawer: () => void;
+        openDrawer: () => void;
+    }
+];

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

@@ -1 +1 @@
-export type Props = {};
+export declare type Props = {};

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import './index.scss';
-type Props = {
+declare type Props = {
     children: React.ReactNode;
     label: string;
 };

package/dist/admin/components/elements/Paginator/ClickableArrow/types.d.ts

@@ -1,4 +1,4 @@
-export type Props = {
+export declare type Props = {
     updatePage?: () => void;
     isDisabled?: boolean;
     direction?: 'right' | 'left';

package/dist/admin/components/elements/Paginator/Page/types.d.ts

@@ -1,4 +1,4 @@
-export type Props = {
+export declare type Props = {
     page?: number;
     isCurrent?: boolean;
     updatePage?: (page: any) => void;

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

@@ -1,4 +1,4 @@
-export type Props = {
+export declare type Props = {
     limit?: number;
     totalPages?: number;
     page?: number;
@@ -10,7 +10,7 @@ export type Props = {
     disableHistoryChange?: boolean;
     onChange?: (page: number) => void;
 };
-export type Node = {
+export declare type Node = {
     type: 'Page' | 'Separator' | 'ClickableArrow';
     props?: {
         page?: number;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import './index.scss';
-type Props = {
+export declare type Props = {
     limits: number[];
     limit: number;
     handleChange?: (limit: number) => void;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type Props = {
+export declare type Props = {
     children?: React.ReactNode;
     className?: string;
     to?: string;
@@ -8,7 +8,7 @@ export type Props = {
     onClick?: () => void;
     pillStyle?: 'white' | 'light' | 'dark' | 'light-gray' | 'warning' | 'success';
 };
-export type RenderedTypeProps = {
+export declare type RenderedTypeProps = {
     children: React.ReactNode;
     className?: string;
     to: string;

package/dist/admin/components/elements/Popup/PopupButton/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export type Props = {
+export declare type Props = {
     className?: string;
     buttonType: 'custom' | 'default' | 'none';
     button: React.ReactNode;

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

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-export type Props = {
+export declare type Props = {
     className?: string;
     buttonClassName?: string;
     render?: (any: any) => React.ReactNode;

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

@@ -1,6 +1,6 @@
 import { Data } from '../../forms/Form/types';
 import { GeneratePreviewURL } from '../../../../config/types';
-export type Props = {
+export declare type Props = {
     generatePreviewURL?: GeneratePreviewURL;
     data?: Data;
 };

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

@@ -1 +1 @@
-export type Props = {};
+export declare type Props = {};

package/dist/admin/components/elements/ReactSelect/MultiValueLabel/index.scss

@@ -11,5 +11,6 @@
   &__text {
     text-overflow: ellipsis;
     overflow: hidden;
+    white-space: nowrap;
   }
 }

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

@@ -1,13 +1,13 @@
 import { Ref } from 'react';
-export type Option = {
+export declare type Option = {
     [key: string]: unknown;
     value: unknown;
 };
-export type OptionGroup = {
+export declare type OptionGroup = {
     label: string;
     options: Option[];
 };
-export type Props = {
+export declare type Props = {
     droppableRef?: Ref<HTMLElement>;
     className?: string;
     value?: Option | Option[];

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

@@ -1,4 +1,4 @@
-export type Props = {
+export declare type Props = {
     useAsTitle?: string;
     data?: {
         id?: string;

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

@@ -1,6 +1,6 @@
 import { FieldAffectingData } from '../../../../fields/config/types';
 import { Where } from '../../../../types';
-export type Props = {
+export declare type Props = {
     fieldName?: string;
     fieldLabel?: string;
     modifySearchQuery?: boolean;

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

@@ -1,4 +1,4 @@
-export type Props = {
+export declare type Props = {
     label: Record<string, string> | string;
     name: string;
     disable?: boolean;

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

@@ -25,7 +25,8 @@ const SortComplex = (props) => {
         return fields;
     }, []));
     const [sortField, setSortField] = useState(sortFields[0]);
-    const [sortOrder, setSortOrder] = useState({ label: t('descending'), value: '-' });
+    const [initialSort] = useState(() => ({ label: t('descending'), value: '-' }));
+    const [sortOrder, setSortOrder] = useState(initialSort);
     useEffect(() => {
         if (sortField === null || sortField === void 0 ? void 0 : sortField.value) {
             const newSortValue = `${sortOrder.value}${sortField.value}`;
@@ -52,6 +53,8 @@ const SortComplex = (props) => {
                     React.createElement(ReactSelect, { value: sortField, options: sortFields, onChange: setSortField })),
                 React.createElement("div", { className: `${baseClass}__select` },
                     React.createElement("div", { className: `${baseClass}__label` }, t('order')),
-                    React.createElement(ReactSelect, { value: sortOrder, options: sortOptions, onChange: setSortOrder }))))));
+                    React.createElement(ReactSelect, { value: sortOrder, options: sortOptions, onChange: (incomingSort) => {
+                            setSortOrder(incomingSort || initialSort);
+                        } }))))));
 };
 export default SortComplex;

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

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

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

@@ -1 +1 @@
-export type Props = {};
+export declare type Props = {};

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

@@ -2,6 +2,7 @@
 
 .step-nav {
   display: flex;
+  overflow: auto;
 
   * {
     display: block;

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

@@ -1,8 +1,8 @@
-export type StepNavItem = {
+export declare type StepNavItem = {
     label: Record<string, string> | string;
     url?: string;
 };
-export type Context = {
+export declare type Context = {
     stepNav: StepNavItem[];
     setStepNav: (items: StepNavItem[]) => void;
 };

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

@@ -1,12 +1,12 @@
 import React from 'react';
-export type Column = {
+export declare type Column = {
     accessor: string;
     components: {
         Heading: React.ReactNode;
         renderCell: (row: any, data: any) => React.ReactNode;
     };
 };
-export type Props = {
+export declare type Props = {
     columns: Column[];
     data: unknown[];
 };

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

@@ -1,5 +1,5 @@
 import { SanitizedCollectionConfig } from '../../../../collections/config/types';
-export type Props = {
+export declare type Props = {
     doc: Record<string, unknown>;
     collection: SanitizedCollectionConfig;
     size?: 'small' | 'medium' | 'large' | 'expand';