@webiny/app-headless-cms 5.32.0 → 5.33.0-beta.1

package/admin/components/FieldEditor/FieldEditorContext.js

@@ -17,8 +17,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _dotPropImmutable = _interopRequireDefault(require("dot-prop-immutable"));
 
-var _shortid = _interopRequireDefault(require("shortid"));
-
 var _useDeepCompareEffect = _interopRequireDefault(require("use-deep-compare-effect"));
 
 var _plugins = require("@webiny/plugins");
@@ -27,6 +25,8 @@ var utils = _interopRequireWildcard(require("./utils"));
 
 var _useFieldEditor = require("./useFieldEditor");
 
+var _utils2 = require("@webiny/utils");
+
 var FieldEditorContext = /*#__PURE__*/_react.default.createContext(
 /**
  * Safe to cast.
@@ -34,8 +34,32 @@ var FieldEditorContext = /*#__PURE__*/_react.default.createContext(
 {
   field: null
 });
+/**
+ * We try to generate the random id string but with the check that it does not exist already.
+ * Chances that the same string exists are quite small, but let's check it anyway.
+ *
+ * In most cases, there will be no iterations anyway...
+ */
+
 
 exports.FieldEditorContext = FieldEditorContext;
+var maxGenerateIdIterations = 100;
+
+var generateFieldId = function generateFieldId(layout) {
+  var id = (0, _utils2.generateAlphaNumericLowerCaseId)(8);
+  var iteration = 0;
+
+  while (layout.includes(id) && iteration < maxGenerateIdIterations) {
+    id = (0, _utils2.generateAlphaNumericLowerCaseId)(8);
+    iteration++;
+  }
+
+  if (iteration >= maxGenerateIdIterations) {
+    throw new Error("Could not generate field ID in ".concat(maxGenerateIdIterations, " iterations."));
+  }
+
+  return id;
+};
 
 var FieldEditorProvider = function FieldEditorProvider(_ref) {
   var parent = _ref.parent,
@@ -237,7 +261,7 @@ var FieldEditorProvider = function FieldEditorProvider(_ref) {
         position = _ref3.position;
 
     if (!field.id) {
-      field.id = _shortid.default.generate();
+      field.id = generateFieldId(layout.flat());
     }
 
     if (!field.type) {

package/admin/components/FieldEditor/FieldEditorContext.js.map

@@ -1 +1 @@
-{"version":3,"names":["FieldEditorContext","React","createContext","field","FieldEditorProvider","parent","fields","layout","onChange","children","depth","editor","useFieldEditor","useState","dropTarget","row","index","state","setState","useDeepCompareEffect","editField","useCallback","onDropTarget","fieldId","onFieldDrop","source","pos","type","fieldType","parentId","forEach","insertField","position","undefined","moveRow","moveField","plugin","getFieldPlugin","createField","onEndDrag","monitor","didDrop","getDropResult","removeFields","deleteField","getFieldsInLayout","filter","arr","length","map","id","getField","Boolean","plugins","byType","find","query","key","shortid","generate","Error","fieldPlugin","prev","next","concat","utils","data","destination","updateField","i","dot","set","noConflict","isVisible","item","sameParent","draggedFields","push","some","includes","f","join","value"],"sources":["FieldEditorContext.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport dot from \"dot-prop-immutable\";\nimport shortid from \"shortid\";\nimport useDeepCompareEffect from \"use-deep-compare-effect\";\nimport {\n    CmsEditorField,\n    CmsEditorFieldId,\n    CmsEditorFieldsLayout,\n    CmsEditorFieldTypePlugin,\n    FieldLayoutPosition\n} from \"~/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport * as utils from \"./utils\";\nimport { FieldEditorProps } from \"./FieldEditor\";\nimport { DragObjectWithType, DragSourceMonitor } from \"react-dnd\";\nimport { useFieldEditor } from \"~/admin/components/FieldEditor/useFieldEditor\";\n\ninterface DropTarget {\n    row: number;\n    index: number | null;\n}\n\ninterface Position {\n    row: number;\n    index: number;\n}\n\nexport interface DragSource extends DragObjectWithType {\n    parent?: string;\n    pos?: Partial<Position>;\n    type: \"row\" | \"field\" | \"newField\";\n    fieldType?: string;\n    field?: CmsEditorField | null;\n    fields?: CmsEditorField[];\n}\n\n/**\n * Property in GetFieldParams can be any key from CmsEditorField, but TS does not allow union types\n */\ninterface GetFieldParams {\n    id?: string;\n    fieldId?: string;\n}\ninterface InsertFieldParams {\n    field: CmsEditorField;\n    position: FieldLayoutPosition;\n}\ninterface MoveFieldParams {\n    field: CmsEditorFieldId | CmsEditorField;\n    position: FieldLayoutPosition;\n}\ninterface GetFieldsInLayoutCallable {\n    (): CmsEditorField[][];\n}\ninterface GetFieldPluginCallable {\n    (type: string): CmsEditorFieldTypePlugin | undefined;\n}\ninterface GetFieldCallable {\n    (query: GetFieldParams): CmsEditorField | undefined;\n}\ninterface OnFieldDropCallable {\n    (source: Partial<DragSource>, target: DropTarget): void;\n}\ninterface InsertFieldCallable {\n    (params: InsertFieldParams): void;\n}\ninterface MoveFieldCallable {\n    (params: MoveFieldParams): void;\n}\ninterface OnEndDragCallable {\n    (item: DragSource, monitor: DragSourceMonitor): void;\n}\ninterface MoveRowCallable {\n    (source: number, destination: number): void;\n}\ninterface UpdateFieldCallable {\n    (field: Pick<CmsEditorField, \"id\">): void;\n}\ninterface DeleteFieldCallable {\n    (field: Pick<CmsEditorField, \"id\">): void;\n}\ninterface IsVisibleCallable {\n    (item: DragSource): boolean;\n}\ninterface NoConflictCallable {\n    (cb?: IsVisibleCallable): (item: DragSource) => boolean;\n}\nexport interface FieldEditorContextValue {\n    fields: CmsEditorField[][];\n    noConflict: NoConflictCallable;\n    layout: CmsEditorFieldsLayout;\n    onChange?: (data: any) => void;\n    getFieldsInLayout: GetFieldsInLayoutCallable;\n    getFieldPlugin: GetFieldPluginCallable;\n    getField: GetFieldCallable;\n    editField: (field: CmsEditorField | null) => void;\n    field: CmsEditorField | null;\n    parent?: CmsEditorField;\n    depth: number;\n    dropTarget: DropTarget;\n    onFieldDrop: OnFieldDropCallable;\n    onEndDrag: OnEndDragCallable;\n    insertField: InsertFieldCallable;\n    moveField: MoveFieldCallable;\n    moveRow: MoveRowCallable;\n    updateField: UpdateFieldCallable;\n    deleteField: DeleteFieldCallable;\n}\n\ninterface FieldEditorProviderProps extends FieldEditorProps {\n    children: React.ReactElement;\n}\n\nexport const FieldEditorContext = React.createContext<FieldEditorContextValue>(\n    /**\n     * Safe to cast.\n     */\n    {\n        field: null\n    } as unknown as FieldEditorContextValue\n);\n\ninterface State {\n    layout: CmsEditorFieldsLayout;\n    fields: CmsEditorField[];\n    field: CmsEditorField | null;\n    dropTarget: DropTarget;\n}\nexport const FieldEditorProvider: React.FC<FieldEditorProviderProps> = ({\n    parent,\n    fields,\n    layout,\n    onChange,\n    children\n}) => {\n    // We need to determine depth of this provider so we can render drop zones with correct z-indexes.\n    let depth = 0;\n    try {\n        const editor = useFieldEditor();\n        depth = editor.depth + 1;\n    } catch {\n        // There's no parent provider, so this is the top-level one.\n    }\n\n    const [state, setState] = useState<State>({\n        layout,\n        fields,\n        field: null,\n        dropTarget: {\n            row: -1,\n            index: null\n        }\n    });\n\n    useDeepCompareEffect(() => {\n        onChange({ fields: state.fields, layout: state.layout });\n    }, [state.fields, state.layout]);\n\n    const editField = useCallback((field: CmsEditorField | null) => {\n        setState(state => ({ ...state, field }));\n    }, []);\n\n    const onDropTarget = {\n        dropTarget: parent ? parent.fieldId : null\n    };\n\n    const onFieldDrop = useCallback<OnFieldDropCallable>((source, dropTarget) => {\n        const { pos, type, fieldType, field, fields = [] } = source;\n\n        const parentId = parent ? parent.fieldId : null;\n\n        if (type === \"row\") {\n            if (parentId !== source.parent) {\n                // We're dragging an existing row from another fieldset\n                fields.forEach((field, index) => {\n                    insertField({\n                        field,\n                        position: {\n                            row: dropTarget.row,\n                            index: index === 0 ? null : index\n                        }\n                    });\n                });\n            } else if (pos && pos.row !== undefined) {\n                // We're dragging a row within the same fieldset\n                moveRow(pos.row, dropTarget.row);\n            }\n\n            return onDropTarget;\n        }\n\n        // If source pos is set, we are moving an existing field.\n        if (pos) {\n            if (!field) {\n                return onDropTarget;\n            }\n            if (parentId !== source.parent) {\n                // We're dragging an existing field from another fieldset\n                insertField({ field, position: dropTarget });\n            } else {\n                // We're dragging a field within the same fieldset\n                moveField({ field, position: dropTarget });\n            }\n            return onDropTarget;\n        }\n\n        if (!fieldType) {\n            return null;\n        }\n        const plugin = getFieldPlugin(fieldType);\n        if (!plugin) {\n            return null;\n        }\n        /**\n         * TODO @ts-refactor figure out better type for this.\n         */\n        editField(plugin.field.createField() as CmsEditorField);\n        setState(state => ({\n            ...state,\n            dropTarget\n        }));\n        return null;\n    }, []);\n\n    const onEndDrag: OnEndDragCallable = ({ type, field, fields }, monitor) => {\n        if (!monitor.didDrop()) {\n            return;\n        }\n\n        // Check if we dropped outside of the source fieldset, and if yes, remove the field from the original parent.\n        const { dropTarget } = monitor.getDropResult();\n        const parentId = parent ? parent.fieldId : null;\n        if (dropTarget === parentId) {\n            return;\n        }\n\n        const removeFields = type === \"row\" ? fields || [] : field ? [field] : [];\n        removeFields.forEach(field => deleteField(field));\n    };\n\n    const getFieldsInLayout: GetFieldsInLayoutCallable = () => {\n        // Replace every field ID with actual field object.\n        return state.layout\n            .filter(arr => arr.length)\n            .map(row => {\n                return row\n                    .map(id => {\n                        return getField({ id });\n                    })\n                    .filter(Boolean);\n            })\n            .filter(row => {\n                return row.length > 0;\n            }) as CmsEditorField[][];\n    };\n\n    /**\n     * Return field plugin.\n     */\n    const getFieldPlugin: GetFieldPluginCallable = type => {\n        return plugins\n            .byType<CmsEditorFieldTypePlugin>(\"cms-editor-field-type\")\n            .find(plugin => plugin.field.type === type);\n    };\n\n    /**\n     * Checks if field of given type already exists in the list of fields.\n     */\n    const getField: GetFieldCallable = query => {\n        return state.fields.find(field => {\n            for (const key in query) {\n                if (!(key in field)) {\n                    return false;\n                }\n                // TODO @ts-refactor figure if there is a way to fix this.\n                // @ts-ignore\n                if (field[key] !== query[key]) {\n                    return false;\n                }\n            }\n\n            return true;\n        });\n    };\n\n    /**\n     * Inserts a new field into the target position.\n     */\n    const insertField: InsertFieldCallable = ({ field, position }) => {\n        if (!field.id) {\n            field.id = shortid.generate();\n        }\n\n        if (!field.type) {\n            throw new Error(`Field \"type\" missing.`);\n        }\n\n        const fieldPlugin = getFieldPlugin(field.type);\n        if (!fieldPlugin) {\n            throw new Error(`Invalid field \"type\".`);\n        }\n\n        setState(prev => {\n            const next: State = {\n                ...prev,\n                fields: (prev.fields || []).concat(field)\n            };\n\n            // Move field to position where it was dropped.\n            return utils.moveField({ field, position, data: next });\n        });\n    };\n\n    /**\n     * Moves field to the given target position.\n     */\n    const moveField: MoveFieldCallable = ({ field, position }) => {\n        setState(data => {\n            return utils.moveField<State>({ field, position, data });\n        });\n    };\n\n    /**\n     * Moves row to a destination row.\n     */\n    const moveRow: MoveRowCallable = (source, destination) => {\n        setState(data => {\n            return utils.moveRow({ data, source, destination });\n        });\n    };\n\n    /**\n     * Updates field.\n     */\n    const updateField: UpdateFieldCallable = field => {\n        setState(data => {\n            for (let i = 0; i < data.fields.length; i++) {\n                if (data.fields[i].id === field.id) {\n                    return dot.set(data, `fields.${i}`, field);\n                }\n            }\n            return data;\n        });\n    };\n\n    /**\n     * Deletes a field (both from the list of field and the layout).\n     */\n    const deleteField: DeleteFieldCallable = field => {\n        setState(data => {\n            return utils.deleteField({ field, data });\n        });\n    };\n\n    const noConflict: NoConflictCallable = useCallback(\n        (isVisible?: IsVisibleCallable) => item => {\n            const sameParent = item.parent === onDropTarget.dropTarget;\n            const draggedFields: string[] = [];\n            switch (item.type) {\n                case \"row\":\n                    (item.fields || []).forEach(field => draggedFields.push(field.fieldId));\n                    break;\n                case \"field\":\n                    if (!item.field) {\n                        break;\n                    }\n                    draggedFields.push(item.field.fieldId);\n                    break;\n                default:\n                    break;\n            }\n\n            if (\n                draggedFields.length &&\n                !sameParent &&\n                fields.some(field => draggedFields.includes(field.fieldId))\n            ) {\n                return false;\n            }\n\n            return typeof isVisible === \"function\" ? isVisible(item) : true;\n        },\n        [fields.map(f => f.fieldId).join(\".\")]\n    );\n\n    const value = {\n        parent,\n        depth,\n        getFieldsInLayout,\n        getFieldPlugin,\n        getField,\n        editField,\n        field: state.field,\n        dropTarget: state.dropTarget,\n        onFieldDrop,\n        onEndDrag,\n        insertField,\n        moveField,\n        moveRow,\n        updateField,\n        deleteField,\n        fields: getFieldsInLayout(),\n        noConflict,\n        layout: state.layout\n    };\n\n    return <FieldEditorContext.Provider value={value}>{children}</FieldEditorContext.Provider>;\n};\n"],"mappings":"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"}
+{"version":3,"names":["FieldEditorContext","React","createContext","field","maxGenerateIdIterations","generateFieldId","layout","id","generateAlphaNumericLowerCaseId","iteration","includes","Error","FieldEditorProvider","parent","fields","onChange","children","depth","editor","useFieldEditor","useState","dropTarget","row","index","state","setState","useDeepCompareEffect","editField","useCallback","onDropTarget","fieldId","onFieldDrop","source","pos","type","fieldType","parentId","forEach","insertField","position","undefined","moveRow","moveField","plugin","getFieldPlugin","createField","onEndDrag","monitor","didDrop","getDropResult","removeFields","deleteField","getFieldsInLayout","filter","arr","length","map","getField","Boolean","plugins","byType","find","query","key","flat","fieldPlugin","prev","next","concat","utils","data","destination","updateField","i","dot","set","noConflict","isVisible","item","sameParent","draggedFields","push","some","f","join","value"],"sources":["FieldEditorContext.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\nimport dot from \"dot-prop-immutable\";\nimport useDeepCompareEffect from \"use-deep-compare-effect\";\nimport {\n    CmsEditorField,\n    CmsEditorFieldId,\n    CmsEditorFieldsLayout,\n    CmsEditorFieldTypePlugin,\n    FieldLayoutPosition\n} from \"~/types\";\nimport { plugins } from \"@webiny/plugins\";\nimport * as utils from \"./utils\";\nimport { FieldEditorProps } from \"./FieldEditor\";\nimport { DragObjectWithType, DragSourceMonitor } from \"react-dnd\";\nimport { useFieldEditor } from \"~/admin/components/FieldEditor/useFieldEditor\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\n\ninterface DropTarget {\n    row: number;\n    index: number | null;\n}\n\ninterface Position {\n    row: number;\n    index: number;\n}\n\nexport interface DragSource extends DragObjectWithType {\n    parent?: string;\n    pos?: Partial<Position>;\n    type: \"row\" | \"field\" | \"newField\";\n    fieldType?: string;\n    field?: CmsEditorField | null;\n    fields?: CmsEditorField[];\n}\n\n/**\n * Property in GetFieldParams can be any key from CmsEditorField, but TS does not allow union types\n */\ninterface GetFieldParams {\n    id?: string;\n    fieldId?: string;\n}\ninterface InsertFieldParams {\n    field: CmsEditorField;\n    position: FieldLayoutPosition;\n}\ninterface MoveFieldParams {\n    field: CmsEditorFieldId | CmsEditorField;\n    position: FieldLayoutPosition;\n}\ninterface GetFieldsInLayoutCallable {\n    (): CmsEditorField[][];\n}\ninterface GetFieldPluginCallable {\n    (type: string): CmsEditorFieldTypePlugin | undefined;\n}\ninterface GetFieldCallable {\n    (query: GetFieldParams): CmsEditorField | undefined;\n}\ninterface OnFieldDropCallable {\n    (source: Partial<DragSource>, target: DropTarget): void;\n}\ninterface InsertFieldCallable {\n    (params: InsertFieldParams): void;\n}\ninterface MoveFieldCallable {\n    (params: MoveFieldParams): void;\n}\ninterface OnEndDragCallable {\n    (item: DragSource, monitor: DragSourceMonitor): void;\n}\ninterface MoveRowCallable {\n    (source: number, destination: number): void;\n}\ninterface UpdateFieldCallable {\n    (field: Pick<CmsEditorField, \"id\">): void;\n}\ninterface DeleteFieldCallable {\n    (field: Pick<CmsEditorField, \"id\">): void;\n}\ninterface IsVisibleCallable {\n    (item: DragSource): boolean;\n}\ninterface NoConflictCallable {\n    (cb?: IsVisibleCallable): (item: DragSource) => boolean;\n}\nexport interface FieldEditorContextValue {\n    fields: CmsEditorField[][];\n    noConflict: NoConflictCallable;\n    layout: CmsEditorFieldsLayout;\n    onChange?: (data: any) => void;\n    getFieldsInLayout: GetFieldsInLayoutCallable;\n    getFieldPlugin: GetFieldPluginCallable;\n    getField: GetFieldCallable;\n    editField: (field: CmsEditorField | null) => void;\n    field: CmsEditorField | null;\n    parent?: CmsEditorField;\n    depth: number;\n    dropTarget: DropTarget;\n    onFieldDrop: OnFieldDropCallable;\n    onEndDrag: OnEndDragCallable;\n    insertField: InsertFieldCallable;\n    moveField: MoveFieldCallable;\n    moveRow: MoveRowCallable;\n    updateField: UpdateFieldCallable;\n    deleteField: DeleteFieldCallable;\n}\n\ninterface FieldEditorProviderProps extends FieldEditorProps {\n    children: React.ReactElement;\n}\n\nexport const FieldEditorContext = React.createContext<FieldEditorContextValue>(\n    /**\n     * Safe to cast.\n     */\n    {\n        field: null\n    } as unknown as FieldEditorContextValue\n);\n/**\n * We try to generate the random id string but with the check that it does not exist already.\n * Chances that the same string exists are quite small, but let's check it anyway.\n *\n * In most cases, there will be no iterations anyway...\n */\nconst maxGenerateIdIterations = 100;\nconst generateFieldId = (layout: string[]): string => {\n    let id = generateAlphaNumericLowerCaseId(8);\n\n    let iteration = 0;\n    while (layout.includes(id) && iteration < maxGenerateIdIterations) {\n        id = generateAlphaNumericLowerCaseId(8);\n        iteration++;\n    }\n    if (iteration >= maxGenerateIdIterations) {\n        throw new Error(`Could not generate field ID in ${maxGenerateIdIterations} iterations.`);\n    }\n    return id;\n};\n\ninterface State {\n    layout: CmsEditorFieldsLayout;\n    fields: CmsEditorField[];\n    field: CmsEditorField | null;\n    dropTarget: DropTarget;\n}\nexport const FieldEditorProvider: React.FC<FieldEditorProviderProps> = ({\n    parent,\n    fields,\n    layout,\n    onChange,\n    children\n}) => {\n    // We need to determine depth of this provider so we can render drop zones with correct z-indexes.\n    let depth = 0;\n    try {\n        const editor = useFieldEditor();\n        depth = editor.depth + 1;\n    } catch {\n        // There's no parent provider, so this is the top-level one.\n    }\n\n    const [state, setState] = useState<State>({\n        layout,\n        fields,\n        field: null,\n        dropTarget: {\n            row: -1,\n            index: null\n        }\n    });\n\n    useDeepCompareEffect(() => {\n        onChange({ fields: state.fields, layout: state.layout });\n    }, [state.fields, state.layout]);\n\n    const editField = useCallback((field: CmsEditorField | null) => {\n        setState(state => ({ ...state, field }));\n    }, []);\n\n    const onDropTarget = {\n        dropTarget: parent ? parent.fieldId : null\n    };\n\n    const onFieldDrop = useCallback<OnFieldDropCallable>((source, dropTarget) => {\n        const { pos, type, fieldType, field, fields = [] } = source;\n\n        const parentId = parent ? parent.fieldId : null;\n\n        if (type === \"row\") {\n            if (parentId !== source.parent) {\n                // We're dragging an existing row from another fieldset\n                fields.forEach((field, index) => {\n                    insertField({\n                        field,\n                        position: {\n                            row: dropTarget.row,\n                            index: index === 0 ? null : index\n                        }\n                    });\n                });\n            } else if (pos && pos.row !== undefined) {\n                // We're dragging a row within the same fieldset\n                moveRow(pos.row, dropTarget.row);\n            }\n\n            return onDropTarget;\n        }\n\n        // If source pos is set, we are moving an existing field.\n        if (pos) {\n            if (!field) {\n                return onDropTarget;\n            }\n            if (parentId !== source.parent) {\n                // We're dragging an existing field from another fieldset\n                insertField({ field, position: dropTarget });\n            } else {\n                // We're dragging a field within the same fieldset\n                moveField({ field, position: dropTarget });\n            }\n            return onDropTarget;\n        }\n\n        if (!fieldType) {\n            return null;\n        }\n        const plugin = getFieldPlugin(fieldType);\n        if (!plugin) {\n            return null;\n        }\n        /**\n         * TODO @ts-refactor figure out better type for this.\n         */\n        editField(plugin.field.createField() as CmsEditorField);\n        setState(state => ({\n            ...state,\n            dropTarget\n        }));\n        return null;\n    }, []);\n\n    const onEndDrag: OnEndDragCallable = ({ type, field, fields }, monitor) => {\n        if (!monitor.didDrop()) {\n            return;\n        }\n\n        // Check if we dropped outside of the source fieldset, and if yes, remove the field from the original parent.\n        const { dropTarget } = monitor.getDropResult();\n        const parentId = parent ? parent.fieldId : null;\n        if (dropTarget === parentId) {\n            return;\n        }\n\n        const removeFields = type === \"row\" ? fields || [] : field ? [field] : [];\n        removeFields.forEach(field => deleteField(field));\n    };\n\n    const getFieldsInLayout: GetFieldsInLayoutCallable = () => {\n        // Replace every field ID with actual field object.\n        return state.layout\n            .filter(arr => arr.length)\n            .map(row => {\n                return row\n                    .map(id => {\n                        return getField({ id });\n                    })\n                    .filter(Boolean);\n            })\n            .filter(row => {\n                return row.length > 0;\n            }) as CmsEditorField[][];\n    };\n\n    /**\n     * Return field plugin.\n     */\n    const getFieldPlugin: GetFieldPluginCallable = type => {\n        return plugins\n            .byType<CmsEditorFieldTypePlugin>(\"cms-editor-field-type\")\n            .find(plugin => plugin.field.type === type);\n    };\n\n    /**\n     * Checks if field of given type already exists in the list of fields.\n     */\n    const getField: GetFieldCallable = query => {\n        return state.fields.find(field => {\n            for (const key in query) {\n                if (!(key in field)) {\n                    return false;\n                }\n                // TODO @ts-refactor figure if there is a way to fix this.\n                // @ts-ignore\n                if (field[key] !== query[key]) {\n                    return false;\n                }\n            }\n\n            return true;\n        });\n    };\n\n    /**\n     * Inserts a new field into the target position.\n     */\n    const insertField: InsertFieldCallable = ({ field, position }) => {\n        if (!field.id) {\n            field.id = generateFieldId(layout.flat());\n        }\n\n        if (!field.type) {\n            throw new Error(`Field \"type\" missing.`);\n        }\n\n        const fieldPlugin = getFieldPlugin(field.type);\n        if (!fieldPlugin) {\n            throw new Error(`Invalid field \"type\".`);\n        }\n\n        setState(prev => {\n            const next: State = {\n                ...prev,\n                fields: (prev.fields || []).concat(field)\n            };\n\n            // Move field to position where it was dropped.\n            return utils.moveField({ field, position, data: next });\n        });\n    };\n\n    /**\n     * Moves field to the given target position.\n     */\n    const moveField: MoveFieldCallable = ({ field, position }) => {\n        setState(data => {\n            return utils.moveField<State>({ field, position, data });\n        });\n    };\n\n    /**\n     * Moves row to a destination row.\n     */\n    const moveRow: MoveRowCallable = (source, destination) => {\n        setState(data => {\n            return utils.moveRow({ data, source, destination });\n        });\n    };\n\n    /**\n     * Updates field.\n     */\n    const updateField: UpdateFieldCallable = field => {\n        setState(data => {\n            for (let i = 0; i < data.fields.length; i++) {\n                if (data.fields[i].id === field.id) {\n                    return dot.set(data, `fields.${i}`, field);\n                }\n            }\n            return data;\n        });\n    };\n\n    /**\n     * Deletes a field (both from the list of field and the layout).\n     */\n    const deleteField: DeleteFieldCallable = field => {\n        setState(data => {\n            return utils.deleteField({ field, data });\n        });\n    };\n\n    const noConflict: NoConflictCallable = useCallback(\n        (isVisible?: IsVisibleCallable) => item => {\n            const sameParent = item.parent === onDropTarget.dropTarget;\n            const draggedFields: string[] = [];\n            switch (item.type) {\n                case \"row\":\n                    (item.fields || []).forEach(field => draggedFields.push(field.fieldId));\n                    break;\n                case \"field\":\n                    if (!item.field) {\n                        break;\n                    }\n                    draggedFields.push(item.field.fieldId);\n                    break;\n                default:\n                    break;\n            }\n\n            if (\n                draggedFields.length &&\n                !sameParent &&\n                fields.some(field => draggedFields.includes(field.fieldId))\n            ) {\n                return false;\n            }\n\n            return typeof isVisible === \"function\" ? isVisible(item) : true;\n        },\n        [fields.map(f => f.fieldId).join(\".\")]\n    );\n\n    const value = {\n        parent,\n        depth,\n        getFieldsInLayout,\n        getFieldPlugin,\n        getField,\n        editField,\n        field: state.field,\n        dropTarget: state.dropTarget,\n        onFieldDrop,\n        onEndDrag,\n        insertField,\n        moveField,\n        moveRow,\n        updateField,\n        deleteField,\n        fields: getFieldsInLayout(),\n        noConflict,\n        layout: state.layout\n    };\n\n    return <FieldEditorContext.Provider value={value}>{children}</FieldEditorContext.Provider>;\n};\n"],"mappings":"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"}

package/admin/graphql/contentModels.d.ts

@@ -1,5 +1,5 @@
 import { CmsErrorResponse, CmsModel } from "../../types";
-export declare const FIELDS_FIELDS = "\n    id\n    fieldId\n    type\n    label\n    placeholderText\n    helpText  \n    predefinedValues {\n        enabled\n        values {\n            label\n            value\n            selected\n        }\n    }\n    multipleValues \n    renderer {\n        name\n    }\n    validation {\n        name\n        settings\n        message\n    }\n    listValidation {\n        name\n        settings\n        message\n    }\n    settings\n";
+export declare const FIELDS_FIELDS = "\n    id\n    fieldId\n    storageId\n    type\n    label\n    placeholderText\n    helpText\n    predefinedValues {\n        enabled\n        values {\n            label\n            value\n            selected\n        }\n    }\n    multipleValues\n    renderer {\n        name\n    }\n    validation {\n        name\n        settings\n        message\n    }\n    listValidation {\n        name\n        settings\n        message\n    }\n    settings\n";
 export declare const MODEL_FIELDS: string;
 /**
  * ############################

package/admin/graphql/contentModels.js

@@ -14,7 +14,7 @@ var _graphqlTag = _interopRequireDefault(require("graphql-tag"));
 var _templateObject, _templateObject2;
 
 var ERROR_FIELDS = "\n    message\n    code\n    data\n";
-var FIELDS_FIELDS = "\n    id\n    fieldId\n    type\n    label\n    placeholderText\n    helpText  \n    predefinedValues {\n        enabled\n        values {\n            label\n            value\n            selected\n        }\n    }\n    multipleValues \n    renderer {\n        name\n    }\n    validation {\n        name\n        settings\n        message\n    }\n    listValidation {\n        name\n        settings\n        message\n    }\n    settings\n";
+var FIELDS_FIELDS = "\n    id\n    fieldId\n    storageId\n    type\n    label\n    placeholderText\n    helpText\n    predefinedValues {\n        enabled\n        values {\n            label\n            value\n            selected\n        }\n    }\n    multipleValues\n    renderer {\n        name\n    }\n    validation {\n        name\n        settings\n        message\n    }\n    listValidation {\n        name\n        settings\n        message\n    }\n    settings\n";
 exports.FIELDS_FIELDS = FIELDS_FIELDS;
 var MODEL_FIELDS = "\n    name\n    group {\n        id\n        name\n    }\n    description\n    modelId\n    savedOn\n    titleFieldId\n    lockedFields\n    layout\n    fields {\n        ".concat(FIELDS_FIELDS, "\n    }\n");
 /**

package/admin/graphql/contentModels.js.map

@@ -1 +1 @@
-{"version":3,"names":["ERROR_FIELDS","FIELDS_FIELDS","MODEL_FIELDS","GET_CONTENT_MODEL","gql","UPDATE_CONTENT_MODEL"],"sources":["contentModels.ts"],"sourcesContent":["import gql from \"graphql-tag\";\nimport { CmsErrorResponse, CmsModel } from \"~/types\";\n\nconst ERROR_FIELDS = `\n    message\n    code\n    data\n`;\nexport const FIELDS_FIELDS = `\n    id\n    fieldId\n    type\n    label\n    placeholderText\n    helpText  \n    predefinedValues {\n        enabled\n        values {\n            label\n            value\n            selected\n        }\n    }\n    multipleValues \n    renderer {\n        name\n    }\n    validation {\n        name\n        settings\n        message\n    }\n    listValidation {\n        name\n        settings\n        message\n    }\n    settings\n`;\n\nexport const MODEL_FIELDS = `\n    name\n    group {\n        id\n        name\n    }\n    description\n    modelId\n    savedOn\n    titleFieldId\n    lockedFields\n    layout\n    fields {\n        ${FIELDS_FIELDS}\n    }\n`;\n/**\n * ############################\n * Get Query\n */\nexport interface GetCmsModelQueryResponse {\n    getContentModel: {\n        data?: CmsModel;\n        error?: CmsErrorResponse;\n    };\n}\nexport interface GetCmsModelQueryVariables {\n    modelId: string;\n}\nexport const GET_CONTENT_MODEL = gql`\n    query CmsGetContentModel($modelId: ID!) {\n        getContentModel(modelId: $modelId) {\n            data {\n                ${MODEL_FIELDS}\n            }\n            error {\n                ${ERROR_FIELDS}\n            }\n        }\n    }\n`;\n\n/**\n * ############################\n * Update Mutation\n */\nexport interface UpdateCmsModelMutationResponse {\n    updateContentModel: {\n        data: CmsModel | null;\n        error: CmsErrorResponse | null;\n    };\n}\nexport interface UpdateCmsModelMutationVariables {\n    modelId: string;\n    // TODO @ts-refactor write the types.\n    data: Partial<CmsModel>;\n}\nexport const UPDATE_CONTENT_MODEL = gql`\n    mutation CmsUpdateContentModel($modelId: ID!, $data: CmsContentModelUpdateInput!) {\n        updateContentModel(modelId: $modelId, data: $data) {\n            data {\n                ${MODEL_FIELDS}\n            }\n            error {\n                ${ERROR_FIELDS}\n            }\n        }\n    }\n`;\n"],"mappings":";;;;;;;;;;;AAAA;;;;AAGA,IAAMA,YAAY,wCAAlB;AAKO,IAAMC,aAAa,+bAAnB;;AAgCA,IAAMC,YAAY,wLAafD,aAbe,cAAlB;AAgBP;AACA;AACA;AACA;;;AAUO,IAAME,iBAAiB,OAAGC,mBAAH,yTAIZF,YAJY,EAOZF,YAPY,CAAvB;AAaP;AACA;AACA;AACA;;;AAYO,IAAMK,oBAAoB,OAAGD,mBAAH,qXAIfF,YAJe,EAOfF,YAPe,CAA1B"}
+{"version":3,"names":["ERROR_FIELDS","FIELDS_FIELDS","MODEL_FIELDS","GET_CONTENT_MODEL","gql","UPDATE_CONTENT_MODEL"],"sources":["contentModels.ts"],"sourcesContent":["import gql from \"graphql-tag\";\nimport { CmsErrorResponse, CmsModel } from \"~/types\";\n\nconst ERROR_FIELDS = `\n    message\n    code\n    data\n`;\nexport const FIELDS_FIELDS = `\n    id\n    fieldId\n    storageId\n    type\n    label\n    placeholderText\n    helpText\n    predefinedValues {\n        enabled\n        values {\n            label\n            value\n            selected\n        }\n    }\n    multipleValues\n    renderer {\n        name\n    }\n    validation {\n        name\n        settings\n        message\n    }\n    listValidation {\n        name\n        settings\n        message\n    }\n    settings\n`;\n\nexport const MODEL_FIELDS = `\n    name\n    group {\n        id\n        name\n    }\n    description\n    modelId\n    savedOn\n    titleFieldId\n    lockedFields\n    layout\n    fields {\n        ${FIELDS_FIELDS}\n    }\n`;\n/**\n * ############################\n * Get Query\n */\nexport interface GetCmsModelQueryResponse {\n    getContentModel: {\n        data?: CmsModel;\n        error?: CmsErrorResponse;\n    };\n}\nexport interface GetCmsModelQueryVariables {\n    modelId: string;\n}\nexport const GET_CONTENT_MODEL = gql`\n    query CmsGetContentModel($modelId: ID!) {\n        getContentModel(modelId: $modelId) {\n            data {\n                ${MODEL_FIELDS}\n            }\n            error {\n                ${ERROR_FIELDS}\n            }\n        }\n    }\n`;\n\n/**\n * ############################\n * Update Mutation\n */\nexport interface UpdateCmsModelMutationResponse {\n    updateContentModel: {\n        data: CmsModel | null;\n        error: CmsErrorResponse | null;\n    };\n}\nexport interface UpdateCmsModelMutationVariables {\n    modelId: string;\n    // TODO @ts-refactor write the types.\n    data: Partial<CmsModel>;\n}\nexport const UPDATE_CONTENT_MODEL = gql`\n    mutation CmsUpdateContentModel($modelId: ID!, $data: CmsContentModelUpdateInput!) {\n        updateContentModel(modelId: $modelId, data: $data) {\n            data {\n                ${MODEL_FIELDS}\n            }\n            error {\n                ${ERROR_FIELDS}\n            }\n        }\n    }\n`;\n"],"mappings":";;;;;;;;;;;AAAA;;;;AAGA,IAAMA,YAAY,wCAAlB;AAKO,IAAMC,aAAa,2cAAnB;;AAiCA,IAAMC,YAAY,wLAafD,aAbe,cAAlB;AAgBP;AACA;AACA;AACA;;;AAUO,IAAME,iBAAiB,OAAGC,mBAAH,yTAIZF,YAJY,EAOZF,YAPY,CAAvB;AAaP;AACA;AACA;AACA;;;AAYO,IAAMK,oBAAoB,OAAGD,mBAAH,qXAIfF,YAJe,EAOfF,YAPe,CAA1B"}

package/admin/plugins/fieldRenderers/file/fileField.js

@@ -46,32 +46,27 @@ var plugin = {
         var value = bind.value,
             onChange = bind.onChange;
         return /*#__PURE__*/_react.default.createElement(_components.FileManager, {
-          multiple: false,
-          images: imagesOnly
-        }, function (_ref3) {
-          var showFileManager = _ref3.showFileManager;
+          images: imagesOnly,
+          render: function render(_ref3) {
+            var showFileManager = _ref3.showFileManager;
 
-          var selectFile = function selectFile() {
-            showFileManager(function (initialFile) {
-              if (!initialFile || Array.isArray(initialFile) === true && initialFile.length === 0) {
-                return;
-              }
+            var selectFile = function selectFile() {
+              showFileManager(function (file) {
+                return onChange(file.src);
+              });
+            };
 
-              var file = Array.isArray(initialFile) ? initialFile[0] : initialFile;
-              onChange(file.src);
-            });
-          };
-
-          return /*#__PURE__*/_react.default.createElement(_File.default, Object.assign({}, bind, {
-            url: value,
-            onRemove: function onRemove() {
-              return onChange(null);
-            },
-            showFileManager: selectFile,
-            placeholder: field.placeholderText,
-            description: field.helpText,
-            "data-testid": "fr.input.filefield.".concat(field.label)
-          }));
+            return /*#__PURE__*/_react.default.createElement(_File.default, Object.assign({}, bind, {
+              url: value,
+              onRemove: function onRemove() {
+                return onChange(null);
+              },
+              showFileManager: selectFile,
+              placeholder: field.placeholderText,
+              description: field.helpText,
+              "data-testid": "fr.input.filefield.".concat(field.label)
+            }));
+          }
         });
       })));
     }

package/admin/plugins/fieldRenderers/file/fileField.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","getBind","Label","Bind","imagesOnly","settings","label","bind","value","onChange","showFileManager","selectFile","initialFile","Array","isArray","length","file","src","placeholderText","helpText"],"sources":["fileField.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { FileManager } from \"@webiny/app-admin/components\";\nimport File from \"./File\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/file\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-file\",\n    renderer: {\n        rendererName: \"file-input\",\n        name: t`File Input`,\n        description: t`Enables selecting a single file via File Manager.`,\n        canUse({ field }) {\n            return field.type === \"file\" && !field.multipleValues;\n        },\n        render({ field, getBind, Label }) {\n            const Bind = getBind();\n\n            const imagesOnly = field.settings && field.settings.imagesOnly;\n            return (\n                <Grid>\n                    <Cell span={12}>\n                        <Label>{field.label}</Label>\n                        <Bind>\n                            {bind => {\n                                const { value, onChange } = bind;\n\n                                return (\n                                    <FileManager multiple={false} images={imagesOnly}>\n                                        {({ showFileManager }) => {\n                                            const selectFile = () => {\n                                                showFileManager(initialFile => {\n                                                    if (\n                                                        !initialFile ||\n                                                        (Array.isArray(initialFile) === true &&\n                                                            initialFile.length === 0)\n                                                    ) {\n                                                        return;\n                                                    }\n                                                    const file = Array.isArray(initialFile)\n                                                        ? initialFile[0]\n                                                        : initialFile;\n                                                    onChange(file.src);\n                                                });\n                                            };\n                                            return (\n                                                <File\n                                                    {...bind}\n                                                    url={value}\n                                                    onRemove={() => onChange(null)}\n                                                    showFileManager={selectFile}\n                                                    placeholder={field.placeholderText}\n                                                    description={field.helpText}\n                                                    data-testid={`fr.input.filefield.${field.label}`}\n                                                />\n                                            );\n                                        }}\n                                    </FileManager>\n                                );\n                            }}\n                        </Bind>\n                    </Cell>\n                </Grid>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,gCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,YADR;IAENF,IAAI,EAAEL,CAAF,6FAFE;IAGNQ,WAAW,EAAER,CAAF,sIAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAOA,KAAK,CAACN,IAAN,KAAe,MAAf,IAAyB,CAACM,KAAK,CAACC,cAAvC;IACH,CANK;IAONC,MAPM,yBAO4B;MAAA,IAAzBF,KAAyB,SAAzBA,KAAyB;MAAA,IAAlBG,OAAkB,SAAlBA,OAAkB;MAAA,IAATC,KAAS,SAATA,KAAS;MAC9B,IAAMC,IAAI,GAAGF,OAAO,EAApB;MAEA,IAAMG,UAAU,GAAGN,KAAK,CAACO,QAAN,IAAkBP,KAAK,CAACO,QAAN,CAAeD,UAApD;MACA,oBACI,6BAAC,UAAD,qBACI,6BAAC,UAAD;QAAM,IAAI,EAAE;MAAZ,gBACI,6BAAC,KAAD,QAAQN,KAAK,CAACQ,KAAd,CADJ,eAEI,6BAAC,IAAD,QACK,UAAAC,IAAI,EAAI;QACL,IAAQC,KAAR,GAA4BD,IAA5B,CAAQC,KAAR;QAAA,IAAeC,QAAf,GAA4BF,IAA5B,CAAeE,QAAf;QAEA,oBACI,6BAAC,uBAAD;UAAa,QAAQ,EAAE,KAAvB;UAA8B,MAAM,EAAEL;QAAtC,GACK,iBAAyB;UAAA,IAAtBM,eAAsB,SAAtBA,eAAsB;;UACtB,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;YACrBD,eAAe,CAAC,UAAAE,WAAW,EAAI;cAC3B,IACI,CAACA,WAAD,IACCC,KAAK,CAACC,OAAN,CAAcF,WAAd,MAA+B,IAA/B,IACGA,WAAW,CAACG,MAAZ,KAAuB,CAH/B,EAIE;gBACE;cACH;;cACD,IAAMC,IAAI,GAAGH,KAAK,CAACC,OAAN,CAAcF,WAAd,IACPA,WAAW,CAAC,CAAD,CADJ,GAEPA,WAFN;cAGAH,QAAQ,CAACO,IAAI,CAACC,GAAN,CAAR;YACH,CAZc,CAAf;UAaH,CAdD;;UAeA,oBACI,6BAAC,aAAD,oBACQV,IADR;YAEI,GAAG,EAAEC,KAFT;YAGI,QAAQ,EAAE;cAAA,OAAMC,QAAQ,CAAC,IAAD,CAAd;YAAA,CAHd;YAII,eAAe,EAAEE,UAJrB;YAKI,WAAW,EAAEb,KAAK,CAACoB,eALvB;YAMI,WAAW,EAAEpB,KAAK,CAACqB,QANvB;YAOI,4CAAmCrB,KAAK,CAACQ,KAAzC;UAPJ,GADJ;QAWH,CA5BL,CADJ;MAgCH,CApCL,CAFJ,CADJ,CADJ;IA6CH;EAxDK;AAH+B,CAA7C;eA+Def,M"}
+{"version":3,"names":["t","i18n","ns","plugin","type","name","renderer","rendererName","description","canUse","field","multipleValues","render","getBind","Label","Bind","imagesOnly","settings","label","bind","value","onChange","showFileManager","selectFile","file","src","placeholderText","helpText"],"sources":["fileField.tsx"],"sourcesContent":["import React from \"react\";\nimport { CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Cell, Grid } from \"@webiny/ui/Grid\";\nimport { FileManager } from \"@webiny/app-admin/components\";\nimport File from \"./File\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/file\");\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-file\",\n    renderer: {\n        rendererName: \"file-input\",\n        name: t`File Input`,\n        description: t`Enables selecting a single file via File Manager.`,\n        canUse({ field }) {\n            return field.type === \"file\" && !field.multipleValues;\n        },\n        render({ field, getBind, Label }) {\n            const Bind = getBind();\n\n            const imagesOnly = field.settings && field.settings.imagesOnly;\n            return (\n                <Grid>\n                    <Cell span={12}>\n                        <Label>{field.label}</Label>\n                        <Bind>\n                            {bind => {\n                                const { value, onChange } = bind;\n\n                                return (\n                                    <FileManager\n                                        images={imagesOnly}\n                                        render={({ showFileManager }) => {\n                                            const selectFile = () => {\n                                                showFileManager(file => onChange(file.src));\n                                            };\n                                            return (\n                                                <File\n                                                    {...bind}\n                                                    url={value}\n                                                    onRemove={() => onChange(null)}\n                                                    showFileManager={selectFile}\n                                                    placeholder={field.placeholderText}\n                                                    description={field.helpText}\n                                                    data-testid={`fr.input.filefield.${field.label}`}\n                                                />\n                                            );\n                                        }}\n                                    />\n                                );\n                            }}\n                        </Bind>\n                    </Cell>\n                </Grid>\n            );\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;AACA;;;;AAEA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,gCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,YADR;IAENF,IAAI,EAAEL,CAAF,6FAFE;IAGNQ,WAAW,EAAER,CAAF,sIAHL;IAINS,MAJM,wBAIY;MAAA,IAATC,KAAS,QAATA,KAAS;MACd,OAAOA,KAAK,CAACN,IAAN,KAAe,MAAf,IAAyB,CAACM,KAAK,CAACC,cAAvC;IACH,CANK;IAONC,MAPM,yBAO4B;MAAA,IAAzBF,KAAyB,SAAzBA,KAAyB;MAAA,IAAlBG,OAAkB,SAAlBA,OAAkB;MAAA,IAATC,KAAS,SAATA,KAAS;MAC9B,IAAMC,IAAI,GAAGF,OAAO,EAApB;MAEA,IAAMG,UAAU,GAAGN,KAAK,CAACO,QAAN,IAAkBP,KAAK,CAACO,QAAN,CAAeD,UAApD;MACA,oBACI,6BAAC,UAAD,qBACI,6BAAC,UAAD;QAAM,IAAI,EAAE;MAAZ,gBACI,6BAAC,KAAD,QAAQN,KAAK,CAACQ,KAAd,CADJ,eAEI,6BAAC,IAAD,QACK,UAAAC,IAAI,EAAI;QACL,IAAQC,KAAR,GAA4BD,IAA5B,CAAQC,KAAR;QAAA,IAAeC,QAAf,GAA4BF,IAA5B,CAAeE,QAAf;QAEA,oBACI,6BAAC,uBAAD;UACI,MAAM,EAAEL,UADZ;UAEI,MAAM,EAAE,uBAAyB;YAAA,IAAtBM,eAAsB,SAAtBA,eAAsB;;YAC7B,IAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;cACrBD,eAAe,CAAC,UAAAE,IAAI;gBAAA,OAAIH,QAAQ,CAACG,IAAI,CAACC,GAAN,CAAZ;cAAA,CAAL,CAAf;YACH,CAFD;;YAGA,oBACI,6BAAC,aAAD,oBACQN,IADR;cAEI,GAAG,EAAEC,KAFT;cAGI,QAAQ,EAAE;gBAAA,OAAMC,QAAQ,CAAC,IAAD,CAAd;cAAA,CAHd;cAII,eAAe,EAAEE,UAJrB;cAKI,WAAW,EAAEb,KAAK,CAACgB,eALvB;cAMI,WAAW,EAAEhB,KAAK,CAACiB,QANvB;cAOI,4CAAmCjB,KAAK,CAACQ,KAAzC;YAPJ,GADJ;UAWH;QAjBL,EADJ;MAqBH,CAzBL,CAFJ,CADJ,CADJ;IAkCH;EA7CK;AAH+B,CAA7C;eAoDef,M"}

package/admin/plugins/fieldRenderers/file/fileFields.js

@@ -59,61 +59,57 @@ var FieldRenderer = function FieldRenderer(_ref) {
       className: _utils.imageWrapperStyles
     }, /*#__PURE__*/_react.default.createElement(_components.FileManager, {
       multiple: true,
-      images: imagesOnly
-    }, function (_ref2) {
-      var showFileManager = _ref2.showFileManager;
-
-      var selectFiles = function selectFiles() {
-        var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-        showFileManager(function (initialFiles) {
-          if (!initialFiles || initialFiles.length === 0) {
-            return;
-          }
-
-          var files = Array.isArray(initialFiles) ? initialFiles : [initialFiles];
-          var urls = files.map(function (f) {
-            return f.src;
+      images: imagesOnly,
+      render: function render(_ref2) {
+        var showFileManager = _ref2.showFileManager;
+
+        var selectFiles = function selectFiles() {
+          var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
+          showFileManager(function (files) {
+            var urls = files.map(function (f) {
+              return f.src;
+            });
+
+            if (index === -1) {
+              onChange([].concat((0, _toConsumableArray2.default)(value), (0, _toConsumableArray2.default)(urls)));
+            } else {
+              onChange([].concat((0, _toConsumableArray2.default)(value.slice(0, index)), (0, _toConsumableArray2.default)(urls), (0, _toConsumableArray2.default)(value.slice(index + 1))));
+            }
           });
-
-          if (index === -1) {
-            onChange([].concat((0, _toConsumableArray2.default)(value), (0, _toConsumableArray2.default)(urls)));
-          } else {
-            onChange([].concat((0, _toConsumableArray2.default)(value.slice(0, index)), (0, _toConsumableArray2.default)(urls), (0, _toConsumableArray2.default)(value.slice(index + 1))));
+        };
+
+        return /*#__PURE__*/_react.default.createElement(_Grid.GridInner, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+          span: 12
+        }, /*#__PURE__*/_react.default.createElement(Label, null, field.label)), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value.map(function (url, index) {
+          return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+            span: 3,
+            key: url
+          }, /*#__PURE__*/_react.default.createElement(_File.default, {
+            url: url,
+            showFileManager: function showFileManager() {
+              return selectFiles(index);
+            },
+            onRemove: function onRemove() {
+              return onChange(_dotPropImmutable.default.delete(value, index));
+            },
+            placeholder: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Select a file\""]))),
+            "data-testid": "fr.input.file.".concat(field.label, ".").concat(index)
+          }));
+        })), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
+          span: 3
+        }, /*#__PURE__*/_react.default.createElement(_File.default, Object.assign({
+          url: "",
+          onRemove: function onRemove() {
+            return void 0;
           }
-        });
-      };
-
-      return /*#__PURE__*/_react.default.createElement(_Grid.GridInner, null, /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-        span: 12
-      }, /*#__PURE__*/_react.default.createElement(Label, null, field.label)), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, value.map(function (url, index) {
-        return /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-          span: 3,
-          key: url
-        }, /*#__PURE__*/_react.default.createElement(_File.default, {
-          url: url,
+        }, bind, {
           showFileManager: function showFileManager() {
-            return selectFiles(index);
-          },
-          onRemove: function onRemove() {
-            return onChange(_dotPropImmutable.default.delete(value, index));
+            return selectFiles();
           },
-          placeholder: t(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["Select a file\""]))),
-          "data-testid": "fr.input.file.".concat(field.label, ".").concat(index)
-        }));
-      })), /*#__PURE__*/_react.default.createElement(_Grid.Cell, {
-        span: 3
-      }, /*#__PURE__*/_react.default.createElement(_File.default, Object.assign({
-        url: "",
-        onRemove: function onRemove() {
-          return void 0;
-        }
-      }, bind, {
-        showFileManager: function showFileManager() {
-          return selectFiles();
-        },
-        placeholder: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Select a file\""]))),
-        "data-testid": "fr.input.file.".concat(field.label)
-      }))));
+          placeholder: t(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["Select a file\""]))),
+          "data-testid": "fr.input.file.".concat(field.label)
+        }))));
+      }
     }));
   });
 };

package/admin/plugins/fieldRenderers/file/fileFields.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","FileUploadWrapper","styled","position","opacity","pointerEvents","color","FieldRenderer","getBind","Label","field","Bind","imagesOnly","settings","bind","onChange","value","Array","isArray","filter","Boolean","imageWrapperStyles","showFileManager","selectFiles","index","initialFiles","length","files","urls","map","f","src","slice","label","url","dotProp","delete","defaultProps","validation","isValid","styles","width","height","plugin","type","name","renderer","rendererName","description","canUse","multipleValues","render"],"sources":["fileFields.tsx"],"sourcesContent":["import React from \"react\";\nimport dotProp from \"dot-prop-immutable\";\nimport { CmsEditorField, CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Cell, GridInner } from \"@webiny/ui/Grid\";\nimport { imageWrapperStyles } from \"./utils\";\nimport { FileManager } from \"@webiny/app-admin/components\";\nimport styled from \"@emotion/styled\";\nimport File from \"./File\";\nimport { GetBindCallable } from \"~/admin/components/ContentEntryForm/useBind\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/file\");\n\nconst FileUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\ninterface FieldRendererProps {\n    getBind: GetBindCallable;\n    Label: React.FC;\n    field: CmsEditorField;\n}\nconst FieldRenderer: React.FC<FieldRendererProps> = ({ getBind, Label, field }) => {\n    const Bind = getBind();\n\n    const imagesOnly = field.settings && field.settings.imagesOnly;\n\n    return (\n        <Bind>\n            {bind => {\n                const { onChange } = bind;\n\n                // We need to make sure the value is an array, since this is a multi-value component.\n                const value: string[] = (\n                    Array.isArray(bind.value) ? bind.value : [bind.value]\n                ).filter(Boolean);\n\n                return (\n                    <FileUploadWrapper className={imageWrapperStyles}>\n                        <FileManager multiple={true} images={imagesOnly}>\n                            {({ showFileManager }) => {\n                                const selectFiles = (index = -1) => {\n                                    showFileManager(initialFiles => {\n                                        if (!initialFiles || initialFiles.length === 0) {\n                                            return;\n                                        }\n                                        const files = Array.isArray(initialFiles)\n                                            ? initialFiles\n                                            : [initialFiles];\n\n                                        const urls = files.map(f => f.src);\n                                        if (index === -1) {\n                                            onChange([...value, ...urls]);\n                                        } else {\n                                            onChange([\n                                                ...value.slice(0, index),\n                                                ...urls,\n                                                ...value.slice(index + 1)\n                                            ]);\n                                        }\n                                    });\n                                };\n                                return (\n                                    <GridInner>\n                                        <Cell span={12}>\n                                            <Label>{field.label}</Label>\n                                        </Cell>\n\n                                        <>\n                                            {value.map((url: string, index: number) => (\n                                                <Cell span={3} key={url}>\n                                                    <File\n                                                        url={url}\n                                                        showFileManager={() => selectFiles(index)}\n                                                        onRemove={() =>\n                                                            onChange(dotProp.delete(value, index))\n                                                        }\n                                                        placeholder={t`Select a file\"`}\n                                                        data-testid={`fr.input.file.${field.label}.${index}`}\n                                                    />\n                                                </Cell>\n                                            ))}\n                                        </>\n\n                                        <Cell span={3}>\n                                            <File\n                                                url={\"\"}\n                                                onRemove={() => {\n                                                    return void 0;\n                                                }}\n                                                {...bind}\n                                                showFileManager={() => selectFiles()}\n                                                placeholder={t`Select a file\"`}\n                                                data-testid={`fr.input.file.${field.label}`}\n                                            />\n                                        </Cell>\n                                    </GridInner>\n                                );\n                            }}\n                        </FileManager>\n                    </FileUploadWrapper>\n                );\n            }}\n        </Bind>\n    );\n};\n/**\n * Not used?\n */\n// TODO @ts-refactor\nFieldRenderer.defaultProps = {\n    validation: {\n        isValid: null\n    },\n    styles: { width: \"100%\", height: \"auto\" }\n} as Partial<FieldRendererProps>;\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-files\",\n    renderer: {\n        rendererName: \"file-inputs\",\n        name: t`File Inputs`,\n        description: t`Enables selecting multiple files via File Manager.`,\n        canUse({ field }) {\n            return field.type === \"file\" && !!field.multipleValues;\n        },\n        render({ field, getBind, Label }) {\n            return <FieldRenderer field={field} getBind={getBind} Label={Label} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":";;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAGA,IAAMA,CAAC,GAAGC,UAAA,CAAKC,EAAL,CAAQ,oCAAR,CAAV;;AAEA,IAAMC,iBAAiB,oBAAGC,eAAH,EAAU,KAAV;EAAA;EAAA;AAAA,GAAiB;EACpCC,QAAQ,EAAE,UAD0B;EAEpC,aAAa;IACTC,OAAO,EAAE,IADA;IAETC,aAAa,EAAE;EAFN,CAFuB;EAMpC,+BAA+B;IAC3BC,KAAK,EAAE;EADoB;AANK,CAAjB,CAAvB;;AAgBA,IAAMC,aAA2C,GAAG,SAA9CA,aAA8C,OAA+B;EAAA,IAA5BC,OAA4B,QAA5BA,OAA4B;EAAA,IAAnBC,KAAmB,QAAnBA,KAAmB;EAAA,IAAZC,KAAY,QAAZA,KAAY;EAC/E,IAAMC,IAAI,GAAGH,OAAO,EAApB;EAEA,IAAMI,UAAU,GAAGF,KAAK,CAACG,QAAN,IAAkBH,KAAK,CAACG,QAAN,CAAeD,UAApD;EAEA,oBACI,6BAAC,IAAD,QACK,UAAAE,IAAI,EAAI;IACL,IAAQC,QAAR,GAAqBD,IAArB,CAAQC,QAAR,CADK,CAGL;;IACA,IAAMC,KAAe,GAAG,CACpBC,KAAK,CAACC,OAAN,CAAcJ,IAAI,CAACE,KAAnB,IAA4BF,IAAI,CAACE,KAAjC,GAAyC,CAACF,IAAI,CAACE,KAAN,CADrB,EAEtBG,MAFsB,CAEfC,OAFe,CAAxB;IAIA,oBACI,6BAAC,iBAAD;MAAmB,SAAS,EAAEC;IAA9B,gBACI,6BAAC,uBAAD;MAAa,QAAQ,EAAE,IAAvB;MAA6B,MAAM,EAAET;IAArC,GACK,iBAAyB;MAAA,IAAtBU,eAAsB,SAAtBA,eAAsB;;MACtB,IAAMC,WAAW,GAAG,SAAdA,WAAc,GAAgB;QAAA,IAAfC,KAAe,uEAAP,CAAC,CAAM;QAChCF,eAAe,CAAC,UAAAG,YAAY,EAAI;UAC5B,IAAI,CAACA,YAAD,IAAiBA,YAAY,CAACC,MAAb,KAAwB,CAA7C,EAAgD;YAC5C;UACH;;UACD,IAAMC,KAAK,GAAGV,KAAK,CAACC,OAAN,CAAcO,YAAd,IACRA,YADQ,GAER,CAACA,YAAD,CAFN;UAIA,IAAMG,IAAI,GAAGD,KAAK,CAACE,GAAN,CAAU,UAAAC,CAAC;YAAA,OAAIA,CAAC,CAACC,GAAN;UAAA,CAAX,CAAb;;UACA,IAAIP,KAAK,KAAK,CAAC,CAAf,EAAkB;YACdT,QAAQ,4CAAKC,KAAL,oCAAeY,IAAf,GAAR;UACH,CAFD,MAEO;YACHb,QAAQ,4CACDC,KAAK,CAACgB,KAAN,CAAY,CAAZ,EAAeR,KAAf,CADC,oCAEDI,IAFC,oCAGDZ,KAAK,CAACgB,KAAN,CAAYR,KAAK,GAAG,CAApB,CAHC,GAAR;UAKH;QACJ,CAlBc,CAAf;MAmBH,CApBD;;MAqBA,oBACI,6BAAC,eAAD,qBACI,6BAAC,UAAD;QAAM,IAAI,EAAE;MAAZ,gBACI,6BAAC,KAAD,QAAQd,KAAK,CAACuB,KAAd,CADJ,CADJ,eAKI,4DACKjB,KAAK,CAACa,GAAN,CAAU,UAACK,GAAD,EAAcV,KAAd;QAAA,oBACP,6BAAC,UAAD;UAAM,IAAI,EAAE,CAAZ;UAAe,GAAG,EAAEU;QAApB,gBACI,6BAAC,aAAD;UACI,GAAG,EAAEA,GADT;UAEI,eAAe,EAAE;YAAA,OAAMX,WAAW,CAACC,KAAD,CAAjB;UAAA,CAFrB;UAGI,QAAQ,EAAE;YAAA,OACNT,QAAQ,CAACoB,yBAAA,CAAQC,MAAR,CAAepB,KAAf,EAAsBQ,KAAtB,CAAD,CADF;UAAA,CAHd;UAMI,WAAW,EAAE1B,CAAF,kGANf;UAOI,uCAA8BY,KAAK,CAACuB,KAApC,cAA6CT,KAA7C;QAPJ,EADJ,CADO;MAAA,CAAV,CADL,CALJ,eAqBI,6BAAC,UAAD;QAAM,IAAI,EAAE;MAAZ,gBACI,6BAAC,aAAD;QACI,GAAG,EAAE,EADT;QAEI,QAAQ,EAAE,oBAAM;UACZ,OAAO,KAAK,CAAZ;QACH;MAJL,GAKQV,IALR;QAMI,eAAe,EAAE;UAAA,OAAMS,WAAW,EAAjB;QAAA,CANrB;QAOI,WAAW,EAAEzB,CAAF,oGAPf;QAQI,uCAA8BY,KAAK,CAACuB,KAApC;MARJ,GADJ,CArBJ,CADJ;IAoCH,CA3DL,CADJ,CADJ;EAiEH,CA1EL,CADJ;AA8EH,CAnFD;AAoFA;AACA;AACA;AACA;;;AACA1B,aAAa,CAAC8B,YAAd,GAA6B;EACzBC,UAAU,EAAE;IACRC,OAAO,EAAE;EADD,CADa;EAIzBC,MAAM,EAAE;IAAEC,KAAK,EAAE,MAAT;IAAiBC,MAAM,EAAE;EAAzB;AAJiB,CAA7B;AAOA,IAAMC,MAAoC,GAAG;EACzCC,IAAI,EAAE,2BADmC;EAEzCC,IAAI,EAAE,iCAFmC;EAGzCC,QAAQ,EAAE;IACNC,YAAY,EAAE,aADR;IAENF,IAAI,EAAE/C,CAAF,gGAFE;IAGNkD,WAAW,EAAElD,CAAF,uIAHL;IAINmD,MAJM,yBAIY;MAAA,IAATvC,KAAS,SAATA,KAAS;MACd,OAAOA,KAAK,CAACkC,IAAN,KAAe,MAAf,IAAyB,CAAC,CAAClC,KAAK,CAACwC,cAAxC;IACH,CANK;IAONC,MAPM,yBAO4B;MAAA,IAAzBzC,KAAyB,SAAzBA,KAAyB;MAAA,IAAlBF,OAAkB,SAAlBA,OAAkB;MAAA,IAATC,KAAS,SAATA,KAAS;MAC9B,oBAAO,6BAAC,aAAD;QAAe,KAAK,EAAEC,KAAtB;QAA6B,OAAO,EAAEF,OAAtC;QAA+C,KAAK,EAAEC;MAAtD,EAAP;IACH;EATK;AAH+B,CAA7C;eAgBekC,M"}
+{"version":3,"names":["t","i18n","ns","FileUploadWrapper","styled","position","opacity","pointerEvents","color","FieldRenderer","getBind","Label","field","Bind","imagesOnly","settings","bind","onChange","value","Array","isArray","filter","Boolean","imageWrapperStyles","showFileManager","selectFiles","index","files","urls","map","f","src","slice","label","url","dotProp","delete","defaultProps","validation","isValid","styles","width","height","plugin","type","name","renderer","rendererName","description","canUse","multipleValues","render"],"sources":["fileFields.tsx"],"sourcesContent":["import React from \"react\";\nimport dotProp from \"dot-prop-immutable\";\nimport { CmsEditorField, CmsEditorFieldRendererPlugin } from \"~/types\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { Cell, GridInner } from \"@webiny/ui/Grid\";\nimport { imageWrapperStyles } from \"./utils\";\nimport { FileManager } from \"@webiny/app-admin/components\";\nimport styled from \"@emotion/styled\";\nimport File from \"./File\";\nimport { GetBindCallable } from \"~/admin/components/ContentEntryForm/useBind\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/file\");\n\nconst FileUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\ninterface FieldRendererProps {\n    getBind: GetBindCallable;\n    Label: React.FC;\n    field: CmsEditorField;\n}\nconst FieldRenderer: React.FC<FieldRendererProps> = ({ getBind, Label, field }) => {\n    const Bind = getBind();\n\n    const imagesOnly = field.settings && field.settings.imagesOnly;\n\n    return (\n        <Bind>\n            {bind => {\n                const { onChange } = bind;\n\n                // We need to make sure the value is an array, since this is a multi-value component.\n                const value: string[] = (\n                    Array.isArray(bind.value) ? bind.value : [bind.value]\n                ).filter(Boolean);\n\n                return (\n                    <FileUploadWrapper className={imageWrapperStyles}>\n                        <FileManager\n                            multiple\n                            images={imagesOnly}\n                            render={({ showFileManager }) => {\n                                const selectFiles = (index = -1) => {\n                                    showFileManager(files => {\n                                        const urls = files.map(f => f.src);\n                                        if (index === -1) {\n                                            onChange([...value, ...urls]);\n                                        } else {\n                                            onChange([\n                                                ...value.slice(0, index),\n                                                ...urls,\n                                                ...value.slice(index + 1)\n                                            ]);\n                                        }\n                                    });\n                                };\n                                return (\n                                    <GridInner>\n                                        <Cell span={12}>\n                                            <Label>{field.label}</Label>\n                                        </Cell>\n\n                                        <>\n                                            {value.map((url: string, index: number) => (\n                                                <Cell span={3} key={url}>\n                                                    <File\n                                                        url={url}\n                                                        showFileManager={() => selectFiles(index)}\n                                                        onRemove={() =>\n                                                            onChange(dotProp.delete(value, index))\n                                                        }\n                                                        placeholder={t`Select a file\"`}\n                                                        data-testid={`fr.input.file.${field.label}.${index}`}\n                                                    />\n                                                </Cell>\n                                            ))}\n                                        </>\n\n                                        <Cell span={3}>\n                                            <File\n                                                url={\"\"}\n                                                onRemove={() => {\n                                                    return void 0;\n                                                }}\n                                                {...bind}\n                                                showFileManager={() => selectFiles()}\n                                                placeholder={t`Select a file\"`}\n                                                data-testid={`fr.input.file.${field.label}`}\n                                            />\n                                        </Cell>\n                                    </GridInner>\n                                );\n                            }}\n                        />\n                    </FileUploadWrapper>\n                );\n            }}\n        </Bind>\n    );\n};\n/**\n * Not used?\n */\n// TODO @ts-refactor\nFieldRenderer.defaultProps = {\n    validation: {\n        isValid: null\n    },\n    styles: { width: \"100%\", height: \"auto\" }\n} as Partial<FieldRendererProps>;\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-files\",\n    renderer: {\n        rendererName: \"file-inputs\",\n        name: t`File Inputs`,\n        description: t`Enables selecting multiple files via File Manager.`,\n        canUse({ field }) {\n            return field.type === \"file\" && !!field.multipleValues;\n        },\n        render({ field, getBind, Label }) {\n            return <FieldRenderer field={field} getBind={getBind} Label={Label} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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"}

package/admin/plugins/fieldRenderers/object/multipleObjects.js

@@ -19,8 +19,6 @@ var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _shortid = _interopRequireDefault(require("shortid"));
-
 var _i18n = require("@webiny/app/i18n");
 
 var _Button = require("@webiny/ui/Button");
@@ -45,6 +43,8 @@ var _Accordion = _interopRequireDefault(require("../Accordion"));
 
 var _StyledComponents = require("./StyledComponents");
 
+var _utils = require("@webiny/utils");
+
 var _templateObject, _templateObject2;
 
 var t = _i18n.i18n.ns("app-headless-cms/admin/fields/text");
@@ -59,7 +59,7 @@ var Actions = function Actions(_ref) {
       e.stopPropagation();
       bind.field.moveValueDown(index);
       setHighlightIndex(function (map) {
-        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index + 1, _shortid.default.generate()));
+        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index + 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
       });
     }
   }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {
@@ -68,7 +68,7 @@ var Actions = function Actions(_ref) {
       e.stopPropagation();
       bind.field.moveValueUp(index);
       setHighlightIndex(function (map) {
-        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index - 1, _shortid.default.generate()));
+        return (0, _objectSpread4.default)((0, _objectSpread4.default)({}, map), {}, (0, _defineProperty2.default)({}, index - 1, (0, _utils.generateAlphaNumericLowerCaseId)(12)));
       });
     }
   }), /*#__PURE__*/_react.default.createElement(_Button.IconButton, {

package/admin/plugins/fieldRenderers/object/multipleObjects.js.map

@@ -1 +1 @@
-{"version":3,"names":["t","i18n","ns","Actions","setHighlightIndex","bind","index","e","stopPropagation","field","moveValueDown","map","shortid","generate","moveValueUp","removeValue","ObjectsRenderer","props","useState","highlightMap","contentModel","value","dynamicSectionTitleStyle","label","length","helpText","dynamicSectionGridStyle","Bind","fieldsWrapperStyle","settings","fields","layout","fieldsGridStyle","plugin","type","name","renderer","rendererName","description","canUse","multipleValues","render"],"sources":["multipleObjects.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction, useState } from \"react\";\nimport shortid from \"shortid\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport {\n    BindComponentRenderProp,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldRendererProps\n} from \"~/types\";\nimport DynamicSection from \"../DynamicSection\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport { ReactComponent as ArrowUp } from \"./arrow_drop_up.svg\";\nimport { ReactComponent as ArrowDown } from \"./arrow_drop_down.svg\";\nimport Accordion from \"~/admin/plugins/fieldRenderers/Accordion\";\nimport {\n    fieldsWrapperStyle,\n    dynamicSectionTitleStyle,\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"./StyledComponents\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\ninterface ActionsProps {\n    setHighlightIndex: Dispatch<SetStateAction<{ [key: number]: string }>>;\n    index: number;\n    bind: {\n        index: BindComponentRenderProp;\n        field: BindComponentRenderProp;\n    };\n}\n\nconst Actions: React.FC<ActionsProps> = ({ setHighlightIndex, bind, index }) => {\n    return index > 0 ? (\n        <>\n            <IconButton\n                icon={<ArrowDown />}\n                onClick={e => {\n                    e.stopPropagation();\n                    bind.field.moveValueDown(index);\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: shortid.generate()\n                    }));\n                }}\n            />\n            <IconButton\n                icon={<ArrowUp />}\n                onClick={e => {\n                    e.stopPropagation();\n                    bind.field.moveValueUp(index);\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: shortid.generate()\n                    }));\n                }}\n            />\n\n            <IconButton icon={<DeleteIcon />} onClick={() => bind.field.removeValue(index)} />\n        </>\n    ) : null;\n};\n\nconst ObjectsRenderer: React.FC<CmsEditorFieldRendererProps> = props => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const { field, contentModel } = props;\n\n    return (\n        <DynamicSection\n            {...props}\n            emptyValue={{}}\n            showLabel={false}\n            renderTitle={value => (\n                <Cell span={12} className={dynamicSectionTitleStyle}>\n                    <Typography use={\"headline5\"}>\n                        {`${field.label} ${value.length ? `(${value.length})` : \"\"}`}\n                    </Typography>\n                    {field.helpText && <FormElementMessage>{field.helpText}</FormElementMessage>}\n                </Cell>\n            )}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => (\n                <ObjectItem>\n                    {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                    <Accordion\n                        title={`${props.field.label} #${index + 1}`}\n                        action={\n                            <Actions\n                                setHighlightIndex={setHighlightIndex}\n                                index={index}\n                                bind={bind}\n                            />\n                        }\n                        // Open first Accordion by default\n                        defaultValue={index === 0}\n                    >\n                        <Cell span={12} className={fieldsWrapperStyle}>\n                            <Fields\n                                Bind={Bind}\n                                {...bind.index}\n                                contentModel={contentModel}\n                                fields={(field.settings || {}).fields || []}\n                                layout={(field.settings || {}).layout || []}\n                                gridClassName={fieldsGridStyle}\n                            />\n                        </Cell>\n                    </Accordion>\n                </ObjectItem>\n            )}\n        </DynamicSection>\n    );\n};\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects\",\n    renderer: {\n        rendererName: \"objects\",\n        name: t`Objects`,\n        description: t`Renders a set of fields.`,\n        canUse({ field }) {\n            return field.type === \"object\" && !!field.multipleValues;\n        },\n        render(props) {\n            return <ObjectsRenderer {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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"}
+{"version":3,"names":["t","i18n","ns","Actions","setHighlightIndex","bind","index","e","stopPropagation","field","moveValueDown","map","generateAlphaNumericLowerCaseId","moveValueUp","removeValue","ObjectsRenderer","props","useState","highlightMap","contentModel","value","dynamicSectionTitleStyle","label","length","helpText","dynamicSectionGridStyle","Bind","fieldsWrapperStyle","settings","fields","layout","fieldsGridStyle","plugin","type","name","renderer","rendererName","description","canUse","multipleValues","render"],"sources":["multipleObjects.tsx"],"sourcesContent":["import React, { Dispatch, SetStateAction, useState } from \"react\";\nimport { i18n } from \"@webiny/app/i18n\";\nimport { IconButton } from \"@webiny/ui/Button\";\nimport { Cell } from \"@webiny/ui/Grid\";\nimport { FormElementMessage } from \"@webiny/ui/FormElementMessage\";\nimport { Typography } from \"@webiny/ui/Typography\";\nimport {\n    BindComponentRenderProp,\n    CmsEditorFieldRendererPlugin,\n    CmsEditorFieldRendererProps\n} from \"~/types\";\nimport DynamicSection from \"../DynamicSection\";\nimport { Fields } from \"~/admin/components/ContentEntryForm/Fields\";\nimport { ReactComponent as DeleteIcon } from \"~/admin/icons/close.svg\";\nimport { ReactComponent as ArrowUp } from \"./arrow_drop_up.svg\";\nimport { ReactComponent as ArrowDown } from \"./arrow_drop_down.svg\";\nimport Accordion from \"~/admin/plugins/fieldRenderers/Accordion\";\nimport {\n    fieldsWrapperStyle,\n    dynamicSectionTitleStyle,\n    dynamicSectionGridStyle,\n    fieldsGridStyle,\n    ItemHighLight,\n    ObjectItem\n} from \"./StyledComponents\";\nimport { generateAlphaNumericLowerCaseId } from \"@webiny/utils\";\n\nconst t = i18n.ns(\"app-headless-cms/admin/fields/text\");\n\ninterface ActionsProps {\n    setHighlightIndex: Dispatch<SetStateAction<{ [key: number]: string }>>;\n    index: number;\n    bind: {\n        index: BindComponentRenderProp;\n        field: BindComponentRenderProp;\n    };\n}\n\nconst Actions: React.FC<ActionsProps> = ({ setHighlightIndex, bind, index }) => {\n    return index > 0 ? (\n        <>\n            <IconButton\n                icon={<ArrowDown />}\n                onClick={e => {\n                    e.stopPropagation();\n                    bind.field.moveValueDown(index);\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index + 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n                }}\n            />\n            <IconButton\n                icon={<ArrowUp />}\n                onClick={e => {\n                    e.stopPropagation();\n                    bind.field.moveValueUp(index);\n                    setHighlightIndex(map => ({\n                        ...map,\n                        [index - 1]: generateAlphaNumericLowerCaseId(12)\n                    }));\n                }}\n            />\n\n            <IconButton icon={<DeleteIcon />} onClick={() => bind.field.removeValue(index)} />\n        </>\n    ) : null;\n};\n\nconst ObjectsRenderer: React.FC<CmsEditorFieldRendererProps> = props => {\n    const [highlightMap, setHighlightIndex] = useState<{ [key: number]: string }>({});\n    const { field, contentModel } = props;\n\n    return (\n        <DynamicSection\n            {...props}\n            emptyValue={{}}\n            showLabel={false}\n            renderTitle={value => (\n                <Cell span={12} className={dynamicSectionTitleStyle}>\n                    <Typography use={\"headline5\"}>\n                        {`${field.label} ${value.length ? `(${value.length})` : \"\"}`}\n                    </Typography>\n                    {field.helpText && <FormElementMessage>{field.helpText}</FormElementMessage>}\n                </Cell>\n            )}\n            gridClassName={dynamicSectionGridStyle}\n        >\n            {({ Bind, bind, index }) => (\n                <ObjectItem>\n                    {highlightMap[index] ? <ItemHighLight key={highlightMap[index]} /> : null}\n                    <Accordion\n                        title={`${props.field.label} #${index + 1}`}\n                        action={\n                            <Actions\n                                setHighlightIndex={setHighlightIndex}\n                                index={index}\n                                bind={bind}\n                            />\n                        }\n                        // Open first Accordion by default\n                        defaultValue={index === 0}\n                    >\n                        <Cell span={12} className={fieldsWrapperStyle}>\n                            <Fields\n                                Bind={Bind}\n                                {...bind.index}\n                                contentModel={contentModel}\n                                fields={(field.settings || {}).fields || []}\n                                layout={(field.settings || {}).layout || []}\n                                gridClassName={fieldsGridStyle}\n                            />\n                        </Cell>\n                    </Accordion>\n                </ObjectItem>\n            )}\n        </DynamicSection>\n    );\n};\n\nconst plugin: CmsEditorFieldRendererPlugin = {\n    type: \"cms-editor-field-renderer\",\n    name: \"cms-editor-field-renderer-objects\",\n    renderer: {\n        rendererName: \"objects\",\n        name: t`Objects`,\n        description: t`Renders a set of fields.`,\n        canUse({ field }) {\n            return field.type === \"object\" && !!field.multipleValues;\n        },\n        render(props) {\n            return <ObjectsRenderer {...props} />;\n        }\n    }\n};\n\nexport default plugin;\n"],"mappings":"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"}

package/admin/plugins/index.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-declare const _default: () => (import("../../types").CmsEditorFormSettingsPlugin | import("../../types").CmsIconsPlugin | import("@webiny/app-admin/types").AdminInstallationPlugin | import("@webiny/app-admin/types").AdminAppPermissionRendererPlugin | import("../../types").CmsFieldValueTransformer[] | import("@webiny/app").ApolloCacheObjectIdPlugin<import("@webiny/app/plugins/ApolloCacheObjectIdPlugin").ApolloCacheObject> | import("@webiny/app/types").RoutePlugin[] | import("../../types").CmsContentDetailsPlugin[] | {
+declare const _default: () => (import("../../types").CmsEditorFormSettingsPlugin | import("../../types").CmsIconsPlugin | import("../../types").CmsFieldValueTransformer[] | import("@webiny/app").ApolloCacheObjectIdPlugin<import("@webiny/app/plugins/ApolloCacheObjectIdPlugin").ApolloCacheObject> | import("@webiny/app/types").RoutePlugin[] | import("@webiny/app-admin/types").AdminInstallationPlugin | import("@webiny/app-admin/types").AdminAppPermissionRendererPlugin | import("../../types").CmsContentDetailsPlugin[] | {
     name: string;
     type: string;
     render(): JSX.Element;