payload 1.0.34 → 1.1.0

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/Popup/index.js

@@ -1,28 +1,30 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useWindowInfo } from '@faceless-ui/window-info';
-import { useScrollInfo } from '@faceless-ui/scroll-info';
-import useThrottledEffect from '../../../hooks/useThrottledEffect';
 import PopupButton from './PopupButton';
 import './index.scss';
+import useIntersect from '../../../hooks/useIntersect';
 const baseClass = 'popup';
 const Popup = (props) => {
     const { className, buttonClassName, render, size = 'small', color = 'light', button, buttonType = 'default', children, showOnHover = false, horizontalAlign: horizontalAlignFromProps = 'left', verticalAlign: verticalAlignFromProps = 'top', initActive = false, onToggleOpen, padding, forceOpen, boundingRef, } = props;
+    const { width: windowWidth, height: windowHeight } = useWindowInfo();
+    const [intersectionRef, intersectionEntry] = useIntersect({
+        threshold: 1,
+        rootMargin: '-100px 0px 0px 0px',
+        root: (boundingRef === null || boundingRef === void 0 ? void 0 : boundingRef.current) || null,
+    });
     const buttonRef = useRef(null);
     const contentRef = useRef(null);
-    const [mounted, setMounted] = useState(false);
     const [active, setActive] = useState(initActive);
     const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps);
     const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps);
-    const { y: scrollY } = useScrollInfo();
-    const { height: windowHeight, width: windowWidth } = useWindowInfo();
     const handleClickOutside = useCallback((e) => {
         if (contentRef.current.contains(e.target)) {
             return;
         }
         setActive(false);
-    }, []);
-    useThrottledEffect(() => {
-        if (contentRef.current && buttonRef.current) {
+    }, [contentRef]);
+    useEffect(() => {
+        if (contentRef.current) {
             const { left: contentLeftPos, right: contentRightPos, top: contentTopPos, bottom: contentBottomPos, } = contentRef.current.getBoundingClientRect();
             let boundingTopPos = 100;
             let boundingRightPos = windowWidth;
@@ -45,12 +47,11 @@ const Popup = (props) => {
             if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {
                 setVerticalAlign('bottom');
             }
-            else if (contentBottomPos > boundingBottomPos && contentTopPos < boundingTopPos) {
+            else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {
                 setVerticalAlign('top');
             }
-            setMounted(true);
         }
-    }, 500, [scrollY, windowHeight, windowWidth]);
+    }, [boundingRef, intersectionEntry, windowHeight, windowWidth]);
     useEffect(() => {
         if (typeof onToggleOpen === 'function')
             onToggleOpen(active);
@@ -74,7 +75,7 @@ const Popup = (props) => {
         `${baseClass}--color-${color}`,
         `${baseClass}--v-align-${verticalAlign}`,
         `${baseClass}--h-align-${horizontalAlign}`,
-        (active && mounted) && `${baseClass}--active`,
+        (active) && `${baseClass}--active`,
     ].filter(Boolean).join(' ');
     return (React.createElement("div", { className: classes },
         React.createElement("div", { ref: buttonRef, className: `${baseClass}__wrapper` }, showOnHover
@@ -82,7 +83,7 @@ const Popup = (props) => {
                 React.createElement(PopupButton, { ...{ className: buttonClassName, buttonType, button, setActive, active } })))
             : (React.createElement(PopupButton, { ...{ className: buttonClassName, buttonType, button, setActive, active } }))),
         React.createElement("div", { className: `${baseClass}__content`, ref: contentRef },
-            React.createElement("div", { className: `${baseClass}__wrap` },
+            React.createElement("div", { className: `${baseClass}__wrap`, ref: intersectionRef },
                 React.createElement("div", { className: `${baseClass}__scroll`, style: {
                         padding,
                     } },

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/Status/index.js

@@ -10,16 +10,16 @@ import { useForm } from '../../forms/Form/context';
 import { useLocale } from '../../utilities/Locale';
 import './index.scss';
 const baseClass = 'status';
-const unPublishModalSlug = 'confirm-un-publish';
-const revertModalSlug = 'confirm-revert';
 const Status = () => {
     var _a, _b;
     const { publishedDoc, unpublishedVersions, collection, global, id, getVersions } = useDocumentInfo();
-    const { toggle, closeAll: closeAllModals } = useModal();
+    const { toggleModal } = useModal();
     const { serverURL, routes: { api } } = useConfig();
     const [processing, setProcessing] = useState(false);
     const { reset: resetForm } = useForm();
     const locale = useLocale();
+    const unPublishModalSlug = `confirm-un-publish-${id}`;
+    const revertModalSlug = `confirm-revert-${id}`;
     let statusToRender;
     if (((_a = unpublishedVersions === null || unpublishedVersions === void 0 ? void 0 : unpublishedVersions.docs) === null || _a === void 0 ? void 0 : _a.length) > 0 && publishedDoc) {
         statusToRender = 'Changed';
@@ -77,29 +77,34 @@ const Status = () => {
             toast.error('There was a problem while un-publishing this document.');
         }
         setProcessing(false);
-        closeAllModals();
-    }, [closeAllModals, collection, global, serverURL, api, resetForm, id, locale, getVersions, publishedDoc]);
+        if (action === 'revert') {
+            toggleModal(revertModalSlug);
+        }
+        if (action === 'unpublish') {
+            toggleModal(unPublishModalSlug);
+        }
+    }, [collection, global, publishedDoc, serverURL, api, id, locale, resetForm, getVersions, toggleModal, revertModalSlug, unPublishModalSlug]);
     if (statusToRender) {
         return (React.createElement("div", { className: baseClass },
             React.createElement("div", { className: `${baseClass}__value-wrap` },
                 React.createElement("span", { className: `${baseClass}__value` }, statusToRender),
                 statusToRender === 'Published' && (React.createElement(React.Fragment, null,
                     "\u00A0\u2014\u00A0",
-                    React.createElement(Button, { onClick: () => toggle(unPublishModalSlug), className: `${baseClass}__action`, buttonStyle: "none" }, "Unpublish"),
+                    React.createElement(Button, { onClick: () => toggleModal(unPublishModalSlug), className: `${baseClass}__action`, buttonStyle: "none" }, "Unpublish"),
                     React.createElement(Modal, { slug: unPublishModalSlug, className: `${baseClass}__modal` },
                         React.createElement(MinimalTemplate, { className: `${baseClass}__modal-template` },
                             React.createElement("h1", null, "Confirm unpublish"),
                             React.createElement("p", null, "You are about to unpublish this document. Are you sure?"),
-                            React.createElement(Button, { buttonStyle: "secondary", type: "button", onClick: processing ? undefined : () => toggle(unPublishModalSlug) }, "Cancel"),
+                            React.createElement(Button, { buttonStyle: "secondary", type: "button", onClick: processing ? undefined : () => toggleModal(unPublishModalSlug) }, "Cancel"),
                             React.createElement(Button, { onClick: processing ? undefined : () => performAction('unpublish') }, processing ? 'Unpublishing...' : 'Confirm'))))),
                 statusToRender === 'Changed' && (React.createElement(React.Fragment, null,
                     "\u00A0\u2014\u00A0",
-                    React.createElement(Button, { onClick: () => toggle(revertModalSlug), className: `${baseClass}__action`, buttonStyle: "none" }, "Revert to published"),
+                    React.createElement(Button, { onClick: () => toggleModal(revertModalSlug), className: `${baseClass}__action`, buttonStyle: "none" }, "Revert to published"),
                     React.createElement(Modal, { slug: revertModalSlug, className: `${baseClass}__modal` },
                         React.createElement(MinimalTemplate, { className: `${baseClass}__modal-template` },
                             React.createElement("h1", null, "Confirm revert to saved"),
                             React.createElement("p", null, "You are about to revert this document's changes to its published state. Are you sure?"),
-                            React.createElement(Button, { buttonStyle: "secondary", type: "button", onClick: processing ? undefined : () => toggle(revertModalSlug) }, "Cancel"),
+                            React.createElement(Button, { buttonStyle: "secondary", type: "button", onClick: processing ? undefined : () => toggleModal(revertModalSlug) }, "Cancel"),
                             React.createElement(Button, { onClick: processing ? undefined : () => performAction('revert') }, processing ? 'Reverting...' : 'Confirm'))))))));
     }
     return null;

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/Error/index.scss

@@ -1,6 +1,7 @@
 @import '../../../scss/styles';
 
 .field-error.tooltip {
+  font-family: var(--font-body);
   top: 0;
   bottom: auto;
   left: auto;
@@ -11,4 +12,4 @@
   span {
     border-top-color: var(--theme-error-500);
   }
-}
+}

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/Label/index.scss

@@ -1,13 +1,15 @@
 @import '../../../scss/styles.scss';
 
 label.field-label {
+  @extend %body;
   display: flex;
   padding-bottom: base(.25);
   color: var(--theme-elevation-800);
+  font-family: var(--font-body);
 
   .required {
     color: var(--theme-error-500);
     margin-left: base(.25);
     margin-right: auto;
   }
-}
+}

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/RichText/RichText.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { BaseEditor } from 'slate';
 import { ReactEditor } from 'slate-react';
 import { HistoryEditor } from 'slate-history';
-import { Props, BlurSelectionEditor } from './types';
+import { Props } from './types';
 import './index.scss';
 declare type CustomText = {
     text: string;
@@ -14,7 +14,7 @@ declare type CustomElement = {
 };
 declare module 'slate' {
     interface CustomTypes {
-        Editor: BaseEditor & ReactEditor & HistoryEditor & BlurSelectionEditor;
+        Editor: BaseEditor & ReactEditor & HistoryEditor;
         Element: CustomElement;
         Text: CustomText;
     }

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

@@ -74,9 +74,6 @@ const RichText = (props) => {
         CreatedEditor = enablePlugins(CreatedEditor, leaves);
         return CreatedEditor;
     }, [elements, leaves]);
-    const onBlur = useCallback(() => {
-        editor.blurSelection = editor.selection;
-    }, [editor]);
     useEffect(() => {
         if (!loaded) {
             const mergedElements = mergeCustomFunctions(elements, elementTypes);
@@ -128,7 +125,7 @@ const RichText = (props) => {
                                 const elementType = enabledElements[elementName];
                                 const Button = elementType === null || elementType === void 0 ? void 0 : elementType.Button;
                                 if (Button) {
-                                    return (React.createElement(Button, { key: i, path: path }));
+                                    return (React.createElement(Button, { fieldProps: props, key: i, path: path }));
                                 }
                                 return null;
                             }),
@@ -141,12 +138,12 @@ const RichText = (props) => {
                                 const leafType = enabledLeaves[leafName];
                                 const Button = leafType === null || leafType === void 0 ? void 0 : leafType.Button;
                                 if (Button) {
-                                    return (React.createElement(Button, { key: i, path: path }));
+                                    return (React.createElement(Button, { fieldProps: props, key: i, path: path }));
                                 }
                                 return null;
                             }))),
                     React.createElement("div", { className: `${baseClass}__editor`, ref: editorRef },
-                        React.createElement(Editable, { id: `field-${path.replace(/\./gi, '__')}`, className: `${baseClass}__input`, renderElement: renderElement, renderLeaf: renderLeaf, placeholder: placeholder, spellCheck: true, readOnly: readOnly, onBlur: onBlur, onKeyDown: (event) => {
+                        React.createElement(Editable, { id: `field-${path.replace(/\./gi, '__')}`, className: `${baseClass}__input`, renderElement: renderElement, renderLeaf: renderLeaf, placeholder: placeholder, spellCheck: true, readOnly: readOnly, onKeyDown: (event) => {
                                 if (event.key === 'Enter') {
                                     if (event.shiftKey) {
                                         event.preventDefault();

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

@@ -13,9 +13,6 @@ const indent = {
         const editor = useSlate();
         const handleIndent = useCallback((e, dir) => {
             e.preventDefault();
-            if (editor.blurSelection) {
-                Transforms.select(editor, editor.blurSelection);
-            }
             if (dir === 'left') {
                 Transforms.unwrapNodes(editor, {
                     match: (n) => Element.isElement(n) && [indentType, ...listTypes].includes(n.type),

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

@@ -43,14 +43,17 @@ declare const elements: {
         }) => JSX.Element;
     };
     link: {
-        Button: () => JSX.Element;
-        Element: ({ attributes, children, element, editorRef }: {
+        Button: ({ fieldProps }: {
+            fieldProps: any;
+        }) => JSX.Element;
+        Element: ({ attributes, children, element, editorRef, fieldProps }: {
             attributes: any;
             children: any;
             element: any;
             editorRef: any;
+            fieldProps: any;
         }) => JSX.Element;
-        plugins: ((incomingEditor: import("slate").BaseEditor & import("slate-react").ReactEditor & import("slate-history").HistoryEditor & import("../types").BlurSelectionEditor) => import("slate").BaseEditor & import("slate-react").ReactEditor & import("slate-history").HistoryEditor & import("../types").BlurSelectionEditor)[];
+        plugins: ((incomingEditor: import("slate").BaseEditor & import("slate-react").ReactEditor & import("slate-history").HistoryEditor) => import("slate").BaseEditor & import("slate-react").ReactEditor & import("slate-history").HistoryEditor)[];
     };
     ol: {
         Button: () => JSX.Element;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const LinkButton: ({ fieldProps }: {
+    fieldProps: any;
+}) => JSX.Element;