payload 0.20.0 → 0.20.1

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const strikethrough: {
+    Button: () => JSX.Element;
+    Leaf: ({ attributes, children }: {
+        attributes: any;
+        children: any;
+    }) => JSX.Element;
+};
+export default strikethrough;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import LeafButton from '../Button';
+import StrikethroughIcon from '../../../../../icons/Strikethrough';
+const Strikethrough = ({ attributes, children }) => (React.createElement("del", { ...attributes }, children));
+const strikethrough = {
+    Button: () => (React.createElement(LeafButton, { format: "strikethrough" },
+        React.createElement(StrikethroughIcon, null))),
+    Leaf: Strikethrough,
+};
+export default strikethrough;

package/dist/admin/components/forms/field-types/RichText/leaves/toggle.d.ts

@@ -0,0 +1,2 @@
+declare const toggleLeaf: (editor: any, format: any) => void;
+export default toggleLeaf;

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

@@ -0,0 +1,12 @@
+import { Editor } from 'slate';
+import isLeafActive from './isActive';
+const toggleLeaf = (editor, format) => {
+    const isActive = isLeafActive(editor, format);
+    if (isActive) {
+        Editor.removeMark(editor, format);
+    }
+    else {
+        Editor.addMark(editor, format, true);
+    }
+};
+export default toggleLeaf;

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare const underline: {
+    Button: () => JSX.Element;
+    Leaf: ({ attributes, children }: {
+        attributes: any;
+        children: any;
+    }) => JSX.Element;
+};
+export default underline;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import LeafButton from '../Button';
+import UnderlineIcon from '../../../../../icons/Underline';
+const Underline = ({ attributes, children }) => (React.createElement("u", { ...attributes }, children));
+const underline = {
+    Button: () => (React.createElement(LeafButton, { format: "underline" },
+        React.createElement(UnderlineIcon, null))),
+    Leaf: Underline,
+};
+export default underline;

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

@@ -0,0 +1,2 @@
+declare const _default: (enabledFunctions: any, builtInFunctions: any) => any;
+export default _default;

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

@@ -0,0 +1,21 @@
+export default (enabledFunctions, builtInFunctions) => {
+    const formattedEnabledFunctions = [...enabledFunctions];
+    if (enabledFunctions.indexOf('ul') > -1 || enabledFunctions.indexOf('ol') > -1) {
+        formattedEnabledFunctions.push('li');
+    }
+    return formattedEnabledFunctions.reduce((resultingFunctions, func) => {
+        if (typeof func === 'object' && func.name) {
+            return {
+                ...resultingFunctions,
+                [func.name]: func,
+            };
+        }
+        if (typeof func === 'string' && builtInFunctions[func]) {
+            return {
+                ...resultingFunctions,
+                [func]: builtInFunctions[func],
+            };
+        }
+        return resultingFunctions;
+    }, {});
+};

package/dist/admin/components/forms/field-types/RichText/plugins/withEnterBreakOut.d.ts

@@ -0,0 +1,2 @@
+declare const withEnterBreakOut: (editor: any) => any;
+export default withEnterBreakOut;

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

@@ -0,0 +1,7 @@
+const enterBreakOutTypes = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'link'];
+const withEnterBreakOut = (editor) => {
+    const newEditor = editor;
+    newEditor.shouldBreakOutOnEnter = (element) => enterBreakOutTypes.includes(String(element.type));
+    return newEditor;
+};
+export default withEnterBreakOut;

package/dist/admin/components/forms/field-types/RichText/plugins/withHTML.d.ts

@@ -0,0 +1,2 @@
+declare const withHTML: (incomingEditor: any) => any;
+export default withHTML;

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

@@ -0,0 +1,78 @@
+import { Transforms } from 'slate';
+import { jsx } from 'slate-hyperscript';
+const ELEMENT_TAGS = {
+    A: (el) => ({ type: 'link', newTab: el.getAttribute('target') === '_blank', url: el.getAttribute('href') }),
+    BLOCKQUOTE: () => ({ type: 'blockquote' }),
+    H1: () => ({ type: 'h1' }),
+    H2: () => ({ type: 'h2' }),
+    H3: () => ({ type: 'h3' }),
+    H4: () => ({ type: 'h4' }),
+    H5: () => ({ type: 'h5' }),
+    H6: () => ({ type: 'h6' }),
+    IMG: (el) => ({ type: 'image', url: el.getAttribute('src') }),
+    LI: () => ({ type: 'li' }),
+    OL: () => ({ type: 'ol' }),
+    P: () => ({ type: 'p' }),
+    PRE: () => ({ type: 'code' }),
+    UL: () => ({ type: 'ul' }),
+};
+const TEXT_TAGS = {
+    CODE: () => ({ code: true }),
+    DEL: () => ({ strikethrough: true }),
+    EM: () => ({ italic: true }),
+    I: () => ({ italic: true }),
+    S: () => ({ strikethrough: true }),
+    STRONG: () => ({ bold: true }),
+    U: () => ({ underline: true }),
+};
+const deserialize = (el) => {
+    if (el.nodeType === 3) {
+        return el.textContent;
+    }
+    if (el.nodeType !== 1) {
+        return null;
+    }
+    if (el.nodeName === 'BR') {
+        return '\n';
+    }
+    const { nodeName } = el;
+    let parent = el;
+    if (nodeName === 'PRE'
+        && el.childNodes[0]
+        && el.childNodes[0].nodeName === 'CODE') {
+        [parent] = el.childNodes;
+    }
+    const children = Array.from(parent.childNodes)
+        .map(deserialize)
+        .flat();
+    if (el.nodeName === 'BODY') {
+        return jsx('fragment', {}, children);
+    }
+    if (ELEMENT_TAGS[nodeName]) {
+        const attrs = ELEMENT_TAGS[nodeName](el);
+        return jsx('element', attrs, children);
+    }
+    if (TEXT_TAGS[nodeName]) {
+        const attrs = TEXT_TAGS[nodeName](el);
+        return children.map((child) => jsx('text', attrs, child));
+    }
+    return children;
+};
+const withHTML = (incomingEditor) => {
+    const { insertData } = incomingEditor;
+    const editor = incomingEditor;
+    editor.insertData = (data) => {
+        if (!data.types.includes('application/x-slate-fragment')) {
+            const html = data.getData('text/html');
+            if (html) {
+                const parsed = new DOMParser().parseFromString(html, 'text/html');
+                const fragment = deserialize(parsed.body);
+                Transforms.insertFragment(editor, fragment);
+                return;
+            }
+        }
+        insertData(data);
+    };
+    return editor;
+};
+export default withHTML;

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

@@ -0,0 +1,8 @@
+import { BaseEditor, Selection } from 'slate';
+import { RichTextField } from '../../../../../fields/config/types';
+export declare type Props = Omit<RichTextField, 'type'> & {
+    path?: string;
+};
+export interface BlurSelectionEditor extends BaseEditor {
+    blurSelection?: Selection;
+}

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

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

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

@@ -0,0 +1,5 @@
+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/Row/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import RenderFields from '../../RenderFields';
+import withCondition from '../../withCondition';
+import { fieldAffectsData } from '../../../../../fields/config/types';
+import './index.scss';
+const Row = (props) => {
+    const { fields, fieldTypes, path, permissions, admin: { readOnly, className, }, } = props;
+    const classes = [
+        'field-type',
+        'row',
+        className,
+    ].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 : ''}`,
+        })) }));
+};
+export default withCondition(Row);

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

@@ -0,0 +1,31 @@
+@import '../../../../scss/styles.scss';
+
+.field-type.row {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: - base(.5);
+  margin-right: - base(.5);
+  width: calc(100% + #{$baseline});
+  margin-bottom: 0;
+
+  > * {
+    padding-left: base(.5);
+    padding-right: base(.5);
+    flex-grow: 1;
+  }
+
+  @include mid-break {
+    display: block;
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+
+    > * {
+      margin-left: 0;
+      margin-right: 0;
+      width: 100% !important;
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}

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

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

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

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

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { OptionObject, SelectField } from '../../../../../fields/config/types';
+import { Description } from '../../FieldDescription/types';
+import { Value as ReactSelectValue } from '../../../elements/ReactSelect/types';
+import './index.scss';
+export declare type SelectInputProps = Omit<SelectField, 'type' | 'value' | 'options'> & {
+    showError?: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+    path: string;
+    required?: boolean;
+    value?: string | string[];
+    description?: Description;
+    onChange?: (value: ReactSelectValue) => void;
+    style?: React.CSSProperties;
+    className?: string;
+    width?: string;
+    hasMany?: boolean;
+    options?: OptionObject[];
+};
+declare const SelectInput: React.FC<SelectInputProps>;
+export default SelectInput;

package/dist/admin/components/forms/field-types/Select/Input.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import Label from '../../Label';
+import Error from '../../Error';
+import FieldDescription from '../../FieldDescription';
+import ReactSelect from '../../../elements/ReactSelect';
+// import { FieldType } from '../../useField/types';
+import './index.scss';
+const SelectInput = (props) => {
+    const { showError, errorMessage, readOnly, path, label, required, value, onChange, description, style, className, width, options, hasMany, } = props;
+    const classes = [
+        'field-type',
+        'select',
+        className,
+        showError && 'error',
+        readOnly && 'read-only',
+    ].filter(Boolean).join(' ');
+    let valueToRender;
+    if (hasMany && Array.isArray(value)) {
+        valueToRender = value.map((val) => options.find((option) => option.value === val));
+    }
+    else {
+        valueToRender = options.find((option) => option.value === value);
+    }
+    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(ReactSelect, { onChange: onChange, value: valueToRender, showError: showError, isDisabled: readOnly, options: options, isMulti: hasMany }),
+        React.createElement(FieldDescription, { value: value, description: description })));
+};
+export default SelectInput;

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

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

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

@@ -0,0 +1,53 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import withCondition from '../../withCondition';
+import useField from '../../useField';
+import { select } from '../../../../../fields/validations';
+import SelectInput from './Input';
+const formatOptions = (options) => options.map((option) => {
+    if (typeof option === 'object' && (option.value || option.value === '')) {
+        return option;
+    }
+    return {
+        label: option,
+        value: option,
+    };
+});
+const Select = (props) => {
+    const { path: pathFromProps, name, validate = select, label, options: optionsFromProps, hasMany, required, admin: { readOnly, style, className, width, description, condition, } = {}, } = props;
+    const path = pathFromProps || name;
+    const [options, setOptions] = useState(formatOptions(optionsFromProps));
+    useEffect(() => {
+        setOptions(formatOptions(optionsFromProps));
+    }, [optionsFromProps]);
+    const memoizedValidate = useCallback((value, validationOptions) => {
+        return validate(value, { ...validationOptions, options, hasMany, required });
+    }, [validate, required, hasMany, options]);
+    const { value, showError, setValue, errorMessage, } = useField({
+        path,
+        validate: memoizedValidate,
+        condition,
+    });
+    const onChange = useCallback((selectedOption) => {
+        if (!readOnly) {
+            let newValue;
+            if (hasMany) {
+                if (Array.isArray(selectedOption)) {
+                    newValue = selectedOption.map((option) => option.value);
+                }
+                else {
+                    newValue = [];
+                }
+            }
+            else {
+                newValue = selectedOption.value;
+            }
+            setValue(newValue);
+        }
+    }, [
+        readOnly,
+        hasMany,
+        setValue,
+    ]);
+    return (React.createElement(SelectInput, { path: path, onChange: onChange, value: value, name: name, options: options, label: label, showError: showError, errorMessage: errorMessage, required: required, description: description, style: style, className: className, width: width, hasMany: hasMany }));
+};
+export default withCondition(Select);

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

@@ -0,0 +1,14 @@
+@import '../../../../scss/styles.scss';
+
+.field-type.select {
+  position: relative;
+  margin-bottom: $baseline;
+}
+
+.select--read-only {
+  div.react-select {
+    div.rs__control {
+      background: lighten($color-light-gray, 5%);
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+import { SelectField } from '../../../../../fields/config/types';
+export declare type Props = Omit<SelectField, 'type'> & {
+    path?: string;
+};

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

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

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

@@ -0,0 +1,20 @@
+import React, { ChangeEvent } from 'react';
+import { TextField } from '../../../../../fields/config/types';
+import { Description } from '../../FieldDescription/types';
+import './index.scss';
+export declare type TextInputProps = Omit<TextField, 'type'> & {
+    showError?: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+    path: string;
+    required?: boolean;
+    value?: string;
+    description?: Description;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    placeholder?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    width?: string;
+};
+declare const TextInput: React.FC<TextInputProps>;
+export default TextInput;

package/dist/admin/components/forms/field-types/Text/Input.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Label from '../../Label';
+import Error from '../../Error';
+import FieldDescription from '../../FieldDescription';
+// import { FieldType } from '../../useField/types';
+import './index.scss';
+const TextInput = (props) => {
+    const { showError, errorMessage, placeholder, readOnly, path, label, required, value, onChange, description, style, className, width, } = props;
+    const classes = [
+        'field-type',
+        'text',
+        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("input", { value: value || '', onChange: onChange, disabled: readOnly, placeholder: placeholder, type: "text", id: path, name: path }),
+        React.createElement(FieldDescription, { value: value, description: description })));
+};
+export default TextInput;

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

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

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

@@ -0,0 +1,23 @@
+import React, { useCallback } from 'react';
+import useField from '../../useField';
+import withCondition from '../../withCondition';
+import { text } from '../../../../../fields/validations';
+import TextInput from './Input';
+const Text = (props) => {
+    const { path: pathFromProps, name, required, validate = text, label, minLength, maxLength, admin: { placeholder, readOnly, style, className, width, description, condition, } = {}, } = props;
+    const path = pathFromProps || name;
+    const memoizedValidate = useCallback((value, options) => {
+        return validate(value, { ...options, minLength, maxLength, required });
+    }, [validate, minLength, maxLength, required]);
+    const field = useField({
+        path,
+        validate: memoizedValidate,
+        enableDebouncedValue: true,
+        condition,
+    });
+    const { value, showError, setValue, errorMessage, } = field;
+    return (React.createElement(TextInput, { path: path, name: name, onChange: (e) => {
+            setValue(e.target.value);
+        }, showError: showError, errorMessage: errorMessage, required: required, label: label, value: value, placeholder: placeholder, readOnly: readOnly, style: style, className: className, width: width, description: description }));
+};
+export default withCondition(Text);

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

@@ -0,0 +1,16 @@
+@import '../../../../scss/styles.scss';
+
+.field-type.text {
+	position: relative;
+  margin-bottom: $baseline;
+
+	input {
+		@include formInput;
+	}
+
+	&.error {
+		input {
+      background-color: lighten($color-red, 20%);
+		}
+	}
+}

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

@@ -0,0 +1,4 @@
+import { TextField } from '../../../../../fields/config/types';
+export declare type Props = Omit<TextField, 'type'> & {
+    path?: string;
+};

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

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

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

@@ -0,0 +1,21 @@
+import React, { ChangeEvent } from 'react';
+import { TextareaField } from '../../../../../fields/config/types';
+import { Description } from '../../FieldDescription/types';
+import './index.scss';
+export declare type TextAreaInputProps = Omit<TextareaField, 'type'> & {
+    showError?: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+    path: string;
+    required?: boolean;
+    value?: string;
+    description?: Description;
+    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    placeholder?: string;
+    style?: React.CSSProperties;
+    className?: string;
+    width?: string;
+    rows?: number;
+};
+declare const TextareaInput: React.FC<TextAreaInputProps>;
+export default TextareaInput;

package/dist/admin/components/forms/field-types/Textarea/Input.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Label from '../../Label';
+import Error from '../../Error';
+import FieldDescription from '../../FieldDescription';
+import './index.scss';
+const TextareaInput = (props) => {
+    const { path, required, readOnly, style, className, width, placeholder, description, label, showError, value, errorMessage, onChange, rows, } = props;
+    const classes = [
+        'field-type',
+        'textarea',
+        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("textarea", { value: value || '', onChange: onChange, disabled: readOnly, placeholder: placeholder, id: path, name: path, rows: rows }),
+        React.createElement(FieldDescription, { value: value, description: description })));
+};
+export default TextareaInput;

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

@@ -0,0 +1,5 @@
+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/Textarea/index.js

@@ -0,0 +1,23 @@
+import React, { useCallback } from 'react';
+import useField from '../../useField';
+import withCondition from '../../withCondition';
+import { textarea } from '../../../../../fields/validations';
+import TextareaInput from './Input';
+import './index.scss';
+const Textarea = (props) => {
+    const { path: pathFromProps, name, required, validate = textarea, maxLength, minLength, admin: { readOnly, style, className, width, placeholder, rows, description, condition, } = {}, label, } = props;
+    const path = pathFromProps || name;
+    const memoizedValidate = useCallback((value, options) => {
+        return validate(value, { ...options, required, maxLength, minLength });
+    }, [validate, required, maxLength, minLength]);
+    const { value, showError, setValue, errorMessage, } = useField({
+        path,
+        validate: memoizedValidate,
+        enableDebouncedValue: true,
+        condition,
+    });
+    return (React.createElement(TextareaInput, { path: path, name: name, onChange: (e) => {
+            setValue(e.target.value);
+        }, showError: showError, errorMessage: errorMessage, required: required, label: label, value: value, placeholder: placeholder, readOnly: readOnly, style: style, className: className, width: width, description: description, rows: rows }));
+};
+export default withCondition(Textarea);

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

@@ -0,0 +1,18 @@
+@import '../../../../scss/styles.scss';
+
+.field-type.textarea {
+  position: relative;
+  margin-bottom: $baseline;
+
+  textarea {
+    @include formInput();
+    height: auto;
+    min-height: base(3);
+  }
+
+  &.error {
+    textarea {
+      background-color: lighten($color-red, 20%);
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+import { TextareaField } from '../../../../../fields/config/types';
+export declare type Props = Omit<TextareaField, 'type'> & {
+    path?: string;
+};

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

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

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

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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import withCondition from '../../withCondition';
+const UI = (props) => {
+    const { admin: { components: { Field, }, }, } = props;
+    if (Field) {
+        return React.createElement(Field, { ...props });
+    }
+    return null;
+};
+export default withCondition(UI);