payload 0.20.1 → 0.20.4-beta.0

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

@@ -0,0 +1,49 @@
+@import '../../../../../scss/styles.scss';
+
+.section-title {
+  margin-left: base(.375);
+  position: relative;
+
+  &:after {
+    display: block;
+    content: attr(data-value) ' ';
+    visibility: hidden;
+    white-space: nowrap;
+    min-width: base(3);
+  }
+
+  &:after,
+  &__input {
+    font-family: var(--font-body);
+    font-weight: 600;
+    font-size: base(.625);
+    padding: 0;
+  }
+
+  &__input {
+    color: var(--theme-elevation-800);
+    background-color: transparent;
+    border: none;
+    width: auto;
+    resize: none;
+    appearance: none;
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    &:hover {
+      box-shadow: inset 0px -2px 0px -1px var(--theme-elevation-150);
+    }
+
+    &:hover,
+    &:focus {
+      outline: 0;
+    }
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+}

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

@@ -1,5 +1,4 @@
 export declare type Props = {
     path: string;
-    label: string;
     readOnly: boolean;
 };

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

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

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

@@ -32,7 +32,7 @@ const Checkbox = (props) => {
         } },
         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("input", { id: `field-${path}`, type: "checkbox", name: path, checked: Boolean(value), readOnly: true }),
         React.createElement("button", { type: "button", onClick: readOnly ? undefined : () => {
                 setValue(!value);
                 if (typeof onChange === 'function')

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

@@ -67,11 +67,11 @@
   &--read-only {
 
     .checkbox__label {
-      color: $color-gray;
+      color: var(--theme-elevation-400);
     }
 
     .checkbox__input {
-      background-color: lighten($color-light-gray, 5%);
+      background-color: var(--theme-elevation-100);
     }
   }
 }

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

@@ -40,10 +40,10 @@ const Code = (props) => {
             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',
+        React.createElement(Label, { htmlFor: `field-${path}`, label: label, required: required }),
+        React.createElement(Editor, { id: `field-${path}`, value: value || '', onValueChange: readOnly ? () => null : setValue, highlight: highlighter, padding: 25, style: {
+                backgroundColor: 'var(--theme-base-850)',
+                color: 'var(--theme-base-0)',
                 fontFamily: '"Consolas", "Monaco", monospace',
                 fontSize: 12,
                 pointerEvents: readOnly ? 'none' : 'auto',

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

@@ -6,7 +6,7 @@
 
   &.error {
     textarea {
-      border: 1px solid $color-red !important;
+      border: 1px solid var(--theme-error-500) !important;
     }
   }
 }
@@ -47,13 +47,13 @@ pre[class*="language-"] {
   border-radius: 0.3em;
 }
 
-:not(pre) > code[class*="language-"],
+:not(pre)>code[class*="language-"],
 pre[class*="language-"] {
-  background: #1d1f21;
+  background: var(--theme-base-100);
 }
 
 /* Inline code */
-:not(pre) > code[class*="language-"] {
+:not(pre)>code[class*="language-"] {
   padding: 0.1em;
   border-radius: 0.3em;
 }

package/dist/admin/components/forms/{FieldTypeGutter → field-types/Collapsible}/index.d.ts

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

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

@@ -0,0 +1,44 @@
+import React, { useCallback, 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 './index.scss';
+const baseClass = 'collapsible-field';
+const CollapsibleField = (props) => {
+    var _a;
+    const { label, fields, fieldTypes, path, permissions, admin: { readOnly, className, description, }, } = props;
+    const { getPreference, setPreference } = usePreferences();
+    const { preferencesKey, preferences } = useDocumentInfo();
+    const [fieldPreferencesKey] = useState(() => `collapsible-${toKebabCase(label)}`);
+    const onToggle = useCallback(async (newCollapsedState) => {
+        var _a;
+        const existingPreferences = await getPreference(preferencesKey);
+        setPreference(preferencesKey, {
+            ...existingPreferences,
+            fields: {
+                ...(existingPreferences === null || existingPreferences === void 0 ? void 0 : existingPreferences.fields) || {},
+                [fieldPreferencesKey]: {
+                    ...(_a = existingPreferences === null || existingPreferences === void 0 ? void 0 : existingPreferences.fields) === null || _a === void 0 ? void 0 : _a[fieldPreferencesKey],
+                    collapsed: newCollapsedState,
+                },
+            },
+        });
+    }, [preferencesKey, fieldPreferencesKey, getPreference, setPreference]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Collapsible, { initCollapsed: Boolean((_a = preferences.fields[fieldPreferencesKey]) === null || _a === void 0 ? void 0 : _a.collapsed), className: [
+                'field-type',
+                baseClass,
+                className,
+            ].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 : ''}`,
+                })) })),
+        React.createElement(FieldDescription, { description: description })));
+};
+export default withCondition(CollapsibleField);

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

@@ -0,0 +1,11 @@
+@import '../../../../scss/styles.scss';
+
+.collapsible-field {
+  &__label {
+    pointer-events: none;
+  }
+
+  .field-type:last-child {
+    margin-bottom: 0;
+  }
+}

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

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

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

@@ -26,7 +26,7 @@ const ConfirmPassword = () => {
     ].filter(Boolean).join(' ');
     return (React.createElement("div", { className: classes },
         React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: "confirm-password", label: "Confirm Password", required: true }),
-        React.createElement("input", { value: value || '', onChange: setValue, type: "password", autoComplete: "off", id: "confirm-password", name: "confirm-password" })));
+        React.createElement(Label, { htmlFor: "field-confirm-password", label: "Confirm Password", required: true }),
+        React.createElement("input", { value: value || '', onChange: setValue, type: "password", autoComplete: "off", id: "field-confirm-password", name: "confirm-password" })));
 };
 export default ConfirmPassword;

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

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

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

@@ -33,7 +33,7 @@ const DateTime = (props) => {
         React.createElement("div", { className: `${baseClass}__error-wrap` },
             React.createElement(Error, { showError: showError, message: errorMessage })),
         React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        React.createElement("div", { className: `${baseClass}__input-wrapper` },
+        React.createElement("div", { className: `${baseClass}__input-wrapper`, id: `field-${path}` },
             React.createElement(DatePicker, { ...date, placeholder: placeholder, readOnly: readOnly, onChange: readOnly ? undefined : setValue, value: value })),
         React.createElement(FieldDescription, { value: value, description: description })));
 };

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

@@ -9,7 +9,7 @@
 
   &--has-error {
     .react-datepicker__input-container input {
-      background-color: lighten($color-red, 20%);
+      background-color: var(--theme-error-200);
     }
   }
 }

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

@@ -32,7 +32,7 @@ const Email = (props) => {
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
         React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        React.createElement("input", { value: value || '', onChange: setValue, disabled: Boolean(readOnly), placeholder: placeholder, type: "email", id: path, name: path, autoComplete: autoComplete }),
+        React.createElement("input", { id: `field-${path}`, value: value || '', onChange: setValue, disabled: Boolean(readOnly), placeholder: placeholder, type: "email", name: path, autoComplete: autoComplete }),
         React.createElement(FieldDescription, { value: value, description: description })));
 };
 export default withCondition(Email);

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

@@ -4,13 +4,13 @@
   margin-bottom: $baseline;
   position: relative;
 
-	input {
-		@include formInput;
-	}
+  input {
+    @include formInput;
+  }
 
-	&.error {
-		input {
-      background-color: lighten($color-red, 20%);
-		}
-	}
+  &.error {
+    input {
+      background-color: var(--theme-error-200);
+    }
+  }
 }

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

@@ -2,33 +2,30 @@ import React from 'react';
 import RenderFields from '../../RenderFields';
 import withCondition from '../../withCondition';
 import FieldDescription from '../../FieldDescription';
-import FieldTypeGutter from '../../FieldTypeGutter';
-import { NegativeFieldGutterProvider } from '../../FieldTypeGutter/context';
 import { fieldAffectsData } from '../../../../../fields/config/types';
+import { useCollapsible } from '../../../elements/Collapsible/provider';
 import './index.scss';
-const baseClass = 'group';
+const baseClass = 'group-field';
 const Group = (props) => {
-    const { label, fields, name, path: pathFromProps, fieldTypes, admin: { readOnly, style, className, width, hideGutter, description, }, permissions, } = props;
+    const { label, fields, name, path: pathFromProps, fieldTypes, admin: { readOnly, style, className, width, description, }, permissions, } = props;
+    const isWithinCollapsible = useCollapsible();
     const path = pathFromProps || name;
-    return (React.createElement("div", { className: [
+    return (React.createElement("div", { id: `field-${path}`, className: [
             'field-type',
             baseClass,
+            isWithinCollapsible && `${baseClass}--within-collapsible`,
             className,
-            !label && `${baseClass}--no-label`,
         ].filter(Boolean).join(' '), style: {
             ...style,
             width,
         } },
-        !hideGutter && (React.createElement(FieldTypeGutter, null)),
-        React.createElement("div", { className: `${baseClass}__content-wrapper` },
+        React.createElement("div", { className: `${baseClass}__wrap` },
             (label || description) && (React.createElement("header", { className: `${baseClass}__header` },
                 label && (React.createElement("h3", { className: `${baseClass}__title` }, label)),
                 React.createElement(FieldDescription, { value: null, description: description }))),
-            React.createElement("div", { className: `${baseClass}__fields-wrapper` },
-                React.createElement(NegativeFieldGutterProvider, { allow: false },
-                    React.createElement(RenderFields, { permissions: permissions === null || permissions === void 0 ? void 0 : permissions.fields, readOnly: readOnly, fieldTypes: fieldTypes, fieldSchema: fields.map((subField) => ({
-                            ...subField,
-                            path: `${path}${fieldAffectsData(subField) ? `.${subField.name}` : ''}`,
-                        })) }))))));
+            React.createElement(RenderFields, { permissions: permissions === null || permissions === void 0 ? void 0 : permissions.fields, readOnly: readOnly, fieldTypes: fieldTypes, fieldSchema: fields.map((subField) => ({
+                    ...subField,
+                    path: `${path}${fieldAffectsData(subField) ? `.${subField.name}` : ''}`,
+                })) }))));
 };
 export default withCondition(Group);

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

@@ -1,50 +1,38 @@
 @import '../../../../scss/styles.scss';
 
-.group {
-  margin-top: base(2);
-  margin-bottom: base(2);
-  display: flex;
-  position: relative;
-
-  &__header {
-    margin-bottom: base(1);
-  }
-
-  &__title {
-    margin-bottom: 0;
-  }
-
-  &:hover {
-    .field-type-gutter__content-container {
-      box-shadow: #{$style-stroke-width-m} 0px 0px 0px $color-dark-gray;
+.group-field {
+  margin: base(2) calc(var(--gutter-h) * -1);
+  padding: base(2) var(--gutter-h);
+  border-top: 1px solid var(--theme-elevation-100);
+  border-bottom: 1px solid var(--theme-elevation-100);
+
+  &--within-collapsible {
+    margin: $baseline calc(#{$baseline} * -1);
+    padding: $baseline;
+
+    &:first-child {
+      border-top: 0;
+      padding-top: 0;
     }
-  }
 
-  &__content-wrapper {
-    width: 100%;
-  }
-
-  &__fields-wrapper {
-    position: relative;
+    &:last-child {
+      padding-bottom: 0;
+      border-bottom: 0;
+    }
   }
 
-  .render-fields {
-    width: 100%;
-
-    .row {
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
+  &__header {
+    margin-bottom: base(.75);
   }
 
-  &--no-label {
-    margin-top: 0,
+  &__title {
+    margin-bottom: 0;
   }
 
-  @include mid-break {
-    &__fields-wrapper {
-      display: flex;
+  @include small-break {
+    &--within-collapsible {
+      margin-left: calc(var(--gutter-h) * -1);
+      margin-right: calc(var(--gutter-h) * -1);
     }
   }
 }

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

@@ -12,6 +12,6 @@ const HiddenInput = (props) => {
             setValue(valueFromProps, disableModifyingForm);
         }
     }, [valueFromProps, setValue, disableModifyingForm]);
-    return (React.createElement("input", { type: "hidden", value: value || '', onChange: setValue, name: path }));
+    return (React.createElement("input", { id: `field-${path}`, type: "hidden", value: value || '', onChange: setValue, name: path }));
 };
 export default withCondition(HiddenInput);

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

@@ -39,8 +39,8 @@ const NumberField = (props) => {
             width,
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        React.createElement("input", { value: typeof value === 'number' ? value : '', onChange: handleChange, disabled: readOnly, placeholder: placeholder, type: "number", id: path, name: path, step: step }),
+        React.createElement(Label, { htmlFor: `field-${path}`, label: label, required: required }),
+        React.createElement("input", { id: `field-${path}`, value: typeof value === 'number' ? value : '', onChange: handleChange, disabled: readOnly, placeholder: placeholder, type: "number", name: path, step: step }),
         React.createElement(FieldDescription, { value: value, description: description })));
 };
 export default withCondition(NumberField);

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

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

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

@@ -28,7 +28,7 @@ const Password = (props) => {
             width,
         } },
         React.createElement(Error, { showError: showError, message: errorMessage }),
-        React.createElement(Label, { htmlFor: path, label: label, required: required }),
-        React.createElement("input", { value: value || '', onChange: setValue, disabled: formProcessing, type: "password", autoComplete: autoComplete, id: path, name: path })));
+        React.createElement(Label, { htmlFor: `field-${path}`, label: label, required: required }),
+        React.createElement("input", { id: `field-${path}`, value: value || '', onChange: setValue, disabled: formProcessing, type: "password", autoComplete: autoComplete, name: path })));
 };
 export default withCondition(Password);

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

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

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

@@ -42,11 +42,11 @@ const PointField = (props) => {
         React.createElement(Error, { showError: showError, message: errorMessage }),
         React.createElement("ul", { className: `${baseClass}__wrap` },
             React.createElement("li", null,
-                React.createElement(Label, { htmlFor: `${path}.longitude`, label: `${label} - Longitude`, required: required }),
-                React.createElement("input", { value: (value && typeof value[0] === 'number') ? value[0] : '', onChange: (e) => handleChange(e, 0), disabled: readOnly, placeholder: placeholder, type: "number", id: `${path}.longitude`, name: `${path}.longitude`, step: step })),
+                React.createElement(Label, { htmlFor: `field-longitude-${path}`, label: `${label} - Longitude`, required: required }),
+                React.createElement("input", { id: `field-longitude-${path}`, value: (value && typeof value[0] === 'number') ? value[0] : '', onChange: (e) => handleChange(e, 0), disabled: readOnly, placeholder: placeholder, type: "number", name: `${path}.longitude`, step: step })),
             React.createElement("li", null,
-                React.createElement(Label, { htmlFor: `${path}.latitude`, label: `${label} - Latitude`, required: required }),
-                React.createElement("input", { value: (value && typeof value[1] === 'number') ? value[1] : '', onChange: (e) => handleChange(e, 1), disabled: readOnly, placeholder: placeholder, type: "number", id: `${path}.latitude`, name: `${path}.latitude`, step: step }))),
+                React.createElement(Label, { htmlFor: `field-latitude-${path}`, label: `${label} - Latitude`, required: required }),
+                React.createElement("input", { id: `field-latitude-${path}`, value: (value && typeof value[1] === 'number') ? value[1] : '', onChange: (e) => handleChange(e, 1), disabled: readOnly, placeholder: placeholder, type: "number", name: `${path}.latitude`, step: step }))),
         React.createElement(FieldDescription, { value: value, description: description })));
 };
 export default withCondition(PointField);