payload 1.0.36 → 1.1.0

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

@@ -11,14 +11,15 @@ import validateWhereQuery from '../WhereBuilder/validateWhereQuery';
 import './index.scss';
 const baseClass = 'list-controls';
 const ListControls = (props) => {
-    const { collection, enableColumns = true, enableSort = false, columns, setColumns, handleSortChange, handleWhereChange, modifySearchQuery = true, collection: { fields, admin: { useAsTitle, }, }, } = props;
+    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(listSearchableFields ? () => fields.filter((field) => fieldAffectsData(field) && listSearchableFields.includes(field.name)) : null);
     const [visibleDrawer, setVisibleDrawer] = useState(shouldInitializeWhereOpened ? 'where' : undefined);
     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: titleField && titleField.label ? titleField.label : undefined }),
+            React.createElement(SearchFilter, { fieldName: titleField && fieldAffectsData(titleField) ? titleField.name : undefined, handleChange: handleWhereChange, modifySearchQuery: modifySearchQuery, fieldLabel: titleField && titleField.label ? titleField.label : 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" }, "Columns")),

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

@@ -10,17 +10,39 @@ import CloseMenu from '../../icons/CloseMenu';
 import Icon from '../../graphics/Icon';
 import Account from '../../graphics/Account';
 import Localizer from '../Localizer';
+import NavGroup from '../NavGroup';
+import { groupNavItems, EntityType } from '../../../utilities/groupNavItems';
 import './index.scss';
 const baseClass = 'nav';
 const DefaultNav = () => {
     const { permissions } = useAuth();
     const [menuActive, setMenuActive] = useState(false);
+    const [groups, setGroups] = useState([]);
     const history = useHistory();
     const { collections, globals, routes: { admin, }, admin: { components: { beforeNavLinks, afterNavLinks, }, }, } = useConfig();
     const classes = [
         baseClass,
         menuActive && `${baseClass}--menu-active`,
-    ].filter(Boolean).join(' ');
+    ].filter(Boolean)
+        .join(' ');
+    useEffect(() => {
+        setGroups(groupNavItems([
+            ...collections.map((collection) => {
+                const entityToGroup = {
+                    type: EntityType.collection,
+                    entity: collection,
+                };
+                return entityToGroup;
+            }),
+            ...globals.map((global) => {
+                const entityToGroup = {
+                    type: EntityType.global,
+                    entity: global,
+                };
+                return entityToGroup;
+            }),
+        ], permissions));
+    }, [collections, globals, permissions]);
     useEffect(() => history.listen(() => {
         setMenuActive(false);
     }), [history]);
@@ -32,31 +54,28 @@ const DefaultNav = () => {
                 React.createElement("button", { type: "button", className: `${baseClass}__mobile-menu-btn`, onClick: () => setMenuActive(!menuActive) },
                     menuActive && (React.createElement(CloseMenu, null)),
                     !menuActive && (React.createElement(Menu, null)))),
-            React.createElement("div", { className: `${baseClass}__wrap` },
+            React.createElement("nav", { className: `${baseClass}__wrap` },
                 Array.isArray(beforeNavLinks) && beforeNavLinks.map((Component, i) => React.createElement(Component, { key: i })),
-                React.createElement("span", { className: `${baseClass}__label` }, "Collections"),
-                React.createElement("nav", null, collections && collections.map((collection, i) => {
-                    var _a, _b;
-                    const href = `${admin}/collections/${collection.slug}`;
-                    if ((_b = (_a = permissions === null || permissions === void 0 ? void 0 : permissions.collections) === null || _a === void 0 ? void 0 : _a[collection.slug]) === null || _b === void 0 ? void 0 : _b.read.permission) {
-                        return (React.createElement(NavLink, { id: `nav-${collection.slug}`, activeClassName: "active", key: i, to: href },
-                            React.createElement(Chevron, null),
-                            collection.labels.plural));
-                    }
-                    return null;
-                })),
-                (globals && globals.length > 0) && (React.createElement(React.Fragment, null,
-                    React.createElement("span", { className: `${baseClass}__label` }, "Globals"),
-                    React.createElement("nav", null, globals.map((global, i) => {
-                        var _a;
-                        const href = `${admin}/globals/${global.slug}`;
-                        if ((_a = permissions === null || permissions === void 0 ? void 0 : permissions.globals) === null || _a === void 0 ? void 0 : _a[global.slug].read.permission) {
-                            return (React.createElement(NavLink, { id: `nav-global-${global.slug}`, activeClassName: "active", key: i, to: href },
-                                React.createElement(Chevron, null),
-                                global.label));
+                groups.map(({ label, entities }, key) => {
+                    return (React.createElement(NavGroup, { ...{ key, label } }, entities.map(({ entity, type }, i) => {
+                        let entityLabel;
+                        let href;
+                        let id;
+                        if (type === EntityType.collection) {
+                            href = `${admin}/collections/${entity.slug}`;
+                            entityLabel = entity.labels.plural;
+                            id = `nav-${entity.slug}`;
+                        }
+                        if (type === EntityType.global) {
+                            href = `${admin}/globals/${entity.slug}`;
+                            entityLabel = entity.label;
+                            id = `nav-global-${entity.slug}`;
                         }
-                        return null;
-                    })))),
+                        return (React.createElement(NavLink, { id: id, className: `${baseClass}__link`, activeClassName: "active", key: i, to: href },
+                            React.createElement(Chevron, null),
+                            entityLabel));
+                    })));
+                }),
                 Array.isArray(afterNavLinks) && afterNavLinks.map((Component, i) => React.createElement(Component, { key: i })),
                 React.createElement("div", { className: `${baseClass}__controls` },
                     React.createElement(Localizer, null),

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

@@ -81,32 +81,16 @@
     }
   }
 
-  a {
-    padding: base(.125) 0;
-    display: flex;
-    text-decoration: none;
-
-    &:focus {
-      box-shadow: none;
-      font-weight: 600;
-    }
-
-    &:active {
-      font-weight: normal;
-    }
-  }
-
   nav {
-    margin: base(.25) 0 $baseline;
-
     a {
       position: relative;
+      padding: base(.125) base(1.5) base(.125) 0;
+      display: flex;
+      text-decoration: none;
 
-      svg {
-        opacity: 0;
-        position: absolute;
-        left: - base(.5);
-        transform: rotate(-90deg);
+      &:focus {
+        box-shadow: none;
+        font-weight: 600;
       }
 
       &:hover {
@@ -114,12 +98,24 @@
       }
 
       &.active {
+        font-weight: normal;
         padding-left: base(.6);
         font-weight: 600;
+      }
+    }
+  }
 
-        svg {
-          opacity: 1;
-        }
+  &__link {
+    svg {
+      opacity: 0;
+      position: absolute;
+      left: - base(.5);
+      transform: rotate(-90deg);
+    }
+
+    &.active {
+      svg {
+        opacity: 1;
       }
     }
   }
@@ -184,4 +180,4 @@
       font-weight: 600;
     }
   }
-}
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import './index.scss';
+declare type Props = {
+    children: React.ReactNode;
+    label: string;
+};
+declare const NavGroup: React.FC<Props>;
+export default NavGroup;

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

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from 'react';
+import AnimateHeight from 'react-animate-height';
+import Chevron from '../../icons/Chevron';
+import { usePreferences } from '../../utilities/Preferences';
+import './index.scss';
+const baseClass = 'nav-group';
+const NavGroup = ({ children, label, }) => {
+    const [collapsed, setCollapsed] = useState(true);
+    const [animate, setAnimate] = useState(false);
+    const { getPreference, setPreference } = usePreferences();
+    const preferencesKey = `collapsed-${label}-groups`;
+    useEffect(() => {
+        if (label) {
+            const setCollapsedFromPreferences = async () => {
+                const preferences = await getPreference(preferencesKey) || [];
+                setCollapsed(preferences.indexOf(label) !== -1);
+            };
+            setCollapsedFromPreferences();
+        }
+    }, [getPreference, label, preferencesKey]);
+    if (label) {
+        const toggleCollapsed = async () => {
+            setAnimate(true);
+            let preferences = await getPreference(preferencesKey) || [];
+            if (collapsed) {
+                preferences = preferences.filter((preference) => label !== preference);
+            }
+            else {
+                preferences.push(label);
+            }
+            setPreference(preferencesKey, preferences);
+            setCollapsed(!collapsed);
+        };
+        return (React.createElement("div", { id: `nav-group-${label}`, className: [
+                `${baseClass}`,
+                `${label}`,
+                collapsed && `${baseClass}--collapsed`,
+            ].filter(Boolean)
+                .join(' ') },
+            React.createElement("button", { type: "button", className: [
+                    `${baseClass}__toggle`,
+                    `${baseClass}__toggle--${collapsed ? 'collapsed' : 'open'}`,
+                ].filter(Boolean)
+                    .join(' '), onClick: toggleCollapsed },
+                React.createElement("div", { className: `${baseClass}__label` }, label),
+                React.createElement(Chevron, { className: `${baseClass}__indicator` })),
+            React.createElement(AnimateHeight, { height: collapsed ? 0 : 'auto', duration: animate ? 200 : 0 },
+                React.createElement("div", { className: `${baseClass}__content` }, children))));
+    }
+    return (React.createElement(React.Fragment, null, children));
+};
+export default NavGroup;

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

@@ -0,0 +1,53 @@
+@import '../../../scss/styles.scss';
+
+.nav-group {
+  width: 100%;
+  margin-bottom: base(.5);
+
+  &__toggle {
+    cursor: pointer;
+    color: var(--theme-elevation-400);
+    background: transparent;
+    padding-left: 0;
+    border: 0;
+    margin-top: base(.25);
+    width: 100%;
+    text-align: left;
+    display: flex;
+    align-items: flex-start;
+    padding-right: base(.5);
+
+    svg {
+      flex-shrink: 0;
+      margin-top: base(-.2);
+    }
+
+    &:hover {
+      color: var(--theme-elevation-1000);
+
+      .stroke {
+        stroke: var(--theme-elevation-1000);
+      }
+    }
+  }
+
+  &__indicator {
+    margin-left: auto;
+
+    .stroke {
+      stroke: var(--theme-elevation-200);
+    }
+  }
+
+  &--collapsed {
+    .collapsible__toggle {
+      border-bottom-right-radius: $style-radius-s;
+      border-bottom-left-radius: $style-radius-s;
+    }
+
+    .nav-group__indicator {
+      transform: rotate(.5turn);
+    }
+  }
+
+}

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import queryString from 'qs';
 import Search from '../../icons/Search';
@@ -7,26 +7,44 @@ import { useSearchParams } from '../../utilities/SearchParams';
 import './index.scss';
 const baseClass = 'search-filter';
 const SearchFilter = (props) => {
-    const { fieldName = 'id', fieldLabel = 'ID', modifySearchQuery = true, handleChange, } = props;
+    const { fieldName = 'id', fieldLabel = 'ID', modifySearchQuery = true, listSearchableFields, handleChange, } = props;
     const params = useSearchParams();
     const history = useHistory();
-    const [search, setSearch] = useState(() => { var _a, _b; return ((_b = (_a = params === null || params === void 0 ? void 0 : params.where) === null || _a === void 0 ? void 0 : _a[fieldName]) === null || _b === void 0 ? void 0 : _b.like) || ''; });
+    const [search, setSearch] = useState('');
+    const [previousSearch, setPreviousSearch] = useState('');
+    const placeholder = useRef(`Search by ${fieldLabel}`);
     const debouncedSearch = useDebounce(search, 300);
     useEffect(() => {
-        var _a, _b, _c, _d, _e;
-        if (debouncedSearch !== ((_b = (_a = params === null || params === void 0 ? void 0 : params.where) === null || _a === void 0 ? void 0 : _a[fieldName]) === null || _b === void 0 ? void 0 : _b.like)) {
-            const newWhere = {
-                ...(typeof (params === null || params === void 0 ? void 0 : params.where) === 'object' ? params.where : {}),
-                [fieldName]: {
-                    like: debouncedSearch,
-                },
-            };
-            if (!debouncedSearch) {
-                delete newWhere[fieldName];
+        const newWhere = { ...typeof (params === null || params === void 0 ? void 0 : params.where) === 'object' ? params.where : {} };
+        const fieldNamesToSearch = [fieldName, ...(listSearchableFields || []).map(({ name }) => name)];
+        fieldNamesToSearch.forEach((fieldNameToSearch) => {
+            const hasOrQuery = Array.isArray(newWhere.or);
+            const existingFieldSearchIndex = hasOrQuery ? newWhere.or.findIndex((condition) => {
+                var _a;
+                return (_a = condition === null || condition === void 0 ? void 0 : condition[fieldNameToSearch]) === null || _a === void 0 ? void 0 : _a.like;
+            }) : -1;
+            if (debouncedSearch) {
+                if (!hasOrQuery)
+                    newWhere.or = [];
+                if (existingFieldSearchIndex > -1) {
+                    newWhere.or[existingFieldSearchIndex][fieldNameToSearch].like = debouncedSearch;
+                }
+                else {
+                    newWhere.or.push({
+                        [fieldNameToSearch]: {
+                            like: debouncedSearch,
+                        },
+                    });
+                }
             }
+            else if (existingFieldSearchIndex > -1) {
+                newWhere.or.splice(existingFieldSearchIndex, 1);
+            }
+        });
+        if (debouncedSearch !== previousSearch) {
             if (handleChange)
                 handleChange(newWhere);
-            if (modifySearchQuery && ((_d = (_c = params === null || params === void 0 ? void 0 : params.where) === null || _c === void 0 ? void 0 : _c[fieldName]) === null || _d === void 0 ? void 0 : _d.like) !== ((_e = newWhere === null || newWhere === void 0 ? void 0 : newWhere[fieldName]) === null || _e === void 0 ? void 0 : _e.like)) {
+            if (modifySearchQuery) {
                 history.replace({
                     search: queryString.stringify({
                         ...params,
@@ -34,11 +52,22 @@ const SearchFilter = (props) => {
                         where: newWhere,
                     }),
                 });
+                setPreviousSearch(debouncedSearch);
             }
         }
-    }, [debouncedSearch, history, fieldName, params, handleChange, modifySearchQuery]);
+    }, [debouncedSearch, previousSearch, history, fieldName, params, handleChange, modifySearchQuery, listSearchableFields]);
+    useEffect(() => {
+        if ((listSearchableFields === null || listSearchableFields === void 0 ? void 0 : listSearchableFields.length) > 0) {
+            placeholder.current = listSearchableFields.reduce((prev, curr, i) => {
+                if (i === listSearchableFields.length - 1) {
+                    return `${prev} or ${curr.label || curr.name}`;
+                }
+                return `${prev}, ${curr.label || curr.name}`;
+            }, placeholder.current);
+        }
+    }, [listSearchableFields]);
     return (React.createElement("div", { className: baseClass },
-        React.createElement("input", { className: `${baseClass}__input`, placeholder: `Search by ${fieldLabel}`, type: "text", value: search || '', onChange: (e) => setSearch(e.target.value) }),
+        React.createElement("input", { className: `${baseClass}__input`, placeholder: placeholder.current, type: "text", value: search || '', onChange: (e) => setSearch(e.target.value) }),
         React.createElement(Search, null)));
 };
 export default SearchFilter;

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

@@ -1,7 +1,9 @@
+import { FieldAffectingData } from '../../../../fields/config/types';
 import { Where } from '../../../../types';
 export declare type Props = {
     fieldName?: string;
     fieldLabel?: string;
     modifySearchQuery?: boolean;
+    listSearchableFields?: FieldAffectingData[];
     handleChange?: (where: Where) => void;
 };

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

@@ -41,9 +41,22 @@ const WhereBuilder = (props) => {
     const [reducedFields] = useState(() => reduceFields(collection.fields));
     useThrottledEffect(() => {
         const currentParams = queryString.parse(history.location.search, { ignoreQueryPrefix: true, depth: 10 });
+        const paramsToKeep = typeof (currentParams === null || currentParams === void 0 ? void 0 : currentParams.where) === 'object' && 'or' in currentParams.where ? currentParams.where.or.reduce((keptParams, param) => {
+            const newParam = { ...param };
+            if (param.and) {
+                delete newParam.and;
+            }
+            return [
+                ...keptParams,
+                newParam,
+            ];
+        }, []) : [];
         const newWhereQuery = {
             ...typeof (currentParams === null || currentParams === void 0 ? void 0 : currentParams.where) === 'object' ? currentParams.where : {},
-            or: conditions,
+            or: [
+                ...conditions,
+                ...paramsToKeep,
+            ],
         };
         if (handleChange)
             handleChange(newWhereQuery);

package/dist/admin/components/forms/Form/buildStateFromSchema/addFieldStatePromise.js

@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
 import ObjectID from 'bson-objectid';
-import { fieldAffectsData, fieldHasSubFields } from '../../../../../fields/config/types';
+import { fieldAffectsData, fieldHasSubFields, tabHasName, } from '../../../../../fields/config/types';
 import getValueWithDefault from '../../../../../fields/getDefaultValue';
 import { iterateFields } from './iterateFields';
 export const addFieldStatePromise = async ({ field, locale, user, state, path, passesCondition, fullData, data, fieldPromises, id, operation, }) => {
@@ -162,9 +162,9 @@ export const addFieldStatePromise = async ({ field, locale, user, state, path, p
             iterateFields({
                 state,
                 fields: tab.fields,
-                data,
+                data: tabHasName(tab) ? data === null || data === void 0 ? void 0 : data[tab.name] : data,
                 parentPassesCondition: passesCondition,
-                path,
+                path: tabHasName(tab) ? `${path}${tab.name}.` : path,
                 user,
                 fieldPromises,
                 fullData,

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

@@ -25,7 +25,7 @@ import './index.scss';
 const baseClass = 'array-field';
 const ArrayFieldType = (props) => {
     var _a, _b;
-    const { name, path: pathFromProps, fields, fieldTypes, validate = array, required, maxRows, minRows, permissions, admin: { readOnly, description, condition, className, }, } = props;
+    const { name, path: pathFromProps, fields, fieldTypes, validate = array, required, maxRows, minRows, permissions, admin: { readOnly, description, condition, initCollapsed, className, }, } = props;
     const path = pathFromProps || name;
     // Handle labeling for Arrays, Global Arrays, and Blocks
     const getLabels = (p) => {
@@ -95,9 +95,14 @@ const ArrayFieldType = (props) => {
         var _a, _b, _c;
         dispatchRows({ type: 'SET_COLLAPSE', id: rowID, collapsed });
         if (preferencesKey) {
-            const preferencesToSet = await getPreference(preferencesKey) || { fields: {} };
-            let newCollapsedState = ((_b = (_a = preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) === null || _a === void 0 ? void 0 : _a[path]) === null || _b === void 0 ? void 0 : _b.collapsed.filter((filterID) => (rows.find((row) => row.id === filterID))))
-                || [];
+            const preferencesToSet = (await getPreference(preferencesKey)) || { fields: {} };
+            let newCollapsedState = (_b = (_a = preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) === null || _a === void 0 ? void 0 : _a[path]) === null || _b === void 0 ? void 0 : _b.collapsed;
+            if (initCollapsed && typeof newCollapsedState === 'undefined') {
+                newCollapsedState = rows.map((row) => row.id);
+            }
+            else if (typeof newCollapsedState === 'undefined') {
+                newCollapsedState = [];
+            }
             if (!collapsed) {
                 newCollapsedState = newCollapsedState.filter((existingID) => existingID !== rowID);
             }
@@ -107,7 +112,7 @@ const ArrayFieldType = (props) => {
             setPreference(preferencesKey, {
                 ...preferencesToSet,
                 fields: {
-                    ...(preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) || {},
+                    ...((preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) || {}),
                     [path]: {
                         ...(_c = preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) === null || _c === void 0 ? void 0 : _c[path],
                         collapsed: newCollapsedState,
@@ -115,7 +120,7 @@ const ArrayFieldType = (props) => {
                 },
             });
         }
-    }, [preferencesKey, path, setPreference, rows, getPreference]);
+    }, [preferencesKey, getPreference, path, setPreference, initCollapsed, rows]);
     const toggleCollapseAll = useCallback(async (collapse) => {
         var _a;
         dispatchRows({ type: 'SET_ALL_COLLAPSED', collapse });
@@ -137,11 +142,11 @@ const ArrayFieldType = (props) => {
         const initializeRowState = async () => {
             var _a, _b;
             const data = formContext.getDataByPath(path);
-            const preferences = await getPreference(preferencesKey) || { fields: {} };
-            dispatchRows({ type: 'SET_ALL', data: data || [], collapsedState: (_b = (_a = preferences === null || preferences === void 0 ? void 0 : preferences.fields) === null || _a === void 0 ? void 0 : _a[path]) === null || _b === void 0 ? void 0 : _b.collapsed });
+            const preferences = (await getPreference(preferencesKey)) || { fields: {} };
+            dispatchRows({ type: 'SET_ALL', data: data || [], collapsedState: (_b = (_a = preferences === null || preferences === void 0 ? void 0 : preferences.fields) === null || _a === void 0 ? void 0 : _a[path]) === null || _b === void 0 ? void 0 : _b.collapsed, initCollapsed });
         };
         initializeRowState();
-    }, [formContext, path, getPreference, preferencesKey]);
+    }, [formContext, path, getPreference, preferencesKey, initCollapsed]);
     useEffect(() => {
         setValue((rows === null || rows === void 0 ? void 0 : rows.length) || 0, true);
         if ((rows === null || rows === void 0 ? void 0 : rows.length) === 0) {

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

@@ -32,7 +32,7 @@ const labelDefaults = {
     plural: 'Blocks',
 };
 const Index = (props) => {
-    const { label, name, path: pathFromProps, blocks, labels = labelDefaults, fieldTypes, maxRows, minRows, required, validate = blocksValidator, permissions, admin: { readOnly, description, condition, className, }, } = props;
+    const { label, name, path: pathFromProps, blocks, labels = labelDefaults, fieldTypes, maxRows, minRows, required, validate = blocksValidator, permissions, admin: { readOnly, description, condition, initCollapsed, className, }, } = props;
     const path = pathFromProps || name;
     const { preferencesKey } = useDocumentInfo();
     const { getPreference } = usePreferences();
@@ -99,8 +99,13 @@ const Index = (props) => {
         dispatchRows({ type: 'SET_COLLAPSE', id: rowID, collapsed });
         if (preferencesKey) {
             const preferencesToSet = await getPreference(preferencesKey) || { fields: {} };
-            let newCollapsedState = ((_b = (_a = preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) === null || _a === void 0 ? void 0 : _a[path]) === null || _b === void 0 ? void 0 : _b.collapsed.filter((filterID) => (rows.find((row) => row.id === filterID))))
-                || [];
+            let newCollapsedState = (_b = (_a = preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) === null || _a === void 0 ? void 0 : _a[path]) === null || _b === void 0 ? void 0 : _b.collapsed;
+            if (initCollapsed && typeof newCollapsedState === 'undefined') {
+                newCollapsedState = rows.map((row) => row.id);
+            }
+            else if (typeof newCollapsedState === 'undefined') {
+                newCollapsedState = [];
+            }
             if (!collapsed) {
                 newCollapsedState = newCollapsedState.filter((existingID) => existingID !== rowID);
             }
@@ -118,7 +123,7 @@ const Index = (props) => {
                 },
             });
         }
-    }, [preferencesKey, getPreference, path, setPreference, rows]);
+    }, [preferencesKey, getPreference, path, setPreference, initCollapsed, rows]);
     const toggleCollapseAll = useCallback(async (collapse) => {
         var _a;
         dispatchRows({ type: 'SET_ALL_COLLAPSED', collapse });
@@ -141,11 +146,11 @@ const Index = (props) => {
         const initializeRowState = async () => {
             var _a, _b;
             const data = formContext.getDataByPath(path);
-            const preferences = await getPreference(preferencesKey) || { fields: {} };
-            dispatchRows({ type: 'SET_ALL', data: data || [], collapsedState: (_b = (_a = preferences === null || preferences === void 0 ? void 0 : preferences.fields) === null || _a === void 0 ? void 0 : _a[path]) === null || _b === void 0 ? void 0 : _b.collapsed });
+            const preferences = (await getPreference(preferencesKey)) || { fields: {} };
+            dispatchRows({ type: 'SET_ALL', data: data || [], collapsedState: (_b = (_a = preferences === null || preferences === void 0 ? void 0 : preferences.fields) === null || _a === void 0 ? void 0 : _a[path]) === null || _b === void 0 ? void 0 : _b.collapsed, initCollapsed });
         };
         initializeRowState();
-    }, [formContext, path, getPreference, preferencesKey]);
+    }, [formContext, path, getPreference, preferencesKey, initCollapsed]);
     useEffect(() => {
         setValue((rows === null || rows === void 0 ? void 0 : rows.length) || 0, true);
         if ((rows === null || rows === void 0 ? void 0 : rows.length) === 0) {

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

@@ -10,10 +10,10 @@ import { getFieldPath } from '../getFieldPath';
 import './index.scss';
 const baseClass = 'collapsible-field';
 const CollapsibleField = (props) => {
-    const { label, fields, fieldTypes, path, permissions, admin: { readOnly, className, description, }, } = props;
+    const { label, fields, fieldTypes, path, permissions, admin: { readOnly, className, initCollapsed, description, }, } = props;
     const { getPreference, setPreference } = usePreferences();
     const { preferencesKey } = useDocumentInfo();
-    const [initCollapsed, setInitCollapsed] = useState();
+    const [collapsedOnMount, setCollapsedOnMount] = useState();
     const [fieldPreferencesKey] = useState(() => `collapsible-${toKebabCase(label)}`);
     const onToggle = useCallback(async (newCollapsedState) => {
         var _a;
@@ -31,16 +31,16 @@ const CollapsibleField = (props) => {
     }, [preferencesKey, fieldPreferencesKey, getPreference, setPreference]);
     useEffect(() => {
         const fetchInitialState = async () => {
-            var _a, _b;
+            var _a, _b, _c;
             const preferences = await getPreference(preferencesKey);
-            setInitCollapsed(Boolean((_b = (_a = preferences === null || preferences === void 0 ? void 0 : preferences.fields) === null || _a === void 0 ? void 0 : _a[fieldPreferencesKey]) === null || _b === void 0 ? void 0 : _b.collapsed));
+            setCollapsedOnMount(Boolean((_c = (_b = (_a = preferences === null || preferences === void 0 ? void 0 : preferences.fields) === null || _a === void 0 ? void 0 : _a[fieldPreferencesKey]) === null || _b === void 0 ? void 0 : _b.collapsed) !== null && _c !== void 0 ? _c : initCollapsed));
         };
         fetchInitialState();
-    }, [getPreference, preferencesKey, fieldPreferencesKey]);
-    if (typeof initCollapsed !== 'boolean')
+    }, [getPreference, preferencesKey, fieldPreferencesKey, initCollapsed]);
+    if (typeof collapsedOnMount !== 'boolean')
         return null;
     return (React.createElement(React.Fragment, null,
-        React.createElement(Collapsible, { initCollapsed: initCollapsed, className: [
+        React.createElement(Collapsible, { initCollapsed: collapsedOnMount, className: [
                 'field-type',
                 baseClass,
                 className,

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

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import RenderFields from '../../RenderFields';
 import withCondition from '../../withCondition';
+import { fieldAffectsData, tabHasName } from '../../../../../fields/config/types';
 import FieldDescription from '../../FieldDescription';
 import toKebabCase from '../../../../../utilities/toKebabCase';
 import { useCollapsible } from '../../../elements/Collapsible/provider';
 import { TabsProvider } from './provider';
-import { getFieldPath } from '../getFieldPath';
 import './index.scss';
 const baseClass = 'tabs-field';
 const TabsField = (props) => {
@@ -24,16 +24,16 @@ const TabsField = (props) => {
                     return (React.createElement("button", { key: i, type: "button", className: [
                             `${baseClass}__tab-button`,
                             active === i && `${baseClass}__tab-button--active`,
-                        ].filter(Boolean).join(' '), onClick: () => setActive(i) }, tab.label));
+                        ].filter(Boolean).join(' '), onClick: () => setActive(i) }, tab.label ? tab.label : (tabHasName(tab) && tab.name)));
                 }))),
             React.createElement("div", { className: `${baseClass}__content-wrap` }, activeTab && (React.createElement("div", { className: [
                     `${baseClass}__tab`,
                     `${baseClass}__tab-${toKebabCase(activeTab.label)}`,
                 ].join(' ') },
                 React.createElement(FieldDescription, { className: `${baseClass}__description`, description: activeTab.description }),
-                React.createElement(RenderFields, { key: activeTab.label, forceRender: true, readOnly: readOnly, permissions: permissions === null || permissions === void 0 ? void 0 : permissions.fields, fieldTypes: fieldTypes, fieldSchema: activeTab.fields.map((field) => ({
+                React.createElement(RenderFields, { forceRender: true, readOnly: readOnly, permissions: permissions === null || permissions === void 0 ? void 0 : permissions.fields, fieldTypes: fieldTypes, fieldSchema: activeTab.fields.map((field) => ({
                         ...field,
-                        path: getFieldPath(path, field),
+                        path: `${path ? `${path}.` : ''}${tabHasName(activeTab) ? `${activeTab.name}.` : ''}${fieldAffectsData(field) ? field.name : ''}`,
                     })) })))))));
 };
 export default withCondition(TabsField);

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

@@ -11,6 +11,7 @@ declare type SET_ALL = {
     }[];
     collapsedState?: string[];
     blockType?: string;
+    initCollapsed?: boolean;
 };
 declare type SET_COLLAPSE = {
     type: 'SET_COLLAPSE';