payload 0.19.2 → 0.20.0

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import { Props } from './types';
-declare const BlockSelector: React.FC<Props>;
-export default BlockSelector;

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

@@ -1,26 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import BlockSearch from './BlockSearch';
-import BlocksContainer from './BlocksContainer';
-const baseClass = 'block-selector';
-const BlockSelector = (props) => {
-    const { blocks, close, parentIsHovered, watchParentHover, ...remainingProps } = props;
-    const [searchTerm, setSearchTerm] = useState('');
-    const [filteredBlocks, setFilteredBlocks] = useState(blocks);
-    const [isBlockSelectorHovered, setBlockSelectorHovered] = useState(false);
-    useEffect(() => {
-        const matchingBlocks = blocks.reduce((matchedBlocks, block) => {
-            if (block.slug.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1)
-                matchedBlocks.push(block);
-            return matchedBlocks;
-        }, []);
-        setFilteredBlocks(matchingBlocks);
-    }, [searchTerm, blocks]);
-    useEffect(() => {
-        if (!parentIsHovered && !isBlockSelectorHovered && close && watchParentHover)
-            close();
-    }, [isBlockSelectorHovered, parentIsHovered, close, watchParentHover]);
-    return (React.createElement("div", { className: baseClass, onMouseEnter: () => setBlockSelectorHovered(true), onMouseLeave: () => setBlockSelectorHovered(false) },
-        React.createElement(BlockSearch, { setSearchTerm: setSearchTerm }),
-        React.createElement(BlocksContainer, { blocks: filteredBlocks, close: close, ...remainingProps })));
-};
-export default BlockSelector;

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

@@ -1,8 +0,0 @@
-@import '../../../../../scss/styles.scss';
-
-.block-selector {
-
-  @include mid-break {
-    min-width: 80vw;
-  }
-}

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

@@ -1,9 +0,0 @@
-import { Block } from '../../../../../../fields/config/types';
-export declare type Props = {
-    blocks: Block[];
-    addRow: (index: number, blockType?: string) => void;
-    watchParentHover?: boolean;
-    parentIsHovered?: boolean;
-    close: () => void;
-    addRowIndex: number;
-};

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

@@ -1 +0,0 @@
-export {};

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

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

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

@@ -1,162 +0,0 @@
-import React, { useCallback, useEffect, useReducer, useState } from 'react';
-import { DragDropContext, 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 DraggableSection from '../../DraggableSection';
-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 './index.scss';
-const baseClass = 'field-type blocks';
-const labelDefaults = {
-    singular: 'Block',
-    plural: 'Blocks',
-};
-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 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, 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);
-    }, [path, setValue, value, blocks, dispatchFields, operation, id, user, locale]);
-    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 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))))
-                || [];
-            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 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();
-        }
-    }, [formContext, path, preferencesKey, getPreference]);
-    // Set row count on mount and when form context is reset
-    useEffect(() => {
-        const data = formContext.getDataByPath(path);
-        dispatchRows({ type: 'SET_ALL', data: data || [] });
-    }, [formContext, path]);
-    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.length >= maxRows;
-    const classes = [
-        baseClass,
-        className,
-    ].filter(Boolean).join(' ');
-    return (React.createElement(DragDropContext, { onDragEnd: onDragEnd },
-        React.createElement("div", { 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(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);
-                    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 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 && (rows.length < maxRows || maxRows === undefined)) && (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/field-types/Blocks/index.d.ts

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

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

@@ -1,6 +0,0 @@
-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;

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

@@ -1,54 +0,0 @@
-@import '../../../../scss/styles.scss';
-
-.field-type.blocks {
-  margin: base(2) 0;
-  min-width: base(15);
-
-  &__header {
-    h3 {
-      margin-bottom: 0;
-    }
-
-    margin-bottom: base(1);
-  }
-
-  &__error-wrap {
-    position: relative;
-  }
-
-  &__add-button-wrap {
-
-    .btn {
-      color: $color-gray;
-      margin: 0;
-
-      &:hover {
-        color: $color-dark-gray;
-      }
-    }
-  }
-
-  .section .section {
-    margin-top: 0;
-  }
-
-  .section__content {
-    > div > div {
-      width: 100%;
-    }
-  }
-
-  @include mid-break {
-    min-width: calc(100vw - #{base(2)});
-  }
-}
-
-.field-type.group,
-.field-type.array,
-.field-type.blocks {
-  .field-type.blocks {
-    .field-type.blocks__add-button-wrap {
-      margin-left: base(3);
-    }
-  }
-}

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

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

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

@@ -1 +0,0 @@
-export {};

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

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

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

@@ -1,46 +0,0 @@
-import React, { useCallback } from 'react';
-import useField from '../../useField';
-import withCondition from '../../withCondition';
-import Error from '../../Error';
-import { checkbox } from '../../../../../fields/validations';
-import Check from '../../../icons/Check';
-import FieldDescription from '../../FieldDescription';
-import './index.scss';
-const baseClass = 'checkbox';
-const Checkbox = (props) => {
-    const { name, path: pathFromProps, validate = checkbox, label, onChange, disableFormData, required, admin: { readOnly, style, className, width, description, condition, } = {}, } = props;
-    const path = pathFromProps || name;
-    const memoizedValidate = useCallback((value, options) => {
-        return validate(value, { ...options, required });
-    }, [validate, required]);
-    const { value, showError, errorMessage, setValue, } = useField({
-        path,
-        validate: memoizedValidate,
-        disableFormData,
-        condition,
-    });
-    return (React.createElement("div", { className: [
-            'field-type',
-            baseClass,
-            showError && 'error',
-            className,
-            value && `${baseClass}--checked`,
-            readOnly && `${baseClass}--read-only`,
-        ].filter(Boolean).join(' '), style: {
-            ...style,
-            width,
-        } },
-        React.createElement("div", { className: `${baseClass}__error-wrap` },
-            React.createElement(Error, { showError: showError, message: errorMessage })),
-        React.createElement("input", { type: "checkbox", name: path, id: path, checked: Boolean(value), readOnly: true }),
-        React.createElement("button", { type: "button", onClick: readOnly ? undefined : () => {
-                setValue(!value);
-                if (typeof onChange === 'function')
-                    onChange(!value);
-            } },
-            React.createElement("span", { className: `${baseClass}__input` },
-                React.createElement(Check, null)),
-            React.createElement("span", { className: `${baseClass}__label` }, label)),
-        React.createElement(FieldDescription, { value: value, description: description })));
-};
-export default withCondition(Checkbox);

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

@@ -1,77 +0,0 @@
-@import '../../../../scss/styles.scss';
-
-.checkbox {
-  position: relative;
-  margin-bottom: $baseline;
-
-  .tooltip {
-    right: auto;
-    position: relative;
-    margin-bottom: .2em;
-    max-width: fit-content;
-  }
-
-  &__error-wrap {
-    position: relative;
-  }
-
-  button {
-    @extend %btn-reset;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-
-    &:focus,
-    &:active {
-      outline: none;
-    }
-
-    &:hover {
-      svg {
-        opacity: .2;
-      }
-    }
-  }
-
-  &__input {
-    @include formInput;
-    padding: 0;
-    line-height: 0;
-    position: relative;
-    width: $baseline;
-    height: $baseline;
-    margin-right: base(.5);
-
-    svg {
-      opacity: 0;
-    }
-  }
-
-  input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-  }
-
-  &--checked {
-    button {
-      .checkbox__input {
-        svg {
-          opacity: 1;
-        }
-      }
-    }
-  }
-
-  &--read-only {
-
-    .checkbox__label {
-      color: $color-gray;
-    }
-
-    .checkbox__input {
-      background-color: lighten($color-light-gray, 5%);
-    }
-  }
-}

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

@@ -1,6 +0,0 @@
-import { CheckboxField } from '../../../../../fields/config/types';
-export declare type Props = Omit<CheckboxField, 'type'> & {
-    path?: string;
-    onChange?: (val: boolean) => void;
-    disableFormData?: boolean;
-};

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

@@ -1 +0,0 @@
-export {};

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

@@ -1,7 +0,0 @@
-import React from 'react';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import { Props } from './types';
-import './index.scss';
-declare const _default: React.FC<Props>;
-export default _default;

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

@@ -1,53 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import Editor from 'react-simple-code-editor';
-import { highlight, languages } from 'prismjs/components/prism-core';
-import 'prismjs/components/prism-clike';
-import 'prismjs/components/prism-javascript';
-import useField from '../../useField';
-import withCondition from '../../withCondition';
-import Label from '../../Label';
-import Error from '../../Error';
-import FieldDescription from '../../FieldDescription';
-import { code } from '../../../../../fields/validations';
-import './index.scss';
-const Code = (props) => {
-    const { path: pathFromProps, name, required, validate = code, admin: { readOnly, style, className, width, language, description, condition, } = {}, label, } = props;
-    const [highlighter] = useState(() => {
-        if (languages[language]) {
-            return (content) => highlight(content, languages[language]);
-        }
-        return (content) => content;
-    });
-    const path = pathFromProps || name;
-    const memoizedValidate = useCallback((value, options) => {
-        return validate(value, { ...options, required });
-    }, [validate, required]);
-    const { value, showError, setValue, errorMessage, } = useField({
-        path,
-        validate: memoizedValidate,
-        enableDebouncedValue: true,
-        condition,
-    });
-    const classes = [
-        'field-type',
-        'code',
-        className,
-        showError && 'error',
-        readOnly && 'read-only',
-    ].filter(Boolean).join(' ');
-    return (React.createElement("div", { className: classes, style: {
-            ...style,
-            width,
-        } },
-        React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        React.createElement(Editor, { value: value || '', onValueChange: readOnly ? () => null : setValue, highlight: highlighter, padding: 25, style: {
-                backgroundColor: '#333333',
-                color: 'white',
-                fontFamily: '"Consolas", "Monaco", monospace',
-                fontSize: 12,
-                pointerEvents: readOnly ? 'none' : 'auto',
-            } }),
-        React.createElement(FieldDescription, { value: value, description: description })));
-};
-export default withCondition(Code);

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

@@ -1,4 +0,0 @@
-import React from 'react';
-import { Props } from './types';
-declare const CodeField: React.FC<Props>;
-export default CodeField;

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

@@ -1,6 +0,0 @@
-import React, { Suspense, lazy } from 'react';
-import Loading from '../../../elements/Loading';
-const Code = lazy(() => import('./Code'));
-const CodeField = (props) => (React.createElement(Suspense, { fallback: React.createElement(Loading, null) },
-    React.createElement(Code, { ...props })));
-export default CodeField;