payload 1.0.27 → 1.0.28

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+## [1.0.28](https://github.com/payloadcms/payload/compare/v1.0.27...v1.0.28) (2022-08-29)
+
+
+### Bug Fixes
+
+* incorrect field paths when nesting unnamed fields ([#1011](https://github.com/payloadcms/payload/issues/1011)) ([50b0303](https://github.com/payloadcms/payload/commit/50b0303ab39f0d0500c5e4116df95f02d1d7fff3)), closes [#976](https://github.com/payloadcms/payload/issues/976)
+* relationship cell loading ([#1021](https://github.com/payloadcms/payload/issues/1021)) ([6a3cfce](https://github.com/payloadcms/payload/commit/6a3cfced9a6e0ef75b398ec663f908c725b10d1a))
+* remove lazy loading of array and blocks ([4900fa7](https://github.com/payloadcms/payload/commit/4900fa799ffbeb70e689622b269dc04a67978552))
+* require properties in blocks and arrays fields ([#1020](https://github.com/payloadcms/payload/issues/1020)) ([6bc6e7b](https://github.com/payloadcms/payload/commit/6bc6e7bb616bd9f28f2464d3e55e7a1d19a8e7f8))
+* unpublish item will not crash the UI anymore ([#1016](https://github.com/payloadcms/payload/issues/1016)) ([0586d7a](https://github.com/payloadcms/payload/commit/0586d7aa7d0938df25492487aa073c2aa366e1e4))
+
+
+### Features
+
+* export more fields config types and validation type ([#989](https://github.com/payloadcms/payload/issues/989)) ([25f5d68](https://github.com/payloadcms/payload/commit/25f5d68b74b081c060ddf6f0405c9211f5da6b54))
+* types custom components to allow any props ([#1013](https://github.com/payloadcms/payload/issues/1013)) ([3736755](https://github.com/payloadcms/payload/commit/3736755a12cf5bbaaa916a5c0363026318a60823))
+* validate relationship and upload ids ([#1004](https://github.com/payloadcms/payload/issues/1004)) ([d727fc8](https://github.com/payloadcms/payload/commit/d727fc8e2467e3f438ea6b1d2031e0657bffd183))
+
 ## [1.0.27](https://github.com/payloadcms/payload/compare/v1.0.26...v1.0.27) (2022-08-18)
 
 

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

@@ -45,7 +45,7 @@ const Status = () => {
         }
         if (collection) {
             url = `${serverURL}${api}/${collection.slug}/${id}?depth=0&locale=${locale}&fallback-locale=null`;
-            method = 'PATCH';
+            method = 'patch';
         }
         if (global) {
             url = `${serverURL}${api}/globals/${global.slug}?depth=0&locale=${locale}&fallback-locale=null`;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 export declare type DescriptionFunction = () => string;
-export declare type DescriptionComponent = React.ComponentType;
+export declare type DescriptionComponent = React.ComponentType<any>;
 declare type Description = string | DescriptionFunction | DescriptionComponent;
 export declare type Props = {
     description?: Description;

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

@@ -48,13 +48,19 @@ const WhereBuilder = (props) => {
         if (handleChange)
             handleChange(newWhereQuery);
         if (modifySearchQuery) {
-            history.replace({
-                search: queryString.stringify({
-                    ...currentParams,
-                    page: 1,
-                    where: newWhereQuery,
-                }, { addQueryPrefix: true }),
-            });
+            const newParams = {
+                ...currentParams,
+                page: currentParams.page,
+                where: newWhereQuery,
+            };
+            if (newParams.page)
+                delete newParams.page;
+            const newSearchQuery = queryString.stringify(newParams);
+            if (newSearchQuery) {
+                history.replace({
+                    search: `?${newSearchQuery}&page=1`,
+                });
+            }
         }
     }, 500, [conditions, modifySearchQuery, handleChange]);
     return (React.createElement("div", { className: baseClass },

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

@@ -1,4 +1,5 @@
 import React from 'react';
 import { Props } from './types';
-declare const ArrayFieldType: React.FC<Props>;
-export default ArrayFieldType;
+import './index.scss';
+declare const _default: React.FC<Props>;
+export default _default;

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

@@ -1,6 +1,201 @@
-import React, { Suspense, lazy } from 'react';
-import Loading from '../../../elements/Loading';
-const ArrayField = lazy(() => import('./Array'));
-const ArrayFieldType = (props) => (React.createElement(Suspense, { fallback: React.createElement(Loading, null) },
-    React.createElement(ArrayField, { ...props })));
-export default ArrayFieldType;
+import React, { useCallback, useEffect, useReducer, useState } from 'react';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import { useAuth } from '../../../utilities/Auth';
+import withCondition from '../../withCondition';
+import Button from '../../../elements/Button';
+import reducer from '../rowReducer';
+import { useForm } from '../../Form/context';
+import buildStateFromSchema from '../../Form/buildStateFromSchema';
+import useField from '../../useField';
+import { useLocale } from '../../../utilities/Locale';
+import Error from '../../Error';
+import { array } from '../../../../../fields/validations';
+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 = '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)
+            return p.labels;
+        if (p === null || p === void 0 ? void 0 : p.label)
+            return { singular: p.label, plural: undefined };
+        return { singular: 'Row', plural: 'Rows' };
+    };
+    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 { preferencesKey } = useDocumentInfo();
+    const { getPreference } = usePreferences();
+    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 memoizedValidate = useCallback((value, options) => {
+        return validate(value, { ...options, minRows, maxRows, required });
+    }, [maxRows, minRows, required, validate]);
+    const [disableFormData, setDisableFormData] = useState(false);
+    const { showError, errorMessage, value, setValue, } = useField({
+        path,
+        validate: memoizedValidate,
+        disableFormData,
+        condition,
+    });
+    const addRow = useCallback(async (rowIndex) => {
+        const subFieldState = await buildStateFromSchema({ fieldSchema: fields, operation, id, user, locale });
+        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 });
+        setValue(value - 1);
+    }, [dispatchRows, dispatchFields, path, value, setValue]);
+    const moveRow = useCallback((moveFromIndex, moveToIndex) => {
+        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 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))))
+                || [];
+            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, path, setPreference, rows, getPreference]);
+    const toggleCollapseAll = useCallback(async (collapse) => {
+        var _a;
+        dispatchRows({ type: 'SET_ALL_COLLAPSED', collapse });
+        if (preferencesKey) {
+            const preferencesToSet = await getPreference(preferencesKey) || { 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, getPreference, preferencesKey, rows, setPreference]);
+    useEffect(() => {
+        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 });
+        };
+        initializeRowState();
+    }, [formContext, path, getPreference, preferencesKey]);
+    useEffect(() => {
+        setValue((rows === null || rows === void 0 ? void 0 : rows.length) || 0, true);
+        if ((rows === null || rows === void 0 ? void 0 : rows.length) === 0) {
+            setDisableFormData(false);
+        }
+        else {
+            setDisableFormData(true);
+        }
+    }, [rows, setValue]);
+    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", { id: `field-${path.replace(/\./gi, '__')}`, className: classes },
+            React.createElement("div", { className: `${baseClass}__error-wrap` },
+                React.createElement(Error, { showError: showError, message: errorMessage })),
+            React.createElement("header", { className: `${baseClass}__header` },
+                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) => {
+                    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, { className: `${baseClass}__fields`, 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",
+                    ' ',
+                    minRows
+                        ? `${minRows} ${labels.plural}`
+                        : `1 ${labels.singular}`)),
+                (rows.length === 0 && readOnly) && (React.createElement(Banner, null,
+                    "This field has no",
+                    ' ',
+                    labels.plural,
+                    ".")),
+                provided.placeholder))),
+            (!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/Blocks/index.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { Props } from './types';
-declare const BlocksField: React.FC<Props>;
-export default BlocksField;
+import './index.scss';
+declare const _default: React.FC<Props>;
+export default _default;

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

@@ -1,6 +1,213 @@
-import React, { Suspense, lazy } from 'react';
-import Loading from '../../../elements/Loading';
-const Blocks = lazy(() => import('./Blocks'));
-const BlocksField = (props) => (React.createElement(Suspense, { fallback: React.createElement(Loading, null) },
-    React.createElement(Blocks, { ...props })));
-export default BlocksField;
+import React, { useCallback, useEffect, useReducer, useState } from 'react';
+import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
+import { useAuth } from '../../../utilities/Auth';
+import { usePreferences } from '../../../utilities/Preferences';
+import { useLocale } from '../../../utilities/Locale';
+import withCondition from '../../withCondition';
+import Button from '../../../elements/Button';
+import reducer from '../rowReducer';
+import { useDocumentInfo } from '../../../utilities/DocumentInfo';
+import { useForm } from '../../Form/context';
+import buildStateFromSchema from '../../Form/buildStateFromSchema';
+import Error from '../../Error';
+import useField from '../../useField';
+import Popup from '../../../elements/Popup';
+import BlockSelector from './BlockSelector';
+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 = 'blocks-field';
+const labelDefaults = {
+    singular: 'Block',
+    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 path = pathFromProps || name;
+    const { preferencesKey } = useDocumentInfo();
+    const { getPreference } = usePreferences();
+    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 memoizedValidate = useCallback((value, options) => {
+        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 });
+        setValue(value - 1);
+    }, [path, setValue, value, dispatchFields]);
+    const moveRow = useCallback((moveFromIndex, moveToIndex) => {
+        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 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))))
+                || [];
+            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, getPreference, path, setPreference, rows]);
+    const toggleCollapseAll = useCallback(async (collapse) => {
+        var _a;
+        dispatchRows({ type: 'SET_ALL_COLLAPSED', collapse });
+        if (preferencesKey) {
+            const preferencesToSet = await getPreference(preferencesKey) || { 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) : [],
+                    },
+                },
+            });
+        }
+    }, [getPreference, path, preferencesKey, rows, setPreference]);
+    // Set row count on mount and when form context is reset
+    useEffect(() => {
+        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 });
+        };
+        initializeRowState();
+    }, [formContext, path, getPreference, preferencesKey]);
+    useEffect(() => {
+        setValue((rows === null || rows === void 0 ? void 0 : rows.length) || 0, true);
+        if ((rows === null || rows === void 0 ? void 0 : rows.length) === 0) {
+            setDisableFormData(false);
+        }
+        else {
+            setDisableFormData(true);
+        }
+    }, [rows, setValue]);
+    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", { id: `field-${path.replace(/\./gi, '__')}`, className: classes },
+            React.createElement("div", { className: `${baseClass}__error-wrap` },
+                React.createElement(Error, { showError: showError, message: errorMessage })),
+            React.createElement("header", { className: `${baseClass}__header` },
+                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) => {
+                    const { blockType } = row;
+                    const blockToRender = blocks.find((block) => block.slug === blockType);
+                    const rowNumber = i + 1;
+                    if (blockToRender) {
+                        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, { className: `${baseClass}__fields`, 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;
+                }),
+                (rows.length < minRows || (required && rows.length === 0)) && (React.createElement(Banner, { type: "error" },
+                    "This field requires at least",
+                    ' ',
+                    `${minRows || 1} ${minRows === 1 || typeof minRows === 'undefined' ? labels.singular : labels.plural}`)),
+                (rows.length === 0 && readOnly) && (React.createElement(Banner, null,
+                    "This field has no",
+                    ' ',
+                    labels.plural,
+                    ".")),
+                provided.placeholder))),
+            (!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(Index);

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

@@ -1,12 +1,12 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import RenderFields from '../../RenderFields';
 import withCondition from '../../withCondition';
-import { fieldAffectsData } from '../../../../../fields/config/types';
 import { Collapsible } from '../../../elements/Collapsible';
 import toKebabCase from '../../../../../utilities/toKebabCase';
 import { usePreferences } from '../../../utilities/Preferences';
 import { useDocumentInfo } from '../../../utilities/DocumentInfo';
 import FieldDescription from '../../FieldDescription';
+import { getFieldPath } from '../getFieldPath';
 import './index.scss';
 const baseClass = 'collapsible-field';
 const CollapsibleField = (props) => {
@@ -47,7 +47,7 @@ const CollapsibleField = (props) => {
             ].filter(Boolean).join(' '), header: React.createElement("div", { className: `${baseClass}__label` }, label), onToggle: onToggle },
             React.createElement(RenderFields, { forceRender: true, readOnly: readOnly, permissions: permissions === null || permissions === void 0 ? void 0 : permissions.fields, fieldTypes: fieldTypes, fieldSchema: fields.map((field) => ({
                     ...field,
-                    path: `${path ? `${path}.` : ''}${fieldAffectsData(field) ? field.name : ''}`,
+                    path: getFieldPath(path, field),
                 })) })),
         React.createElement(FieldDescription, { description: description })));
 };

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import RenderFields from '../../RenderFields';
 import withCondition from '../../withCondition';
-import { fieldAffectsData } from '../../../../../fields/config/types';
+import { getFieldPath } from '../getFieldPath';
 import './index.scss';
 const Row = (props) => {
     const { fields, fieldTypes, path, permissions, admin: { readOnly, className, }, } = props;
@@ -12,7 +12,7 @@ const Row = (props) => {
     ].filter(Boolean).join(' ');
     return (React.createElement(RenderFields, { readOnly: readOnly, className: classes, permissions: permissions === null || permissions === void 0 ? void 0 : permissions.fields, fieldTypes: fieldTypes, fieldSchema: fields.map((field) => ({
             ...field,
-            path: `${path ? `${path}.` : ''}${fieldAffectsData(field) ? field.name : ''}`,
+            path: getFieldPath(path, field),
         })) }));
 };
 export default withCondition(Row);

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 } 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) => {
@@ -33,7 +33,7 @@ const TabsField = (props) => {
                 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) => ({
                         ...field,
-                        path: `${path ? `${path}.` : ''}${fieldAffectsData(field) ? field.name : ''}`,
+                        path: getFieldPath(path, field),
                     })) })))))));
 };
 export default withCondition(TabsField);

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

@@ -0,0 +1,2 @@
+import { Field } from '../../../../fields/config/types';
+export declare const getFieldPath: (path: string, field: Field) => string;

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

@@ -0,0 +1,6 @@
+import { fieldAffectsData } from '../../../../fields/config/types';
+export const getFieldPath = (path, field) => {
+    // prevents duplicate . on nesting non-named fields
+    const dot = path && path.slice(-1) === '.' ? '' : '.';
+    return `${path ? `${path}${dot}` : ''}${fieldAffectsData(field) ? field.name : ''}`;
+};