payload 1.3.3 → 1.4.0

package/dist/admin/components/forms/field-types/RichText/elements/unwrapList.js

@@ -0,0 +1,38 @@
+import { Transforms, Editor, Element } from 'slate';
+import { areAllChildrenElements } from './areAllChildrenElements';
+import listTypes from './listTypes';
+export const unwrapList = (editor, atPath) => {
+    // Remove type for any nodes that have text children -
+    // this means that the node should remain
+    Transforms.setNodes(editor, { type: undefined }, {
+        at: atPath,
+        match: (node, path) => {
+            const childrenAreAllElements = areAllChildrenElements(node);
+            const matches = !Editor.isEditor(node)
+                && Element.isElement(node)
+                && !childrenAreAllElements
+                && node.type === 'li'
+                && path.length === atPath.length + 1;
+            return matches;
+        },
+    });
+    // For nodes have all element children, unwrap it instead
+    // because the li is a duplicative wrapper
+    Transforms.unwrapNodes(editor, {
+        at: atPath,
+        match: (node, path) => {
+            const childrenAreAllElements = areAllChildrenElements(node);
+            const matches = !Editor.isEditor(node)
+                && Element.isElement(node)
+                && childrenAreAllElements
+                && node.type === 'li'
+                && path.length === atPath.length + 1;
+            return matches;
+        },
+    });
+    // Finally, unwrap the UL itself
+    Transforms.unwrapNodes(editor, {
+        match: (n) => Element.isElement(n) && listTypes.includes(n.type),
+        mode: 'lowest',
+    });
+};

package/dist/admin/components/forms/field-types/RichText/elements/upload/Button/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import './index.scss';
-import '../addSwapModals.scss';
 declare const UploadButton: React.FC<{
     path: string;
 }>;

package/dist/admin/components/forms/field-types/RichText/elements/upload/Button/index.js

@@ -1,26 +1,12 @@
-import React, { Fragment, useEffect, useState } from 'react';
-import { Modal, useModal } from '@faceless-ui/modal';
-import { ReactEditor, useSlate } from 'slate-react';
+import React, { Fragment, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useConfig } from '../../../../../../utilities/Config';
+import { ReactEditor, useSlate } from 'slate-react';
 import ElementButton from '../../Button';
 import UploadIcon from '../../../../../../icons/Upload';
-import usePayloadAPI from '../../../../../../../hooks/usePayloadAPI';
-import UploadGallery from '../../../../../../elements/UploadGallery';
-import ListControls from '../../../../../../elements/ListControls';
-import ReactSelect from '../../../../../../elements/ReactSelect';
-import Paginator from '../../../../../../elements/Paginator';
-import formatFields from '../../../../../../views/collections/List/formatFields';
-import Label from '../../../../../Label';
-import MinimalTemplate from '../../../../../../templates/Minimal';
-import Button from '../../../../../../elements/Button';
-import PerPage from '../../../../../../elements/PerPage';
+import { useListDrawer } from '../../../../../../elements/ListDrawer';
 import { injectVoidElement } from '../../injectVoid';
-import { getTranslation } from '../../../../../../../../utilities/getTranslation';
 import './index.scss';
-import '../addSwapModals.scss';
 const baseClass = 'upload-rich-text-button';
-const baseModalClass = 'rich-text-upload-modal';
 const insertUpload = (editor, { value, relationTo }) => {
     const text = { text: ' ' };
     const upload = {
@@ -34,101 +20,27 @@ const insertUpload = (editor, { value, relationTo }) => {
     injectVoidElement(editor, upload);
     ReactEditor.focus(editor);
 };
-const UploadButton = ({ path }) => {
-    var _a, _b;
-    const { t, i18n } = useTranslation('upload');
-    const { toggleModal, isModalOpen } = useModal();
+const UploadButton = () => {
+    const { t } = useTranslation(['upload', 'general']);
     const editor = useSlate();
-    const { serverURL, routes: { api }, collections } = useConfig();
-    const [availableCollections] = useState(() => collections.filter(({ admin: { enableRichTextRelationship }, upload }) => (Boolean(upload) && enableRichTextRelationship)));
-    const [renderModal, setRenderModal] = useState(false);
-    const [modalCollectionOption, setModalCollectionOption] = useState(() => {
-        const firstAvailableCollection = collections.find(({ admin: { enableRichTextRelationship }, upload }) => (Boolean(upload) && enableRichTextRelationship));
-        if (firstAvailableCollection) {
-            return { label: getTranslation(firstAvailableCollection.labels.singular, i18n), value: firstAvailableCollection.slug };
-        }
-        return undefined;
+    const [ListDrawer, ListDrawerToggler, { closeDrawer, },] = useListDrawer({
+        uploads: true,
     });
-    const [modalCollection, setModalCollection] = useState(() => collections.find(({ admin: { enableRichTextRelationship }, upload }) => (Boolean(upload) && enableRichTextRelationship)));
-    const [fields, setFields] = useState(() => (modalCollection ? formatFields(modalCollection, t) : undefined));
-    const [limit, setLimit] = useState();
-    const [sort, setSort] = useState(null);
-    const [where, setWhere] = useState(null);
-    const [page, setPage] = useState(null);
-    const modalSlug = `${path}-add-upload`;
-    const moreThanOneAvailableCollection = availableCollections.length > 1;
-    const isOpen = isModalOpen(modalSlug);
-    // If modal is open, get active page of upload gallery
-    const apiURL = isOpen ? `${serverURL}${api}/${modalCollection.slug}` : null;
-    const [{ data }, { setParams }] = usePayloadAPI(apiURL, {});
-    useEffect(() => {
-        if (modalCollection) {
-            setFields(formatFields(modalCollection, t));
-        }
-    }, [modalCollection, t]);
-    useEffect(() => {
-        if (renderModal) {
-            toggleModal(modalSlug);
-        }
-    }, [renderModal, toggleModal, modalSlug]);
-    useEffect(() => {
-        const params = {};
-        if (page)
-            params.page = page;
-        if (where)
-            params.where = where;
-        if (sort)
-            params.sort = sort;
-        if (limit)
-            params.limit = limit;
-        setParams(params);
-    }, [setParams, page, sort, where, limit]);
-    useEffect(() => {
-        if (modalCollectionOption) {
-            setModalCollection(collections.find(({ slug }) => modalCollectionOption.value === slug));
-        }
-    }, [modalCollectionOption, collections]);
-    if (!modalCollection) {
-        return null;
-    }
+    const onSelect = useCallback(({ docID, collectionConfig }) => {
+        insertUpload(editor, {
+            value: {
+                id: docID,
+            },
+            relationTo: collectionConfig.slug,
+        });
+        closeDrawer();
+    }, [editor, closeDrawer]);
     return (React.createElement(Fragment, null,
-        React.createElement(ElementButton, { className: baseClass, format: "upload", onClick: () => setRenderModal(true) },
-            React.createElement(UploadIcon, null)),
-        renderModal && (React.createElement(Modal, { className: baseModalClass, slug: modalSlug }, isOpen && (React.createElement(MinimalTemplate, { width: "wide" },
-            React.createElement("header", { className: `${baseModalClass}__header` },
-                React.createElement("h1", null, t('fields:addLabel', { label: getTranslation(modalCollection.labels.singular, i18n) })),
-                React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", iconStyle: "with-border", onClick: () => {
-                        toggleModal(modalSlug);
-                        setRenderModal(false);
-                    } })),
-            moreThanOneAvailableCollection && (React.createElement("div", { className: `${baseModalClass}__select-collection-wrap` },
-                React.createElement(Label, { label: t('selectCollectionToBrowse') }),
-                React.createElement(ReactSelect, { className: `${baseClass}__select-collection`, value: modalCollectionOption, onChange: setModalCollectionOption, options: availableCollections.map((coll) => ({ label: getTranslation(coll.labels.singular, i18n), value: coll.slug })) }))),
-            React.createElement(ListControls, { collection: {
-                    ...modalCollection,
-                    fields,
-                }, enableColumns: false, enableSort: true, modifySearchQuery: false, handleSortChange: setSort, handleWhereChange: setWhere }),
-            React.createElement(UploadGallery, { docs: data === null || data === void 0 ? void 0 : data.docs, collection: modalCollection, onCardClick: (doc) => {
-                    insertUpload(editor, {
-                        value: {
-                            id: doc.id,
-                        },
-                        relationTo: modalCollection.slug,
-                    });
-                    setRenderModal(false);
-                    toggleModal(modalSlug);
-                } }),
-            React.createElement("div", { className: `${baseModalClass}__page-controls` },
-                React.createElement(Paginator, { limit: data.limit, totalPages: data.totalPages, page: data.page, hasPrevPage: data.hasPrevPage, hasNextPage: data.hasNextPage, prevPage: data.prevPage, nextPage: data.nextPage, numberOfNeighbors: 1, onChange: setPage, disableHistoryChange: true }),
-                (data === null || data === void 0 ? void 0 : data.totalDocs) > 0 && (React.createElement(Fragment, null,
-                    React.createElement("div", { className: `${baseModalClass}__page-info` },
-                        data.page,
-                        "-",
-                        data.totalPages > 1 ? data.limit : data.totalDocs,
-                        ' ',
-                        t('general:of'),
-                        ' ',
-                        data.totalDocs),
-                    React.createElement(PerPage, { limits: (_b = (_a = modalCollection === null || modalCollection === void 0 ? void 0 : modalCollection.admin) === null || _a === void 0 ? void 0 : _a.pagination) === null || _b === void 0 ? void 0 : _b.limits, limit: limit, modifySearchParams: false, handleChange: setLimit }))))))))));
+        React.createElement(ListDrawerToggler, null,
+            React.createElement(ElementButton, { className: baseClass, format: "upload", tooltip: t('fields:addUpload'), el: "div", onClick: () => {
+                    // do nothing
+                } },
+                React.createElement(UploadIcon, null))),
+        React.createElement(ListDrawer, { onSelect: onSelect })));
 };
 export default UploadButton;

package/dist/admin/components/forms/field-types/RichText/elements/upload/Button/index.scss

@@ -1,7 +1,7 @@
 @import '../../../../../../../scss/styles.scss';
 
 .upload-rich-text-button {
-  .btn {
-    margin-right: base(1);
-  }
+  display: flex;
+  align-items: center;
+  height: 100%;
 }

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/index.d.ts

@@ -1,10 +1,10 @@
-/// <reference types="react" />
+import React, { HTMLAttributes } from 'react';
+import { Props as RichTextProps } from '../../../types';
 import './index.scss';
-declare const Element: ({ attributes, children, element, path, fieldProps }: {
-    attributes: any;
-    children: any;
+declare const Element: React.FC<{
+    attributes: HTMLAttributes<HTMLDivElement>;
+    children: React.ReactNode;
     element: any;
-    path: any;
-    fieldProps: any;
-}) => JSX.Element;
+    fieldProps: RichTextProps;
+}>;
 export default Element;

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/index.js

@@ -1,5 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useModal } from '@faceless-ui/modal';
+import React, { useCallback, useReducer, useState } from 'react';
 import { Transforms } from 'slate';
 import { ReactEditor, useSlateStatic, useFocused, useSelected } from 'slate-react';
 import { useTranslation } from 'react-i18next';
@@ -8,69 +7,95 @@ import usePayloadAPI from '../../../../../../../hooks/usePayloadAPI';
 import FileGraphic from '../../../../../../graphics/File';
 import useThumbnail from '../../../../../../../hooks/useThumbnail';
 import Button from '../../../../../../elements/Button';
-import { SwapUploadModal } from './SwapUploadModal';
-import { EditModal } from './EditModal';
 import { getTranslation } from '../../../../../../../../utilities/getTranslation';
+import { useDocumentDrawer } from '../../../../../../elements/DocumentDrawer';
+import { useListDrawer } from '../../../../../../elements/ListDrawer';
 import './index.scss';
 const baseClass = 'rich-text-upload';
 const initialParams = {
     depth: 0,
 };
-const Element = ({ attributes, children, element, path, fieldProps }) => {
-    var _a, _b, _c, _d;
-    const { relationTo, value } = element;
-    const { toggleModal } = useModal();
+const Element = ({ attributes, children, element }) => {
+    var _a, _b, _c;
+    const { relationTo, value, fieldProps, } = element;
     const { collections, serverURL, routes: { api } } = useConfig();
-    const [modalToRender, setModalToRender] = useState(undefined);
-    const [relatedCollection, setRelatedCollection] = useState(() => collections.find((coll) => coll.slug === relationTo));
     const { t, i18n } = useTranslation('fields');
+    const [cacheBust, dispatchCacheBust] = useReducer((state) => state + 1, 0);
+    const [relatedCollection, setRelatedCollection] = useState(() => collections.find((coll) => coll.slug === relationTo));
+    const [ListDrawer, ListDrawerToggler, { closeDrawer: closeListDrawer, },] = useListDrawer({
+        uploads: true,
+        selectedCollection: relatedCollection.slug,
+    });
+    const [DocumentDrawer, DocumentDrawerToggler, { closeDrawer, },] = useDocumentDrawer({
+        collectionSlug: relatedCollection.slug,
+        id: value === null || value === void 0 ? void 0 : value.id,
+    });
     const editor = useSlateStatic();
     const selected = useSelected();
     const focused = useFocused();
-    const modalSlug = `${path}-edit-upload-${modalToRender}`;
     // Get the referenced document
-    const [{ data: upload }] = usePayloadAPI(`${serverURL}${api}/${relatedCollection.slug}/${value === null || value === void 0 ? void 0 : value.id}`, { initialParams });
-    const thumbnailSRC = useThumbnail(relatedCollection, upload);
+    const [{ data }, { setParams }] = usePayloadAPI(`${serverURL}${api}/${relatedCollection.slug}/${value === null || value === void 0 ? void 0 : value.id}`, { initialParams });
+    const thumbnailSRC = useThumbnail(relatedCollection, data);
     const removeUpload = useCallback(() => {
         const elementPath = ReactEditor.findPath(editor, element);
         Transforms.removeNodes(editor, { at: elementPath });
     }, [editor, element]);
-    const closeModal = useCallback(() => {
-        toggleModal(modalSlug);
-        setModalToRender(null);
-    }, [toggleModal, modalSlug]);
-    useEffect(() => {
-        if (modalToRender) {
-            toggleModal(modalSlug);
-        }
-    }, [modalToRender, toggleModal, modalSlug]);
-    const fieldSchema = (_d = (_c = (_b = (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _a === void 0 ? void 0 : _a.upload) === null || _b === void 0 ? void 0 : _b.collections) === null || _c === void 0 ? void 0 : _c[relatedCollection.slug]) === null || _d === void 0 ? void 0 : _d.fields;
+    const updateUpload = useCallback((json) => {
+        const { doc } = json;
+        const newNode = {
+            fields: doc,
+        };
+        const elementPath = ReactEditor.findPath(editor, element);
+        Transforms.setNodes(editor, newNode, { at: elementPath });
+        // setRelatedCollection(collections.find((coll) => coll.slug === collectionConfig.slug));
+        setParams({
+            ...initialParams,
+            cacheBust, // do this to get the usePayloadAPI to re-fetch the data even though the URL string hasn't changed
+        });
+        dispatchCacheBust();
+        closeDrawer();
+    }, [editor, element, setParams, cacheBust, closeDrawer]);
+    const swapUpload = React.useCallback(({ docID, collectionConfig }) => {
+        const newNode = {
+            type: 'upload',
+            value: { id: docID },
+            relationTo: collectionConfig.slug,
+            children: [
+                { text: ' ' },
+            ],
+        };
+        const elementPath = ReactEditor.findPath(editor, element);
+        setRelatedCollection(collections.find((coll) => coll.slug === collectionConfig.slug));
+        Transforms.setNodes(editor, newNode, { at: elementPath });
+        dispatchCacheBust();
+        closeListDrawer();
+    }, [closeListDrawer, editor, element, collections]);
     return (React.createElement("div", { className: [
             baseClass,
             (selected && focused) && `${baseClass}--selected`,
         ].filter(Boolean).join(' '), contentEditable: false, ...attributes },
         React.createElement("div", { className: `${baseClass}__card` },
             React.createElement("div", { className: `${baseClass}__topRow` },
-                React.createElement("div", { className: `${baseClass}__thumbnail` }, thumbnailSRC ? (React.createElement("img", { src: thumbnailSRC, alt: upload === null || upload === void 0 ? void 0 : upload.filename })) : (React.createElement(FileGraphic, null))),
+                React.createElement("div", { className: `${baseClass}__thumbnail` }, thumbnailSRC ? (React.createElement("img", { src: thumbnailSRC, alt: data === null || data === void 0 ? void 0 : data.filename })) : (React.createElement(FileGraphic, null))),
                 React.createElement("div", { className: `${baseClass}__topRowRightPanel` },
                     React.createElement("div", { className: `${baseClass}__collectionLabel` }, getTranslation(relatedCollection.labels.singular, i18n)),
                     React.createElement("div", { className: `${baseClass}__actions` },
-                        fieldSchema && (React.createElement(Button, { icon: "edit", round: true, buttonStyle: "icon-label", className: `${baseClass}__actionButton`, onClick: (e) => {
-                                e.preventDefault();
-                                setModalToRender('edit');
-                            }, tooltip: t('general:edit') })),
-                        React.createElement(Button, { icon: "swap", round: true, buttonStyle: "icon-label", className: `${baseClass}__actionButton`, onClick: (e) => {
-                                e.preventDefault();
-                                setModalToRender('swap');
-                            }, tooltip: t('swapUpload') }),
+                        (value === null || value === void 0 ? void 0 : value.id) && (React.createElement(DocumentDrawerToggler, { className: `${baseClass}__toggler` },
+                            React.createElement(Button, { icon: "edit", round: true, buttonStyle: "icon-label", el: "div", className: `${baseClass}__actionButton`, onClick: (e) => {
+                                    e.preventDefault();
+                                }, tooltip: t('general:editLabel', { label: relatedCollection.labels.singular }), disabled: (_a = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _a === void 0 ? void 0 : _a.readOnly }))),
+                        React.createElement(ListDrawerToggler, null,
+                            React.createElement(Button, { icon: "swap", round: true, buttonStyle: "icon-label", className: `${baseClass}__actionButton`, onClick: () => {
+                                    // do nothing
+                                }, el: "div", tooltip: t('swapUpload'), disabled: (_b = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _b === void 0 ? void 0 : _b.readOnly })),
                         React.createElement(Button, { icon: "x", round: true, buttonStyle: "icon-label", className: `${baseClass}__actionButton`, onClick: (e) => {
                                 e.preventDefault();
                                 removeUpload();
-                            }, tooltip: t('removeUpload') })))),
+                            }, tooltip: t('removeUpload'), disabled: (_c = fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.admin) === null || _c === void 0 ? void 0 : _c.readOnly })))),
             React.createElement("div", { className: `${baseClass}__bottomRow` },
-                React.createElement("strong", null, upload === null || upload === void 0 ? void 0 : upload.filename))),
+                React.createElement("strong", null, data === null || data === void 0 ? void 0 : data.filename))),
         children,
-        modalToRender === 'swap' && (React.createElement(SwapUploadModal, { slug: modalSlug, element: element, closeModal: closeModal, setRelatedCollectionConfig: setRelatedCollection, relatedCollectionConfig: relatedCollection })),
-        (modalToRender === 'edit' && fieldSchema) && (React.createElement(EditModal, { slug: modalSlug, closeModal: closeModal, relatedCollectionConfig: relatedCollection, fieldSchema: fieldSchema, element: element }))));
+        (value === null || value === void 0 ? void 0 : value.id) && (React.createElement(DocumentDrawer, { onSave: updateUpload })),
+        React.createElement(ListDrawer, { onSelect: swapUpload })));
 };
 export default Element;

package/dist/admin/components/forms/field-types/RichText/elements/upload/Element/index.scss

@@ -51,7 +51,7 @@
     flex-grow: 1;
     display: flex;
     align-items: center;
-    padding: base(.75) base(1);
+    padding: base(.75);
     justify-content: space-between;
     max-width: calc(100% - #{base(3.25)});
   }
@@ -60,19 +60,35 @@
     display: flex;
     align-items: center;
     flex-shrink: 0;
+    margin-left: base(0.5);
+
+    & > *:not(:last-child) {
+      margin-right: base(.25);
+    }
   }
 
   &__actionButton {
     margin: 0;
-    margin-right: base(.5);
     border-radius: 0;
+    flex-shrink: 0;
 
     line {
       stroke-width: $style-stroke-width-m;
     }
 
-    &:last-child {
-      margin-right: 0;
+    &:disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+  }
+
+  &__toggler {
+    background: transparent;
+    border: none;
+    padding: 0;
+    &:focus,
+    &:focus-within {
+      outline: none;
     }
   }
 

package/dist/admin/components/forms/field-types/RichText/elements/upload/index.d.ts

@@ -3,13 +3,12 @@ declare const _default: {
     Button: import("react").FC<{
         path: string;
     }>;
-    Element: ({ attributes, children, element, path, fieldProps }: {
-        attributes: any;
-        children: any;
+    Element: import("react").FC<{
+        attributes: import("react").HTMLAttributes<HTMLDivElement>;
+        children: import("react").ReactNode;
         element: any;
-        path: any;
-        fieldProps: any;
-    }) => JSX.Element;
+        fieldProps: import("../../types").Props;
+    }>;
     plugins: ((incomingEditor: any) => any)[];
 };
 export default _default;

package/dist/admin/components/forms/field-types/RichText/index.scss

@@ -150,10 +150,18 @@
     }
   }
 
+  &__drawerIsOpen {
+    top: base(1);
+  }
+
   @include mid-break {
     &__toolbar {
       top: base(3);
     }
+
+    &__drawerIsOpen {
+      top: base(1);
+    }
   }
 }
 

package/dist/admin/components/forms/field-types/RichText/types.d.ts

@@ -1,4 +1,13 @@
 import { RichTextField } from '../../../../../fields/config/types';
-export type Props = Omit<RichTextField, 'type'> & {
+export declare type Props = Omit<RichTextField, 'type'> & {
     path?: string;
 };
+export declare type TextNode = {
+    text: string;
+    [x: string]: unknown;
+};
+export declare type ElementNode = {
+    type?: string;
+    children: (TextNode | ElementNode)[];
+};
+export declare function nodeIsTextNode(node: TextNode | ElementNode): node is TextNode;

package/dist/admin/components/forms/field-types/RichText/types.js

@@ -1 +1,3 @@
-export {};
+export function nodeIsTextNode(node) {
+    return 'text' in node;
+}

package/dist/admin/components/forms/field-types/Row/types.d.ts

@@ -1,7 +1,7 @@
 import { RowField } from '../../../../../fields/config/types';
 import { FieldTypes } from '..';
 import { FieldPermissions } from '../../../../../auth/types';
-export type Props = Omit<RowField, 'type'> & {
+export declare type Props = Omit<RowField, 'type'> & {
     path?: string;
     fieldTypes: FieldTypes;
     permissions: FieldPermissions;

package/dist/admin/components/forms/field-types/Select/Input.d.ts

@@ -3,7 +3,7 @@ import { OptionObject, SelectField } from '../../../../../fields/config/types';
 import { Description } from '../../FieldDescription/types';
 import { Option } from '../../../elements/ReactSelect/types';
 import './index.scss';
-export type SelectInputProps = Omit<SelectField, 'type' | 'value' | 'options'> & {
+export declare type SelectInputProps = Omit<SelectField, 'type' | 'value' | 'options'> & {
     showError?: boolean;
     errorMessage?: string;
     readOnly?: boolean;

package/dist/admin/components/forms/field-types/Select/types.d.ts

@@ -1,4 +1,4 @@
 import { SelectField } from '../../../../../fields/config/types';
-export type Props = Omit<SelectField, 'type'> & {
+export declare type Props = Omit<SelectField, 'type'> & {
     path?: string;
 };

package/dist/admin/components/forms/field-types/Tabs/index.js

@@ -28,7 +28,7 @@ const TabsField = (props) => {
             setActiveTabIndex(initialIndex || 0);
         };
         getInitialPref();
-    }, [path, indexPath]);
+    }, [path, indexPath, getPreference, preferencesKey, tabsPrefKey]);
     const handleTabChange = useCallback(async (incomingTabIndex) => {
         var _a, _b;
         setActiveTabIndex(incomingTabIndex);
@@ -49,11 +49,11 @@ const TabsField = (props) => {
                     [tabsPrefKey]: {
                         ...(_b = existingPreferences === null || existingPreferences === void 0 ? void 0 : existingPreferences.fields) === null || _b === void 0 ? void 0 : _b[tabsPrefKey],
                         tabIndex: incomingTabIndex,
-                    }
+                    },
                 },
-            }
+            },
         });
-    }, [indexPath, preferencesKey, getPreference, setPreference, path]);
+    }, [preferencesKey, getPreference, setPreference, path, tabsPrefKey]);
     const activeTabConfig = tabs[activeTabIndex];
     return (React.createElement("div", { className: [
             className,
@@ -72,8 +72,8 @@ const TabsField = (props) => {
                 }))),
             React.createElement("div", { className: `${baseClass}__content-wrap` }, activeTabConfig && (React.createElement("div", { className: [
                     `${baseClass}__tab`,
-                    `${baseClass}__tab-${toKebabCase(activeTabConfig.label)}`,
-                ].join(' ') },
+                    activeTabConfig.label && `${baseClass}__tab-${toKebabCase(getTranslation(activeTabConfig.label, i18n))}`,
+                ].filter(Boolean).join(' ') },
                 React.createElement(FieldDescription, { className: `${baseClass}__description`, description: activeTabConfig.description }),
                 React.createElement(RenderFields, { key: String(activeTabConfig.label), forceRender: true, readOnly: readOnly, permissions: tabHasName(activeTabConfig) ? permissions[activeTabConfig.name].fields : permissions, fieldTypes: fieldTypes, fieldSchema: activeTabConfig.fields.map((field) => ({
                         ...field,

package/dist/admin/components/forms/field-types/Tabs/types.d.ts

@@ -1,7 +1,7 @@
 import { TabsField } from '../../../../../fields/config/types';
 import { FieldTypes } from '..';
 import { FieldPermissions } from '../../../../../auth/types';
-export type Props = Omit<TabsField, 'type'> & {
+export declare type Props = Omit<TabsField, 'type'> & {
     path?: string;
     fieldTypes: FieldTypes;
     permissions: FieldPermissions;

package/dist/admin/components/forms/field-types/Text/Input.d.ts

@@ -2,7 +2,7 @@ import React, { ChangeEvent } from 'react';
 import { TextField } from '../../../../../fields/config/types';
 import { Description } from '../../FieldDescription/types';
 import './index.scss';
-export type TextInputProps = Omit<TextField, 'type'> & {
+export declare type TextInputProps = Omit<TextField, 'type'> & {
     showError?: boolean;
     errorMessage?: string;
     readOnly?: boolean;

package/dist/admin/components/forms/field-types/Text/types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TextField } from '../../../../../fields/config/types';
-export type Props = Omit<TextField, 'type'> & {
+export declare type Props = Omit<TextField, 'type'> & {
     path?: string;
     inputRef?: React.MutableRefObject<HTMLInputElement>;
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;

package/dist/admin/components/forms/field-types/Textarea/Input.d.ts

@@ -2,7 +2,7 @@ import React, { ChangeEvent } from 'react';
 import { TextareaField } from '../../../../../fields/config/types';
 import { Description } from '../../FieldDescription/types';
 import './index.scss';
-export type TextAreaInputProps = Omit<TextareaField, 'type'> & {
+export declare type TextAreaInputProps = Omit<TextareaField, 'type'> & {
     showError?: boolean;
     errorMessage?: string;
     readOnly?: boolean;

package/dist/admin/components/forms/field-types/Textarea/types.d.ts

@@ -1,4 +1,4 @@
 import { TextareaField } from '../../../../../fields/config/types';
-export type Props = Omit<TextareaField, 'type'> & {
+export declare type Props = Omit<TextareaField, 'type'> & {
     path?: string;
 };

package/dist/admin/components/forms/field-types/Upload/Input.d.ts

@@ -4,7 +4,7 @@ import { Description } from '../../FieldDescription/types';
 import { FieldTypes } from '..';
 import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
 import './index.scss';
-export type UploadInputProps = Omit<UploadField, 'type'> & {
+export declare type UploadInputProps = Omit<UploadField, 'type'> & {
     showError?: boolean;
     errorMessage?: string;
     readOnly?: boolean;