payload 0.20.0 → 0.20.1

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

@@ -0,0 +1,113 @@
+@import '../../../scss/styles.scss';
+
+//////////////////////
+// COMPONENT STYLES
+//////////////////////
+
+.draggable-section {
+  padding-bottom: base(.5);
+
+  .draggable-section {
+    padding-bottom: 0;
+  }
+
+  &__content-wrapper {
+    display: flex;
+    position: relative;
+    margin-bottom: $baseline;
+  }
+
+  &__section-header {
+    @include blur-bg(white);
+    display: flex;
+    position: sticky;
+    top: $top-header-offset;
+    z-index: 1;
+    padding: base(.75) base(.75);
+    margin-left: - base(.75);
+    margin-right: - base(.75);
+    width: calc(100% + #{base(1.5)});
+
+    .toggle-collapse {
+      margin: 0 0 0 auto;
+      transform: rotate(.5turn);
+
+      .btn__icon {
+        background-color: white;
+      }
+
+      &--is-collapsed {
+        transform: rotate(0turn);
+      }
+    }
+  }
+
+  &__render-fields-wrapper {
+    flex-grow: 1;
+  }
+
+  &.is-hovered > div {
+    > .field-type-gutter {
+      &.actions {
+
+        .field-type-gutter__content {
+          &:hover {
+            z-index: $z-nav;
+          }
+        }
+
+        .field-type-gutter__content-container {
+          box-shadow: none;
+        }
+      }
+      .field-type-gutter__content-container {
+        box-shadow: #{$style-stroke-width-m} 0px 0px 0px $color-dark-gray;
+      }
+
+      .position-panel__move-forward,
+      .position-panel__move-backward {
+        opacity: 1;
+
+        &.first-row,
+        &.last-row {
+          opacity: .15;
+          pointer-events: none;
+        }
+      }
+
+      .position-panel__current-position {
+        color: $color-dark-gray;
+      }
+    }
+
+    .toggle-collapse {
+      @include color-svg(white);
+
+      .btn__icon {
+        background-color: $color-gray;
+
+        &:hover {
+          background-color: $color-dark-gray;
+        }
+      }
+    }
+  }
+
+  label.field-label {
+    line-height: 1;
+    padding-bottom: base(.75)
+  }
+
+  @include mid-break {
+    min-width: base(16);
+
+    .position-panel__move-forward,
+    .position-panel__move-backward {
+      opacity: 1;
+    }
+
+    &__section-header {
+      top: $top-header-offset-m;
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+import { Field, Block } from '../../../../fields/config/types';
+import { FieldTypes } from '../field-types';
+import { FieldPermissions } from '../../../../auth/types';
+export declare type Props = {
+    moveRow: (fromIndex: number, toIndex: number) => void;
+    addRow: (index: number, blockType?: string) => void;
+    removeRow: (index: number) => void;
+    rowIndex: number;
+    rowCount: number;
+    parentPath: string;
+    fieldSchema: Field[];
+    label?: string;
+    blockType?: string;
+    fieldTypes: FieldTypes;
+    id: string;
+    isCollapsed?: boolean;
+    setRowCollapse?: (id: string, open: boolean) => void;
+    positionPanelVerticalAlignment?: 'top' | 'center' | 'sticky';
+    actionPanelVerticalAlignment?: 'top' | 'center' | 'sticky';
+    permissions: FieldPermissions;
+    readOnly: boolean;
+    blocks?: Block[];
+    hasMaxRows?: boolean;
+};

package/dist/admin/components/forms/DraggableSection/types.js

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

package/dist/admin/components/forms/Error/index.d.ts

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import Tooltip from '../../elements/Tooltip';
+import './index.scss';
+const baseClass = 'field-error';
+const Error = (props) => {
+    const { showError = false, message = 'Please complete this field.', } = props;
+    if (showError) {
+        return (React.createElement(Tooltip, { className: baseClass }, message));
+    }
+    return null;
+};
+export default Error;

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

@@ -0,0 +1,15 @@
+@import '../../../scss/styles';
+
+.field-error.tooltip {
+  top: 0;
+  bottom: auto;
+  left: auto;
+  right: base(.5);
+  transform: none;
+  background-color: $color-red;
+
+  span {
+    border-top-color: $color-red;
+  }
+}
+

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

@@ -0,0 +1,4 @@
+export declare type Props = {
+    showError?: boolean;
+    message?: string;
+};

package/dist/admin/components/forms/Error/types.js

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

package/dist/admin/components/forms/FieldDescription/index.d.ts

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

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { isComponent } from './types';
+import './index.scss';
+const FieldDescription = (props) => {
+    const { description, value, } = props;
+    if (isComponent(description)) {
+        const Description = description;
+        return React.createElement(Description, { value: value });
+    }
+    if (description) {
+        return (React.createElement("div", { className: "field-description" }, typeof description === 'function' ? description({ value }) : description));
+    }
+    return null;
+};
+export default FieldDescription;

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

@@ -0,0 +1,8 @@
+@import '../../../scss/styles.scss';
+
+.field-description {
+  display: flex;
+  padding-top: base(.25);
+  padding-bottom: base(.25);
+  color: $color-gray;
+}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare type DescriptionFunction = (value: unknown) => string;
+export declare type DescriptionComponent = React.ComponentType<{
+    value: unknown;
+}>;
+export declare type Description = string | DescriptionFunction | DescriptionComponent;
+export declare type Props = {
+    description?: Description;
+    value: unknown;
+};
+export declare function isComponent(description: Description): description is DescriptionComponent;

package/dist/admin/components/forms/FieldDescription/types.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isComponent = void 0;
+const react_1 = __importDefault(require("react"));
+function isComponent(description) {
+    return react_1.default.isValidElement(description);
+}
+exports.isComponent = isComponent;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9zcmMvYWRtaW4vY29tcG9uZW50cy9mb3Jtcy9GaWVsZERlc2NyaXB0aW9uL3R5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLGtEQUEwQjtBQWExQixTQUFnQixXQUFXLENBQUMsV0FBd0I7SUFDbEQsT0FBTyxlQUFLLENBQUMsY0FBYyxDQUFDLFdBQVcsQ0FBQyxDQUFDO0FBQzNDLENBQUM7QUFGRCxrQ0FFQyJ9

package/dist/admin/components/forms/FieldTypeGutter/context.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const NegativeFieldGutterProvider: React.FC<{
+    allow?: boolean;
+    children?: React.ReactNode;
+}>;
+export declare const useNegativeFieldGutter: () => boolean;

package/dist/admin/components/forms/FieldTypeGutter/context.js

@@ -0,0 +1,9 @@
+import React, { createContext, useContext } from 'react';
+import { useWindowInfo } from '@faceless-ui/window-info';
+const context = createContext(false);
+const { Provider } = context;
+export const NegativeFieldGutterProvider = ({ children, allow }) => {
+    const { breakpoints: { m: midBreak } } = useWindowInfo();
+    return (React.createElement(Provider, { value: allow && !midBreak }, children));
+};
+export const useNegativeFieldGutter = () => useContext(context);

package/dist/admin/components/forms/FieldTypeGutter/index.d.ts

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

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useNegativeFieldGutter } from './context';
+import './index.scss';
+const baseClass = 'field-type-gutter';
+const FieldTypeGutter = ({ children, variant = 'left', verticalAlignment = 'sticky', className, dragHandleProps = {}, }) => {
+    const allowNegativeGutter = useNegativeFieldGutter();
+    const classes = [
+        baseClass,
+        `${baseClass}--${variant}`,
+        `${baseClass}--v-align-${verticalAlignment}`,
+        allowNegativeGutter && `${baseClass}--negative-gutter`,
+        className && className,
+    ].filter(Boolean).join(' ');
+    return (React.createElement("div", { className: classes, ...dragHandleProps },
+        React.createElement("div", { className: `${baseClass}__content-container` },
+            React.createElement("div", { className: `${baseClass}__content` }, children))));
+};
+export default FieldTypeGutter;

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

@@ -0,0 +1,87 @@
+@import '../../../scss/styles.scss';
+
+$controls-top-adjustment: base(.1);
+
+@mixin nestedStickyOffsets ($loopCount, $currentCount: 0) {
+  .field-type {
+    @if $loopCount > $currentCount {
+      .field-type-gutter--v-align-sticky .field-type-gutter__content {
+        top: calc(#{$top-header-offset} + (#{base(2.75)} * #{$currentCount}));
+      }
+
+      @include nestedStickyOffsets($loopCount, $currentCount + 1);
+    }
+  }
+}
+
+@include nestedStickyOffsets(4);
+
+.field-type-gutter {
+  &--left {
+    margin-right: base(1.25);
+  }
+
+  &--right {
+    padding-right: 0;
+    padding-left: base(1.25);
+
+    .field-type-gutter__content {
+      margin-bottom: base(1);
+    }
+
+    .field-type-gutter__content-container {
+      padding-right: 0;
+      box-shadow: none !important;
+    }
+  }
+
+  &--v-align-top {
+    .field-type-gutter__content {
+      justify-content: flex-start;
+    }
+  }
+
+  &--v-align-sticky {
+    .field-type-gutter__content {
+      position: sticky;
+      top: $top-header-offset;
+      height: unset;
+    }
+  }
+
+  &__content-container {
+    padding-right: $style-stroke-width-s;
+    position: relative;
+    min-height: 100%;
+    box-shadow: #{$style-stroke-width-s} 0px 0px 0px $color-light-gray;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+  }
+
+  &--negative-gutter {
+    &.field-type-gutter--left {
+      position: absolute;
+      top: 0; right: 100%; bottom: 0;
+    }
+  }
+
+  @include mid-break {
+    &--left {
+      margin-right: base(1);
+
+      .field-type-gutter__content-container {
+        padding-right: $style-stroke-width-m;
+        padding-left: 0;
+      }
+    }
+
+    &--right {
+      padding-right: 0;
+    }
+  }
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
+export declare type Props = {
+    variant?: 'left' | 'right';
+    verticalAlignment?: 'top' | 'center' | 'sticky';
+    dragHandleProps?: DraggableProvidedDragHandleProps;
+    className?: string;
+    children?: React.ReactNode;
+};

package/dist/admin/components/forms/FieldTypeGutter/types.js

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

package/dist/admin/components/forms/Form/buildInitialState.d.ts

@@ -0,0 +1,2 @@
+declare const buildInitialState: (data: any) => {};
+export default buildInitialState;

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

@@ -0,0 +1,14 @@
+const buildInitialState = (data) => {
+    if (data) {
+        return Object.entries(data).reduce((state, [path, value]) => ({
+            ...state,
+            [path]: {
+                value,
+                initialValue: value,
+                valid: true,
+            },
+        }), {});
+    }
+    return undefined;
+};
+export default buildInitialState;

package/dist/admin/components/forms/Form/buildStateFromSchema/addFieldStatePromise.d.ts

@@ -0,0 +1,18 @@
+import { User } from '../../../../../auth';
+import { NonPresentationalField } from '../../../../../fields/config/types';
+import { Fields, Data } from '../types';
+declare type Args = {
+    field: NonPresentationalField;
+    locale: string;
+    user: User;
+    state: Fields;
+    path: string;
+    passesCondition: boolean;
+    fieldPromises: Promise<void>[];
+    id: string | number;
+    operation: 'create' | 'update';
+    data: Data;
+    fullData: Data;
+};
+export declare const addFieldStatePromise: ({ field, locale, user, state, path, passesCondition, fullData, data, fieldPromises, id, operation, }: Args) => Promise<void>;
+export {};

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

@@ -0,0 +1,160 @@
+/* eslint-disable no-param-reassign */
+import ObjectID from 'bson-objectid';
+import { fieldAffectsData, fieldHasSubFields } from '../../../../../fields/config/types';
+import getValueWithDefault from '../../../../../fields/getDefaultValue';
+import { iterateFields } from './iterateFields';
+export const addFieldStatePromise = async ({ field, locale, user, state, path, passesCondition, fullData, data, fieldPromises, id, operation, }) => {
+    var _a;
+    if (fieldAffectsData(field)) {
+        const fieldState = {
+            valid: true,
+            value: undefined,
+            initialValue: undefined,
+            validate: field.validate,
+            condition: (_a = field.admin) === null || _a === void 0 ? void 0 : _a.condition,
+            passesCondition,
+        };
+        const valueWithDefault = await getValueWithDefault({ value: data === null || data === void 0 ? void 0 : data[field.name], defaultValue: field.defaultValue, locale, user });
+        if (data === null || data === void 0 ? void 0 : data[field.name]) {
+            data[field.name] = valueWithDefault;
+        }
+        let validationResult = true;
+        if (typeof fieldState.validate === 'function') {
+            validationResult = await fieldState.validate(data === null || data === void 0 ? void 0 : data[field.name], {
+                ...field,
+                data: fullData,
+                user,
+                siblingData: data,
+                id,
+                operation,
+            });
+        }
+        if (typeof validationResult === 'string') {
+            fieldState.errorMessage = validationResult;
+            fieldState.valid = false;
+        }
+        else {
+            fieldState.valid = true;
+        }
+        switch (field.type) {
+            case 'array': {
+                const arrayValue = Array.isArray(valueWithDefault) ? valueWithDefault : [];
+                arrayValue.forEach((row, i) => {
+                    const rowPath = `${path}${field.name}.${i}.`;
+                    state[`${rowPath}id`] = {
+                        value: row.id,
+                        initialValue: row.id || new ObjectID().toHexString(),
+                        valid: true,
+                    };
+                    iterateFields({
+                        state,
+                        fields: field.fields,
+                        data: row,
+                        parentPassesCondition: passesCondition,
+                        path: rowPath,
+                        user,
+                        fieldPromises,
+                        fullData,
+                        id,
+                        locale,
+                        operation,
+                    });
+                });
+                // Add values to field state
+                fieldState.value = arrayValue.length;
+                fieldState.initialValue = arrayValue.length;
+                if (arrayValue.length > 0) {
+                    fieldState.disableFormData = true;
+                }
+                // Add field to state
+                state[`${path}${field.name}`] = fieldState;
+                break;
+            }
+            case 'blocks': {
+                const blocksValue = Array.isArray(valueWithDefault) ? valueWithDefault : [];
+                blocksValue.forEach((row, i) => {
+                    const block = field.blocks.find((blockType) => blockType.slug === row.blockType);
+                    const rowPath = `${path}${field.name}.${i}.`;
+                    if (block) {
+                        state[`${rowPath}id`] = {
+                            value: row.id,
+                            initialValue: row.id || new ObjectID().toHexString(),
+                            valid: true,
+                        };
+                        state[`${rowPath}blockType`] = {
+                            value: row.blockType,
+                            initialValue: row.blockType,
+                            valid: true,
+                        };
+                        state[`${rowPath}blockName`] = {
+                            value: row.blockName,
+                            initialValue: row.blockName,
+                            valid: true,
+                        };
+                        iterateFields({
+                            state,
+                            fields: block.fields,
+                            data: row,
+                            fullData,
+                            parentPassesCondition: passesCondition,
+                            path: rowPath,
+                            user,
+                            locale,
+                            operation,
+                            fieldPromises,
+                            id,
+                        });
+                    }
+                });
+                // Add values to field state
+                fieldState.value = blocksValue.length;
+                fieldState.initialValue = blocksValue.length;
+                if (blocksValue.length > 0) {
+                    fieldState.disableFormData = true;
+                }
+                // Add field to state
+                state[`${path}${field.name}`] = fieldState;
+                break;
+            }
+            case 'group': {
+                iterateFields({
+                    state,
+                    id,
+                    operation,
+                    fieldPromises,
+                    fields: field.fields,
+                    data: data === null || data === void 0 ? void 0 : data[field.name],
+                    fullData,
+                    parentPassesCondition: passesCondition,
+                    path: `${path}${field.name}.`,
+                    locale,
+                    user,
+                });
+                break;
+            }
+            default: {
+                fieldState.value = valueWithDefault;
+                fieldState.initialValue = valueWithDefault;
+                // Add field to state
+                state[`${path}${field.name}`] = fieldState;
+                break;
+            }
+        }
+    }
+    else if (fieldHasSubFields(field)) {
+        // Handle field types that do not use names (row, etc)
+        iterateFields({
+            state,
+            fields: field.fields,
+            data,
+            parentPassesCondition: passesCondition,
+            path,
+            user,
+            fieldPromises,
+            fullData,
+            id,
+            locale,
+            operation,
+        });
+    }
+};

package/dist/admin/components/forms/Form/buildStateFromSchema/index.d.ts

@@ -0,0 +1,14 @@
+import { User } from '../../../../../auth';
+import { Field as FieldSchema } from '../../../../../fields/config/types';
+import { Fields, Data } from '../types';
+declare type Args = {
+    fieldSchema: FieldSchema[];
+    data?: Data;
+    siblingData?: Data;
+    user?: User;
+    id?: string | number;
+    operation?: 'create' | 'update';
+    locale: string;
+};
+declare const buildStateFromSchema: (args: Args) => Promise<Fields>;
+export default buildStateFromSchema;

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

@@ -0,0 +1,25 @@
+import { iterateFields } from './iterateFields';
+const buildStateFromSchema = async (args) => {
+    const { fieldSchema, data: fullData = {}, user, id, operation, locale, } = args;
+    if (fieldSchema) {
+        const fieldPromises = [];
+        const state = {};
+        iterateFields({
+            state,
+            fields: fieldSchema,
+            id,
+            locale,
+            operation,
+            path: '',
+            user,
+            fieldPromises,
+            data: fullData,
+            fullData,
+            parentPassesCondition: true,
+        });
+        await Promise.all(fieldPromises);
+        return state;
+    }
+    return {};
+};
+export default buildStateFromSchema;

package/dist/admin/components/forms/Form/buildStateFromSchema/iterateFields.d.ts

@@ -0,0 +1,18 @@
+import { User } from '../../../../../auth';
+import { Field as FieldSchema } from '../../../../../fields/config/types';
+import { Fields, Data } from '../types';
+declare type Args = {
+    state: Fields;
+    fields: FieldSchema[];
+    data: Data;
+    fullData: Data;
+    parentPassesCondition: boolean;
+    path: string;
+    user: User;
+    locale: string;
+    fieldPromises: Promise<void>[];
+    id: string | number;
+    operation: 'create' | 'update';
+};
+export declare const iterateFields: ({ fields, data, parentPassesCondition, path, fullData, user, locale, operation, fieldPromises, id, state, }: Args) => void;
+export {};