payload 0.20.1 → 0.20.4-beta.0

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

@@ -157,4 +157,21 @@ export const addFieldStatePromise = async ({ field, locale, user, state, path, p
             operation,
         });
     }
+    else if (field.type === 'tabs') {
+        field.tabs.forEach((tab) => {
+            iterateFields({
+                state,
+                fields: tab.fields,
+                data,
+                parentPassesCondition: passesCondition,
+                path,
+                user,
+                fieldPromises,
+                fullData,
+                id,
+                locale,
+                operation,
+            });
+        });
+    }
 };

package/dist/admin/components/forms/Form/fieldReducer.js

@@ -3,6 +3,7 @@ import { unflatten, flatten } from 'flatley';
 import flattenFilters from './flattenFilters';
 import getSiblingData from './getSiblingData';
 import reduceFieldsToValues from './reduceFieldsToValues';
+import deepCopyObject from '../../../../utilities/deepCopyObject';
 const unflattenRowsFromState = (state, path) => {
     // Take a copy of state
     const remainingFlattenedState = { ...state };
@@ -84,6 +85,23 @@ function fieldReducer(state, action) {
             };
             return newState;
         }
+        case 'DUPLICATE_ROW': {
+            const { rowIndex, path, } = action;
+            const { unflattenedRows, remainingFlattenedState } = unflattenRowsFromState(state, path);
+            const duplicate = deepCopyObject(unflattenedRows[rowIndex]);
+            if (duplicate.id)
+                delete duplicate.id;
+            // If there are subfields
+            if (Object.keys(duplicate).length > 0) {
+                // Add new object containing subfield names to unflattenedRows array
+                unflattenedRows.splice(rowIndex + 1, 0, duplicate);
+            }
+            const newState = {
+                ...remainingFlattenedState,
+                ...(flatten({ [path]: unflattenedRows }, { filters: flattenFilters })),
+            };
+            return newState;
+        }
         case 'MOVE_ROW': {
             const { moveFromIndex, moveToIndex, path } = action;
             const { unflattenedRows, remainingFlattenedState } = unflattenRowsFromState(state, path);

package/dist/admin/components/forms/Label/index.scss

@@ -3,10 +3,10 @@
 label.field-label {
   display: flex;
   padding-bottom: base(.25);
-  color: $color-dark-gray;
+  color: var(--theme-elevation-800);
 
   .required {
-    color: $color-red;
+    color: var(--theme-error-500);
     margin-left: base(.25);
     margin-right: auto;
   }

package/dist/admin/components/forms/RenderFields/index.js

@@ -9,13 +9,13 @@ const intersectionObserverOptions = {
 };
 const RenderFields = (props) => {
     var _a;
-    const { fieldSchema, fieldTypes, filter, permissions, readOnly: readOnlyOverride, className, } = props;
+    const { fieldSchema, fieldTypes, filter, permissions, readOnly: readOnlyOverride, className, forceRender, } = props;
     const [hasRendered, setHasRendered] = useState(false);
     const [intersectionRef, entry] = useIntersect(intersectionObserverOptions);
     const operation = useOperation();
     const isIntersecting = Boolean(entry === null || entry === void 0 ? void 0 : entry.isIntersecting);
     const isAboveViewport = ((_a = entry === null || entry === void 0 ? void 0 : entry.boundingClientRect) === null || _a === void 0 ? void 0 : _a.top) < 0;
-    const shouldRender = isIntersecting || isAboveViewport;
+    const shouldRender = forceRender || isIntersecting || isAboveViewport;
     useEffect(() => {
         if (shouldRender && !hasRendered) {
             setHasRendered(true);

package/dist/admin/components/forms/RenderFields/types.d.ts

@@ -4,6 +4,7 @@ import { FieldTypes } from '../field-types';
 export declare type Props = {
     className?: string;
     readOnly?: boolean;
+    forceRender?: boolean;
     permissions?: {
         [field: string]: FieldPermissions;
     };

package/dist/admin/components/forms/Submit/index.js

@@ -4,10 +4,10 @@ import Button from '../../elements/Button';
 import './index.scss';
 const baseClass = 'form-submit';
 const FormSubmit = (props) => {
-    const { children, disabled: disabledFromProps, type = 'submit' } = props;
+    const { children, buttonId: id, disabled: disabledFromProps, type = 'submit' } = props;
     const processing = useFormProcessing();
     const { disabled } = useForm();
     return (React.createElement("div", { className: baseClass },
-        React.createElement(Button, { ...props, type: type, disabled: disabledFromProps || processing || disabled ? true : undefined }, children)));
+        React.createElement(Button, { ...props, id: id, type: type, disabled: disabledFromProps || processing || disabled ? true : undefined }, children)));
 };
 export default FormSubmit;

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

@@ -1,9 +1,8 @@
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { useAuth } from '../../../utilities/Auth';
 import withCondition from '../../withCondition';
 import Button from '../../../elements/Button';
-import DraggableSection from '../../DraggableSection';
 import reducer from '../rowReducer';
 import { useForm } from '../../Form/context';
 import buildStateFromSchema from '../../Form/buildStateFromSchema';
@@ -15,11 +14,19 @@ import Banner from '../../../elements/Banner';
 import FieldDescription from '../../FieldDescription';
 import { useDocumentInfo } from '../../../utilities/DocumentInfo';
 import { useOperation } from '../../../utilities/OperationProvider';
+import { Collapsible } from '../../../elements/Collapsible';
+import RenderFields from '../../RenderFields';
+import { fieldAffectsData } from '../../../../../fields/config/types';
+import { usePreferences } from '../../../utilities/Preferences';
+import { ArrayAction } from '../../../elements/ArrayAction';
+import { scrollToID } from '../../../../utilities/scrollToID';
+import HiddenInput from '../HiddenInput';
 import './index.scss';
-const baseClass = 'field-type array';
+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 path = pathFromProps || name;
     // Handle labeling for Arrays, Global Arrays, and Blocks
     const getLabels = (p) => {
         if (p === null || p === void 0 ? void 0 : p.labels)
@@ -31,14 +38,15 @@ const ArrayFieldType = (props) => {
     const labels = getLabels(props);
     // eslint-disable-next-line react/destructuring-assignment
     const label = (_a = props === null || props === void 0 ? void 0 : props.label) !== null && _a !== void 0 ? _a : (_b = props === null || props === void 0 ? void 0 : props.labels) === null || _b === void 0 ? void 0 : _b.singular;
-    const [rows, dispatchRows] = useReducer(reducer, []);
+    const { preferencesKey, preferences } = useDocumentInfo();
+    const { setPreference } = usePreferences();
+    const [rows, dispatchRows] = useReducer(reducer, undefined);
     const formContext = useForm();
     const { user } = useAuth();
     const { id } = useDocumentInfo();
     const locale = useLocale();
     const operation = useOperation();
     const { dispatchFields } = formContext;
-    const path = pathFromProps || name;
     const memoizedValidate = useCallback((value, options) => {
         return validate(value, { ...options, minRows, maxRows, required });
     }, [maxRows, minRows, required, validate]);
@@ -51,10 +59,22 @@ const ArrayFieldType = (props) => {
     });
     const addRow = useCallback(async (rowIndex) => {
         const subFieldState = await buildStateFromSchema({ fieldSchema: fields, operation, id, user, locale });
+        console.log(subFieldState);
         dispatchFields({ type: 'ADD_ROW', rowIndex, subFieldState, path });
         dispatchRows({ type: 'ADD', rowIndex });
         setValue(value + 1);
+        setTimeout(() => {
+            scrollToID(`${path}-row-${rowIndex + 1}`);
+        }, 0);
     }, [dispatchRows, dispatchFields, fields, path, setValue, value, operation, id, user, locale]);
+    const duplicateRow = useCallback(async (rowIndex) => {
+        dispatchFields({ type: 'DUPLICATE_ROW', rowIndex, path });
+        dispatchRows({ type: 'ADD', rowIndex });
+        setValue(value + 1);
+        setTimeout(() => {
+            scrollToID(`${path}-row-${rowIndex + 1}`);
+        }, 0);
+    }, [dispatchRows, dispatchFields, path, setValue, value]);
     const removeRow = useCallback((rowIndex) => {
         dispatchRows({ type: 'REMOVE', rowIndex });
         dispatchFields({ type: 'REMOVE_ROW', rowIndex, path });
@@ -71,10 +91,53 @@ const ArrayFieldType = (props) => {
         const destinationIndex = result.destination.index;
         moveRow(sourceIndex, destinationIndex);
     }, [moveRow]);
+    const setCollapse = useCallback(async (rowID, collapsed) => {
+        var _a, _b, _c;
+        dispatchRows({ type: 'SET_COLLAPSE', id: rowID, collapsed });
+        if (preferencesKey) {
+            const preferencesToSet = preferences || { 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))))
+                || [];
+            if (!collapsed) {
+                newCollapsedState = newCollapsedState.filter((existingID) => existingID !== rowID);
+            }
+            else {
+                newCollapsedState.push(rowID);
+            }
+            setPreference(preferencesKey, {
+                ...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,
+                    },
+                },
+            });
+        }
+    }, [preferencesKey, preferences, path, setPreference, rows]);
+    const toggleCollapseAll = useCallback(async (collapse) => {
+        var _a;
+        dispatchRows({ type: 'SET_ALL_COLLAPSED', collapse });
+        if (preferencesKey) {
+            const preferencesToSet = preferences || { fields: {} };
+            setPreference(preferencesKey, {
+                ...preferencesToSet,
+                fields: {
+                    ...(preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) || {},
+                    [path]: {
+                        ...(_a = preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) === null || _a === void 0 ? void 0 : _a[path],
+                        collapsed: collapse ? rows.map(({ id: rowID }) => rowID) : [],
+                    },
+                },
+            });
+        }
+    }, [path, preferences, preferencesKey, rows, setPreference]);
     useEffect(() => {
+        var _a, _b;
         const data = formContext.getDataByPath(path);
-        dispatchRows({ type: 'SET_ALL', data: data || [] });
-    }, [formContext, path]);
+        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 });
+    }, [formContext, path, preferences]);
     useEffect(() => {
         setValue((rows === null || rows === void 0 ? void 0 : rows.length) || 0, true);
         if ((rows === null || rows === void 0 ? void 0 : rows.length) === 0) {
@@ -84,20 +147,38 @@ const ArrayFieldType = (props) => {
             setDisableFormData(true);
         }
     }, [rows, setValue]);
-    const hasMaxRows = maxRows && rows.length >= maxRows;
+    const hasMaxRows = maxRows && (rows === null || rows === void 0 ? void 0 : rows.length) >= maxRows;
     const classes = [
+        'field-type',
         baseClass,
         className,
     ].filter(Boolean).join(' ');
+    if (!rows)
+        return null;
     return (React.createElement(DragDropContext, { onDragEnd: onDragEnd },
-        React.createElement("div", { className: classes },
+        React.createElement("div", { id: `field-${path}`, className: classes },
             React.createElement("div", { className: `${baseClass}__error-wrap` },
                 React.createElement(Error, { showError: showError, message: errorMessage })),
             React.createElement("header", { className: `${baseClass}__header` },
-                React.createElement("h3", null, label),
+                React.createElement("div", { className: `${baseClass}__header-wrap` },
+                    React.createElement("h3", null, label),
+                    React.createElement("ul", { className: `${baseClass}__header-actions` },
+                        React.createElement("li", null,
+                            React.createElement("button", { type: "button", onClick: () => toggleCollapseAll(true), className: `${baseClass}__header-action` }, "Collapse All")),
+                        React.createElement("li", null,
+                            React.createElement("button", { type: "button", onClick: () => toggleCollapseAll(false), className: `${baseClass}__header-action` }, "Show All")))),
                 React.createElement(FieldDescription, { value: value, description: description })),
             React.createElement(Droppable, { droppableId: "array-drop" }, (provided) => (React.createElement("div", { ref: provided.innerRef, ...provided.droppableProps },
-                rows.length > 0 && rows.map((row, i) => (React.createElement(DraggableSection, { readOnly: readOnly, key: row.id, id: row.id, blockType: "array", label: labels.singular, rowCount: rows.length, rowIndex: i, addRow: addRow, removeRow: removeRow, moveRow: moveRow, parentPath: path, fieldTypes: fieldTypes, fieldSchema: fields, permissions: permissions, hasMaxRows: hasMaxRows }))),
+                rows.length > 0 && rows.map((row, i) => {
+                    const rowNumber = i + 1;
+                    return (React.createElement(Draggable, { key: row.id, draggableId: row.id, index: i, isDragDisabled: readOnly }, (providedDrag) => (React.createElement("div", { id: `${path}-row-${i}`, ref: providedDrag.innerRef, ...providedDrag.draggableProps },
+                        React.createElement(Collapsible, { collapsed: row.collapsed, onToggle: (collapsed) => setCollapse(row.id, collapsed), className: `${baseClass}__row`, key: row.id, dragHandleProps: providedDrag.dragHandleProps, header: `${labels.singular} ${rowNumber >= 10 ? rowNumber : `0${rowNumber}`}`, actions: !readOnly ? (React.createElement(ArrayAction, { rowCount: rows.length, duplicateRow: duplicateRow, addRow: addRow, moveRow: moveRow, removeRow: removeRow, index: i })) : undefined },
+                            React.createElement(HiddenInput, { name: `${path}.${i}.id`, value: row.id }),
+                            React.createElement(RenderFields, { forceRender: true, readOnly: readOnly, fieldTypes: fieldTypes, permissions: permissions === null || permissions === void 0 ? void 0 : permissions.fields, fieldSchema: fields.map((field) => ({
+                                    ...field,
+                                    path: `${path}.${i}${fieldAffectsData(field) ? `.${field.name}` : ''}`,
+                                })) }))))));
+                }),
                 (rows.length < minRows || (required && rows.length === 0)) && (React.createElement(Banner, { type: "error" },
                     "This field requires at least",
                     ' ',
@@ -110,7 +191,7 @@ const ArrayFieldType = (props) => {
                     labels.plural,
                     ".")),
                 provided.placeholder))),
-            (!readOnly && (!hasMaxRows)) && (React.createElement("div", { className: `${baseClass}__add-button-wrap` },
+            (!readOnly && !hasMaxRows) && (React.createElement("div", { className: `${baseClass}__add-button-wrap` },
                 React.createElement(Button, { onClick: () => addRow(value), buttonStyle: "icon-label", icon: "plus", iconStyle: "with-border", iconPosition: "left" }, `Add ${labels.singular}`))))));
 };
 export default withCondition(ArrayFieldType);

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

@@ -1,8 +1,7 @@
 @import '../../../../scss/styles.scss';
 
-.field-type.array {
-  margin: base(2) 0;
-  min-width: base(15);
+.array-field {
+  margin: 0 0 base(2);
 
   &__header {
     h3 {
@@ -12,52 +11,51 @@
     margin-bottom: base(1);
   }
 
-  &__error-wrap {
-    position: relative;
+  &__header-wrap {
+    display: flex;
+    align-items: flex-end;
+    width: 100%;
   }
 
-  &__add-button-wrap {
-    margin-left: base(0);
+  &__header-actions {
+    list-style: none;
+    margin: 0 0 0 auto;
+    padding: 0;
+    display: flex;
+  }
 
-    .btn {
-      color: $color-gray;
-      margin: 0;
+  &__header-action {
+    @extend %btn-reset;
+    cursor: pointer;
+    margin-left: base(.5);
 
-      &:hover {
-        color: $color-dark-gray;
-      }
+    &:hover {
+      text-decoration: underline;
     }
   }
 
-  .section .section {
-    margin-top: 0;
+  &__row {
+    margin-bottom: base(.5);
   }
 
-  .section__content {
-    > div > div {
-      width: 100%;
-    }
+  &__error-wrap {
+    position: relative;
   }
 
-  .render-fields {
-    .row {
-      &:last-child {
-        margin-bottom: 0;
+  &__add-button-wrap {
+    margin-top: base(1);
+
+    .btn {
+      color: var(--theme-elevation-400);
+      margin: 0;
+
+      &:hover {
+        color: var(--theme-elevation-800);
       }
     }
   }
 
-  @include mid-break {
-    min-width: calc(100vw - #{base(2)});
-  }
-}
-
-.field-type.group,
-.field-type.array,
-.field-type.blocks {
-  .field-type.array {
-    .field-type.array__add-button-wrap {
-      margin-left: base(3);
-    }
+  .field-type:last-child {
+    margin-bottom: 0;
   }
 }

package/dist/admin/components/forms/field-types/Blocks/BlockSelector/BlockSelection/index.scss

@@ -12,12 +12,14 @@
   border-radius: 0;
   box-shadow: 0;
   border: 0;
+  color: currentColor;
 
   &:hover {
-    background-color: $color-background-gray;
+    background-color: var(--theme-elevation-100);
   }
 
   &__image {
+
     svg,
     img {
       max-width: 100%;

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
-import { DragDropContext, Droppable } from 'react-beautiful-dnd';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
 import { useAuth } from '../../../utilities/Auth';
 import { usePreferences } from '../../../utilities/Preferences';
 import { useLocale } from '../../../utilities/Locale';
@@ -9,7 +9,6 @@ import reducer from '../rowReducer';
 import { useDocumentInfo } from '../../../utilities/DocumentInfo';
 import { useForm } from '../../Form/context';
 import buildStateFromSchema from '../../Form/buildStateFromSchema';
-import DraggableSection from '../../DraggableSection';
 import Error from '../../Error';
 import useField from '../../useField';
 import Popup from '../../../elements/Popup';
@@ -18,8 +17,16 @@ import { blocks as blocksValidator } from '../../../../../fields/validations';
 import Banner from '../../../elements/Banner';
 import FieldDescription from '../../FieldDescription';
 import { useOperation } from '../../../utilities/OperationProvider';
+import { Collapsible } from '../../../elements/Collapsible';
+import { ArrayAction } from '../../../elements/ArrayAction';
+import RenderFields from '../../RenderFields';
+import { fieldAffectsData } from '../../../../../fields/config/types';
+import SectionTitle from './SectionTitle';
+import Pill from '../../../elements/Pill';
+import { scrollToID } from '../../../../utilities/scrollToID';
+import HiddenInput from '../HiddenInput';
 import './index.scss';
-const baseClass = 'field-type blocks';
+const baseClass = 'blocks-field';
 const labelDefaults = {
     singular: 'Block',
     plural: 'Blocks',
@@ -27,9 +34,9 @@ const labelDefaults = {
 const Blocks = (props) => {
     const { label, name, path: pathFromProps, blocks, labels = labelDefaults, fieldTypes, maxRows, minRows, required, validate = blocksValidator, permissions, admin: { readOnly, description, condition, className, }, } = props;
     const path = pathFromProps || name;
-    const { preferencesKey } = useDocumentInfo();
-    const { getPreference, setPreference } = usePreferences();
-    const [rows, dispatchRows] = useReducer(reducer, []);
+    const { preferencesKey, preferences } = useDocumentInfo();
+    const { setPreference } = usePreferences();
+    const [rows, dispatchRows] = useReducer(reducer, undefined);
     const formContext = useForm();
     const { user } = useAuth();
     const { id } = useDocumentInfo();
@@ -40,19 +47,36 @@ const Blocks = (props) => {
         return validate(value, { ...options, minRows, maxRows, required });
     }, [maxRows, minRows, required, validate]);
     const [disableFormData, setDisableFormData] = useState(false);
+    const [selectorIndexOpen, setSelectorIndexOpen] = useState();
     const { showError, errorMessage, value, setValue, } = useField({
         path,
         validate: memoizedValidate,
         disableFormData,
         condition,
     });
+    const onAddPopupToggle = useCallback((open) => {
+        if (!open) {
+            setSelectorIndexOpen(undefined);
+        }
+    }, []);
     const addRow = useCallback(async (rowIndex, blockType) => {
         const block = blocks.find((potentialBlock) => potentialBlock.slug === blockType);
         const subFieldState = await buildStateFromSchema({ fieldSchema: block.fields, operation, id, user, locale });
         dispatchFields({ type: 'ADD_ROW', rowIndex, subFieldState, path, blockType });
         dispatchRows({ type: 'ADD', rowIndex, blockType });
         setValue(value + 1);
+        setTimeout(() => {
+            scrollToID(`${path}-row-${rowIndex + 1}`);
+        }, 0);
     }, [path, setValue, value, blocks, dispatchFields, operation, id, user, locale]);
+    const duplicateRow = useCallback(async (rowIndex, blockType) => {
+        dispatchFields({ type: 'DUPLICATE_ROW', rowIndex, path });
+        dispatchRows({ type: 'ADD', rowIndex, blockType });
+        setValue(value + 1);
+        setTimeout(() => {
+            scrollToID(`${path}-row-${rowIndex + 1}`);
+        }, 0);
+    }, [dispatchRows, dispatchFields, path, setValue, value]);
     const removeRow = useCallback((rowIndex) => {
         dispatchRows({ type: 'REMOVE', rowIndex });
         dispatchFields({ type: 'REMOVE_ROW', rowIndex, path });
@@ -62,11 +86,17 @@ const Blocks = (props) => {
         dispatchRows({ type: 'MOVE', moveFromIndex, moveToIndex });
         dispatchFields({ type: 'MOVE_ROW', moveFromIndex, moveToIndex, path });
     }, [dispatchRows, dispatchFields, path]);
+    const onDragEnd = useCallback((result) => {
+        if (!result.destination)
+            return;
+        const sourceIndex = result.source.index;
+        const destinationIndex = result.destination.index;
+        moveRow(sourceIndex, destinationIndex);
+    }, [moveRow]);
     const setCollapse = useCallback(async (rowID, collapsed) => {
         var _a, _b, _c;
         dispatchRows({ type: 'SET_COLLAPSE', id: rowID, collapsed });
         if (preferencesKey) {
-            const preferences = await getPreference(preferencesKey);
             const preferencesToSet = preferences || { 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))))
                 || [];
@@ -87,32 +117,30 @@ const Blocks = (props) => {
                 },
             });
         }
-    }, [preferencesKey, getPreference, path, setPreference, rows]);
-    const onDragEnd = useCallback((result) => {
-        if (!result.destination)
-            return;
-        const sourceIndex = result.source.index;
-        const destinationIndex = result.destination.index;
-        moveRow(sourceIndex, destinationIndex);
-    }, [moveRow]);
-    // Get preferences, and once retrieved,
-    // Reset rows with preferences included
-    useEffect(() => {
-        const data = formContext.getDataByPath(path);
-        if (Array.isArray(data)) {
-            const fetchPreferences = async () => {
-                var _a, _b;
-                const preferences = preferencesKey ? await getPreference(preferencesKey) : undefined;
-                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 });
-            };
-            fetchPreferences();
+    }, [preferencesKey, preferences, path, setPreference, rows]);
+    const toggleCollapseAll = useCallback(async (collapse) => {
+        var _a;
+        dispatchRows({ type: 'SET_ALL_COLLAPSED', collapse });
+        if (preferencesKey) {
+            const preferencesToSet = preferences || { fields: {} };
+            setPreference(preferencesKey, {
+                ...preferencesToSet,
+                fields: {
+                    ...(preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) || {},
+                    [path]: {
+                        ...(_a = preferencesToSet === null || preferencesToSet === void 0 ? void 0 : preferencesToSet.fields) === null || _a === void 0 ? void 0 : _a[path],
+                        collapsed: collapse ? rows.map(({ id: rowID }) => rowID) : [],
+                    },
+                },
+            });
         }
-    }, [formContext, path, preferencesKey, getPreference]);
+    }, [path, preferences, preferencesKey, rows, setPreference]);
     // Set row count on mount and when form context is reset
     useEffect(() => {
+        var _a, _b;
         const data = formContext.getDataByPath(path);
-        dispatchRows({ type: 'SET_ALL', data: data || [] });
-    }, [formContext, path]);
+        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 });
+    }, [formContext, path, preferences]);
     useEffect(() => {
         setValue((rows === null || rows === void 0 ? void 0 : rows.length) || 0, true);
         if ((rows === null || rows === void 0 ? void 0 : rows.length) === 0) {
@@ -122,27 +150,45 @@ const Blocks = (props) => {
             setDisableFormData(true);
         }
     }, [rows, setValue]);
-    const hasMaxRows = maxRows && rows.length >= maxRows;
+    const hasMaxRows = maxRows && (rows === null || rows === void 0 ? void 0 : rows.length) >= maxRows;
     const classes = [
+        'field-type',
         baseClass,
         className,
     ].filter(Boolean).join(' ');
+    if (!rows)
+        return null;
     return (React.createElement(DragDropContext, { onDragEnd: onDragEnd },
-        React.createElement("div", { className: classes },
+        React.createElement("div", { id: `field-${path}`, className: classes },
             React.createElement("div", { className: `${baseClass}__error-wrap` },
                 React.createElement(Error, { showError: showError, message: errorMessage })),
             React.createElement("header", { className: `${baseClass}__header` },
-                React.createElement("h3", null, label),
+                React.createElement("div", { className: `${baseClass}__header-wrap` },
+                    React.createElement("h3", null, label),
+                    React.createElement("ul", { className: `${baseClass}__header-actions` },
+                        React.createElement("li", null,
+                            React.createElement("button", { type: "button", onClick: () => toggleCollapseAll(true), className: `${baseClass}__header-action` }, "Collapse All")),
+                        React.createElement("li", null,
+                            React.createElement("button", { type: "button", onClick: () => toggleCollapseAll(false), className: `${baseClass}__header-action` }, "Show All")))),
                 React.createElement(FieldDescription, { value: value, description: description })),
             React.createElement(Droppable, { droppableId: "blocks-drop", isDropDisabled: readOnly }, (provided) => (React.createElement("div", { ref: provided.innerRef, ...provided.droppableProps },
                 rows.length > 0 && rows.map((row, i) => {
-                    var _a;
                     const { blockType } = row;
                     const blockToRender = blocks.find((block) => block.slug === blockType);
+                    const rowNumber = i + 1;
                     if (blockToRender) {
-                        return (React.createElement(DraggableSection, { readOnly: readOnly, key: row.id, id: row.id, blockType: "blocks", blocks: blocks, label: (_a = blockToRender === null || blockToRender === void 0 ? void 0 : blockToRender.labels) === null || _a === void 0 ? void 0 : _a.singular, isCollapsed: row.collapsed, rowCount: rows.length, rowIndex: i, addRow: addRow, removeRow: removeRow, moveRow: moveRow, setRowCollapse: setCollapse, parentPath: path, fieldTypes: fieldTypes, permissions: permissions, hasMaxRows: hasMaxRows, fieldSchema: [
-                                ...blockToRender.fields,
-                            ] }));
+                        return (React.createElement(Draggable, { key: row.id, draggableId: row.id, index: i, isDragDisabled: readOnly }, (providedDrag) => (React.createElement("div", { id: `${path}-row-${i}`, ref: providedDrag.innerRef, ...providedDrag.draggableProps },
+                            React.createElement(Collapsible, { collapsed: row.collapsed, onToggle: (collapsed) => setCollapse(row.id, collapsed), className: `${baseClass}__row`, key: row.id, dragHandleProps: providedDrag.dragHandleProps, header: (React.createElement("div", { className: `${baseClass}__block-header` },
+                                    React.createElement("span", { className: `${baseClass}__block-number` }, rowNumber >= 10 ? rowNumber : `0${rowNumber}`),
+                                    React.createElement(Pill, { pillStyle: "white", className: `${baseClass}__block-pill ${baseClass}__block-pill-${blockType}` }, blockToRender.labels.singular),
+                                    React.createElement(SectionTitle, { path: `${path}.${i}.blockName`, readOnly: readOnly }))), actions: !readOnly ? (React.createElement(React.Fragment, null,
+                                    React.createElement(Popup, { key: `${blockType}-${i}`, forceOpen: selectorIndexOpen === i, onToggleOpen: onAddPopupToggle, buttonType: "none", size: "large", horizontalAlign: "right", render: ({ close }) => (React.createElement(BlockSelector, { blocks: blocks, addRow: addRow, addRowIndex: i, close: close })) }),
+                                    React.createElement(ArrayAction, { rowCount: rows.length, duplicateRow: () => duplicateRow(i, blockType), addRow: () => setSelectorIndexOpen(i), moveRow: moveRow, removeRow: removeRow, index: i }))) : undefined },
+                                React.createElement(HiddenInput, { name: `${path}.${i}.id`, value: row.id }),
+                                React.createElement(RenderFields, { forceRender: true, readOnly: readOnly, fieldTypes: fieldTypes, permissions: permissions === null || permissions === void 0 ? void 0 : permissions.fields, fieldSchema: blockToRender.fields.map((field) => ({
+                                        ...field,
+                                        path: `${path}.${i}${fieldAffectsData(field) ? `.${field.name}` : ''}`,
+                                    })) }))))));
                     }
                     return null;
                 }),
@@ -156,7 +202,7 @@ const Blocks = (props) => {
                     labels.plural,
                     ".")),
                 provided.placeholder))),
-            (!readOnly && (rows.length < maxRows || maxRows === undefined)) && (React.createElement("div", { className: `${baseClass}__add-button-wrap` },
+            (!readOnly && !hasMaxRows) && (React.createElement("div", { className: `${baseClass}__add-button-wrap` },
                 React.createElement(Popup, { buttonType: "custom", size: "large", horizontalAlign: "left", button: (React.createElement(Button, { buttonStyle: "icon-label", icon: "plus", iconPosition: "left", iconStyle: "with-border" }, `Add ${labels.singular}`)), render: ({ close }) => (React.createElement(BlockSelector, { blocks: blocks, addRow: addRow, addRowIndex: value, close: close })) }))))));
 };
 export default withCondition(Blocks);

package/dist/admin/components/forms/{DraggableSection → field-types/Blocks}/SectionTitle/index.js

@@ -1,16 +1,18 @@
 import React from 'react';
-import useField from '../../useField';
-import Pill from '../../../elements/Pill';
+import useField from '../../../useField';
 import './index.scss';
 const baseClass = 'section-title';
 const SectionTitle = (props) => {
-    const { label, path, readOnly } = props;
+    const { path, readOnly } = props;
     const { value, setValue } = useField({ path });
     const classes = [
         baseClass,
     ].filter(Boolean).join(' ');
-    return (React.createElement("div", { className: classes },
-        React.createElement(Pill, { pillStyle: "light-gray", className: `${baseClass}__pill` }, label),
-        React.createElement("input", { className: `${baseClass}__input`, id: path, value: value || '', placeholder: "Untitled", type: "text", name: path, onChange: setValue, readOnly: readOnly })));
+    return (React.createElement("div", { className: classes, "data-value": value },
+        React.createElement("input", { className: `${baseClass}__input`, id: path, value: value || '', placeholder: "Untitled", type: "text", name: path, onChange: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                setValue(e.target.value);
+            }, readOnly: readOnly })));
 };
 export default SectionTitle;