payload 1.3.3 → 1.4.0

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

@@ -1,5 +1,5 @@
 import { Block } from '../../../../../../../fields/config/types';
-export type Props = {
+export declare type Props = {
     addRow: (i: number, block: string) => void;
     addRowIndex: number;
     block: Block;

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

@@ -1,5 +1,5 @@
 import { Block } from '../../../../../../../fields/config/types';
-export type Props = {
+export declare type Props = {
     blocks: Block[];
     close: () => void;
     addRow: (i: number, block: string) => void;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,4 @@
-export type Props = {
+export declare type Props = {
     name: string;
     path?: string;
     value: unknown;

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

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

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Validate } from '../../../../../fields/config/types';
 import { Description } from '../../FieldDescription/types';
-export type Props = {
+export declare type Props = {
     autoComplete?: string;
     path?: string;
     name: string;

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

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

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

@@ -3,7 +3,7 @@ import { RadioField } from '../../../../../fields/config/types';
 import { Description } from '../../FieldDescription/types';
 import { OnChange } from './types';
 import './index.scss';
-export type RadioGroupInputProps = Omit<RadioField, 'type'> & {
+export declare type RadioGroupInputProps = Omit<RadioField, 'type'> & {
     showError?: boolean;
     errorMessage?: string;
     readOnly?: boolean;

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

@@ -1,5 +1,5 @@
 import { OnChange } from '../types';
-export type Props = {
+export declare type Props = {
     isSelected: boolean;
     option: {
         label: Record<string, string> | string;

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

@@ -1,5 +1,5 @@
 import { RadioField } from '../../../../../fields/config/types';
-export type Props = Omit<RadioField, 'type'> & {
+export declare type Props = Omit<RadioField, 'type'> & {
     path?: string;
 };
-export type OnChange<T = string> = (value: T) => void;
+export declare type OnChange<T = string> = (value: T) => void;

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

@@ -10,7 +10,8 @@
     height: 100%;
   }
 
-  &__add-button {
+  &__add-button,
+  &__add-button.doc-drawer__toggler {
     @include formInput;
     position: relative;
     height: 100%;
@@ -35,7 +36,6 @@
   &__relation-button {
     @extend %btn-reset;
     cursor: pointer;
-    @extend %btn-reset;
     display: block;
     padding: base(.125) 0;
     text-align: center;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Action } from '../types';
-export type Props = {
+export declare type Props = {
     hasMany: boolean;
     relationTo: string | string[];
     path: string;

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

@@ -1,6 +1,6 @@
 import { FilterOptions } from '../../../../../../fields/config/types';
 import { FilterOptionsResult } from '../types';
-type Args = {
+declare type Args = {
     filterOptions: FilterOptions;
     filterOptionsResult: FilterOptionsResult;
     setFilterOptionsResult: (optionFilters: FilterOptionsResult) => void;

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

@@ -1,7 +1,7 @@
-type RelationMap = {
+declare type RelationMap = {
     [relation: string]: unknown[];
 };
-type CreateRelationMap = (args: {
+declare type CreateRelationMap = (args: {
     hasMany: boolean;
     relationTo: string | string[];
     value: unknown;

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

@@ -1,6 +1,6 @@
 import { Option } from '../../../elements/ReactSelect/types';
 import { OptionGroup, Value } from './types';
-type Args = {
+declare type Args = {
     value: Value | Value[];
     options: OptionGroup[];
 };

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

@@ -80,6 +80,7 @@ const Relationship = (props) => {
                         limit: maxResultsPerRequest,
                         page: lastLoadedPageToUse,
                         sort: fieldToSearch,
+                        locale: i18n.language,
                         depth: 0,
                     };
                     if (searchArg) {
@@ -170,6 +171,7 @@ const Relationship = (props) => {
                         },
                     },
                     depth: 0,
+                    locale: i18n.language,
                     limit: idsToLoad.length,
                 };
                 if (!errorLoading) {
@@ -225,6 +227,9 @@ const Relationship = (props) => {
         setLastLoadedPage(1);
         setHasLoadedFirstPage(false);
     }, [relationTo, filterOptionsResult]);
+    const onSave = useCallback((args) => {
+        dispatchOptions({ type: 'UPDATE', doc: args.doc, collection: args.collectionConfig, i18n });
+    }, [i18n]);
     const classes = [
         'field-type',
         baseClass,
@@ -283,6 +288,7 @@ const Relationship = (props) => {
                     disableMouseDown: drawerIsOpen,
                     disableKeyDown: drawerIsOpen,
                     setDrawerIsOpen,
+                    onSave,
                 }, onMenuOpen: () => {
                     if (!hasLoadedFirstPage) {
                         setIsLoading(true);

package/dist/admin/components/forms/field-types/Relationship/optionsReducer.js

@@ -19,10 +19,24 @@ const sortOptions = (options) => options.sort((a, b) => {
     return 0;
 });
 const optionsReducer = (state, action) => {
+    var _a;
     switch (action.type) {
         case 'CLEAR': {
             return [];
         }
+        case 'UPDATE': {
+            const { collection, doc, i18n } = action;
+            const relation = collection.slug;
+            const newOptions = [...state];
+            const labelKey = collection.admin.useAsTitle || 'id';
+            const foundOptionGroup = newOptions.find((optionGroup) => optionGroup.label === collection.labels.plural);
+            const foundOption = (_a = foundOptionGroup === null || foundOptionGroup === void 0 ? void 0 : foundOptionGroup.options) === null || _a === void 0 ? void 0 : _a.find((option) => option.value === doc.id);
+            if (foundOption) {
+                foundOption.label = doc[labelKey] || `${i18n.t('general:untitled')} - ID: ${doc.id}`;
+                foundOption.relationTo = relation;
+            }
+            return newOptions;
+        }
         case 'ADD': {
             const { collection, docs, sort, ids = [], i18n } = action;
             const relation = collection.slug;

package/dist/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.js

@@ -9,7 +9,7 @@ import './index.scss';
 const baseClass = 'relationship--multi-value-label';
 export const MultiValueLabel = (props) => {
     var _a, _b, _c;
-    const { data: { value, relationTo, label, }, selectProps: { setDrawerIsOpen, draggableProps, }, } = props;
+    const { data: { value, relationTo, label, }, selectProps: { setDrawerIsOpen, draggableProps, onSave, }, } = props;
     const { permissions } = useAuth();
     const [showTooltip, setShowTooltip] = useState(false);
     const { t } = useTranslation('general');
@@ -32,5 +32,5 @@ export const MultiValueLabel = (props) => {
             React.createElement(DocumentDrawerToggler, { className: `${baseClass}__drawer-toggler`, "aria-label": `Edit ${label}`, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onClick: () => setShowTooltip(false) },
                 React.createElement(Tooltip, { className: `${baseClass}__tooltip`, show: showTooltip }, t('editLabel', { label: '' })),
                 React.createElement(Edit, null)),
-            React.createElement(DocumentDrawer, null)))));
+            React.createElement(DocumentDrawer, { onSave: onSave })))));
 };

package/dist/admin/components/forms/field-types/Relationship/select-components/MultiValueLabel/index.scss

@@ -15,14 +15,11 @@
   &__text {
     text-overflow: ellipsis;
     overflow: hidden;
+    white-space: nowrap;
   }
 
   &__drawer-toggler {
     position: relative;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;

package/dist/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.js

@@ -9,7 +9,7 @@ import './index.scss';
 const baseClass = 'relationship--single-value';
 export const SingleValue = (props) => {
     var _a, _b, _c;
-    const { data: { value, relationTo, label, }, children, selectProps: { selectProps: { setDrawerIsOpen, }, }, } = props;
+    const { data: { value, relationTo, label, }, children, selectProps: { selectProps: { setDrawerIsOpen, onSave, }, }, } = props;
     const [showTooltip, setShowTooltip] = useState(false);
     const { t } = useTranslation('general');
     const { permissions } = useAuth();
@@ -30,5 +30,5 @@ export const SingleValue = (props) => {
                     React.createElement(DocumentDrawerToggler, { className: `${baseClass}__drawer-toggler`, "aria-label": t('editLabel', { label }), onMouseDown: (e) => e.stopPropagation(), onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onClick: () => setShowTooltip(false) },
                         React.createElement(Tooltip, { className: `${baseClass}__tooltip`, show: showTooltip }, t('edit')),
                         React.createElement(Edit, null)))))),
-        relationTo && hasReadPermission && (React.createElement(DocumentDrawer, null))));
+        relationTo && hasReadPermission && (React.createElement(DocumentDrawer, { onSave: onSave }))));
 };

package/dist/admin/components/forms/field-types/Relationship/select-components/SingleValue/index.scss

@@ -10,14 +10,17 @@
     display: flex;
     align-items: center;
     overflow: visible;
+    width: 100%;
+    flex-shrink: 1;
+  }
+
+  &__text {
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &__drawer-toggler {
     position: relative;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 0;
     display: inline-flex;
     align-items: center;
     justify-content: center;

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

@@ -2,27 +2,33 @@ import i18n from 'i18next';
 import { SanitizedCollectionConfig } from '../../../../../collections/config/types';
 import { RelationshipField } from '../../../../../fields/config/types';
 import { Where } from '../../../../../types';
-export type Props = Omit<RelationshipField, 'type'> & {
+export declare type Props = Omit<RelationshipField, 'type'> & {
     path?: string;
 };
-export type Option = {
+export declare type Option = {
     label: string;
     value: string | number;
     relationTo?: string;
     options?: Option[];
 };
-export type OptionGroup = {
+export declare type OptionGroup = {
     label: string;
     options: Option[];
 };
-export type Value = {
+export declare type Value = {
     relationTo: string;
     value: string | number;
 } | string | number;
-type CLEAR = {
+declare type CLEAR = {
     type: 'CLEAR';
 };
-type ADD = {
+declare type UPDATE = {
+    type: 'UPDATE';
+    doc: any;
+    collection: SanitizedCollectionConfig;
+    i18n: typeof i18n;
+};
+declare type ADD = {
     type: 'ADD';
     docs: any[];
     collection: SanitizedCollectionConfig;
@@ -30,12 +36,12 @@ type ADD = {
     ids?: unknown[];
     i18n: typeof i18n;
 };
-export type Action = CLEAR | ADD;
-export type ValueWithRelation = {
+export declare type Action = CLEAR | ADD | UPDATE;
+export declare type ValueWithRelation = {
     relationTo: string;
     value: string;
 };
-export type GetResults = (args: {
+export declare type GetResults = (args: {
     lastFullyLoadedRelation?: number;
     lastLoadedPage?: number;
     search?: string;
@@ -43,7 +49,7 @@ export type GetResults = (args: {
     sort?: boolean;
     onSuccess?: () => void;
 }) => Promise<void>;
-export type FilterOptionsResult = {
+export declare type FilterOptionsResult = {
     [relation: string]: Where;
 };
 export {};

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

@@ -2,21 +2,13 @@ import React from 'react';
 import { BaseEditor } from 'slate';
 import { ReactEditor } from 'slate-react';
 import { HistoryEditor } from 'slate-history';
-import { Props } from './types';
+import { ElementNode, TextNode, Props } from './types';
 import './index.scss';
-type CustomText = {
-    text: string;
-    [x: string]: unknown;
-};
-type CustomElement = {
-    type?: string;
-    children: CustomText[];
-};
 declare module 'slate' {
     interface CustomTypes {
         Editor: BaseEditor & ReactEditor & HistoryEditor;
-        Element: CustomElement;
-        Text: CustomText;
+        Element: ElementNode;
+        Text: TextNode;
     }
 }
 declare const _default: React.FC<Props>;

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

@@ -21,6 +21,7 @@ import listTypes from './elements/listTypes';
 import mergeCustomFunctions from './mergeCustomFunctions';
 import withEnterBreakOut from './plugins/withEnterBreakOut';
 import { getTranslation } from '../../../../../utilities/getTranslation';
+import { useEditDepth } from '../../../utilities/EditDepth';
 import './index.scss';
 const defaultElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'indent', 'link', 'relationship', 'upload'];
 const defaultLeaves = ['bold', 'italic', 'underline', 'strikethrough', 'code'];
@@ -36,6 +37,8 @@ const RichText = (props) => {
     const [enabledLeaves, setEnabledLeaves] = useState({});
     const editorRef = useRef(null);
     const toolbarRef = useRef(null);
+    const drawerDepth = useEditDepth();
+    const drawerIsOpen = drawerDepth > 1;
     const renderElement = useCallback(({ attributes, children, element }) => {
         const matchedElement = enabledElements[element === null || element === void 0 ? void 0 : element.type];
         const Element = matchedElement === null || matchedElement === void 0 ? void 0 : matchedElement.Element;
@@ -115,13 +118,13 @@ const RichText = (props) => {
         };
     }, [loaded, readOnly]);
     useEffect(() => {
-        // If there is a change to the initial value, we need to reset Slate
-        // to the new initial value, and clear selection
+        // If there is a change to the initial value, we need to reset Slate history
+        // and clear selection because the old selection may no longer be valid
+        // as returned JSON may be modified in hooks and have a different shape
         if (Array.isArray(initialValue) && initialValue.length > 0) {
             if (editor.selection)
                 ReactEditor.deselect(editor);
             editor.history = { redos: [], undos: [] };
-            editor.children = initialValue;
         }
     }, [initialValue, editor]);
     if (!loaded) {
@@ -152,7 +155,10 @@ const RichText = (props) => {
                     }
                 } },
                 React.createElement("div", { className: `${baseClass}__wrapper` },
-                    React.createElement("div", { className: `${baseClass}__toolbar`, ref: toolbarRef },
+                    React.createElement("div", { className: [
+                            `${baseClass}__toolbar`,
+                            drawerIsOpen && `${baseClass}__drawerIsOpen`,
+                        ].filter(Boolean).join(' '), ref: toolbarRef },
                         React.createElement("div", { className: `${baseClass}__toolbar-wrap` },
                             elements.map((element, i) => {
                                 let elementName;
@@ -209,12 +215,14 @@ const RichText = (props) => {
                                     const selectedElement = Node.descendant(editor, editor.selection.anchor.path.slice(0, -1));
                                     if (SlateElement.isElement(selectedElement) && selectedElement.type === 'li') {
                                         const selectedLeaf = Node.descendant(editor, editor.selection.anchor.path);
-                                        if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 1) {
+                                        if (Text.isText(selectedLeaf) && String(selectedLeaf.text).length === 0) {
+                                            event.preventDefault();
                                             Transforms.unwrapNodes(editor, {
                                                 match: (n) => SlateElement.isElement(n) && listTypes.includes(n.type),
                                                 split: true,
+                                                mode: 'lowest',
                                             });
-                                            Transforms.setNodes(editor, {});
+                                            Transforms.setNodes(editor, { type: undefined });
                                         }
                                     }
                                     else if (editor.isVoid(selectedElement)) {

package/dist/admin/components/forms/field-types/RichText/buttons.scss

@@ -1,6 +1,9 @@
 @import '../../../../scss/styles.scss';
 
 .rich-text__button {
+  position: relative;
+  cursor: pointer;
+
   svg {
     width: base(.75);
     height: base(.75);

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

@@ -1,19 +1,26 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
 import { useSlate } from 'slate-react';
 import isElementActive from './isActive';
 import toggleElement from './toggle';
+import Tooltip from '../../../../elements/Tooltip';
 import '../buttons.scss';
 export const baseClass = 'rich-text__button';
-const ElementButton = ({ format, children, onClick, className }) => {
+const ElementButton = (props) => {
+    const { format, children, onClick, className, tooltip, el = 'button', } = props;
     const editor = useSlate();
+    const [showTooltip, setShowTooltip] = useState(false);
     const defaultOnClick = useCallback((event) => {
         event.preventDefault();
+        setShowTooltip(false);
         toggleElement(editor, format);
     }, [editor, format]);
-    return (React.createElement("button", { type: "button", className: [
+    const Tag = el;
+    return (React.createElement(Tag, { ...el === 'button' && { type: 'button' }, className: [
             baseClass,
             className,
             isElementActive(editor, format) && `${baseClass}__button--active`,
-        ].filter(Boolean).join(' '), onClick: onClick || defaultOnClick }, children));
+        ].filter(Boolean).join(' '), onClick: onClick || defaultOnClick, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false) },
+        tooltip && (React.createElement(Tooltip, { show: showTooltip }, tooltip)),
+        children));
 };
 export default ElementButton;

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

@@ -1,14 +1,14 @@
 import React, { useCallback } from 'react';
 import { useSlate } from 'slate-react';
+import toggleList from './toggleList';
 import isListActive from './isListActive';
-import toggleElement from './toggle';
 import '../buttons.scss';
 export const baseClass = 'rich-text__button';
 const ListButton = ({ format, children, onClick, className }) => {
     const editor = useSlate();
     const defaultOnClick = useCallback((event) => {
         event.preventDefault();
-        toggleElement(editor, format);
+        toggleList(editor, format);
     }, [editor, format]);
     return (React.createElement("button", { type: "button", className: [
             baseClass,

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

@@ -0,0 +1,2 @@
+import { Node } from 'slate';
+export declare const areAllChildrenElements: (node: Node) => boolean;

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

@@ -0,0 +1,4 @@
+import { Element } from 'slate';
+export const areAllChildrenElements = (node) => {
+    return Array.isArray(node.children) && node.children.every((child) => Element.isElement(child));
+};

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

@@ -0,0 +1,2 @@
+import { Editor, Node, NodeEntry, NodeMatch } from 'slate';
+export declare const getCommonBlock: (editor: Editor, match?: NodeMatch<Node>) => NodeEntry<Node>;

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

@@ -0,0 +1,12 @@
+import { Editor, Node } from 'slate';
+export const getCommonBlock = (editor, match) => {
+    const range = Editor.unhangRange(editor, editor.selection, { voids: true });
+    const [common, path] = Node.common(editor, range.anchor.path, range.focus.path);
+    if (Editor.isBlock(editor, common) || Editor.isEditor(common)) {
+        return [common, path];
+    }
+    return Editor.above(editor, {
+        at: path,
+        match: match || ((n) => Editor.isBlock(editor, n) || Editor.isEditor(n)),
+    });
+};