@micromag/editor 0.3.479 → 0.3.482

package/es/index.js

@@ -6,28 +6,26 @@ import PropTypes from 'prop-types';
 import React, { useMemo, useRef, useCallback, useState, forwardRef, useEffect } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { PropTypes as PropTypes$1 } from '@micromag/core';
-import { Button, FieldForm, BackButton, Breadcrumb as Breadcrumb$1, Modal, ModalDialog, Label, Navbar, DropdownMenu, Empty, Tabs, ScreenPlaceholder, ScreenPreview, Modals } from '@micromag/core/components';
+import { Button, FieldForm, BackButton, Breadcrumb as Breadcrumb$2, Modal, ModalDialog, Label, Navbar, DropdownMenu, Empty, Tabs, ScreenPlaceholder, ScreenPreview, Modals } from '@micromag/core/components';
 import { useRoutes, useScreenDefinition, useFormsComponents, useScreensManager, useFieldsManager, useFieldsComponentsManager, useUrlGenerator, useRoutePush, ScreenProvider, useScreenSize, PlaybackProvider, ModalsProvider, PanelsProvider, ScreenSizeProvider, useFieldComponent, ComponentsProvider, FORMS_NAMESPACE, UppyProvider, StoryProvider, GoogleKeysProvider, GoogleMapsClientProvider, FontsProvider, EditorProvider, VisitorProvider, ComponentsContext, RoutesProvider } from '@micromag/core/contexts';
 import { useIsVisible, useParsedStory, useDimensionObserver, useScreenSizeFromElement, useMediasParser } from '@micromag/core/hooks';
 import { getScreenExtraField, isMessage, slug, getComponentFromName, getDeviceScreens } from '@micromag/core/utils';
-import { useRouteMatch, useHistory, Route, MemoryRouter } from 'react-router';
+import { useRouteMatcher, createPathToRegexpParser, useMemoryRouter } from '@folklore/routes';
+import { useLocation, Switch, Route, Router } from 'wouter';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
-import { v1 } from 'uuid';
-import isString from 'lodash/isString';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import 'lodash/isArray';
-import 'lodash/get';
-import 'lodash/set';
 import { faCogs } from '@fortawesome/free-solid-svg-icons/faCogs';
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Fields, FieldsProvider } from '@micromag/fields';
+import { v1 } from 'uuid';
 import { getSizeWithinBounds } from '@folklore/size';
 import { Viewer } from '@micromag/viewer';
 import _toArray from '@babel/runtime/helpers/toArray';
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
 import { faTimesCircle } from '@fortawesome/free-solid-svg-icons/faTimesCircle';
+import isString from 'lodash/isString';
 import isFunction from 'lodash/isFunction';
 import { ReactSortable } from 'react-sortablejs';
 import { KeyboardCode, closestCorners, getFirstCollision, getClientRect, MeasuringStrategy, defaultDropAnimation, useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
@@ -39,7 +37,6 @@ import { faAngleDown } from '@fortawesome/free-solid-svg-icons/faAngleDown';
 import { faGripLines } from '@fortawesome/free-solid-svg-icons/faGripLines';
 import { faTimes } from '@fortawesome/free-solid-svg-icons/faTimes';
 import orderBy from 'lodash/orderBy';
-import { BrowserRouter } from 'react-router-dom';
 import { ScreensProvider } from '@micromag/screens';
 
 var useRouteParams = function useRouteParams() {
@@ -47,31 +44,41 @@ var useRouteParams = function useRouteParams() {
     _ref$screenOnly = _ref.screenOnly,
     screenOnly = _ref$screenOnly === void 0 ? false : _ref$screenOnly;
   var routes = useRoutes();
-  var path = useMemo(function () {
-    return screenOnly ? [routes.screen, '*'] : [routes['screen.field.form'], routes['screen.field'], routes.screen, '*'];
-  }, [routes, screenOnly]);
-  var _useRouteMatch = useRouteMatch({
-      path: path
-    }),
-    url = _useRouteMatch.url,
-    _useRouteMatch$params = _useRouteMatch.params,
-    _useRouteMatch$params2 = _useRouteMatch$params.screen,
-    screen = _useRouteMatch$params2 === void 0 ? null : _useRouteMatch$params2,
-    _useRouteMatch$params3 = _useRouteMatch$params.field,
-    field = _useRouteMatch$params3 === void 0 ? null : _useRouteMatch$params3,
-    _useRouteMatch$params4 = _useRouteMatch$params.form,
-    form = _useRouteMatch$params4 === void 0 ? null : _useRouteMatch$params4;
+  var _useLocation = useLocation(),
+    _useLocation2 = _slicedToArray(_useLocation, 1),
+    location = _useLocation2[0];
+  var matcher = useRouteMatcher();
+  var _useMemo = useMemo(function () {
+      var paths = screenOnly ? [routes.screen] : [routes['screen.field.form'], routes['screen.field'], routes.screen, '*'];
+      return paths.reduce(function (currentParams, path) {
+        if (currentParams !== null) {
+          return currentParams;
+        }
+        var _matcher = matcher(path),
+          _matcher2 = _slicedToArray(_matcher, 2),
+          _matcher2$ = _matcher2[0],
+          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 === void 0 ? null : _useMemo$screen,
+    _useMemo$field = _useMemo.field,
+    field = _useMemo$field === void 0 ? null : _useMemo$field,
+    _useMemo$form = _useMemo.form,
+    form = _useMemo$form === void 0 ? null : _useMemo$form;
   var routeParams = useMemo(function () {
     return screenOnly ? {
-      url: url,
+      url: location,
       screen: screen
     } : {
-      url: url,
+      url: location,
       screen: screen,
       field: field,
       form: form
     };
-  }, [screenOnly, url, screen, field, form]);
+  }, [screenOnly, location, screen, field, form]);
   return routeParams;
 };
 
@@ -186,6 +193,7 @@ var createScreen = function createScreen(definition) {
     id: v1()
   });
 };
+var createScreen$1 = createScreen;
 
 var _excluded$c = ["components"];
 var deleteScreen = function deleteScreen(story, screenId) {
@@ -275,6 +283,7 @@ var SettingsButton = function SettingsButton(_ref) {
 };
 SettingsButton.propTypes = propTypes$o;
 SettingsButton.defaultProps = defaultProps$o;
+var SettingsButton$1 = SettingsButton;
 
 var _excluded$8 = ["name", "form"];
 var propTypes$n = {
@@ -335,6 +344,7 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
 };
 FieldWithContexts.propTypes = propTypes$n;
 FieldWithContexts.defaultProps = defaultProps$n;
+var FieldWithContexts$1 = FieldWithContexts;
 
 var styles$i = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
 
@@ -389,6 +399,7 @@ var ScreenForm = function ScreenForm(_ref) {
 };
 ScreenForm.propTypes = propTypes$m;
 ScreenForm.defaultProps = defaultProps$m;
+var ScreenForm$1 = ScreenForm;
 
 var styles$h = {"container":"micromag-editor-menus-breadcrumb-container"};
 
@@ -418,7 +429,9 @@ var Breadcrumb = function Breadcrumb(_ref) {
   var _ref2 = story || {},
     _ref2$components = _ref2.components,
     screens = _ref2$components === void 0 ? [] : _ref2$components;
-  var history = useHistory();
+  var _useLocation = useLocation(),
+    _useLocation2 = _slicedToArray(_useLocation, 2),
+    setLocation = _useLocation2[1];
   var screensManager = useScreensManager();
   var fieldsManager = useFieldsManager();
   var fieldsComponentManager = useFieldsComponentsManager();
@@ -603,13 +616,13 @@ var Breadcrumb = function Breadcrumb(_ref) {
   }, [intl, route, screenId, field, form, url, screenFields, screenStates, screenTitle, fieldsManager]);
   var itemsLength = items.length;
   var onClickBack = useCallback(function () {
-    history.push(items[itemsLength - 2].url);
-  }, [items]);
+    setLocation(items[itemsLength - 2].url);
+  }, [items, setLocation]);
   var withBack = itemsLength > 1;
   return /*#__PURE__*/React.createElement(React.Fragment, null, withBack ? /*#__PURE__*/React.createElement(BackButton, {
     onClick: onClickBack,
     className: "me-2 py-0"
-  }) : null, /*#__PURE__*/React.createElement(Breadcrumb$1, {
+  }) : null, /*#__PURE__*/React.createElement(Breadcrumb$2, {
     items: items,
     theme: "secondary",
     withoutBar: true,
@@ -619,6 +632,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
 };
 Breadcrumb.propTypes = propTypes$l;
 Breadcrumb.defaultProps = defaultProps$l;
+var Breadcrumb$1 = Breadcrumb;
 
 var styles$g = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
 
@@ -679,6 +693,7 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
 };
 DeleteScreenModal.propTypes = propTypes$k;
 DeleteScreenModal.defaultProps = defaultProps$k;
+var DeleteScreenModal$1 = DeleteScreenModal;
 
 var styles$f = {"panel":"micromag-editor-form-panel","exit":"micromag-editor-form-exit","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterRight":"micromag-editor-form-enterRight","enterLeft":"micromag-editor-form-enterLeft","enterTop":"micromag-editor-form-enterTop","enterBottom":"micromag-editor-form-enterBottom","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","exitActiveRight":"micromag-editor-form-exitActiveRight","exitActiveLeft":"micromag-editor-form-exitActiveLeft","exitActiveTop":"micromag-editor-form-exitActiveTop","exitActiveBottom":"micromag-editor-form-exitActiveBottom"};
 
@@ -700,7 +715,9 @@ var EditForm = function EditForm(_ref) {
     className = _ref.className,
     onChange = _ref.onChange;
   // Match routes
-  var history = useHistory();
+  var _useLocation = useLocation(),
+    _useLocation2 = _slicedToArray(_useLocation, 2),
+    setLocation = _useLocation2[1];
   var routePush = useRoutePush();
   var _useRouteParams = useRouteParams(),
     url = _useRouteParams.url,
@@ -785,12 +802,12 @@ var EditForm = function EditForm(_ref) {
     var fieldKey = "".concat(field).concat(formName !== null ? ":".concat(formName) : '');
     var pastUrl = fieldForms[fieldKey] || null;
     if (pastUrl !== null) {
-      history.push(pastUrl);
+      setLocation(pastUrl);
     }
     setFieldForms(Object.keys(fieldForms).reduce(function (map, key) {
       return key !== fieldKey ? _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, key, fieldForms[key])) : map;
     }, {}));
-  }, [history, screenId, fieldForms, setFieldForms]);
+  }, [setLocation, screenId, fieldForms, setFieldForms]);
   var triggerOnChange = useCallback(function (newValue) {
     if (onChange !== null) {
       onChange(newValue);
@@ -870,7 +887,7 @@ var EditForm = function EditForm(_ref) {
     noWrap: true,
     withoutCollapse: true,
     className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$f.navbar])
-  }, /*#__PURE__*/React.createElement(Breadcrumb, {
+  }, /*#__PURE__*/React.createElement(Breadcrumb$1, {
     story: value,
     url: url,
     screenId: screenId,
@@ -879,7 +896,7 @@ var EditForm = function EditForm(_ref) {
     className: "me-auto"
   }), fieldParams === null ? /*#__PURE__*/React.createElement("div", {
     className: "dropdown"
-  }, /*#__PURE__*/React.createElement(SettingsButton, {
+  }, /*#__PURE__*/React.createElement(SettingsButton$1, {
     onClick: onSettingsClick,
     dots: true,
     className: "py-0",
@@ -905,7 +922,7 @@ var EditForm = function EditForm(_ref) {
     className: classNames(['w-100', styles$f.panel])
   }, /*#__PURE__*/React.createElement(ScreenProvider, {
     data: screen
-  }, /*#__PURE__*/React.createElement(FieldWithContexts, {
+  }, /*#__PURE__*/React.createElement(FieldWithContexts$1, {
     name: fieldParams.replace(/\//g, '.'),
     value: screen,
     form: formParams,
@@ -923,7 +940,7 @@ var EditForm = function EditForm(_ref) {
     key: "screen-".concat(screen.id)
   }, /*#__PURE__*/React.createElement(ScreenProvider, {
     data: screen
-  }, /*#__PURE__*/React.createElement(ScreenForm, {
+  }, /*#__PURE__*/React.createElement(ScreenForm$1, {
     value: screen,
     className: styles$f.form,
     onChange: onScreenFormChange,
@@ -938,13 +955,14 @@ var EditForm = function EditForm(_ref) {
       "value": "Select a screen..."
     }],
     decription: "Indication to select a screen to view the form"
-  }))), deleteScreenModalOpened ? /*#__PURE__*/React.createElement(DeleteScreenModal, {
+  }))), deleteScreenModalOpened ? /*#__PURE__*/React.createElement(DeleteScreenModal$1, {
     onConfirm: onDeleteScreenConfirm,
     onCancel: onDeleteScreenCancel
   }) : null);
 };
 EditForm.propTypes = propTypes$j;
 EditForm.defaultProps = defaultProps$j;
+var EditorForm = EditForm;
 
 function useScreenStates(screen) {
   var _ref = screen || {},
@@ -1009,6 +1027,7 @@ var DesktopIcon = function DesktopIcon(_ref) {
 };
 DesktopIcon.propTypes = propTypes$i;
 DesktopIcon.defaultProps = defaultProps$i;
+var DesktopIcon$1 = DesktopIcon;
 
 /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
 var propTypes$h = {
@@ -1040,11 +1059,12 @@ var MobileIcon = function MobileIcon(_ref) {
 };
 MobileIcon.propTypes = propTypes$h;
 MobileIcon.defaultProps = defaultProps$h;
+var MobileIcon$1 = MobileIcon;
 
 var DeviceIcons = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    Desktop: DesktopIcon,
-    Mobile: MobileIcon
+    Desktop: DesktopIcon$1,
+    Mobile: MobileIcon$1
 });
 
 var styles$d = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
@@ -1064,7 +1084,7 @@ var DeviceButton = function DeviceButton(_ref) {
     className = _ref.className,
     iconComponents = _ref.iconComponents,
     props = _objectWithoutProperties(_ref, _excluded$6);
-  var DeviceIcon = getComponentFromName(device, iconComponents, DesktopIcon);
+  var DeviceIcon = getComponentFromName(device, iconComponents, DesktopIcon$1);
   return /*#__PURE__*/React.createElement(Button, Object.assign({
     className: classNames([styles$d.container, _defineProperty({}, className, className !== null)])
   }, props), /*#__PURE__*/React.createElement(DeviceIcon, {
@@ -1073,6 +1093,7 @@ var DeviceButton = function DeviceButton(_ref) {
 };
 DeviceButton.propTypes = propTypes$g;
 DeviceButton.defaultProps = defaultProps$g;
+var DeviceButton$1 = DeviceButton;
 
 var _excluded$5 = ["id"];
 var propTypes$f = {
@@ -1096,7 +1117,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
     renderItemButton: function renderItemButton(item, index, props) {
       var id = item.id,
         itemProps = _objectWithoutProperties(item, _excluded$5);
-      return /*#__PURE__*/React.createElement(DeviceButton, Object.assign({
+      return /*#__PURE__*/React.createElement(DeviceButton$1, Object.assign({
         device: id
       }, props, itemProps, {
         className: styles$e.button,
@@ -1109,6 +1130,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
 };
 DevicesMenu.propTypes = propTypes$f;
 DevicesMenu.defaultProps = defaultProps$f;
+var DevicesMenu$1 = DevicesMenu;
 
 var styles$c = {"container":"micromag-editor-buttons-screen-container","button":"micromag-editor-buttons-screen-button","screen":"micromag-editor-buttons-screen-screen","inner":"micromag-editor-buttons-screen-inner","border":"micromag-editor-buttons-screen-border","icon":"micromag-editor-buttons-screen-icon","label":"micromag-editor-buttons-screen-label","active":"micromag-editor-buttons-screen-active"};
 
@@ -1269,6 +1291,7 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
 };
 ScreenWithPreview.propTypes = propTypes$d;
 ScreenWithPreview.defaultProps = defaultProps$d;
+var ScreenWithPreview$1 = ScreenWithPreview;
 
 var styles$a = {"container":"micromag-editor-partials-screen-states-container","button":"micromag-editor-partials-screen-states-button","addButton":"micromag-editor-partials-screen-states-addButton","title":"micromag-editor-partials-screen-states-title"};
 
@@ -1391,7 +1414,7 @@ function ScreenStates(_ref) {
     }, repeatableItems.map(function (item, index) {
       return /*#__PURE__*/React.createElement("li", {
         className: "p-1"
-      }, /*#__PURE__*/React.createElement(ScreenWithPreview, {
+      }, /*#__PURE__*/React.createElement(ScreenWithPreview$1, {
         index: index,
         withIndexIndicator: true,
         withDeleteButtonOnRepeatables: true,
@@ -1418,7 +1441,7 @@ function ScreenStates(_ref) {
         icon: faPlus
       }),
       onClick: onClickAdd
-    })) : null) : /*#__PURE__*/React.createElement(ScreenWithPreview, {
+    })) : null) : /*#__PURE__*/React.createElement(ScreenWithPreview$1, {
       screen: screen,
       screenState: id,
       className: styles$a.button,
@@ -1599,7 +1622,7 @@ var EditorPreview = function EditorPreview(_ref) {
     withoutMenu: true
   })))))), !withoutDevicesSizes ? /*#__PURE__*/React.createElement("div", {
     className: styles$9.deviceMenu
-  }, /*#__PURE__*/React.createElement(DevicesMenu, {
+  }, /*#__PURE__*/React.createElement(DevicesMenu$1, {
     items: devices.map(function (it) {
       return _objectSpread(_objectSpread({}, it), {}, {
         active: it.id === deviceId
@@ -1611,6 +1634,7 @@ var EditorPreview = function EditorPreview(_ref) {
 };
 EditorPreview.propTypes = propTypes$b;
 EditorPreview.defaultProps = defaultProps$b;
+var EditorPreview$1 = EditorPreview;
 
 var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
 function getDragDepth(offset, indentationWidth) {
@@ -2067,6 +2091,7 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
 });
 SortableTreeItemActions.propTypes = propTypes$a;
 SortableTreeItemActions.defaultProps = defaultProps$a;
+var SortableTreeItemActions$1 = SortableTreeItemActions;
 
 var styles$7 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
 
@@ -2170,7 +2195,7 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
   }, [onPointerUp]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$7.container])
-  }, /*#__PURE__*/React.createElement(SortableTreeItemActions, Object.assign({
+  }, /*#__PURE__*/React.createElement(SortableTreeItemActions$1, Object.assign({
     ref: setDraggableNodeRef,
     wrapperRef: setDroppableNodeRef,
     style: actionsStyle,
@@ -2192,6 +2217,7 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
 };
 SortableTreeItem.propTypes = propTypes$9;
 SortableTreeItem.defaultProps = defaultProps$9;
+var SortableTreeItem$1 = SortableTreeItem;
 
 var styles$6 = {"item":"micromag-editor-sortable-sortable-tree-item","parent":"micromag-editor-sortable-sortable-tree-parent","group":"micromag-editor-sortable-sortable-tree-group","isLastChild":"micromag-editor-sortable-sortable-tree-isLastChild"};
 
@@ -2571,7 +2597,7 @@ var SortableTree = function SortableTree(_ref2) {
     return /*#__PURE__*/React.createElement("div", {
       className: classNames([styles$6.item, _defineProperty(_defineProperty(_defineProperty({}, styles$6.parent, onCollapse !== null && !collapsed), styles$6.group, depth === 1), styles$6.isLastChild, next === null)]),
       key: id
-    }, /*#__PURE__*/React.createElement(SortableTreeItem, {
+    }, /*#__PURE__*/React.createElement(SortableTreeItem$1, {
       key: id,
       id: id,
       depth: currentDepth,
@@ -2595,7 +2621,7 @@ var SortableTree = function SortableTree(_ref2) {
   }, activeId && activeItem ? /*#__PURE__*/React.createElement("div", {
     className: styles$6.item,
     key: activeId
-  }, /*#__PURE__*/React.createElement(SortableTreeItem, {
+  }, /*#__PURE__*/React.createElement(SortableTreeItem$1, {
     id: activeId,
     depth: activeItem.depth,
     clone: true,
@@ -2612,6 +2638,7 @@ var SortableTree = function SortableTree(_ref2) {
 };
 SortableTree.propTypes = propTypes$8;
 SortableTree.defaultProps = defaultProps$8;
+var SortableTree$1 = SortableTree;
 
 var styles$5 = {"container":"micromag-editor-menus-screens-container","screen":"micromag-editor-menus-screens-screen","preview":"micromag-editor-menus-screens-preview","placeholder":"micromag-editor-menus-screens-placeholder","items":"micromag-editor-menus-screens-items","item":"micromag-editor-menus-screens-item","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","noWrap":"micromag-editor-menus-screens-noWrap","isVertical":"micromag-editor-menus-screens-isVertical","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
 
@@ -2682,7 +2709,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
       key: item.id,
       className: classNames([styles$5.item, _defineProperty(_defineProperty({}, itemClassName, itemClassName !== null), itemCustomClassName, itemCustomClassName !== null)]),
       "data-screen-id": item.id
-    }, /*#__PURE__*/React.createElement(ScreenWithPreview, {
+    }, /*#__PURE__*/React.createElement(ScreenWithPreview$1, {
       index: index,
       screen: withPlaceholder ? _objectSpread(_objectSpread({}, screen), {}, {
         type: type
@@ -2733,9 +2760,9 @@ var ScreensMenu = function ScreensMenu(_ref) {
   }, [items, isTree, items.length]);
   return /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$5.container, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles$5.noWrap, noWrap), styles$5.isVertical, isVertical), styles$5.isTree, isTree), styles$5.withPlaceholder, withPlaceholder), className, className)])
-  }, isTree && !sortable ? /*#__PURE__*/React.createElement(SortableTree, {
+  }, isTree && !sortable ? /*#__PURE__*/React.createElement(SortableTree$1, {
     items: sortableItems,
-    component: ScreenWithPreview,
+    component: ScreenWithPreview$1,
     onClickItem: onClickItem,
     onChange: onOrderChange
   }) : null, !isTree && sortable && items.length > 1 ? /*#__PURE__*/React.createElement(ReactSortable, {
@@ -2752,6 +2779,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
 };
 ScreensMenu.propTypes = propTypes$7;
 ScreensMenu.defaultProps = defaultProps$7;
+var ScreensMenu$1 = ScreensMenu;
 
 var styles$4 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title","screen":"micromag-editor-menus-screen-types-screen","button":"micromag-editor-menus-screen-types-button"};
 
@@ -2844,7 +2872,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
       className: styles$4.row
     }, /*#__PURE__*/React.createElement(Label, null, name), /*#__PURE__*/React.createElement("div", {
       className: styles$4.layouts
-    }, /*#__PURE__*/React.createElement(ScreensMenu, {
+    }, /*#__PURE__*/React.createElement(ScreensMenu$1, {
       items: items,
       withPlaceholder: true,
       withName: true,
@@ -2861,6 +2889,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
 };
 ScreenTypes.propTypes = propTypes$6;
 ScreenTypes.defaultProps = defaultProps$6;
+var ScreenTypesMenu = ScreenTypes;
 
 var styles$3 = {"container":"micromag-editor-modals-screen-types-container","selected":"micromag-editor-modals-screen-types-selected"};
 
@@ -2891,7 +2920,7 @@ var ScreenTypesModal = function ScreenTypesModal(_ref) {
     }),
     className: classNames([styles$3.container, _defineProperty({}, className, className)]),
     onClickClose: onRequestClose
-  }, /*#__PURE__*/React.createElement(ScreenTypes, {
+  }, /*#__PURE__*/React.createElement(ScreenTypesMenu, {
     selectedTypes: selectedTypes,
     className: styles$3.menu,
     onClickItem: onClickScreenType
@@ -2899,6 +2928,7 @@ var ScreenTypesModal = function ScreenTypesModal(_ref) {
 };
 ScreenTypesModal.propTypes = propTypes$5;
 ScreenTypesModal.defaultProps = defaultProps$5;
+var ScreenTypesModal$1 = ScreenTypesModal;
 
 var styles$2 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
 
@@ -2970,7 +3000,7 @@ var EditorScreens = function EditorScreens(_ref) {
     var themeScreen = themeComponents !== null ? themeComponents.find(function (it) {
       return it.type === newScreenType;
     }) || null : null;
-    var newScreen = createScreen(definition, themeScreen);
+    var newScreen = createScreen$1(definition, themeScreen);
     var foundIndex = screens.findIndex(function (_ref6) {
       var id = _ref6.id;
       return id === currentScreenId;
@@ -3086,43 +3116,71 @@ var EditorScreens = function EditorScreens(_ref) {
     })
   })), /*#__PURE__*/React.createElement("div", {
     className: "flex-grow-1 d-flex w-100 p-2"
-  }, /*#__PURE__*/React.createElement(Route, {
-    path: [routes.screen, routes.home],
-    render: function render(_ref18) {
-      var _ref18$match$params$s = _ref18.match.params.screen,
-        screenId = _ref18$match$params$s === void 0 ? null : _ref18$match$params$s;
-      return screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu, {
-        items: screens.map(function (it) {
-          return {
-            id: it.id,
-            screen: it,
-            href: url('screen', {
-              screen: it.id
-            }),
-            active: it.id === screenId
-          };
+  }, /*#__PURE__*/React.createElement(Switch, null, /*#__PURE__*/React.createElement(Route, {
+    path: "".concat(routes.screen, "/(.*)?")
+  }, function (_ref18) {
+    var _ref18$screen = _ref18.screen,
+      screenId = _ref18$screen === void 0 ? null : _ref18$screen;
+    return screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu$1, {
+      items: screens.map(function (it) {
+        return {
+          id: it.id,
+          screen: it,
+          href: url('screen', {
+            screen: it.id
+          }),
+          active: it.id === screenId
+        };
+      }),
+      isVertical: isVertical,
+      withPreview: true,
+      sortable: !isTree,
+      className: "w-100",
+      onClickItem: onClickScreen,
+      onOrderChange: onOrderChange,
+      isTree: isTree
+    }) : /*#__PURE__*/React.createElement(Empty, {
+      className: "flex-grow-1 p-2"
+    }, /*#__PURE__*/React.createElement(Button, {
+      theme: "primary",
+      onClick: onClickAdd
+    }, /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "JoWKee",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Create your first screen"
+      }]
+    })));
+  }), /*#__PURE__*/React.createElement(Route, null, screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu$1, {
+    items: screens.map(function (it) {
+      return {
+        id: it.id,
+        screen: it,
+        href: url('screen', {
+          screen: it.id
         }),
-        isVertical: isVertical,
-        withPreview: true,
-        sortable: !isTree,
-        className: "w-100",
-        onClickItem: onClickScreen,
-        onOrderChange: onOrderChange,
-        isTree: isTree
-      }) : /*#__PURE__*/React.createElement(Empty, {
-        className: "flex-grow-1 p-2"
-      }, /*#__PURE__*/React.createElement(Button, {
-        theme: "primary",
-        onClick: onClickAdd
-      }, /*#__PURE__*/React.createElement(FormattedMessage, {
-        id: "JoWKee",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Create your first screen"
-        }]
-      })));
-    }
-  })), createModalOpened ? /*#__PURE__*/React.createElement(ScreenTypesModal, {
+        active: false
+      };
+    }),
+    isVertical: isVertical,
+    withPreview: true,
+    sortable: !isTree,
+    className: "w-100",
+    onClickItem: onClickScreen,
+    onOrderChange: onOrderChange,
+    isTree: isTree
+  }) : /*#__PURE__*/React.createElement(Empty, {
+    className: "flex-grow-1 p-2"
+  }, /*#__PURE__*/React.createElement(Button, {
+    theme: "primary",
+    onClick: onClickAdd
+  }, /*#__PURE__*/React.createElement(FormattedMessage, {
+    id: "JoWKee",
+    defaultMessage: [{
+      "type": 0,
+      "value": "Create your first screen"
+    }]
+  })))))), createModalOpened ? /*#__PURE__*/React.createElement(ScreenTypesModal$1, {
     selectedTypes: isTheme ? screens.map(function (_ref19) {
       var type = _ref19.type;
       return type;
@@ -3133,6 +3191,7 @@ var EditorScreens = function EditorScreens(_ref) {
 };
 EditorScreens.propTypes = propTypes$4;
 EditorScreens.defaultProps = defaultProps$4;
+var Screens = EditorScreens;
 
 var styles$1 = {"container":"micromag-editor-container","left":"micromag-editor-left","right":"micromag-editor-right","fullscreen":"micromag-editor-fullscreen","preview":"micromag-editor-preview","center":"micromag-editor-center","inner":"micromag-editor-inner","visible":"micromag-editor-visible","screen-medium":"micromag-editor-screen-medium","top":"micromag-editor-top"};
 
@@ -3308,7 +3367,7 @@ var Editor = function Editor(_ref) {
   }, /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$1.left, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'screens')]),
     ref: refScreensContainer
-  }, /*#__PURE__*/React.createElement(EditorScreens, {
+  }, /*#__PURE__*/React.createElement(Screens, {
     value: story,
     isTheme: isTheme,
     isCreateOpened: isCreateOpened,
@@ -3320,7 +3379,7 @@ var Editor = function Editor(_ref) {
     isTree: true
   })), /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$1.center, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'preview')])
-  }, /*#__PURE__*/React.createElement(EditorPreview, {
+  }, /*#__PURE__*/React.createElement(EditorPreview$1, {
     value: story,
     isTheme: isTheme,
     viewerTheme: viewerTheme,
@@ -3329,7 +3388,7 @@ var Editor = function Editor(_ref) {
     onChange: onStoryChange
   })), /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$1.right, _defineProperty({}, styles$1.visible, !isMobile || mobileView === 'form')])
-  }, /*#__PURE__*/React.createElement(EditForm, {
+  }, /*#__PURE__*/React.createElement(EditorForm, {
     key: screenId,
     value: story,
     isTheme: isTheme,
@@ -3339,6 +3398,7 @@ var Editor = function Editor(_ref) {
 };
 Editor.propTypes = propTypes$3;
 Editor.defaultProps = defaultProps$3;
+var Editor$1 = Editor;
 
 // eslint-disable-next-line import/prefer-default-export
 var routes = PropTypes.shape({
@@ -3411,12 +3471,13 @@ var SettingsForm = function SettingsForm(_ref) {
 };
 SettingsForm.propTypes = propTypes$2;
 SettingsForm.defaultProps = defaultProps$2;
+var SettingsForm$1 = SettingsForm;
 
 // eslint-disable-next-line import/prefer-default-export
 
 var FormsComponents = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    Settings: SettingsForm
+    Settings: SettingsForm$1
 });
 
 /* eslint-disable react/jsx-props-no-spreading */
@@ -3434,17 +3495,21 @@ var FormsProvider = function FormsProvider(props) {
 };
 FormsProvider.propTypes = propTypes$1;
 FormsProvider.defaultProps = defaultProps$1;
+var FormsProvider$1 = FormsProvider;
 
 var home = "/";
+var screen_wildcard = "/:screen/(.*)?";
 var screen = "/:screen";
 var defaultRoutes = {
   home: home,
+  screen_wildcard: screen_wildcard,
   screen: screen,
   "screen.field": "/:screen/:field+",
   "screen.field.form": "/:screen/:field+/:form"
 };
 
 var _excluded = ["value", "memoryRouter", "routes", "basePath", "uppy", "googleApiKey", "googleMapsLibraries", "screenNamespaces"];
+var pathToRegexpParser = createPathToRegexpParser();
 var propTypes = {
   value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
   routes: routes,
@@ -3477,15 +3542,19 @@ var EditorContainer = function EditorContainer(_ref) {
     googleMapsLibraries = _ref.googleMapsLibraries,
     screenNamespaces = _ref.screenNamespaces,
     props = _objectWithoutProperties(_ref, _excluded);
-  var Router = memoryRouter ? MemoryRouter : BrowserRouter;
   var _useIntl = useIntl(),
     locale = _useIntl.locale;
 
   // const { metadata } = value || {};
   // const { language:finalLocale = locale } = metadata || {};
-
+  var _useMemoryRouter = useMemoryRouter(),
+    memoryLocationHook = _useMemoryRouter.hook,
+    memorySearchHook = _useMemoryRouter.searchHook;
   return /*#__PURE__*/React.createElement(Router, {
-    basename: !memoryRouter ? basePath : null
+    hook: memoryRouter ? memoryLocationHook : null,
+    searchHook: memoryRouter ? memorySearchHook : null,
+    parser: pathToRegexpParser,
+    base: !memoryRouter ? basePath : null
   }, /*#__PURE__*/React.createElement(UppyProvider, uppy, /*#__PURE__*/React.createElement(StoryProvider, {
     story: value
   }, /*#__PURE__*/React.createElement(ScreensProvider, {
@@ -3496,7 +3565,7 @@ var EditorContainer = function EditorContainer(_ref) {
   }, /*#__PURE__*/React.createElement(GoogleMapsClientProvider, {
     locale: locale,
     libraries: googleMapsLibraries
-  }, /*#__PURE__*/React.createElement(FontsProvider, null, /*#__PURE__*/React.createElement(FieldsProvider, null, /*#__PURE__*/React.createElement(FormsProvider, null, /*#__PURE__*/React.createElement(EditorProvider, null, /*#__PURE__*/React.createElement(VisitorProvider, {
+  }, /*#__PURE__*/React.createElement(FontsProvider, null, /*#__PURE__*/React.createElement(FieldsProvider, null, /*#__PURE__*/React.createElement(FormsProvider$1, null, /*#__PURE__*/React.createElement(EditorProvider, null, /*#__PURE__*/React.createElement(VisitorProvider, {
     visitor: "editor"
   }, /*#__PURE__*/React.createElement(ComponentsContext.Consumer, null, function (manager) {
     var formComponents = manager.getComponents(FORMS_NAMESPACE);
@@ -3507,12 +3576,13 @@ var EditorContainer = function EditorContainer(_ref) {
       routes: _objectSpread(_objectSpread({}, routes), {}, {
         'screen.field.form': routes['screen.field.form'].replace(/:form$/, ":form(".concat(formRegEx, ")"))
       })
-    }, /*#__PURE__*/React.createElement(Editor, Object.assign({
+    }, /*#__PURE__*/React.createElement(Editor$1, Object.assign({
       value: value
     }, props)));
   }))))))))))));
 };
 EditorContainer.propTypes = propTypes;
 EditorContainer.defaultProps = defaultProps;
+var EditorContainer$1 = EditorContainer;
 
-export { Editor, ScreenTypes, ScreensMenu as Screens, createScreen, EditorContainer as default };
+export { Editor$1 as Editor, ScreenTypesMenu as ScreenTypes, ScreensMenu$1 as Screens, createScreen$1 as createScreen, EditorContainer$1 as default };