@micromag/editor 0.3.654 → 0.3.656

package/es/index.js

@@ -43,7 +43,7 @@ import { ScreensProvider } from '@micromag/screens';
 var useRouteParams = function useRouteParams() {
   var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
     _ref$screenOnly = _ref.screenOnly,
-    screenOnly = _ref$screenOnly === undefined ? false : _ref$screenOnly;
+    screenOnly = _ref$screenOnly === void 0 ? false : _ref$screenOnly;
   var routes = useRoutes();
   var _useLocation = useLocation(),
     _useLocation2 = _slicedToArray(_useLocation, 1),
@@ -58,17 +58,17 @@ var useRouteParams = function useRouteParams() {
         var _matcher = matcher(path),
           _matcher2 = _slicedToArray(_matcher, 2),
           _matcher2$ = _matcher2[0],
-          match = _matcher2$ === undefined ? false : _matcher2$,
+          match = _matcher2$ === void 0 ? false : _matcher2$,
           params = _matcher2[1];
         return match ? params : currentParams;
       }, null) || {};
     }, [routes, screenOnly, location, matcher]),
     _useMemo$screen = _useMemo.screen,
-    screen = _useMemo$screen === undefined ? null : _useMemo$screen,
+    screen = _useMemo$screen === void 0 ? null : _useMemo$screen,
     _useMemo$field = _useMemo.field,
-    field = _useMemo$field === undefined ? null : _useMemo$field,
+    field = _useMemo$field === void 0 ? null : _useMemo$field,
     _useMemo$form = _useMemo.form,
-    form = _useMemo$form === undefined ? null : _useMemo$form;
+    form = _useMemo$form === void 0 ? null : _useMemo$form;
   var routeParams = useMemo(function () {
     return screenOnly ? {
       url: location,
@@ -133,9 +133,9 @@ var createScreen = function createScreen(definition) {
   var defaultValueFields = screenFields.reduce(function (all, curr) {
     var _ref = curr || {},
       _ref$name = _ref.name,
-      name = _ref$name === undefined ? null : _ref$name,
+      name = _ref$name === void 0 ? null : _ref$name,
       _ref$defaultValue = _ref.defaultValue,
-      defaultValue = _ref$defaultValue === undefined ? null : _ref$defaultValue;
+      defaultValue = _ref$defaultValue === void 0 ? null : _ref$defaultValue;
     var newAll = _objectSpread({}, all);
     if (name !== null && defaultValue !== null) {
       newAll[name] = defaultValue;
@@ -153,7 +153,7 @@ var _excluded$c = ["components"];
 var deleteScreen = function deleteScreen(story, screenId) {
   var _ref = story || {},
     _ref$components = _ref.components,
-    components = _ref$components === undefined ? [] : _ref$components,
+    components = _ref$components === void 0 ? [] : _ref$components,
     currentValue = _objectWithoutProperties(_ref, _excluded$c);
   return _objectSpread(_objectSpread({}, currentValue), {}, {
     components: components.filter(function (_ref2) {
@@ -168,7 +168,7 @@ var duplicateScreen = function duplicateScreen(story, screenId) {
   var screenIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
   var _ref = story || {},
     _ref$components = _ref.components,
-    components = _ref$components === undefined ? [] : _ref$components,
+    components = _ref$components === void 0 ? [] : _ref$components,
     currentValue = _objectWithoutProperties(_ref, _excluded$b);
   var screen = components.find(function (it) {
     return it.id === screenId;
@@ -187,7 +187,7 @@ var updateScreen = function updateScreen(story, newScreenValue) {
   var newScreenId = newScreenValue.id;
   var _ref = story || {},
     _ref$components = _ref.components,
-    components = _ref$components === undefined ? [] : _ref$components,
+    components = _ref$components === void 0 ? [] : _ref$components,
     currentValue = _objectWithoutProperties(_ref, _excluded$a);
   var index = components.findIndex(function (it) {
     return it.id === newScreenId;
@@ -203,9 +203,9 @@ var _getFieldByName = function getFieldByName(fields, name) {
       return foundField;
     }
     var _it$name = it.name,
-      fieldName = _it$name === undefined ? null : _it$name,
+      fieldName = _it$name === void 0 ? null : _it$name,
       _it$fields = it.fields,
-      subFields = _it$fields === undefined ? [] : _it$fields;
+      subFields = _it$fields === void 0 ? [] : _it$fields;
     if (name !== null && fieldName === name) {
       return it;
     }
@@ -255,12 +255,12 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
     props = _objectWithoutProperties(_ref, _excluded$8);
   var definition = useScreenDefinition() || null;
   var _definition$states = definition.states,
-    states = _definition$states === undefined ? null : _definition$states;
+    states = _definition$states === void 0 ? null : _definition$states;
   var screenFields = getScreenFieldsWithStates(definition);
   var nameParts = name.split('.');
   var _nameParts = _slicedToArray(nameParts, 1),
     _nameParts$ = _nameParts[0],
-    stateId = _nameParts$ === undefined ? null : _nameParts$;
+    stateId = _nameParts$ === void 0 ? null : _nameParts$;
   var currentState = states !== null ? states.find(function (_ref2) {
     var id = _ref2.id;
     return id === stateId;
@@ -268,11 +268,11 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
   var finalNameParts = nameParts;
   var _ref3 = currentState || {},
     _ref3$repeatable = _ref3.repeatable,
-    repeatable = _ref3$repeatable === undefined ? false : _ref3$repeatable,
+    repeatable = _ref3$repeatable === void 0 ? false : _ref3$repeatable,
     _ref3$fieldName = _ref3.fieldName,
-    fieldName = _ref3$fieldName === undefined ? null : _ref3$fieldName,
+    fieldName = _ref3$fieldName === void 0 ? null : _ref3$fieldName,
     _ref3$fields = _ref3.fields,
-    stateFields = _ref3$fields === undefined ? [] : _ref3$fields;
+    stateFields = _ref3$fields === void 0 ? [] : _ref3$fields;
   var finalScreenFields = fieldName !== null && stateId !== null ? screenFields.filter(function (_ref4) {
     var itemName = _ref4.name,
       fieldStateId = _ref4.stateId;
@@ -322,7 +322,7 @@ var ScreenForm = function ScreenForm(_ref) {
     onChange = _ref.onChange;
   var _useScreenDefinition = useScreenDefinition(),
     _useScreenDefinition$ = _useScreenDefinition.fields,
-    fields = _useScreenDefinition$ === undefined ? [] : _useScreenDefinition$;
+    fields = _useScreenDefinition$ === void 0 ? [] : _useScreenDefinition$;
   // const intl = useIntl();
   // const finalOnClickDelete = useCallback(() => {
   //     if (
@@ -379,7 +379,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
   var intl = useIntl();
   var _ref2 = story || {},
     _ref2$components = _ref2.components,
-    screens = _ref2$components === undefined ? [] : _ref2$components;
+    screens = _ref2$components === void 0 ? [] : _ref2$components;
   var _useLocation = useLocation(),
     _useLocation2 = _slicedToArray(_useLocation, 2),
     setLocation = _useLocation2[1];
@@ -397,13 +397,13 @@ var Breadcrumb = function Breadcrumb(_ref) {
       var _screens$screenIndex = screens[screenIndex],
         type = _screens$screenIndex.type,
         _screens$screenIndex$ = _screens$screenIndex.parameters,
-        parameters = _screens$screenIndex$ === undefined ? null : _screens$screenIndex$;
+        parameters = _screens$screenIndex$ === void 0 ? null : _screens$screenIndex$;
       var definition = screensManager.getDefinition(type);
       var _ref3 = definition || {},
         _ref3$states = _ref3.states,
-        states = _ref3$states === undefined ? null : _ref3$states,
+        states = _ref3$states === void 0 ? null : _ref3$states,
         _ref3$title = _ref3.title,
-        definitionTitle = _ref3$title === undefined ? null : _ref3$title;
+        definitionTitle = _ref3$title === void 0 ? null : _ref3$title;
       return {
         title: definitionTitle,
         fields: definition !== null ? [].concat(_toConsumableArray(getScreenFieldsWithStates(definition)), [getScreenExtraField(intl)]) : null,
@@ -412,13 +412,13 @@ var Breadcrumb = function Breadcrumb(_ref) {
       };
     }, [screens, screenId, screensManager, intl]),
     _useMemo$title = _useMemo.title,
-    screenTitle = _useMemo$title === undefined ? null : _useMemo$title,
+    screenTitle = _useMemo$title === void 0 ? null : _useMemo$title,
     _useMemo$fields = _useMemo.fields,
-    screenFields = _useMemo$fields === undefined ? [] : _useMemo$fields,
+    screenFields = _useMemo$fields === void 0 ? [] : _useMemo$fields,
     _useMemo$states = _useMemo.states,
-    screenStates = _useMemo$states === undefined ? null : _useMemo$states,
+    screenStates = _useMemo$states === void 0 ? null : _useMemo$states,
     _useMemo$parameters = _useMemo.parameters,
-    screenParameters = _useMemo$parameters === undefined ? null : _useMemo$parameters;
+    screenParameters = _useMemo$parameters === void 0 ? null : _useMemo$parameters;
   var items = useMemo(function () {
     var fieldItems = [];
     var currentState = null;
@@ -428,7 +428,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
       // Get state and remove it from path. Replace it with field name if necessary (repeatable or fieldName present)
       var _fieldPath = _slicedToArray(fieldPath, 1),
         _fieldPath$ = _fieldPath[0],
-        stateId = _fieldPath$ === undefined ? null : _fieldPath$;
+        stateId = _fieldPath$ === void 0 ? null : _fieldPath$;
       currentState = screenStates !== null ? screenStates.find(function (_ref4) {
         var id = _ref4.id;
         return id === stateId;
@@ -437,9 +437,9 @@ var Breadcrumb = function Breadcrumb(_ref) {
       if (currentState !== null) {
         var _ref5 = currentState || {},
           _ref5$repeatable = _ref5.repeatable,
-          repeatable = _ref5$repeatable === undefined ? false : _ref5$repeatable,
+          repeatable = _ref5$repeatable === void 0 ? false : _ref5$repeatable,
           _ref5$fieldName = _ref5.fieldName,
-          fieldName = _ref5$fieldName === undefined ? null : _ref5$fieldName;
+          fieldName = _ref5$fieldName === void 0 ? null : _ref5$fieldName;
         finalFieldPath = (repeatable || fieldName !== null) && fieldPath.length <= (repeatable ? 2 : 1) ? [fieldName || stateId].concat(_toConsumableArray(fieldPath.slice(1))) : fieldPath.slice(1);
       }
       var lastKeyIndex = finalFieldPath.length - 1;
@@ -447,24 +447,24 @@ var Breadcrumb = function Breadcrumb(_ref) {
       finalFieldPath.reduce(function (currentFields, key, keyIndex) {
         var _ref6 = currentFields || {},
           _ref6$type = _ref6.type,
-          fieldType = _ref6$type === undefined ? null : _ref6$type,
+          fieldType = _ref6$type === void 0 ? null : _ref6$type,
           _ref6$fields = _ref6.fields,
-          currentSubFields = _ref6$fields === undefined ? null : _ref6$fields,
+          currentSubFields = _ref6$fields === void 0 ? null : _ref6$fields,
           _ref6$itemsField = _ref6.itemsField,
-          currentItemsField = _ref6$itemsField === undefined ? null : _ref6$itemsField;
+          currentItemsField = _ref6$itemsField === void 0 ? null : _ref6$itemsField;
         var fieldsDef = fieldType !== null ? fieldsManager.getDefinition(fieldType) : currentFields;
         var _ref7 = fieldsDef || {},
           _ref7$fields = _ref7.fields,
-          defSubFields = _ref7$fields === undefined ? null : _ref7$fields,
+          defSubFields = _ref7$fields === void 0 ? null : _ref7$fields,
           _ref7$settings = _ref7.settings,
-          settings = _ref7$settings === undefined ? null : _ref7$settings,
+          settings = _ref7$settings === void 0 ? null : _ref7$settings,
           _ref7$itemsField = _ref7.itemsField,
-          defItemsField = _ref7$itemsField === undefined ? null : _ref7$itemsField,
+          defItemsField = _ref7$itemsField === void 0 ? null : _ref7$itemsField,
           _ref7$component = _ref7.component,
-          defComponent = _ref7$component === undefined ? null : _ref7$component;
+          defComponent = _ref7$component === void 0 ? null : _ref7$component;
         var _ref8 = fieldsComponentManager.getComponent(defComponent) || {},
           _ref8$withForm = _ref8.withForm,
-          withForm = _ref8$withForm === undefined ? false : _ref8$withForm;
+          withForm = _ref8$withForm === void 0 ? false : _ref8$withForm;
         var itemsField = currentItemsField || defItemsField;
         var subFields = currentSubFields || defSubFields;
         var finalSubField = subFields !== null ? _getFieldByName(subFields, key) : null;
@@ -510,7 +510,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
         var itemLabel = isMessage(fieldLabel) ? intl.formatMessage(fieldLabel) : fieldLabel;
         var _ref9 = parentItem || {},
           _ref9$label = _ref9.label,
-          parentItemLabel = _ref9$label === undefined ? null : _ref9$label;
+          parentItemLabel = _ref9$label === void 0 ? null : _ref9$label;
         var finalItemLabel = isListItems ? "".concat(itemLabel, " #").concat(parseInt(key, 10) + 1) : itemLabel || parentItemLabel;
         var item = {
           url: itemPath,
@@ -525,17 +525,17 @@ var Breadcrumb = function Breadcrumb(_ref) {
       }, {
         fields: stateId === null ? screenFields : screenFields.filter(function (_ref10) {
           var _ref10$stateId = _ref10.stateId,
-            fieldStateId = _ref10$stateId === undefined ? null : _ref10$stateId;
+            fieldStateId = _ref10$stateId === void 0 ? null : _ref10$stateId;
           return fieldStateId === null || fieldStateId === stateId;
         })
       });
     }
     var _ref11 = screenParameters || {},
       _ref11$metadata = _ref11.metadata,
-      metadata = _ref11$metadata === undefined ? null : _ref11$metadata;
+      metadata = _ref11$metadata === void 0 ? null : _ref11$metadata;
     var _ref12 = metadata || {},
       _ref12$title = _ref12.title,
-      title = _ref12$title === undefined ? null : _ref12$title;
+      title = _ref12$title === void 0 ? null : _ref12$title;
     var typeTitle = screenTitle !== null ? /*#__PURE__*/React.createElement(FormattedMessage, screenTitle) : null;
     var parametersMessage = intl.formatMessage({
       id: "AHvHaY",
@@ -671,16 +671,16 @@ var EditForm = function EditForm(_ref) {
   var _useRouteParams = useRouteParams(),
     url = _useRouteParams.url,
     _useRouteParams$scree = _useRouteParams.screen,
-    screenId = _useRouteParams$scree === undefined ? null : _useRouteParams$scree,
+    screenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
     _useRouteParams$field = _useRouteParams.field,
-    fieldParams = _useRouteParams$field === undefined ? null : _useRouteParams$field,
+    fieldParams = _useRouteParams$field === void 0 ? null : _useRouteParams$field,
     _useRouteParams$form = _useRouteParams.form,
-    formParams = _useRouteParams$form === undefined ? null : _useRouteParams$form;
+    formParams = _useRouteParams$form === void 0 ? null : _useRouteParams$form;
 
   // Get screen
   var _ref2 = value || {},
     _ref2$components = _ref2.components,
-    screens = _ref2$components === undefined ? [] : _ref2$components;
+    screens = _ref2$components === void 0 ? [] : _ref2$components;
   var screenIndex = screens.findIndex(function (it) {
     return it.id === screenId;
   });
@@ -724,18 +724,18 @@ var EditForm = function EditForm(_ref) {
     var _ref4 = field !== null ? field.split('.') : [],
       _ref5 = _slicedToArray(_ref4, 1),
       _ref5$ = _ref5[0],
-      rootFieldName = _ref5$ === undefined ? null : _ref5$;
+      rootFieldName = _ref5$ === void 0 ? null : _ref5$;
     var _ref6 = fieldParams !== null ? fieldParams.split('/') : [],
       _ref7 = _slicedToArray(_ref6, 1),
       _ref7$ = _ref7[0],
-      currentStateId = _ref7$ === undefined ? null : _ref7$;
+      currentStateId = _ref7$ === void 0 ? null : _ref7$;
     var _ref8 = (rootFieldName !== null ? screenFields.find(function (_ref9) {
         var name = _ref9.name,
           fieldStateId = _ref9.stateId;
         return name === rootFieldName && currentStateId === fieldStateId;
       }) || null : null) || {},
       _ref8$stateId = _ref8.stateId,
-      stateId = _ref8$stateId === undefined ? null : _ref8$stateId;
+      stateId = _ref8$stateId === void 0 ? null : _ref8$stateId;
     routePush(hasField ? fieldRoute : 'screen', {
       screen: screenId,
       field: field !== null ? [stateId].concat(_toConsumableArray(field.split('.'))).filter(function (it) {
@@ -783,18 +783,18 @@ var EditForm = function EditForm(_ref) {
   var onDeleteScreenConfirm = useCallback(function () {
     var current = screens.findIndex(function (_ref10) {
       var _ref10$id = _ref10.id,
-        scrId = _ref10$id === undefined ? null : _ref10$id;
+        scrId = _ref10$id === void 0 ? null : _ref10$id;
       return scrId === screenId;
     }) || 0;
     var previous = screens.find(function (_ref11, i) {
       var _ref11$id = _ref11.id,
-        scrId = _ref11$id === undefined ? null : _ref11$id;
+        scrId = _ref11$id === void 0 ? null : _ref11$id;
       return scrId !== screenId && (i === current - 1 || current === 0);
     }) || null;
     if (previous !== null) {
       var _ref12 = previous || {},
         _ref12$id = _ref12.id,
-        firstScreenId = _ref12$id === undefined ? null : _ref12$id;
+        firstScreenId = _ref12$id === void 0 ? null : _ref12$id;
       routePush('screen', {
         screen: firstScreenId
       });
@@ -921,7 +921,7 @@ function useScreenStates(screen) {
     var definition = screensManager.getDefinition(type) || null;
     var _ref2 = definition || {},
       _ref2$states = _ref2.states,
-      screenStates = _ref2$states === undefined ? null : _ref2$states;
+      screenStates = _ref2$states === void 0 ? null : _ref2$states;
     return screenStates;
   }, [screensManager, type]);
   return states;
@@ -1260,14 +1260,14 @@ function ScreenStates(_ref) {
   var push = useRoutePush();
   var _useRouteParams = useRouteParams(),
     _useRouteParams$scree = _useRouteParams.screen,
-    screenParam = _useRouteParams$scree === undefined ? null : _useRouteParams$scree,
+    screenParam = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
     _useRouteParams$field = _useRouteParams.field,
-    field = _useRouteParams$field === undefined ? null : _useRouteParams$field;
+    field = _useRouteParams$field === void 0 ? null : _useRouteParams$field;
   var states = useScreenStates(screen);
   var _ref2 = field !== null ? field.split('/') : [],
     _ref3 = _toArray(_ref2),
     _ref3$ = _ref3[0],
-    stateParam = _ref3$ === undefined ? null : _ref3$,
+    stateParam = _ref3$ === void 0 ? null : _ref3$,
     stateIndexes = _ref3.slice(1);
   var stateIndex = stateIndexes.find(function (it) {
     return it.match(/^[0-9]+$/) !== null;
@@ -1298,18 +1298,18 @@ function ScreenStates(_ref) {
   })), states.map(function (state) {
     var id = state.id,
       _state$label = state.label,
-      label = _state$label === undefined ? null : _state$label,
+      label = _state$label === void 0 ? null : _state$label,
       _state$repeatable = state.repeatable,
-      repeatable = _state$repeatable === undefined ? false : _state$repeatable,
+      repeatable = _state$repeatable === void 0 ? false : _state$repeatable,
       _state$withoutCreate = state.withoutCreate,
-      withoutCreate = _state$withoutCreate === undefined ? false : _state$withoutCreate,
+      withoutCreate = _state$withoutCreate === void 0 ? false : _state$withoutCreate,
       _state$fieldName = state.fieldName,
-      fieldName = _state$fieldName === undefined ? null : _state$fieldName;
+      fieldName = _state$fieldName === void 0 ? null : _state$fieldName;
     var repeatableItems = repeatable ? screen[fieldName || id] || [] : null;
     var onClickAdd = function onClickAdd() {
       var _ref6 = value || {},
         _ref6$components = _ref6.components,
-        currentComponentsValue = _ref6$components === undefined ? [] : _ref6$components;
+        currentComponentsValue = _ref6$components === void 0 ? [] : _ref6$components;
       var currentScreenIndex = currentComponentsValue.findIndex(function (_ref7) {
         var screenId = _ref7.id;
         return screen.id === screenId;
@@ -1330,7 +1330,7 @@ function ScreenStates(_ref) {
     var onClickDelete = function onClickDelete(indexToDelete) {
       var _ref8 = value || {},
         _ref8$components = _ref8.components,
-        currentComponentsValue = _ref8$components === undefined ? [] : _ref8$components;
+        currentComponentsValue = _ref8$components === void 0 ? [] : _ref8$components;
       var currentScreenIndex = currentComponentsValue.findIndex(function (_ref9) {
         var screenId = _ref9.id;
         return screen.id === screenId;
@@ -1449,14 +1449,14 @@ var EditorPreview = function EditorPreview(_ref) {
     withoutDevicesSizes = _ref.withoutDevicesSizes;
   var _useRouteParams = useRouteParams(),
     _useRouteParams$scree = _useRouteParams.screen,
-    screenId = _useRouteParams$scree === undefined ? null : _useRouteParams$scree,
+    screenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree,
     _useRouteParams$field = _useRouteParams.field,
-    fieldParam = _useRouteParams$field === undefined ? null : _useRouteParams$field;
+    fieldParam = _useRouteParams$field === void 0 ? null : _useRouteParams$field;
   var _useScreenSize = useScreenSize(),
     _useScreenSize$screen = _useScreenSize.screen,
-    screen = _useScreenSize$screen === undefined ? null : _useScreenSize$screen,
+    screen = _useScreenSize$screen === void 0 ? null : _useScreenSize$screen,
     _useScreenSize$screen2 = _useScreenSize.screens,
-    screens = _useScreenSize$screen2 === undefined ? [] : _useScreenSize$screen2;
+    screens = _useScreenSize$screen2 === void 0 ? [] : _useScreenSize$screen2;
   var valueWithTheme = useThemeValue(value, isTheme);
   // const valueParsed = valueWithTheme;
   var valueParsed = useParsedStory(valueWithTheme, {
@@ -1482,9 +1482,9 @@ var EditorPreview = function EditorPreview(_ref) {
   var _useDimensionObserver = useDimensionObserver(),
     bottomRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.width,
-    bottomWidth = _useDimensionObserver2 === undefined ? 0 : _useDimensionObserver2,
+    bottomWidth = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2,
     _useDimensionObserver3 = _useDimensionObserver.height,
-    bottomHeight = _useDimensionObserver3 === undefined ? 0 : _useDimensionObserver3;
+    bottomHeight = _useDimensionObserver3 === void 0 ? 0 : _useDimensionObserver3;
   var previewStyle = useMemo(function () {
     if (withoutDevicesSizes && initialDevice === null) {
       return {};
@@ -1504,7 +1504,7 @@ var EditorPreview = function EditorPreview(_ref) {
   var currentScreen = useMemo(function () {
     var _ref2 = valueParsed || {},
       _ref2$components = _ref2.components,
-      components = _ref2$components === undefined ? [] : _ref2$components;
+      components = _ref2$components === void 0 ? [] : _ref2$components;
     return (screenId !== null ? components.find(function (_ref3) {
       var id = _ref3.id;
       return id === screenId;
@@ -1514,16 +1514,16 @@ var EditorPreview = function EditorPreview(_ref) {
   var _ref4 = fieldParam !== null && currentScreenStates !== null ? fieldParam.split('/') : [],
     _ref5 = _slicedToArray(_ref4, 1),
     _ref5$ = _ref5[0],
-    screenStateParam = _ref5$ === undefined ? null : _ref5$;
+    screenStateParam = _ref5$ === void 0 ? null : _ref5$;
   var currentScreenState = screenStateParam !== null ? currentScreenStates.find(function (_ref6) {
     var id = _ref6.id;
     return id === screenStateParam;
   }) || null : null;
   var _ref7 = currentScreenState || {},
     _ref7$id = _ref7.id,
-    screenStateId = _ref7$id === undefined ? null : _ref7$id,
+    screenStateId = _ref7$id === void 0 ? null : _ref7$id,
     _ref7$repeatable = _ref7.repeatable,
-    repeatable = _ref7$repeatable === undefined ? false : _ref7$repeatable;
+    repeatable = _ref7$repeatable === void 0 ? false : _ref7$repeatable;
   var currentScreenStateId = currentScreenState !== null && repeatable ? "".concat(screenStateId, ".").concat(fieldParam.split('/').find(function (it) {
     return it.match(/^[0-9]+$/) !== null;
   }) || 0) : screenStateId;
@@ -1640,8 +1640,8 @@ function getProjection(items, activeId, overId, dragOffset, indentationWidth) {
     }
     var newParent = (_newItems$slice$rever = newItems.slice(0, overItemIndex).reverse().find(function (item) {
       return item.depth === depth;
-    })) === null || _newItems$slice$rever === undefined ? undefined : _newItems$slice$rever.parentId;
-    return newParent !== null && newParent !== undefined ? newParent : null;
+    })) === null || _newItems$slice$rever === void 0 ? void 0 : _newItems$slice$rever.parentId;
+    return newParent !== null && newParent !== void 0 ? newParent : null;
   }
   return {
     depth: depth,
@@ -1724,7 +1724,7 @@ function findItemDeep(items, itemId) {
     var item = items[i] || {};
     var id = item.id,
       _item$children = item.children,
-      children = _item$children === undefined ? [] : _item$children;
+      children = _item$children === void 0 ? [] : _item$children;
     if (id === itemId) {
       return item;
     }
@@ -1789,7 +1789,7 @@ function countChildren(items) {
   var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
   return items.reduce(function (acc, _ref8) {
     var _ref8$children = _ref8.children,
-      children = _ref8$children === undefined ? [] : _ref8$children;
+      children = _ref8$children === void 0 ? [] : _ref8$children;
     if (children.length) {
       return countChildren(children, acc + 1);
     }
@@ -1808,7 +1808,7 @@ function removeChildrenOf(items, ids) {
   return items.filter(function (item) {
     if (item.parentId && excludeParentIds.includes(item.parentId)) {
       var _item$children2 = item.children,
-        children = _item$children2 === undefined ? [] : _item$children2;
+        children = _item$children2 === void 0 ? [] : _item$children2;
       if (children.length) {
         excludeParentIds.push(item.id);
       }
@@ -1837,7 +1837,7 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
       var _context$current = context.current,
         items = _context$current.items,
         offset = _context$current.offset;
-      if (horizontal.includes(event.code) && over !== null && over !== undefined && over.id) {
+      if (horizontal.includes(event.code) && over !== null && over !== void 0 && over.id) {
         var _getProjection = getProjection(items, active.id, over.id, offset, indentationWidth),
           depth = _getProjection.depth,
           maxDepth = _getProjection.maxDepth,
@@ -1863,13 +1863,13 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
         return undefined;
       }
       var containers = [];
-      var overRect = over !== null && over !== undefined && over.id ? (_droppableContainers$ = droppableContainers.get(over.id)) === null || _droppableContainers$ === undefined ? undefined : _droppableContainers$.rect.current : undefined;
+      var overRect = over !== null && over !== void 0 && over.id ? (_droppableContainers$ = droppableContainers.get(over.id)) === null || _droppableContainers$ === void 0 ? void 0 : _droppableContainers$.rect.current : undefined;
       if (overRect) {
         droppableContainers.forEach(function (container) {
-          if (container !== null && container !== undefined && container.disabled) {
+          if (container !== null && container !== void 0 && container.disabled) {
             return;
           }
-          var rect = container === null || container === undefined ? undefined : container.rect.current;
+          var rect = container === null || container === void 0 ? void 0 : container.rect.current;
           if (!rect) {
             return;
           }
@@ -1895,10 +1895,10 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
         droppableContainers: containers
       });
       var closestId = getFirstCollision(collisions, 'id');
-      if (closestId && over !== null && over !== undefined && over.id) {
+      if (closestId && over !== null && over !== void 0 && over.id) {
         var _droppableContainers$2, _droppableContainers$3;
-        var newNode = (_droppableContainers$2 = droppableContainers.get(closestId)) === null || _droppableContainers$2 === undefined ? undefined : _droppableContainers$2.node.current;
-        var activeNodeRect = (_droppableContainers$3 = droppableContainers.get(active.id)) === null || _droppableContainers$3 === undefined ? undefined : _droppableContainers$3.rect.current;
+        var newNode = (_droppableContainers$2 = droppableContainers.get(closestId)) === null || _droppableContainers$2 === void 0 ? void 0 : _droppableContainers$2.node.current;
+        var activeNodeRect = (_droppableContainers$3 = droppableContainers.get(active.id)) === null || _droppableContainers$3 === void 0 ? void 0 : _droppableContainers$3.rect.current;
         if (newNode && activeNodeRect) {
           var newRect = getClientRect(newNode, {
             ignoreTransform: true
@@ -2124,9 +2124,9 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
   };
   var _ref3 = listeners || {},
     _ref3$onPointerDown = _ref3.onPointerDown,
-    onPointerDown = _ref3$onPointerDown === undefined ? null : _ref3$onPointerDown,
+    onPointerDown = _ref3$onPointerDown === void 0 ? null : _ref3$onPointerDown,
     _ref3$onPointerUp = _ref3.onPointerUp,
-    onPointerUp = _ref3$onPointerUp === undefined ? null : _ref3$onPointerUp;
+    onPointerUp = _ref3$onPointerUp === void 0 ? null : _ref3$onPointerUp;
   var onClickAction = useCallback(function (e) {
     if (onClickItem !== null) {
       onClickItem(value, index);
@@ -2276,7 +2276,7 @@ var SortableTree = function SortableTree(_ref2) {
     var flattenedTree = flattenTree(items);
     var collapsedItems = flattenedTree.reduce(function (acc, _ref3) {
       var _ref3$children = _ref3.children,
-        children = _ref3$children === undefined ? [] : _ref3$children,
+        children = _ref3$children === void 0 ? [] : _ref3$children,
         collapsed = _ref3.collapsed,
         id = _ref3.id;
       return collapsed && children.length ? [].concat(_toConsumableArray(acc), [id]) : acc;
@@ -2387,7 +2387,7 @@ var SortableTree = function SortableTree(_ref2) {
   }, [getMovementAnnouncement]);
   var activeValue = defaultItems.find(function (_ref9) {
     var _ref9$id = _ref9.id,
-      defaultId = _ref9$id === undefined ? null : _ref9$id;
+      defaultId = _ref9$id === void 0 ? null : _ref9$id;
     return defaultId === activeId;
   });
   var handleDragStart = useCallback(function (_ref10) {
@@ -2413,7 +2413,7 @@ var SortableTree = function SortableTree(_ref2) {
   var handleDragOver = useCallback(function (_ref13) {
     var _over$id;
     var over = _ref13.over;
-    setOverId((_over$id = over === null || over === undefined ? undefined : over.id) !== null && _over$id !== undefined ? _over$id : null);
+    setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
   }, [setOverId]);
   var resetState = useCallback(function () {
     setOverId(null);
@@ -2441,7 +2441,7 @@ var SortableTree = function SortableTree(_ref2) {
       var activeTreeItem = clonedItems[activeIndex];
       var maxDepth = getMaxDepth(activeTreeItem);
       // Un-merge and flatten
-      if (depth > 0 && depth >= maxDepth && (activeTreeItem === null || activeTreeItem === undefined ? undefined : activeTreeItem.children) !== null && activeTreeItem.children.length > 0) {
+      if (depth > 0 && depth >= maxDepth && (activeTreeItem === null || activeTreeItem === void 0 ? void 0 : activeTreeItem.children) !== null && activeTreeItem.children.length > 0) {
         var _loop2 = function _loop2() {
           var childId = activeTreeItem.children[i].id;
           var childIndex = clonedItems.findIndex(function (_ref17) {
@@ -2469,11 +2469,11 @@ var SortableTree = function SortableTree(_ref2) {
         onChange((sortedItems || []).map(function (_ref18) {
           var itemId = _ref18.id,
             _ref18$children = _ref18.children,
-            children = _ref18$children === undefined ? [] : _ref18$children,
+            children = _ref18$children === void 0 ? [] : _ref18$children,
             _ref18$parentId = _ref18.parentId,
-            itParentId = _ref18$parentId === undefined ? null : _ref18$parentId,
+            itParentId = _ref18$parentId === void 0 ? null : _ref18$parentId,
             _ref18$collapsed = _ref18.collapsed,
-            collapsed = _ref18$collapsed === undefined ? false : _ref18$collapsed;
+            collapsed = _ref18$collapsed === void 0 ? false : _ref18$collapsed;
           return {
             id: itemId,
             props: _objectSpread(_objectSpread({}, (children || []).length > 0 ? {
@@ -2529,15 +2529,15 @@ var SortableTree = function SortableTree(_ref2) {
     var _flattenedItems;
     var id = _ref19.id,
       _ref19$children = _ref19.children,
-      children = _ref19$children === undefined ? [] : _ref19$children,
+      children = _ref19$children === void 0 ? [] : _ref19$children,
       collapsed = _ref19.collapsed,
       depth = _ref19.depth;
     var screenValue = defaultItems.find(function (_ref20) {
       var _ref20$id = _ref20.id,
-        defaultId = _ref20$id === undefined ? null : _ref20$id;
+        defaultId = _ref20$id === void 0 ? null : _ref20$id;
       return defaultId === id;
     });
-    var next = ((_flattenedItems = flattenedItems[idx + 1]) === null || _flattenedItems === undefined ? undefined : _flattenedItems.parentId) || null;
+    var next = ((_flattenedItems = flattenedItems[idx + 1]) === null || _flattenedItems === void 0 ? void 0 : _flattenedItems.parentId) || null;
     var isCollapsed = collapsed && children.length > 0;
     var onCollapse = collapsible && children.length ? function () {
       return handleCollapse(id);
@@ -2546,7 +2546,7 @@ var SortableTree = function SortableTree(_ref2) {
     var childCount = getChildCount(items, id);
     var childValue = childCount > 0 && collapsed ? defaultItems.slice().reverse().find(function (_ref21) {
       var _ref21$parentId = _ref21.parentId,
-        parentId = _ref21$parentId === undefined ? null : _ref21$parentId;
+        parentId = _ref21$parentId === void 0 ? null : _ref21$parentId;
       return parentId === id;
     }) : null;
     return /*#__PURE__*/React.createElement("div", {
@@ -2565,10 +2565,10 @@ var SortableTree = function SortableTree(_ref2) {
       } : undefined,
       childCount: childCount,
       component: component,
-      value: (screenValue === null || screenValue === undefined ? undefined : screenValue.value) || null,
+      value: (screenValue === null || screenValue === void 0 ? void 0 : screenValue.value) || null,
       onClickItem: onClickItem,
       index: idx,
-      childValue: (childValue === null || childValue === undefined ? undefined : childValue.value) || null
+      childValue: (childValue === null || childValue === void 0 ? void 0 : childValue.value) || null
     }));
   }), /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(DragOverlay, {
     dropAnimation: dropAnimation,
@@ -2583,7 +2583,7 @@ var SortableTree = function SortableTree(_ref2) {
     childCount: getChildCount(items, activeId) + 1,
     indentationWidth: indentationWidth,
     component: component,
-    value: activeValue === null || activeValue === undefined ? undefined : activeValue.value,
+    value: activeValue === null || activeValue === void 0 ? void 0 : activeValue.value,
     onClickItem: onClickItem,
     index: flattenedItems.findIndex(function (_ref23) {
       var id = _ref23.id;
@@ -2650,12 +2650,12 @@ var ScreensMenu = function ScreensMenu(_ref) {
     onOrderChange = _ref.onOrderChange;
   var itemsElements = !isTree ? items.map(function (_ref2, index) {
     var _ref2$className = _ref2.className,
-      itemCustomClassName = _ref2$className === undefined ? null : _ref2$className,
+      itemCustomClassName = _ref2$className === void 0 ? null : _ref2$className,
       screen = _ref2.screen,
       type = _ref2.type,
       title = _ref2.title,
       _ref2$onClick = _ref2.onClick,
-      onClick = _ref2$onClick === undefined ? null : _ref2$onClick,
+      onClick = _ref2$onClick === void 0 ? null : _ref2$onClick,
       active = _ref2.active,
       href = _ref2.href,
       item = _objectWithoutProperties(_ref2, _excluded$2);
@@ -2685,16 +2685,16 @@ var ScreensMenu = function ScreensMenu(_ref) {
     return isTree ? items.map(function (_ref5) {
       var id = _ref5.id,
         _ref5$screen = _ref5.screen,
-        screen = _ref5$screen === undefined ? {} : _ref5$screen,
+        screen = _ref5$screen === void 0 ? {} : _ref5$screen,
         href = _ref5.href,
         props = _objectWithoutProperties(_ref5, _excluded2);
       var _screen$parentId = screen.parentId,
-        parentId = _screen$parentId === undefined ? null : _screen$parentId,
+        parentId = _screen$parentId === void 0 ? null : _screen$parentId,
         _screen$group = screen.group,
-        group = _screen$group === undefined ? {} : _screen$group;
+        group = _screen$group === void 0 ? {} : _screen$group;
       var _ref6 = group || {},
         _ref6$collapsed = _ref6.collapsed,
-        collapsed = _ref6$collapsed === undefined ? true : _ref6$collapsed;
+        collapsed = _ref6$collapsed === void 0 ? true : _ref6$collapsed;
       return {
         id: id,
         parentId: parentId,
@@ -2764,17 +2764,17 @@ var ScreenTypes = function ScreenTypes(_ref) {
       var id = definition.id,
         title = definition.title,
         _definition$group = definition.group,
-        group = _definition$group === undefined ? {} : _definition$group;
+        group = _definition$group === void 0 ? {} : _definition$group;
       var _ref2 = group || {},
         _ref2$order = _ref2.order,
-        order = _ref2$order === undefined ? 0 : _ref2$order,
+        order = _ref2$order === void 0 ? 0 : _ref2$order,
         _ref2$label = _ref2.label,
-        label = _ref2$label === undefined ? {} : _ref2$label,
+        label = _ref2$label === void 0 ? {} : _ref2$label,
         _ref2$hidden = _ref2.hidden,
-        hidden = _ref2$hidden === undefined ? false : _ref2$hidden;
+        hidden = _ref2$hidden === void 0 ? false : _ref2$hidden;
       var _ref3 = label || {},
         _ref3$id = _ref3.id,
-        messageId = _ref3$id === undefined ? null : _ref3$id;
+        messageId = _ref3$id === void 0 ? null : _ref3$id;
       if (hidden) {
         return allGroups;
       }
@@ -2922,7 +2922,7 @@ var EditorScreens = function EditorScreens(_ref) {
   });
   var _ref2 = value || {},
     _ref2$components = _ref2.components,
-    screens = _ref2$components === undefined ? [] : _ref2$components;
+    screens = _ref2$components === void 0 ? [] : _ref2$components;
   var _useState = useState(isCreateOpened),
     _useState2 = _slicedToArray(_useState, 2),
     createModalOpened = _useState2[0],
@@ -2934,20 +2934,20 @@ var EditorScreens = function EditorScreens(_ref) {
       screenOnly: true
     }),
     _useRouteParams$scree = _useRouteParams.screen,
-    currentScreenId = _useRouteParams$scree === undefined ? null : _useRouteParams$scree;
+    currentScreenId = _useRouteParams$scree === void 0 ? null : _useRouteParams$scree;
   var createScreenFromDefinition = useCallback(function (definition) {
     var _ref3 = value || {},
       _ref3$components = _ref3.components,
-      currentScreens = _ref3$components === undefined ? [] : _ref3$components,
+      currentScreens = _ref3$components === void 0 ? [] : _ref3$components,
       _ref3$theme = _ref3.theme,
-      theme = _ref3$theme === undefined ? {} : _ref3$theme;
+      theme = _ref3$theme === void 0 ? {} : _ref3$theme;
     var _ref4 = isString(definition) ? {
         id: definition
       } : definition,
       newScreenType = _ref4.id;
     var _ref5 = theme || {},
       _ref5$components = _ref5.components,
-      themeComponents = _ref5$components === undefined ? null : _ref5$components;
+      themeComponents = _ref5$components === void 0 ? null : _ref5$components;
     var themeScreen = themeComponents !== null ? themeComponents.find(function (it) {
       return it.type === newScreenType;
     }) || null : null;
@@ -2973,7 +2973,7 @@ var EditorScreens = function EditorScreens(_ref) {
     var screenProps = listItems.map(function (_ref8) {
       var id = _ref8.id,
         _ref8$props = _ref8.props,
-        props = _ref8$props === undefined ? null : _ref8$props;
+        props = _ref8$props === void 0 ? null : _ref8$props;
       return {
         id: id,
         props: props
@@ -2985,7 +2985,7 @@ var EditorScreens = function EditorScreens(_ref) {
     }) || []).length > 0;
     var _ref10 = value || {},
       _ref10$components = _ref10.components,
-      currentScreens = _ref10$components === undefined ? [] : _ref10$components;
+      currentScreens = _ref10$components === void 0 ? [] : _ref10$components;
     var currentIds = currentScreens.map(function (_ref11) {
       var id = _ref11.id;
       return id;
@@ -3014,7 +3014,7 @@ var EditorScreens = function EditorScreens(_ref) {
           }, props), (_screenProps$find = screenProps.find(function (_ref16) {
             var propsId = _ref16.id;
             return propsId === id;
-          })) === null || _screenProps$find === undefined ? undefined : _screenProps$find.props);
+          })) === null || _screenProps$find === void 0 ? void 0 : _screenProps$find.props);
         })
       });
       if (onChange !== null) {
@@ -3071,7 +3071,7 @@ var EditorScreens = function EditorScreens(_ref) {
     path: "".concat(routes.screen, "/(.*)?")
   }, function (_ref18) {
     var _ref18$screen = _ref18.screen,
-      screenId = _ref18$screen === undefined ? null : _ref18$screen;
+      screenId = _ref18$screen === void 0 ? null : _ref18$screen;
     return screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu, {
       items: screens.map(function (it) {
         return {
@@ -3212,13 +3212,13 @@ var Editor = function Editor(_ref) {
   // Apply base theme values to it's own components
   var _ref2 = value || {},
     _ref2$background = _ref2.background,
-    background = _ref2$background === undefined ? null : _ref2$background,
+    background = _ref2$background === void 0 ? null : _ref2$background,
     _ref2$colors = _ref2.colors,
-    colors = _ref2$colors === undefined ? null : _ref2$colors,
+    colors = _ref2$colors === void 0 ? null : _ref2$colors,
     _ref2$textStyles = _ref2.textStyles,
-    textStyles = _ref2$textStyles === undefined ? null : _ref2$textStyles,
+    textStyles = _ref2$textStyles === void 0 ? null : _ref2$textStyles,
     _ref2$boxStyles = _ref2.boxStyles,
-    boxStyles = _ref2$boxStyles === undefined ? null : _ref2$boxStyles;
+    boxStyles = _ref2$boxStyles === void 0 ? null : _ref2$boxStyles;
   var baseValue = isTheme ? _objectSpread(_objectSpread({}, value), {}, {
     theme: {
       background: background,
@@ -3386,13 +3386,13 @@ var SettingsForm = function SettingsForm(_ref) {
   if (field === null) return false;
   var _ref2 = field || {},
     _ref2$type = _ref2.type,
-    type = _ref2$type === undefined ? null : _ref2$type,
+    type = _ref2$type === void 0 ? null : _ref2$type,
     _ref2$fieldsProps = _ref2.fieldsProps,
-    fieldsProps = _ref2$fieldsProps === undefined ? null : _ref2$fieldsProps;
+    fieldsProps = _ref2$fieldsProps === void 0 ? null : _ref2$fieldsProps;
   var fieldsManager = useFieldsManager();
   var _ref3 = type !== null ? fieldsManager.getDefinition(type) : field,
     _ref3$component = _ref3.component,
-    fieldComponent = _ref3$component === undefined ? null : _ref3$component,
+    fieldComponent = _ref3$component === void 0 ? null : _ref3$component,
     settings = _ref3.settings;
   var FieldComponent = useFieldComponent(fieldComponent);
   var FieldsComponent = useFieldComponent('fields');

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/editor",
-    "version": "0.3.654",
+    "version": "0.3.656",
     "private": false,
     "description": "",
     "keywords": [
@@ -71,11 +71,11 @@
         "@fortawesome/fontawesome-svg-core": "^6.5.2",
         "@fortawesome/free-solid-svg-icons": "^6.5.2",
         "@fortawesome/react-fontawesome": "^0.2.0",
-        "@micromag/core": "^0.3.651",
-        "@micromag/elements": "^0.3.651",
-        "@micromag/fields": "^0.3.654",
-        "@micromag/screens": "^0.3.654",
-        "@micromag/viewer": "^0.3.654",
+        "@micromag/core": "^0.3.656",
+        "@micromag/elements": "^0.3.656",
+        "@micromag/fields": "^0.3.656",
+        "@micromag/screens": "^0.3.656",
+        "@micromag/viewer": "^0.3.656",
         "@panneau/uppy": "^3.0.162",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
@@ -91,5 +91,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "3b816434640ea6c49c5234381337257ea7a052bd"
+    "gitHead": "fd956cc4a183b621df124f3f3afbae4af974db27"
 }