@webiny/app-headless-cms 5.23.1 → 5.24.0-beta.0

package/admin/components/ContentEntryForm/ContentEntryForm.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from "react";
 import { FormAPI } from "@webiny/form/types";
 import { UseContentEntryFormParams } from "./useContentEntryForm";
 interface ContentEntryFormProps extends UseContentEntryFormParams {
     onForm?: (form: FormAPI) => void;
 }
-export declare const ContentEntryForm: ({ onForm, ...props }: ContentEntryFormProps) => JSX.Element;
+export declare const ContentEntryForm: React.FC<ContentEntryFormProps>;
 export {};

package/admin/components/ContentEntryForm/ContentEntryFormPreview.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from "react";
 import { CmsEditorContentModel } from "../../../types";
 interface Props {
     contentModel: CmsEditorContentModel;
 }
-export declare const ContentEntryFormPreview: (props: Props) => JSX.Element;
+export declare const ContentEntryFormPreview: React.FC<Props>;
 export {};

package/admin/components/ContentEntryForm/Fields.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
+import React from "react";
 import { BindComponent } from "@webiny/form";
 import { CmsEditorContentModel, CmsEditorField, CmsEditorFieldsLayout } from "../../../types";
-interface Props {
+interface FieldsProps {
     Bind: BindComponent;
     contentModel: CmsEditorContentModel;
     fields: CmsEditorField[];
     layout: CmsEditorFieldsLayout;
     gridClassName?: string;
 }
-export declare const Fields: ({ Bind, fields, layout, contentModel, gridClassName }: Props) => JSX.Element;
+export declare const Fields: React.FC<FieldsProps>;
 export {};

package/admin/components/ContentEntryForm/Label.d.ts

@@ -1,5 +1,3 @@
-/// <reference types="react" />
-declare const Label: ({ children }: {
-    children: any;
-}) => JSX.Element;
+import React from "react";
+declare const Label: React.FC;
 export default Label;

package/admin/components/ContentEntryForm/RenderFieldElement.d.ts

@@ -1,8 +1,10 @@
+import React from "react";
 import { CmsEditorField, CmsEditorContentModel } from "../../../types";
 import { BindComponent } from "@webiny/form";
-declare const RenderFieldElement: (props: {
+interface RenderFieldElementProps {
     field: CmsEditorField;
     Bind: BindComponent;
     contentModel: CmsEditorContentModel;
-}) => any;
+}
+declare const RenderFieldElement: React.FC<RenderFieldElementProps>;
 export default RenderFieldElement;

package/admin/components/ContentEntryForm/functions/createValidators.d.ts

@@ -1 +1,2 @@
-export declare const createValidators: (validation: any) => any;
+import { CmsEditorFieldValidator } from "../../../../types";
+export declare const createValidators: (validation: CmsEditorFieldValidator[]) => ((value: string | string[]) => Promise<void>)[];

package/admin/components/ContentEntryForm/functions/getValue.d.ts

@@ -1,5 +1,8 @@
-export declare const getValue: ({ bind, field, index }: {
+import { CmsEditorField } from "../../../../types";
+interface Params {
     bind: any;
-    field: any;
-    index: any;
-}) => any;
+    field: Pick<CmsEditorField, "multipleValues">;
+    index: number;
+}
+export declare const getValue: (params: Params) => string;
+export {};

package/admin/components/ContentEntryForm/functions/getValue.js

@@ -1,7 +1,8 @@
-export var getValue = function getValue(_ref) {
-  var bind = _ref.bind,
-      field = _ref.field,
-      index = _ref.index;
+// TODO @ts-refactor figure out correct bind types and remove any
+export var getValue = function getValue(params) {
+  var bind = params.bind,
+      field = params.field,
+      index = params.index;
   var value = bind.value || null;
 
   if (field.multipleValues) {

package/admin/components/ContentEntryForm/functions/setValue.d.ts

@@ -1,6 +1,9 @@
-export declare const setValue: ({ value, bind, field, index }: {
-    value: any;
+import { CmsEditorField } from "../../../../types";
+interface Params {
+    value: string[];
     bind: any;
-    field: any;
-    index: any;
-}) => void;
+    field: Pick<CmsEditorField, "multipleValues">;
+    index: number;
+}
+export declare const setValue: (params: Params) => void;
+export {};

package/admin/components/ContentEntryForm/functions/setValue.js

@@ -1,9 +1,10 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-export var setValue = function setValue(_ref) {
-  var value = _ref.value,
-      bind = _ref.bind,
-      field = _ref.field,
-      index = _ref.index;
+// TODO @ts-refactor figure out correct bind types and remove any
+export var setValue = function setValue(params) {
+  var value = params.value,
+      bind = params.bind,
+      field = params.field,
+      index = params.index;
   var newValue = field.multipleValues ? _toConsumableArray(bind.value || []) : bind.value;
 
   if (field.multipleValues) {

package/admin/components/ContentEntryForm/useBind.d.ts

@@ -1,10 +1,14 @@
-import { BindComponent } from "@webiny/form";
+import { BindComponent as BaseBindComponent } from "@webiny/form";
 import { CmsEditorField } from "../../../types";
+interface BindComponent extends BaseBindComponent {
+    parentName?: string;
+}
 interface UseBindProps {
     field: CmsEditorField;
-    Bind: BindComponent & {
-        parentName?: string;
-    };
+    Bind: BindComponent;
+}
+export interface GetBindCallable {
+    (index?: number): any;
 }
 export declare function useBind({ Bind: ParentBind, field }: UseBindProps): (index?: any) => any;
 export {};

package/admin/components/ContentEntryForm/useBind.js

@@ -1,5 +1,10 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+
+/**
+ * Figure out correct types for this and packages/app-headless-cms/src/admin/plugins/fieldRenderers/DynamicSection.tsx files
+ * TODO @ts-refactor
+ */
 import React, { useRef, useCallback, cloneElement } from "react";
 import { createValidators } from "./functions/createValidators";
 export function useBind(_ref) {
@@ -25,10 +30,10 @@ export function useBind(_ref) {
     var isMultipleValues = index === -1 && field.multipleValues;
     var inputValidators = isMultipleValues ? listValidators : validators;
 
-    memoizedBindComponents.current[name] = function UseBind(_ref2) {
-      var childName = _ref2.name,
-          childValidators = _ref2.validators,
-          children = _ref2.children;
+    memoizedBindComponents.current[name] = function UseBind(params) {
+      var childName = params.name,
+          childValidators = params.validators,
+          children = params.children;
       return /*#__PURE__*/React.createElement(ParentBind, {
         name: childName || name,
         validators: childValidators || inputValidators,
@@ -51,13 +56,15 @@ export function useBind(_ref) {
           };
 
           props.removeValue = function (index) {
-            if (index >= 0) {
-              var _value = bind.value;
-              _value = [].concat(_toConsumableArray(_value.slice(0, index)), _toConsumableArray(_value.slice(index + 1)));
-              bind.onChange(_value); // To make sure the field is still valid, we must trigger validation.
-
-              bind.form.validateInput(field.fieldId);
+            if (index < 0) {
+              return;
             }
+
+            var value = bind.value;
+            value = [].concat(_toConsumableArray(value.slice(0, index)), _toConsumableArray(value.slice(index + 1)));
+            bind.onChange(value); // To make sure the field is still valid, we must trigger validation.
+
+            bind.form.validateInput(field.fieldId);
           };
         }
 

package/admin/components/ContentEntryForm/useContentEntryForm.js

@@ -8,7 +8,7 @@ import { useCallback, useMemo, useState } from "react";
 import pick from "lodash/pick";
 import { useRouter } from "@webiny/react-router";
 import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
-import * as GQL from "../../graphql/contentEntries";
+import { createCreateFromMutation, createCreateMutation, createUpdateMutation } from "../../graphql/contentEntries";
 import { useMutation } from "../../hooks";
 import * as GQLCache from "../../views/contentEntries/ContentEntry/cache";
 import { prepareFormData } from "../../views/contentEntries/ContentEntry/prepareFormData";
@@ -63,10 +63,10 @@ export function useContentEntryForm(params) {
 
   var _useMemo = useMemo(function () {
     return {
-      LIST_CONTENT: GQL.createListQuery(contentModel),
-      CREATE_CONTENT: GQL.createCreateMutation(contentModel),
-      UPDATE_CONTENT: GQL.createUpdateMutation(contentModel),
-      CREATE_CONTENT_FROM: GQL.createCreateFromMutation(contentModel)
+      // LIST_CONTENT: createListQuery(contentModel),
+      CREATE_CONTENT: createCreateMutation(contentModel),
+      UPDATE_CONTENT: createUpdateMutation(contentModel),
+      CREATE_CONTENT_FROM: createCreateFromMutation(contentModel)
     };
   }, [contentModel.modelId]),
       CREATE_CONTENT = _useMemo.CREATE_CONTENT,
@@ -84,6 +84,10 @@ export function useContentEntryForm(params) {
   var _useMutation5 = useMutation(CREATE_CONTENT_FROM),
       _useMutation6 = _slicedToArray(_useMutation5, 1),
       createFromMutation = _useMutation6[0];
+  /**
+   * Note that when passing error.data variable we cast as InvalidFieldError[] because we know it is so.
+   */
+
 
   var setInvalidFieldValues = function setInvalidFieldValues(errors) {
     var values = (errors || []).reduce(function (acc, er) {

package/admin/components/ContentModelEditor/Context.d.ts

@@ -1,23 +1,32 @@
 import React from "react";
 import { ApolloClient } from "apollo-client";
-import { CmsEditorContentModel } from "../../../types";
+import { CmsEditorContentModel, CmsModel } from "../../../types";
 export interface Context {
     apolloClient: ApolloClient<any>;
-    data: CmsEditorContentModel;
+    data: CmsEditorContentModel | null;
     isPristine: boolean;
     getContentModel: (modelId: string) => Promise<any>;
     saveContentModel: (data?: Record<string, any>) => Promise<any>;
-    setData: (setter: Function, saveContentModel?: boolean) => Promise<any>;
+    setData: (setter: (model: CmsModel) => void, saveContentModel?: boolean) => Promise<any>;
 }
 export declare const contentModelEditorContext: React.Context<Context>;
-export declare function contentModelEditorReducer(prev: any, { data, type }: {
-    data: any;
-    type: any;
-}): any;
-interface Props {
+interface State {
+    modelId: string | null;
+    isPristine: boolean;
+    data: CmsModel | null;
+}
+interface Action {
+    data: Partial<State> | Partial<CmsModel>;
+    type: "state" | "data";
+}
+interface Reducer {
+    (prev: State, action: Action): State;
+}
+export declare const contentModelEditorReducer: Reducer;
+interface ContentModelEditorProviderProps {
     apolloClient: ApolloClient<any>;
     modelId: string;
     children: React.ReactElement;
 }
-export declare function ContentModelEditorProvider({ children, apolloClient, modelId }: Props): JSX.Element;
+export declare const ContentModelEditorProvider: React.FC<ContentModelEditorProviderProps>;
 export {};

package/admin/components/ContentModelEditor/Context.js

@@ -2,6 +2,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
+// TODO @ts-refactor verify that types are correct
 import React, { useEffect, useMemo, useReducer } from "react";
 import get from "lodash/get";
 import pick from "lodash/pick";
@@ -10,9 +11,9 @@ import { useSnackbar } from "@webiny/app-admin/hooks/useSnackbar";
 import { GET_CONTENT_MODEL, UPDATE_CONTENT_MODEL } from "../../graphql/contentModels";
 import { LIST_MENU_CONTENT_GROUPS_MODELS } from "../../viewsGraphql";
 export var contentModelEditorContext = /*#__PURE__*/React.createContext(null);
-export function contentModelEditorReducer(prev, _ref) {
-  var data = _ref.data,
-      type = _ref.type;
+export var contentModelEditorReducer = function contentModelEditorReducer(prev, action) {
+  var data = action.data,
+      type = action.type;
 
   switch (type) {
     case "state":
@@ -23,28 +24,30 @@ export function contentModelEditorReducer(prev, _ref) {
         data: data
       });
   }
-}
 
+  return prev;
+};
 /**
  * Cleanup is required because backend always expects string value in predefined values entries
  */
+
 var cleanupModelDataFields = function cleanupModelDataFields(fields) {
   return fields.map(function (field) {
     var predefinedValues = field.predefinedValues;
 
-    var _ref2 = predefinedValues || {},
-        _ref2$enabled = _ref2.enabled,
-        enabled = _ref2$enabled === void 0 ? false : _ref2$enabled,
-        _ref2$values = _ref2.values,
-        values = _ref2$values === void 0 ? [] : _ref2$values;
+    var _ref = predefinedValues || {},
+        _ref$enabled = _ref.enabled,
+        enabled = _ref$enabled === void 0 ? false : _ref$enabled,
+        _ref$values = _ref.values,
+        values = _ref$values === void 0 ? [] : _ref$values;
 
     return _objectSpread(_objectSpread({}, field), {}, {
       predefinedValues: {
         enabled: enabled,
-        values: values.map(function (_ref3) {
-          var label = _ref3.label,
-              value = _ref3.value,
-              selected = _ref3.selected;
+        values: values.map(function (_ref2) {
+          var label = _ref2.label,
+              value = _ref2.value,
+              selected = _ref2.selected;
           return {
             label: label,
             selected: selected || false,
@@ -62,14 +65,15 @@ var cleanupModelData = function cleanupModelData(data) {
   });
 };
 
-export function ContentModelEditorProvider(_ref4) {
-  var children = _ref4.children,
-      apolloClient = _ref4.apolloClient,
-      modelId = _ref4.modelId;
+export var ContentModelEditorProvider = function ContentModelEditorProvider(_ref3) {
+  var children = _ref3.children,
+      apolloClient = _ref3.apolloClient,
+      modelId = _ref3.modelId;
 
   var _useReducer = useReducer(contentModelEditorReducer, {
     modelId: modelId,
-    isPristine: true
+    isPristine: true,
+    data: null
   }),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       state = _useReducer2[0],
@@ -91,16 +95,16 @@ export function ContentModelEditorProvider(_ref4) {
   };
 
   var saveContentModel = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-      var data,
-          modelData,
-          response,
-          _args = arguments;
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data) {
+      var modelData, response;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
-              data = _args.length > 0 && _args[0] !== undefined ? _args[0] : state.data;
+              if (!data) {
+                data = state.data;
+              }
+
               modelData = pick(data, ["group", "layout", "fields", "name", "settings", "description", "titleFieldId"]);
               _context.next = 4;
               return apolloClient.mutate({
@@ -127,8 +131,8 @@ export function ContentModelEditorProvider(_ref4) {
       }, _callee);
     }));
 
-    return function saveContentModel() {
-      return _ref5.apply(this, arguments);
+    return function saveContentModel(_x) {
+      return _ref4.apply(this, arguments);
     };
   }();
   /**
@@ -149,7 +153,7 @@ export function ContentModelEditorProvider(_ref4) {
   };
 
   var getContentModel = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(modelId) {
+    var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(modelId) {
       var response, _get, data, error;
 
       return _regeneratorRuntime.wrap(function _callee2$(_context2) {
@@ -176,13 +180,16 @@ export function ContentModelEditorProvider(_ref4) {
               throw new Error(error);
 
             case 6:
-              setData(function () {
-                setPristine(true);
+              _context2.next = 8;
+              return setData(function () {
                 return data;
               }, false);
-              return _context2.abrupt("return", response);
 
             case 8:
+              setPristine(true);
+              return _context2.abrupt("return", response);
+
+            case 10:
             case "end":
               return _context2.stop();
           }
@@ -190,8 +197,8 @@ export function ContentModelEditorProvider(_ref4) {
       }, _callee2);
     }));
 
-    return function getContentModel(_x) {
-      return _ref6.apply(this, arguments);
+    return function getContentModel(_x2) {
+      return _ref5.apply(this, arguments);
     };
   }();
 
@@ -217,4 +224,4 @@ export function ContentModelEditorProvider(_ref4) {
   return /*#__PURE__*/React.createElement(Provider, {
     value: value
   }, children);
-}
+};

package/admin/components/ContentModelEditor/Editor.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-export declare const EditContainer: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "hidden" | "dir" | "slot" | "style" | "title" | "color" | "translate" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture">, object>;
-export declare const Editor: () => JSX.Element;
+export declare const EditContainer: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "children" | "onError" | "color" | "translate" | "id" | "hidden" | "className" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is">, object>;
+export declare const Editor: React.FC;

package/admin/components/ContentModelEditor/FieldsSidebar.d.ts

@@ -1,4 +1,6 @@
-/// <reference types="react" />
-export declare const FieldsSidebar: ({ onFieldDragStart }: {
-    onFieldDragStart: any;
-}) => JSX.Element;
+import React, { DragEventHandler } from "react";
+interface FieldsSidebarProps {
+    onFieldDragStart: DragEventHandler;
+}
+export declare const FieldsSidebar: React.FC<FieldsSidebarProps>;
+export {};

package/admin/components/ContentModelEditor/FieldsSidebar.js

@@ -51,20 +51,20 @@ var FieldHandle = /*#__PURE__*/styled("div", {
   color: "var(--mdc-theme-on-surface)"
 });
 
-var Field = function Field(_ref) {
-  var onFieldDragStart = _ref.onFieldDragStart,
-      _ref$fieldType = _ref.fieldType,
-      type = _ref$fieldType.type,
-      label = _ref$fieldType.label,
-      icon = _ref$fieldType.icon,
-      description = _ref$fieldType.description;
+var Field = function Field(props) {
+  var onFieldDragStart = props.onFieldDragStart,
+      _props$fieldType = props.fieldType,
+      type = _props$fieldType.type,
+      label = _props$fieldType.label,
+      icon = _props$fieldType.icon,
+      description = _props$fieldType.description;
   return /*#__PURE__*/React.createElement(Draggable, {
     beginDrag: {
       type: "newField",
       fieldType: type
     }
-  }, function (_ref2) {
-    var drag = _ref2.drag;
+  }, function (_ref) {
+    var drag = _ref.drag;
     return /*#__PURE__*/React.createElement("div", {
       ref: drag,
       style: {
@@ -78,8 +78,8 @@ var Field = function Field(_ref) {
   });
 };
 
-export var FieldsSidebar = function FieldsSidebar(_ref3) {
-  var onFieldDragStart = _ref3.onFieldDragStart;
+export var FieldsSidebar = function FieldsSidebar(_ref2) {
+  var onFieldDragStart = _ref2.onFieldDragStart;
   var fieldTypePlugin = plugins.byType("cms-editor-field-type");
   return /*#__PURE__*/React.createElement(React.Fragment, null, fieldTypePlugin.map(function (fieldPlugin) {
     return /*#__PURE__*/React.createElement(Field, {

package/admin/components/ContentModelEditor/Header.d.ts

@@ -1,2 +1,3 @@
-/// <reference types="react" />
-export default function EditorBar(): JSX.Element;
+import React from "react";
+declare const EditorBar: React.FC;
+export default EditorBar;

package/admin/components/ContentModelEditor/Header.js

@@ -5,7 +5,8 @@ import { css } from "emotion";
 var topBar = /*#__PURE__*/css({
   boxShadow: "1px 0px 5px 0px rgba(128,128,128,1)"
 }, "label:topBar;");
-export default function EditorBar() {
+
+var EditorBar = function EditorBar() {
   return /*#__PURE__*/React.createElement(TopAppBar, {
     className: topBar,
     fixed: true,
@@ -21,4 +22,6 @@ export default function EditorBar() {
     },
     alignEnd: true
   }, renderPlugins("content-model-editor-default-bar-right")));
-}
+};
+
+export default EditorBar;

package/admin/components/DragPreview.d.ts

@@ -1,2 +1,3 @@
-/// <reference types="react" />
-export default function DragPreview(): JSX.Element;
+import React from "react";
+declare const DragPreview: React.FC;
+export default DragPreview;

package/admin/components/DragPreview.js

@@ -17,12 +17,13 @@ var onOffsetChange = function onOffsetChange(monitor) {
     }
 
     var transform = "translate(".concat(offset.x - 15, "px, ").concat(offset.y - 15, "px)");
-    dragPreviewRef.style["transform"] = transform;
+    dragPreviewRef.style["transform"] = transform; // TODO @ts-refactor figure out better type
+
     dragPreviewRef.style["-webkit-transform"] = transform;
   };
 };
 
-export default function DragPreview() {
+var DragPreview = function DragPreview() {
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
       dragHelperOpacity = _useState2[0],
@@ -30,7 +31,6 @@ export default function DragPreview() {
 
   var _useDragLayer = useDragLayer(function (monitor) {
     if (!subscribedToOffsetChange) {
-      // @ts-ignore
       monitor.subscribeToOffsetChange(onOffsetChange(monitor));
       subscribedToOffsetChange = true;
     }
@@ -95,4 +95,6 @@ export default function DragPreview() {
       borderRadius: "50%"
     }
   })));
-}
+};
+
+export default DragPreview;

package/admin/components/Draggable.d.ts

@@ -1,15 +1,17 @@
 import React, { ReactElement } from "react";
 import { ConnectDragSource } from "react-dnd";
-export declare type DraggableChildrenFunction = (params: {
+interface DraggableChildrenFunctionParams {
     isDragging: boolean;
     drag: ConnectDragSource;
-}) => ReactElement;
-export declare type DraggableProps = {
+}
+export interface DraggableChildrenFunction {
+    (params: DraggableChildrenFunctionParams): ReactElement;
+}
+export interface DraggableProps {
     children: DraggableChildrenFunction;
     beginDrag?: any;
     endDrag?: any;
     target?: string[];
-};
-declare function Draggable(props: DraggableProps): JSX.Element;
-declare const _default: React.MemoExoticComponent<typeof Draggable>;
-export default _default;
+}
+declare const MemoizedDraggable: React.FC<DraggableProps>;
+export default MemoizedDraggable;

package/admin/components/Draggable.js

@@ -3,7 +3,7 @@ import React from "react";
 import { useDrag, DragPreviewImage } from "react-dnd";
 var emptyImage = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
 
-function Draggable(props) {
+var Draggable = function Draggable(props) {
   var children = props.children,
       beginDrag = props.beginDrag,
       endDrag = props.endDrag,
@@ -46,6 +46,7 @@ function Draggable(props) {
     isDragging: isDragging,
     drag: drag
   }));
-}
+};
 
-export default /*#__PURE__*/React.memo(Draggable);
+var MemoizedDraggable = /*#__PURE__*/React.memo(Draggable);
+export default MemoizedDraggable;