@micromag/editor 0.2.409 → 0.2.413

package/es/index.js

@@ -71,7 +71,7 @@ var useRouteParams = function useRouteParams() {
   return routeParams;
 };
 
-var styles$f = {"container":"micromag-editor-container","left":"micromag-editor-left","right":"micromag-editor-right","center":"micromag-editor-center","fullscreen":"micromag-editor-fullscreen","preview":"micromag-editor-preview","inner":"micromag-editor-inner","visible":"micromag-editor-visible","screen-medium":"micromag-editor-screen-medium","top":"micromag-editor-top"};
+var styles$h = {"container":"micromag-editor-container","left":"micromag-editor-left","right":"micromag-editor-right","center":"micromag-editor-center","fullscreen":"micromag-editor-fullscreen","preview":"micromag-editor-preview","inner":"micromag-editor-inner","visible":"micromag-editor-visible","screen-medium":"micromag-editor-screen-medium","top":"micromag-editor-top"};
 
 var createScreen = function createScreen(definition) {
   var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -245,7 +245,7 @@ var SettingsButton = function SettingsButton(_ref) {
 SettingsButton.propTypes = propTypes$n;
 SettingsButton.defaultProps = defaultProps$n;
 
-var styles$e = {"container":"micromag-editor-menus-breadcrumb-container"};
+var styles$g = {"container":"micromag-editor-menus-breadcrumb-container"};
 
 var propTypes$m = {
   story: PropTypes$1.story,
@@ -395,14 +395,14 @@ var Breadcrumb = function Breadcrumb(_ref) {
     theme: "secondary",
     withoutBar: true,
     noWrap: true,
-    className: classNames([styles$e.container, 'text-truncate', _defineProperty({}, className, className !== null)])
+    className: classNames([styles$g.container, 'text-truncate', _defineProperty({}, className, className !== null)])
   }));
 };
 
 Breadcrumb.propTypes = propTypes$m;
 Breadcrumb.defaultProps = defaultProps$m;
 
-var styles$d = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
+var styles$f = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
 
 var propTypes$l = {
   value: PropTypes$1.component,
@@ -445,9 +445,9 @@ var ScreenForm = function ScreenForm(_ref) {
 
 
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$d.container, _defineProperty({}, className, className)])
+    className: classNames([styles$f.container, _defineProperty({}, className, className)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$d.inner
+    className: styles$f.inner
   }, /*#__PURE__*/React.createElement(Fields, {
     fields: fields,
     value: value,
@@ -485,7 +485,7 @@ var FieldWithContexts = function FieldWithContexts(props) {
 FieldWithContexts.propTypes = propTypes$k;
 FieldWithContexts.defaultProps = defaultProps$k;
 
-var styles$c = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
+var styles$e = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
 
 var propTypes$j = {
   className: PropTypes.string,
@@ -510,10 +510,10 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
         "value": "Delete screen"
       }]
     }),
-    className: classNames([styles$c.container, _defineProperty({}, className, className)]),
+    className: classNames([styles$e.container, _defineProperty({}, className, className)]),
     onClickClose: onCancel
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$c.description
+    className: styles$e.description
   }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(FormattedMessage, {
     id: "q/tLk0",
     defaultMessage: [{
@@ -521,7 +521,7 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
       "value": "Are you sure you want to delete this screen?"
     }]
   }))), /*#__PURE__*/React.createElement("div", {
-    className: styles$c.actions
+    className: styles$e.actions
   }, /*#__PURE__*/React.createElement(Button, {
     onClick: onCancel,
     className: "btn-outline-secondary mr-2"
@@ -547,7 +547,7 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
 DeleteScreenModal.propTypes = propTypes$j;
 DeleteScreenModal.defaultProps = defaultProps$j;
 
-var styles$b = {"panel":"micromag-editor-form-panel","leave":"micromag-editor-form-leave","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterBottom":"micromag-editor-form-enterBottom","enterLeft":"micromag-editor-form-enterLeft","enterRight":"micromag-editor-form-enterRight","enterTop":"micromag-editor-form-enterTop","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","leaveActiveLeft":"micromag-editor-form-leaveActiveLeft","leaveActiveRight":"micromag-editor-form-leaveActiveRight","leaveActiveBottom":"micromag-editor-form-leaveActiveBottom","leaveActiveTop":"micromag-editor-form-leaveActiveTop"};
+var styles$d = {"panel":"micromag-editor-form-panel","leave":"micromag-editor-form-leave","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterBottom":"micromag-editor-form-enterBottom","enterLeft":"micromag-editor-form-enterLeft","enterRight":"micromag-editor-form-enterRight","enterTop":"micromag-editor-form-enterTop","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","leaveActiveLeft":"micromag-editor-form-leaveActiveLeft","leaveActiveRight":"micromag-editor-form-leaveActiveRight","leaveActiveBottom":"micromag-editor-form-leaveActiveBottom","leaveActiveTop":"micromag-editor-form-leaveActiveTop"};
 
 var propTypes$i = {
   value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
@@ -590,7 +590,7 @@ var EditForm = function EditForm(_ref) {
   });
   var screen = screenIndex !== -1 ? screens[screenIndex] : null; // Get transition value
 
-  var _useFormTransition = useFormTransition(url, screenIndex, styles$b),
+  var _useFormTransition = useFormTransition(url, screenIndex, styles$d),
       transitionName = _useFormTransition.name,
       transitionTimeout = _useFormTransition.timeout;
 
@@ -706,7 +706,7 @@ var EditForm = function EditForm(_ref) {
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$b.navbar])
+    className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$d.navbar])
   }, /*#__PURE__*/React.createElement(Breadcrumb, {
     story: value,
     url: url,
@@ -722,14 +722,14 @@ var EditForm = function EditForm(_ref) {
     align: "right",
     onClickOutside: onDropdownClickOutside
   })) : null) : null, /*#__PURE__*/React.createElement("div", {
-    className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$b.content])
+    className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$d.content])
   }, screen !== null ? /*#__PURE__*/React.createElement(CSSTransitionGroup, {
     transitionName: transitionName,
     transitionEnterTimeout: transitionTimeout,
     transitionLeaveTimeout: transitionTimeout,
     className: "w-100 flex-grow-1"
   }, fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$b.panel]),
+    className: classNames(['w-100', styles$d.panel]),
     key: "field-".concat(fieldParams, "-").concat(formParams)
   }, /*#__PURE__*/React.createElement(ScreenProvider, {
     data: screen
@@ -737,19 +737,19 @@ var EditForm = function EditForm(_ref) {
     name: fieldParams.replace(/\//g, '.'),
     value: screen,
     form: formParams,
-    className: styles$b.form,
+    className: styles$d.form,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm,
     fieldContext: fieldContext,
     onChange: onScreenFormChange
   }))) : /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$b.panel]),
+    className: classNames(['w-100', styles$d.panel]),
     key: "screen-".concat(screen.id)
   }, /*#__PURE__*/React.createElement(ScreenProvider, {
     data: screen
   }, /*#__PURE__*/React.createElement(ScreenForm, {
     value: screen,
-    className: styles$b.form,
+    className: styles$d.form,
     onChange: onScreenFormChange,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm
@@ -791,6 +791,8 @@ var useThemeValue = function useThemeValue(value) {
   return valueWithTheme;
 };
 
+var styles$c = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
+
 /* eslint-disable react/button-has-type, react/jsx-props-no-spreading */
 var propTypes$h = {
   color: PropTypes.string,
@@ -863,7 +865,7 @@ var DeviceIcons = /*#__PURE__*/Object.freeze({
     Mobile: MobileIcon
 });
 
-var styles$a = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
+var styles$b = {"container":"micromag-editor-buttons-device-container","icon":"micromag-editor-buttons-device-icon"};
 
 var _excluded$6 = ["device", "className", "iconComponents"];
 var propTypes$f = {
@@ -884,17 +886,15 @@ var DeviceButton = function DeviceButton(_ref) {
 
   var DeviceIcon = getComponentFromName(device, iconComponents, DesktopIcon);
   return /*#__PURE__*/React.createElement(Button, Object.assign({
-    className: classNames([styles$a.container, _defineProperty({}, className, className !== null)])
+    className: classNames([styles$b.container, _defineProperty({}, className, className !== null)])
   }, props), /*#__PURE__*/React.createElement(DeviceIcon, {
-    className: styles$a.icon
+    className: styles$b.icon
   }));
 };
 
 DeviceButton.propTypes = propTypes$f;
 DeviceButton.defaultProps = defaultProps$f;
 
-var styles$9 = {"container":"micromag-editor-menus-devices-container","button":"micromag-editor-menus-devices-button"};
-
 var _excluded$5 = ["id"];
 var propTypes$e = {
   items: PropTypes$1.menuItems,
@@ -914,7 +914,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
   return /*#__PURE__*/React.createElement(Tabs, {
     items: items,
     theme: "outline-secondary",
-    className: classNames([styles$9.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$c.container, _defineProperty({}, className, className !== null)]),
     renderItemButton: function renderItemButton(item, index, props) {
       var id = item.id,
           itemProps = _objectWithoutProperties(item, _excluded$5);
@@ -922,7 +922,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
       return /*#__PURE__*/React.createElement(DeviceButton, Object.assign({
         device: id
       }, props, itemProps, {
-        className: styles$9.button,
+        className: styles$c.button,
         onClick: function onClick(e) {
           return onClickItem !== null ? onClickItem(e, item, index) : null;
         }
@@ -934,7 +934,7 @@ var DevicesMenu = function DevicesMenu(_ref) {
 DevicesMenu.propTypes = propTypes$e;
 DevicesMenu.defaultProps = defaultProps$e;
 
-var styles$8 = {"container":"micromag-editor-preview-container","noStory":"micromag-editor-preview-noStory","story":"micromag-editor-preview-story","inner":"micromag-editor-preview-inner","top":"micromag-editor-preview-top","bottom":"micromag-editor-preview-bottom","preview":"micromag-editor-preview-preview","viewerContainer":"micromag-editor-preview-viewerContainer","screen-medium":"micromag-editor-preview-screen-medium","withoutDevicesSizes":"micromag-editor-preview-withoutDevicesSizes"};
+var styles$a = {"container":"micromag-editor-preview-container","noStory":"micromag-editor-preview-noStory","story":"micromag-editor-preview-story","inner":"micromag-editor-preview-inner","top":"micromag-editor-preview-top","bottom":"micromag-editor-preview-bottom","preview":"micromag-editor-preview-preview","viewerContainer":"micromag-editor-preview-viewerContainer","screen-medium":"micromag-editor-preview-screen-medium","withoutDevicesSizes":"micromag-editor-preview-withoutDevicesSizes"};
 
 var propTypes$d = {
   value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
@@ -1036,13 +1036,13 @@ var EditorPreview = function EditorPreview(_ref) {
     };
   }, [device, contentRect, screen, withoutDevicesSizes]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$8.container, screens.map(function (screenName) {
-      return styles$8["screen-".concat(screenName)];
-    }), (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$8.withoutDevicesSizes, withoutDevicesSizes), _ref3)])
+    className: classNames([styles$a.container, screens.map(function (screenName) {
+      return styles$a["screen-".concat(screenName)];
+    }), (_ref3 = {}, _defineProperty(_ref3, className, className), _defineProperty(_ref3, styles$a.withoutDevicesSizes, withoutDevicesSizes), _ref3)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.inner
+    className: styles$a.inner
   }, !withoutDevicesSizes ? /*#__PURE__*/React.createElement("div", {
-    className: styles$8.top
+    className: styles$a.top
   }, /*#__PURE__*/React.createElement(DevicesMenu, {
     items: devices.map(function (it) {
       return _objectSpread(_objectSpread({}, it), {}, {
@@ -1051,12 +1051,12 @@ var EditorPreview = function EditorPreview(_ref) {
     }),
     onClickItem: onClickDeviceItem
   })) : null, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.bottom
+    className: styles$a.bottom
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.inner,
+    className: styles$a.inner,
     ref: bottomRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$8.preview,
+    className: styles$a.preview,
     style: previewStyle
   }, /*#__PURE__*/React.createElement(Route, {
     path: [routes.screen, routes.home],
@@ -1064,12 +1064,12 @@ var EditorPreview = function EditorPreview(_ref) {
       var _ref4$match$params$sc = _ref4.match.params.screen,
           screenId = _ref4$match$params$sc === void 0 ? null : _ref4$match$params$sc;
       return /*#__PURE__*/React.createElement("div", {
-        className: styles$8.viewerContainer
+        className: styles$a.viewerContainer
       }, /*#__PURE__*/React.createElement(Viewer, {
         story: valueParsed,
         storyIsParsed: true,
         screen: screenId,
-        className: styles$8.story,
+        className: styles$a.story,
         theme: viewerTheme,
         interactions: null,
         renderContext: "edit",
@@ -1082,13 +1082,13 @@ var EditorPreview = function EditorPreview(_ref) {
 EditorPreview.propTypes = propTypes$d;
 EditorPreview.defaultProps = defaultProps$d;
 
-var styles$7 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
+var styles$9 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
 
-var styles$6 = {"container":"micromag-editor-menus-screens-container","placeholder":"micromag-editor-menus-screens-placeholder","preview":"micromag-editor-menus-screens-preview","screen":"micromag-editor-menus-screens-screen","item":"micromag-editor-menus-screens-item","items":"micromag-editor-menus-screens-items","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","isVertical":"micromag-editor-menus-screens-isVertical","noWrap":"micromag-editor-menus-screens-noWrap","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
+var styles$8 = {"container":"micromag-editor-menus-screens-container","placeholder":"micromag-editor-menus-screens-placeholder","preview":"micromag-editor-menus-screens-preview","screen":"micromag-editor-menus-screens-screen","item":"micromag-editor-menus-screens-item","items":"micromag-editor-menus-screens-items","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","isVertical":"micromag-editor-menus-screens-isVertical","noWrap":"micromag-editor-menus-screens-noWrap","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
 
-var styles$5 = {"button":"micromag-editor-buttons-screen-with-preview-button","placeholder":"micromag-editor-buttons-screen-with-preview-placeholder","preview":"micromag-editor-buttons-screen-with-preview-preview","screen":"micromag-editor-buttons-screen-with-preview-screen"};
+var styles$7 = {"button":"micromag-editor-buttons-screen-with-preview-button","placeholder":"micromag-editor-buttons-screen-with-preview-placeholder","preview":"micromag-editor-buttons-screen-with-preview-preview","screen":"micromag-editor-buttons-screen-with-preview-screen"};
 
-var styles$4 = {"container":"micromag-editor-buttons-screen-container","button":"micromag-editor-buttons-screen-button","border":"micromag-editor-buttons-screen-border","screen":"micromag-editor-buttons-screen-screen","inner":"micromag-editor-buttons-screen-inner","icon":"micromag-editor-buttons-screen-icon","label":"micromag-editor-buttons-screen-label","active":"micromag-editor-buttons-screen-active"};
+var styles$6 = {"container":"micromag-editor-buttons-screen-container","button":"micromag-editor-buttons-screen-button","border":"micromag-editor-buttons-screen-border","screen":"micromag-editor-buttons-screen-screen","inner":"micromag-editor-buttons-screen-inner","icon":"micromag-editor-buttons-screen-icon","label":"micromag-editor-buttons-screen-label","active":"micromag-editor-buttons-screen-active"};
 
 var propTypes$c = {
   active: PropTypes.bool,
@@ -1132,17 +1132,17 @@ var ScreenButton = function ScreenButton(_ref) {
       onClick = _ref.onClick,
       refButton = _ref.refButton;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$4.container, 'rounded', (_ref2 = {}, _defineProperty(_ref2, styles$4.active, active), _defineProperty(_ref2, className, className !== null), _ref2)])
+    className: classNames([styles$6.container, 'rounded', (_ref2 = {}, _defineProperty(_ref2, styles$6.active, active), _defineProperty(_ref2, className, className !== null), _ref2)])
   }, /*#__PURE__*/React.createElement("div", {
-    className: styles$4.screen
+    className: styles$6.screen
   }, children !== null ? children : /*#__PURE__*/React.createElement("div", {
-    className: styles$4.inner
+    className: styles$6.inner
   }, icon !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$4.icon
+    className: styles$6.icon
   }, icon) : null, label !== null ? /*#__PURE__*/React.createElement("div", {
-    className: styles$4.label
+    className: styles$6.label
   }, label) : null)), /*#__PURE__*/React.createElement(Button, {
-    className: styles$4.button,
+    className: styles$6.button,
     withoutStyle: true,
     id: id,
     href: href,
@@ -1150,7 +1150,7 @@ var ScreenButton = function ScreenButton(_ref) {
     onClick: onClick,
     refButton: refButton
   }, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$4.border, 'rounded'])
+    className: classNames([styles$6.border, 'rounded'])
   })));
 };
 
@@ -1211,7 +1211,7 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
       height = _ref2$height === void 0 ? null : _ref2$height;
 
   return /*#__PURE__*/React.createElement(ScreenButton$1, Object.assign({}, screen, {
-    className: classNames([styles$5.button, (_ref3 = {}, _defineProperty(_ref3, buttonClassName, buttonClassName !== null), _defineProperty(_ref3, className, className !== null), _ref3)]),
+    className: classNames([styles$7.button, (_ref3 = {}, _defineProperty(_ref3, buttonClassName, buttonClassName !== null), _defineProperty(_ref3, className, className !== null), _ref3)]),
     title: isMessage(title) ? intl.formatMessage(title) : null,
     onClick: function onClick() {
       if (_onClick !== null) {
@@ -1223,21 +1223,21 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
       }
     }
   }), withPreview && !withPlaceholder ? /*#__PURE__*/React.createElement("div", {
-    className: styles$5.preview,
+    className: styles$7.preview,
     style: previewStyle
   }, /*#__PURE__*/React.createElement(ScreenPreview, {
     screen: screen,
     width: width,
     height: height,
-    className: styles$5.screen
+    className: styles$7.screen
   })) : null, withPlaceholder && !withPreview ? /*#__PURE__*/React.createElement("div", {
-    className: styles$5.placeholder,
+    className: styles$7.placeholder,
     style: previewStyle
   }, /*#__PURE__*/React.createElement(ScreenPlaceholder, {
     screen: screen,
     width: width,
     height: height,
-    className: styles$5.screen
+    className: styles$7.screen
   })) : null);
 };
 
@@ -1245,11 +1245,9 @@ ScreenWithPreview.propTypes = propTypes$b;
 ScreenWithPreview.defaultProps = defaultProps$b;
 
 var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
-
 function getDragDepth(offset, indentationWidth) {
   return Math.round(offset / indentationWidth);
 }
-
 function getMaxDepth(_ref) {
   var previousItem = _ref.previousItem;
 
@@ -1260,7 +1258,6 @@ function getMaxDepth(_ref) {
 
   return 0;
 }
-
 function getMinDepth(_ref2) {
   var nextItem = _ref2.nextItem;
 
@@ -1271,7 +1268,6 @@ function getMinDepth(_ref2) {
 
   return 0;
 }
-
 function getProjection(items, activeId, overId, dragOffset, indentationWidth) {
   var overItemIndex = items.findIndex(function (_ref3) {
     var id = _ref3.id;
@@ -1345,49 +1341,54 @@ function flatten(items) {
 function flattenTree(items) {
   return flatten(items);
 }
+function findItem(items, itemId) {
+  return items.find(function (_ref5) {
+    var id = _ref5.id;
+    return id === itemId;
+  });
+}
 function buildTree(flattenedItems) {
+  var root = {
+    id: 'root',
+    children: []
+  };
+
+  var nodes = _defineProperty({}, root.id, root);
+
   var items = flattenedItems.map(function (item) {
     return _objectSpread(_objectSpread({}, item), {}, {
       children: []
     });
-  });
-  var nodeList = items.reduce(function (acc, item) {
-    var _item$parentId = item.parentId,
-        parentId = _item$parentId === void 0 ? null : _item$parentId;
-
-    if (parentId) {
-      var found = false;
-      var newList = acc.map(function (it) {
-        if (it.id === parentId) {
-          found = true;
-          return _objectSpread(_objectSpread({}, it), {}, {
-            children: [].concat(_toConsumableArray(it.children), [_objectSpread({}, item)])
-          });
-        }
+  }); // eslint-disable-next-line no-restricted-syntax
 
-        return it;
-      });
+  var _iterator = _createForOfIteratorHelper(items),
+      _step;
 
-      if (found) {
-        return newList;
-      }
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _item$parentId, _nodes$parentId;
 
-      acc.push(_objectSpread(_objectSpread({}, items.find(function (_ref5) {
-        var id = _ref5.id;
-        return id === parentId;
-      }) || null), {}, {
-        children: [item]
-      }));
-      return acc;
+      var item = _step.value;
+      var id = item.id,
+          children = item.children;
+      var parentId = (_item$parentId = item.parentId) !== null && _item$parentId !== void 0 ? _item$parentId : root.id;
+      var parent = (_nodes$parentId = nodes[parentId]) !== null && _nodes$parentId !== void 0 ? _nodes$parentId : findItem(items, parentId);
+      nodes[id] = {
+        id: id,
+        children: children
+      };
+      parent.children.push(item);
     }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
 
-    acc.push(item);
-    return acc;
-  }, []);
-  return nodeList;
+  return root.children;
 }
 function findItemDeep(items, itemId) {
-  for (var i = 0; i < items.length - 1; i += 1) {
+  for (var i = 0; i < items.length; i += 1) {
     var item = items[i] || {};
     var id = item.id,
         _item$children = item.children,
@@ -1397,7 +1398,7 @@ function findItemDeep(items, itemId) {
       return item;
     }
 
-    if (children.length) {
+    if (children.length > 0) {
       var child = findItemDeep(children, itemId);
 
       if (child) {
@@ -1409,65 +1410,57 @@ function findItemDeep(items, itemId) {
   return undefined;
 }
 function removeItem(items, id) {
-  var newItems = [];
+  var newItems = []; // eslint-disable-next-line no-restricted-syntax
 
-  for (var i = 0; i < items.length - 1; i += 1) {
-    var item = items[i] || {};
+  var _iterator2 = _createForOfIteratorHelper(items),
+      _step2;
 
-    if (item.id === id) {
-      // eslint-disable-next-line no-continue
-      continue;
-    }
+  try {
+    for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+      var item = _step2.value;
 
-    if (item.children.length) {
-      item.children = removeItem(item.children || [], id);
-    }
+      if (item.id === id) {
+        // eslint-disable-next-line no-continue
+        continue;
+      }
+
+      if (item.children.length) {
+        item.children = removeItem(item.children, id);
+      }
 
-    newItems.push(item);
+      newItems.push(item);
+    }
+  } catch (err) {
+    _iterator2.e(err);
+  } finally {
+    _iterator2.f();
   }
 
   return newItems;
 }
 function setProperty(items, id, property, setter) {
-  //     const item = items[i];
-  //     if (item.id === id) {
-  //         item[property] = setter(item[property]);
-  //         newItems.push({ ...item });
-  //     } else {
-  //         const { children = [] } = item;
-  //         let newChildren = [];
-  //         if (children.length > 0) {
-  //             newChildren = setProperty(children, id, property, setter);
-  //         }
-  //         newItems.push({ ...item, children: newChildren });
-  //     }
-  // }
-
-  var _iterator = _createForOfIteratorHelper(items),
-      _step;
+  // eslint-disable-next-line no-restricted-syntax
+  var _iterator3 = _createForOfIteratorHelper(items),
+      _step3;
 
   try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var item = _step.value;
+    for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+      var item = _step3.value;
 
       if (item.id === id) {
-        item[property] = setter(item[property]);
+        item[property] = setter(item[property]); // eslint-disable-next-line no-continue
+
         continue;
       }
 
-      var _item$children2 = item.children,
-          children = _item$children2 === void 0 ? [] : _item$children2;
-
-      if (children.length) {
-        children = setProperty(children, id, property, setter);
+      if (item.children.length) {
+        item.children = setProperty(item.children, id, property, setter);
       }
-    } // console.log('fubar', items, newItems);
-    // return newItems;
-
+    }
   } catch (err) {
-    _iterator.e(err);
+    _iterator3.e(err);
   } finally {
-    _iterator.f();
+    _iterator3.f();
   }
 
   return _toConsumableArray(items);
@@ -1475,9 +1468,9 @@ function setProperty(items, id, property, setter) {
 
 function countChildren(items) {
   var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-  return items.reduce(function (acc, _ref7) {
-    var _ref7$children = _ref7.children,
-        children = _ref7$children === void 0 ? [] : _ref7$children;
+  return items.reduce(function (acc, _ref6) {
+    var _ref6$children = _ref6.children,
+        children = _ref6$children === void 0 ? [] : _ref6$children;
 
     if (children.length) {
       return countChildren(children, acc + 1);
@@ -1500,8 +1493,8 @@ function removeChildrenOf(items, ids) {
 
   return items.filter(function (item) {
     if (item.parentId && excludeParentIds.includes(item.parentId)) {
-      var _item$children3 = item.children,
-          children = _item$children3 === void 0 ? [] : _item$children3;
+      var _item$children2 = item.children,
+          children = _item$children2 === void 0 ? [] : _item$children2;
 
       if (children.length) {
         excludeParentIds.push(item.id);
@@ -1649,9 +1642,13 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
   };
 };
 
-var styles$3 = {"wrapper":"micromag-editor-sortable-tree-item-actions-wrapper","inner":"micromag-editor-sortable-tree-item-actions-inner","button":"micromag-editor-sortable-tree-item-actions-button","withChildren":"micromag-editor-sortable-tree-item-actions-withChildren","clone":"micromag-editor-sortable-tree-item-actions-clone","ghost":"micromag-editor-sortable-tree-item-actions-ghost","indicator":"micromag-editor-sortable-tree-item-actions-indicator","handle":"micromag-editor-sortable-tree-item-actions-handle","text":"micromag-editor-sortable-tree-item-actions-text","collapsedCount":"micromag-editor-sortable-tree-item-actions-collapsedCount","count":"micromag-editor-sortable-tree-item-actions-count","disableInteraction":"micromag-editor-sortable-tree-item-actions-disableInteraction","Count":"micromag-editor-sortable-tree-item-actions-Count","Text":"micromag-editor-sortable-tree-item-actions-Text","disableSelection":"micromag-editor-sortable-tree-item-actions-disableSelection","collapse":"micromag-editor-sortable-tree-item-actions-collapse","collapsed":"micromag-editor-sortable-tree-item-actions-collapsed","children":"micromag-editor-sortable-tree-item-actions-children"};
+var styles$5 = {"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"};
+
+var styles$4 = {};
+
+var styles$3 = {"wrapper":"micromag-editor-sortable-sortable-tree-item-actions-wrapper","inner":"micromag-editor-sortable-sortable-tree-item-actions-inner","button":"micromag-editor-sortable-sortable-tree-item-actions-button","handle":"micromag-editor-sortable-sortable-tree-item-actions-handle","icon":"micromag-editor-sortable-sortable-tree-item-actions-icon","text":"micromag-editor-sortable-sortable-tree-item-actions-text","collapsedCount":"micromag-editor-sortable-sortable-tree-item-actions-collapsedCount","count":"micromag-editor-sortable-sortable-tree-item-actions-count","disableInteraction":"micromag-editor-sortable-sortable-tree-item-actions-disableInteraction","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","disableSelection":"micromag-editor-sortable-sortable-tree-item-actions-disableSelection","collapse":"micromag-editor-sortable-sortable-tree-item-actions-collapse","collapsed":"micromag-editor-sortable-sortable-tree-item-actions-collapsed","children":"micromag-editor-sortable-sortable-tree-item-actions-children","withChildren":"micromag-editor-sortable-sortable-tree-item-actions-withChildren","ghost":"micromag-editor-sortable-sortable-tree-item-actions-ghost","indicator":"micromag-editor-sortable-sortable-tree-item-actions-indicator"};
 
-var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "children"];
+var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "showCount", "children"];
 var propTypes$a = {
   childCount: PropTypes.number,
   clone: PropTypes.bool,
@@ -1676,6 +1673,7 @@ var propTypes$a = {
     transform: PropTypes.string.isRequired
   }),
   showId: PropTypes.bool,
+  showCount: PropTypes.bool,
   children: PropTypes.node
 };
 var defaultProps$a = {
@@ -1694,6 +1692,7 @@ var defaultProps$a = {
   wrapperRef: null,
   style: null,
   showId: false,
+  showCount: false,
   children: null
 };
 var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -1710,12 +1709,13 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
       indicator = _ref.indicator,
       collapsed = _ref.collapsed,
       onCollapse = _ref.onCollapse,
-      onRemove = _ref.onRemove,
-      onClick = _ref.onClick,
-      style = _ref.style,
-      value = _ref.value,
-      wrapperRef = _ref.wrapperRef,
-      showId = _ref.showId,
+      onRemove = _ref.onRemove;
+      _ref.onClick;
+      var style = _ref.style;
+      _ref.value;
+      var wrapperRef = _ref.wrapperRef;
+      _ref.showId;
+      var showCount = _ref.showCount,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded$4);
 
@@ -1727,42 +1727,26 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, style)
   }, props), /*#__PURE__*/React.createElement("div", {
     className: styles$3.inner,
-    ref: ref,
-    style: {
-      width: style.width,
-      height: style.height
-    }
+    ref: ref
   }, /*#__PURE__*/React.createElement("button", Object.assign({
     className: classNames([styles$3.button, styles$3.handle]),
     type: "button"
   }, handleProps), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    className: styles$3.icon,
     icon: faGripLines
-  })), /*#__PURE__*/React.createElement("button", {
-    className: classNames([styles$3.button, styles$3.full]),
-    type: "button",
-    onClick: onClick,
-    style: {
-      width: style.width,
-      height: style.height
-    }
-  }), showId ? /*#__PURE__*/React.createElement("span", {
-    className: styles$3.text
-  }, value) : null, !clone && onRemove ? /*#__PURE__*/React.createElement("button", {
+  })), !clone && onRemove ? /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onRemove
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faTimes
-  })) : null, clone && childCount && childCount > 1 ? /*#__PURE__*/React.createElement("span", {
+  })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React.createElement("span", {
     className: styles$3.count
-  }, childCount) : null, onCollapse && childCount !== null && childCount > 0 ? /*#__PURE__*/React.createElement("span", {
+  }, childCount) : null, onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React.createElement("span", {
     className: styles$3.collapsedCount
   }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React.createElement("button", {
     type: "button",
     onClick: onCollapse,
-    className: classNames(styles$3.button, styles$3.collapse, collapsed && styles$3.collapsed),
-    style: {
-      width: style.width
-    }
+    className: classNames(styles$3.button, styles$3.collapse, collapsed && styles$3.collapsed)
   }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
     icon: faAngleDown
   })) : null), /*#__PURE__*/React.createElement("div", {
@@ -1772,13 +1756,14 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
 SortableTreeItemActions.propTypes = propTypes$a;
 SortableTreeItemActions.defaultProps = defaultProps$a;
 
-var _excluded$3 = ["id", "depth", "component", "screenValue", "style", "onCollapse", "onClick"];
+var _excluded$3 = ["id", "index", "depth", "component", "value", "style", "smallScale", "collapsed", "onCollapse", "onClickItem", "isLastChild"];
 var propTypes$9 = {
   id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
   depth: PropTypes.number.isRequired,
   component: PropTypes.func,
   // eslint-disable-next-line react/forbid-prop-types
-  screenValue: PropTypes.object,
+  value: PropTypes.object,
   style: PropTypes.shape({
     width: PropTypes.number.isRequired,
     height: PropTypes.number.isRequired,
@@ -1787,15 +1772,21 @@ var propTypes$9 = {
     transform: PropTypes.string.isRequired,
     scale: PropTypes.number.isRequired
   }),
+  smallScale: PropTypes.number,
+  collapsed: PropTypes.bool,
   onCollapse: PropTypes.func,
-  onClick: PropTypes.func
+  onClickItem: PropTypes.func,
+  isLastChild: PropTypes.bool
 };
 var defaultProps$9 = {
   component: null,
-  screenValue: null,
+  value: null,
   style: null,
+  smallScale: 0.75,
+  collapsed: false,
   onCollapse: null,
-  onClick: null
+  onClickItem: null,
+  isLastChild: false
 };
 
 var animateLayoutChanges = function animateLayoutChanges(_ref) {
@@ -1806,13 +1797,17 @@ var animateLayoutChanges = function animateLayoutChanges(_ref) {
 
 var SortableTreeItem = function SortableTreeItem(_ref2) {
   var id = _ref2.id,
+      index = _ref2.index,
       depth = _ref2.depth,
       Component = _ref2.component,
-      screenValue = _ref2.screenValue,
+      value = _ref2.value,
       itemStyle = _ref2.style,
+      smallScale = _ref2.smallScale,
+      collapsed = _ref2.collapsed,
       onCollapse = _ref2.onCollapse,
-      onClick = _ref2.onClick,
-      props = _objectWithoutProperties(_ref2, _excluded$3);
+      onClickItem = _ref2.onClickItem;
+      _ref2.isLastChild;
+      var props = _objectWithoutProperties(_ref2, _excluded$3);
 
   var _useSortable = useSortable({
     id: id,
@@ -1836,18 +1831,32 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
       scale = _itemStyle$scale === void 0 ? 1 : _itemStyle$scale;
   var extraHeight = hasCollapse ? 30 : 0;
   var actionsStyle = {
-    width: depth === 0 ? scaledWidth : scaledWidth * 0.75,
-    height: depth === 0 ? scaledHeight + extraHeight : scaledHeight * 0.75,
+    width: depth === 0 ? scaledWidth : scaledWidth * smallScale,
+    height: depth === 0 ? scaledHeight + extraHeight : scaledHeight * smallScale,
     transform: CSS.Translate.toString(transform),
     transition: transition
   };
   var previewStyle = {
     width: itemStyle.width,
     height: itemStyle.height,
-    transform: depth === 0 ? itemStyle.transform : "scale(".concat(scale * 0.75, ", ").concat(scale * 0.75, ")"),
-    transformOrigin: 'top left'
+    transform: depth === 0 ? itemStyle.transform : "scale(".concat(scale * smallScale, ", ").concat(scale * smallScale, ")")
   };
-  return /*#__PURE__*/React.createElement(SortableTreeItemActions, Object.assign({
+
+  var _ref3 = listeners || {},
+      onPointerDown = _ref3.onPointerDown;
+
+  var onClickAction = useCallback(function (e) {
+    if (onClickItem !== null) {
+      onClickItem(value, index);
+    }
+
+    if (onPointerDown !== null) {
+      onPointerDown(e);
+    }
+  }, [value, index, onClickItem, onPointerDown]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames([styles$4.container])
+  }, /*#__PURE__*/React.createElement(SortableTreeItemActions, Object.assign({
     ref: setDraggableNodeRef,
     wrapperRef: setDroppableNodeRef,
     style: actionsStyle,
@@ -1855,12 +1864,14 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
     ghost: isDragging,
     disableSelection: iOS,
     disableInteraction: isSorting,
-    handleProps: _objectSpread(_objectSpread({}, attributes), listeners),
-    onCollapse: onCollapse,
-    onClick: onClick
-  }, props), Component !== null ? /*#__PURE__*/React.createElement(Component, Object.assign({}, screenValue, {
+    handleProps: _objectSpread(_objectSpread(_objectSpread({}, attributes), listeners), {}, {
+      onPointerDown: onClickAction
+    }),
+    collapsed: collapsed,
+    onCollapse: onCollapse
+  }, props), Component !== null ? /*#__PURE__*/React.createElement(Component, Object.assign({}, value, {
     previewStyle: previewStyle
-  })) : null);
+  })) : null));
 };
 SortableTreeItem.propTypes = propTypes$9;
 SortableTreeItem.defaultProps = defaultProps$9;
@@ -1978,7 +1989,8 @@ var SortableTree = function SortableTree(_ref2) {
     var flattenedTree = flattenTree(items); // console.log('yo', items, flattenedTree);
 
     var collapsedItems = flattenedTree.reduce(function (acc, _ref3) {
-      var children = _ref3.children,
+      var _ref3$children = _ref3.children,
+          children = _ref3$children === void 0 ? [] : _ref3$children,
           collapsed = _ref3.collapsed,
           id = _ref3.id;
       return collapsed && children.length ? [].concat(_toConsumableArray(acc), [id]) : acc;
@@ -2035,11 +2047,14 @@ var SortableTree = function SortableTree(_ref2) {
                 _ref6$children = _ref6.children,
                 children = _ref6$children === void 0 ? [] : _ref6$children,
                 _ref6$parentId = _ref6.parentId,
-                parentId = _ref6$parentId === void 0 ? null : _ref6$parentId;
+                parentId = _ref6$parentId === void 0 ? null : _ref6$parentId,
+                _ref6$collapsed = _ref6.collapsed,
+                collapsed = _ref6$collapsed === void 0 ? false : _ref6$collapsed;
             return {
               id: itemId,
               props: _objectSpread(_objectSpread({}, (children || []).length > 0 ? {
                 group: {
+                  collapsed: collapsed,
                   mergeNavItems: true
                 }
               } : {
@@ -2059,11 +2074,17 @@ var SortableTree = function SortableTree(_ref2) {
         return "Moving was cancelled. ".concat(id, " was dropped in its original position.");
       }
     };
-  }, [flattenedItems, onChange]); // Note: this is quite brutal for perf
-
-  useEffect(function () {// setItems(defaultItems);
-  }, [defaultItems, setItems]); // console.log('render: current id', activeId);
+  }, [flattenedItems, onChange]); // Initial tree setup from list
 
+  useEffect(function () {
+    // console.log('fuck off');
+    setItems(buildTree(defaultItems));
+  }, []);
+  var activeValue = defaultItems.find(function (_ref7) {
+    var _ref7$id = _ref7.id,
+        defaultId = _ref7$id === void 0 ? null : _ref7$id;
+    return defaultId === activeId;
+  });
   return /*#__PURE__*/React.createElement(DndContext, {
     announcements: announcements,
     sensors: sensors,
@@ -2077,61 +2098,74 @@ var SortableTree = function SortableTree(_ref2) {
   }, /*#__PURE__*/React.createElement(SortableContext, {
     items: sortedIds,
     strategy: verticalListSortingStrategy
-  }, flattenedItems.map(function (_ref7, idx) {
-    var id = _ref7.id,
-        _ref7$children = _ref7.children,
-        children = _ref7$children === void 0 ? [] : _ref7$children,
-        collapsed = _ref7.collapsed,
-        depth = _ref7.depth,
-        _ref7$screenValue = _ref7.screenValue,
-        screenValue = _ref7$screenValue === void 0 ? null : _ref7$screenValue;
-    return /*#__PURE__*/React.createElement(SortableTreeItem, {
+  }, flattenedItems.map(function (_ref8, idx) {
+    var _flattenedItems, _ref10;
+
+    var id = _ref8.id,
+        _ref8$children = _ref8.children,
+        children = _ref8$children === void 0 ? [] : _ref8$children,
+        collapsed = _ref8.collapsed,
+        depth = _ref8.depth;
+    var screenValue = defaultItems.find(function (_ref9) {
+      var _ref9$id = _ref9.id,
+          defaultId = _ref9$id === void 0 ? null : _ref9$id;
+      return defaultId === id;
+    });
+    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);
+    } : null;
+    var currentDepth = id === activeId && projected ? projected.depth : depth;
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames([styles$5.item, (_ref10 = {}, _defineProperty(_ref10, styles$5.parent, onCollapse !== null && !collapsed), _defineProperty(_ref10, styles$5.group, depth === 1), _defineProperty(_ref10, styles$5.isLastChild, next === null), _ref10)]),
+      key: id
+    }, /*#__PURE__*/React.createElement(SortableTreeItem, {
       key: id,
       id: id,
-      value: id,
-      depth: id === activeId && projected ? projected.depth : depth,
+      depth: currentDepth,
       indentationWidth: indentationWidth,
       indicator: indicator,
-      collapsed: Boolean(collapsed && children.length),
-      onCollapse: collapsible && children.length ? function () {
-        return handleCollapse(id);
-      } : undefined,
+      collapsed: isCollapsed,
+      onCollapse: onCollapse,
       onRemove: removable ? function () {
         return handleRemove(id);
       } : undefined,
       childCount: getChildCount(items, id),
       component: component,
-      screenValue: screenValue,
+      value: (screenValue === null || screenValue === void 0 ? void 0 : screenValue.value) || null,
       style: itemStyle,
-      onClick: function onClick() {
-        if (onClickItem !== null) {
-          onClickItem({
-            id: id
-          }, idx);
-        }
-      }
-    });
+      onClickItem: onClickItem,
+      index: idx
+    }));
   }), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(DragOverlay, {
     dropAnimation: dropAnimation,
     modifiers: indicator ? [adjustTranslate] : undefined
-  }, activeId && activeItem ? /*#__PURE__*/React.createElement(SortableTreeItem, {
+  }, activeId && activeItem ? /*#__PURE__*/React.createElement("div", {
+    className: styles$5.item,
+    key: activeId
+  }, /*#__PURE__*/React.createElement(SortableTreeItem, {
     id: activeId,
     depth: activeItem.depth,
     clone: true,
     childCount: getChildCount(items, activeId) + 1,
-    value: activeId,
     indentationWidth: indentationWidth,
     component: component,
-    screenValue: activeItem === null || activeItem === void 0 ? void 0 : activeItem.screenValue,
+    value: activeValue === null || activeValue === void 0 ? void 0 : activeValue.value,
+    onClickItem: onClickItem,
+    index: flattenedItems.findIndex(function (_ref11) {
+      var id = _ref11.id;
+      return activeId === id;
+    }),
     style: itemStyle
-  }) : null), document.body)));
+  })) : null), document.body)));
 
-  function handleDragStart(_ref8) {
-    var newActiveId = _ref8.active.id;
+  function handleDragStart(_ref12) {
+    var newActiveId = _ref12.active.id;
     setActiveId(newActiveId);
     setOverId(newActiveId);
-    var newActiveItem = flattenedItems.find(function (_ref9) {
-      var id = _ref9.id;
+    var newActiveItem = flattenedItems.find(function (_ref13) {
+      var id = _ref13.id;
       return id === newActiveId;
     });
 
@@ -2145,15 +2179,15 @@ var SortableTree = function SortableTree(_ref2) {
     document.body.style.setProperty('cursor', 'grabbing');
   }
 
-  function handleDragMove(_ref10) {
-    var delta = _ref10.delta;
+  function handleDragMove(_ref14) {
+    var delta = _ref14.delta;
     setOffsetLeft(delta.x);
   }
 
-  function handleDragOver(_ref11) {
+  function handleDragOver(_ref15) {
     var _over$id;
 
-    var over = _ref11.over;
+    var over = _ref15.over;
     setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
   }
 
@@ -2165,24 +2199,44 @@ var SortableTree = function SortableTree(_ref2) {
     document.body.style.setProperty('cursor', '');
   }
 
-  function handleDragEnd(_ref12) {
-    var active = _ref12.active,
-        over = _ref12.over;
+  function handleDragEnd(_ref16) {
+    var active = _ref16.active,
+        over = _ref16.over;
     resetState();
 
     if (projected && over) {
       var depth = projected.depth,
           parentId = projected.parentId;
       var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
-      var overIndex = clonedItems.findIndex(function (_ref13) {
-        var id = _ref13.id;
+      var overIndex = clonedItems.findIndex(function (_ref17) {
+        var id = _ref17.id;
         return id === over.id;
       });
-      var activeIndex = clonedItems.findIndex(function (_ref14) {
-        var id = _ref14.id;
+      var activeIndex = clonedItems.findIndex(function (_ref18) {
+        var id = _ref18.id;
         return id === active.id;
       });
       var activeTreeItem = clonedItems[activeIndex];
+      var maxDepth = getMaxDepth(activeTreeItem); // Un-merge and flatten
+
+      if (depth > 0 && depth >= maxDepth && (activeTreeItem === null || activeTreeItem === void 0 ? void 0 : activeTreeItem.children) !== null && activeTreeItem.children.length > 0) {
+        var _loop = function _loop(i) {
+          var childId = activeTreeItem.children[i].id;
+          var childIndex = clonedItems.findIndex(function (_ref19) {
+            var id = _ref19.id;
+            return id === childId;
+          });
+          clonedItems[childIndex].parentId = parentId;
+          clonedItems[childIndex].depth = depth;
+        };
+
+        for (var i = 0; i < activeTreeItem.children.length; i += 1) {
+          _loop(i);
+        }
+
+        activeTreeItem.children = [];
+      }
+
       clonedItems[activeIndex] = _objectSpread(_objectSpread({}, activeTreeItem), {}, {
         depth: depth,
         parentId: parentId
@@ -2225,12 +2279,12 @@ var SortableTree = function SortableTree(_ref2) {
       }
 
       var clonedItems = JSON.parse(JSON.stringify(flattenTree(items)));
-      var overIndex = clonedItems.findIndex(function (_ref15) {
-        var id = _ref15.id;
+      var overIndex = clonedItems.findIndex(function (_ref20) {
+        var id = _ref20.id;
         return id === currentOverId;
       });
-      var activeIndex = clonedItems.findIndex(function (_ref16) {
-        var id = _ref16.id;
+      var activeIndex = clonedItems.findIndex(function (_ref21) {
+        var id = _ref21.id;
         return id === currentActiveId;
       });
       var sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
@@ -2247,17 +2301,17 @@ var SortableTree = function SortableTree(_ref2) {
       } else {
         var previousSibling = previousItem;
 
-        var _loop = function _loop() {
+        var _loop2 = function _loop2() {
           var _previousSibling = previousSibling,
               parentId = _previousSibling.parentId;
-          previousSibling = sortedItems.find(function (_ref17) {
-            var id = _ref17.id;
+          previousSibling = sortedItems.find(function (_ref22) {
+            var id = _ref22.id;
             return id === parentId;
           });
         };
 
         while (previousSibling && projected.depth < previousSibling.depth) {
-          _loop();
+          _loop2();
         }
 
         if (previousSibling) {
@@ -2273,13 +2327,13 @@ var SortableTree = function SortableTree(_ref2) {
 SortableTree.propTypes = propTypes$8;
 SortableTree.defaultProps = defaultProps$8;
 
-var _excluded$2 = ["className", "screen", "type"],
+var _excluded$2 = ["className", "screen", "type", "onClick"],
     _excluded2 = ["id", "screen"];
 var propTypes$7 = {
   items: PropTypes$1.menuItems,
   withPreview: PropTypes.bool,
   withPlaceholder: PropTypes.bool,
-  settings: PropTypes.node,
+  settings: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   previewMinWidth: PropTypes.number,
   sortable: PropTypes.bool,
   isTree: PropTypes.bool,
@@ -2311,7 +2365,7 @@ var defaultProps$7 = {
 };
 
 var ScreensMenu = function ScreensMenu(_ref) {
-  var _ref9;
+  var _ref10;
 
   var items = _ref.items,
       withPreview = _ref.withPreview,
@@ -2384,11 +2438,13 @@ var ScreensMenu = function ScreensMenu(_ref) {
         itemCustomClassName = _ref4$className === void 0 ? null : _ref4$className,
         screen = _ref4.screen,
         type = _ref4.type,
+        _ref4$onClick = _ref4.onClick,
+        onClick = _ref4$onClick === void 0 ? null : _ref4$onClick,
         item = _objectWithoutProperties(_ref4, _excluded$2);
 
     return /*#__PURE__*/React.createElement("li", {
       key: item.id,
-      className: classNames([styles$6.item, (_ref5 = {}, _defineProperty(_ref5, itemClassName, itemClassName !== null), _defineProperty(_ref5, itemCustomClassName, itemCustomClassName !== null), _ref5)]),
+      className: classNames([styles$8.item, (_ref5 = {}, _defineProperty(_ref5, itemClassName, itemClassName !== null), _defineProperty(_ref5, itemCustomClassName, itemCustomClassName !== null), _ref5)]),
       "data-screen-id": item.id,
       ref: index === 0 ? containerRef : null
     }, /*#__PURE__*/React.createElement(ScreenWithPreview, {
@@ -2400,44 +2456,46 @@ var ScreensMenu = function ScreensMenu(_ref) {
       previewStyle: previewStyle,
       withPreview: withPreview,
       withPlaceholder: withPlaceholder,
-      onClick: onClickItem
+      onClick: onClick,
+      onClickItem: onClickItem
     }), settings !== null ? /*#__PURE__*/React.createElement("div", {
-      className: classNames([_defineProperty({}, settingsClassName, settingsClassName !== null), styles$6.settings, 'p-2'])
+      className: classNames([_defineProperty({}, settingsClassName, settingsClassName !== null), styles$8.settings, 'p-2'])
     }, isFunction(settings) ? settings(index) : settings) : null);
   }) : [];
   var sortableItems = useMemo(function () {
-    return isTree ? items.reduce(function (acc, _ref7) {
+    return isTree ? items.map(function (_ref7) {
       var id = _ref7.id,
           _ref7$screen = _ref7.screen,
           screen = _ref7$screen === void 0 ? {} : _ref7$screen,
           props = _objectWithoutProperties(_ref7, _excluded2);
 
       var _screen$parentId = screen.parentId,
-          parentId = _screen$parentId === void 0 ? null : _screen$parentId; // console.log('hey', id, screen, parentId, props);
-      //   const children =
-      //       items.filter(({ screen: { parentId: cpid = null } }) => cpid === id) ||
-      //       [];
-      // console.log('children', children);
+          parentId = _screen$parentId === void 0 ? null : _screen$parentId,
+          _screen$group = screen.group,
+          group = _screen$group === void 0 ? {} : _screen$group;
 
-      acc.push(_objectSpread({
+      var _ref8 = group || {},
+          _ref8$collapsed = _ref8.collapsed,
+          collapsed = _ref8$collapsed === void 0 ? true : _ref8$collapsed;
+
+      return _objectSpread({
         id: id,
         parentId: parentId,
-        screenValue: {
+        collapsed: collapsed,
+        value: {
           id: id,
           screen: screen
         }
-      }, props));
-      return acc;
-    }, []) : items.map(function (_ref8) {
-      var id = _ref8.id;
+      }, props);
+    }, []) : items.map(function (_ref9) {
+      var id = _ref9.id;
       return {
         id: id
       };
     });
-  }, [items, isTree]); // console.log('screens menu items/sitems', items, sortableItems);
-
+  }, [items, isTree]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$6.container, (_ref9 = {}, _defineProperty(_ref9, styles$6.noWrap, noWrap), _defineProperty(_ref9, styles$6.isVertical, isVertical), _defineProperty(_ref9, styles$6.isTree, isTree), _defineProperty(_ref9, styles$6.withPlaceholder, withPlaceholder), _defineProperty(_ref9, className, className), _ref9)]),
+    className: classNames([styles$8.container, (_ref10 = {}, _defineProperty(_ref10, styles$8.noWrap, noWrap), _defineProperty(_ref10, styles$8.isVertical, isVertical), _defineProperty(_ref10, styles$8.isTree, isTree), _defineProperty(_ref10, styles$8.withPlaceholder, withPlaceholder), _defineProperty(_ref10, className, className), _ref10)]),
     ref: columnRef
   }, isTree && !sortable ? /*#__PURE__*/React.createElement(SortableTree, {
     items: sortableItems,
@@ -2452,9 +2510,9 @@ var ScreensMenu = function ScreensMenu(_ref) {
     delayOnTouchStart: true,
     delay: 2,
     tag: "ul",
-    className: styles$6.items
+    className: styles$8.items
   }, itemsElements) : null, !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/React.createElement("ul", {
-    className: styles$6.items
+    className: styles$8.items
   }, itemsElements) : null);
 };
 
@@ -2707,60 +2765,54 @@ var EditorScreens = function EditorScreens(_ref) {
     return newScreen;
   }, [value, onChange, isTheme, screens, currentScreenId, setCreateModalOpened]);
   var onOrderChange = useCallback(function (listItems) {
-    var ids = listItems.map(function (_ref7) {
-      var id = _ref7.id;
-      return id;
-    });
-    var screenProps = listItems.map(function (_ref8) {
-      var id = _ref8.id,
-          _ref8$props = _ref8.props,
-          props = _ref8$props === void 0 ? null : _ref8$props;
+    // const ids = listItems.map(({ id }) => id);
+    var screenProps = listItems.map(function (_ref7) {
+      var id = _ref7.id,
+          _ref7$props = _ref7.props,
+          props = _ref7$props === void 0 ? null : _ref7$props;
       return {
         id: id,
         props: props
       };
     });
-    var hasScreenProps = (screenProps.filter(function (_ref9) {
-      var props = _ref9.props;
+    var hasScreenProps = (screenProps.filter(function (_ref8) {
+      var props = _ref8.props;
       return props !== null;
     }) || []).length > 0;
 
-    var _ref10 = value || {},
-        _ref10$components = _ref10.components,
-        currentScreens = _ref10$components === void 0 ? [] : _ref10$components;
+    var _ref9 = value || {},
+        _ref9$components = _ref9.components,
+        currentScreens = _ref9$components === void 0 ? [] : _ref9$components;
 
-    var currentIds = currentScreens.map(function (_ref11) {
-      var id = _ref11.id;
+    var currentIds = currentScreens.map(function (_ref10) {
+      var id = _ref10.id;
       return id;
     });
-    var sameOrder = listItems.reduce(function (same, _ref12, index) {
-      var id = _ref12.id;
+    var sameOrder = listItems.reduce(function (same, _ref11, index) {
+      var id = _ref11.id;
       return same && id === currentIds[index];
     }, true);
 
     if (!sameOrder || hasScreenProps) {
       var newValue = _objectSpread(_objectSpread({}, value), {}, {
-        components: _toConsumableArray(currentScreens).sort(function (_ref13, _ref14) {
-          var idA = _ref13.id;
-          var idB = _ref14.id;
-          var indexA = ids.indexOf(idA);
-          var indexB = ids.indexOf(idB);
-
-          if (indexA === indexB) {
-            return 0;
-          }
-
-          return indexA > indexB ? 1 : -1;
-        }).map(function (_ref15) {
+        components: _toConsumableArray(currentScreens) // .sort(({ id: idA }, { id: idB }) => {
+        //     const indexA = ids.indexOf(idA);
+        //     const indexB = ids.indexOf(idB);
+        //     if (indexA === indexB) {
+        //         return 0;
+        //     }
+        //     return indexA > indexB ? 1 : -1;
+        // })
+        .map(function (_ref12) {
           var _screenProps$find;
 
-          var id = _ref15.id,
-              props = _objectWithoutProperties(_ref15, _excluded$1);
+          var id = _ref12.id,
+              props = _objectWithoutProperties(_ref12, _excluded$1);
 
           return _objectSpread(_objectSpread({
             id: id
-          }, props), (_screenProps$find = screenProps.find(function (_ref16) {
-            var propsId = _ref16.id;
+          }, props), (_screenProps$find = screenProps.find(function (_ref13) {
+            var propsId = _ref13.id;
             return propsId === id;
           })) === null || _screenProps$find === void 0 ? void 0 : _screenProps$find.props);
         })
@@ -2773,8 +2825,8 @@ var EditorScreens = function EditorScreens(_ref) {
   }, [value, onChange]);
   var onClickScreenType = useCallback(function (definition) {
     setCreateModalOpened(false);
-    var currentScreen = isTheme ? screens.find(function (_ref17) {
-      var type = _ref17.type;
+    var currentScreen = isTheme ? screens.find(function (_ref14) {
+      var type = _ref14.type;
       return type === definition.id;
     }) || null : null;
 
@@ -2794,12 +2846,12 @@ var EditorScreens = function EditorScreens(_ref) {
     return setCreateModalOpened(false);
   }, [setCreateModalOpened]);
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['d-flex', 'flex-column', styles$7.container, className])
+    className: classNames(['d-flex', 'flex-column', styles$9.container, className])
   }, /*#__PURE__*/React.createElement(Navbar, {
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: classNames(['sticky-top', styles$7.navbar])
+    className: classNames(['sticky-top', styles$9.navbar])
   }, /*#__PURE__*/React.createElement("strong", {
     className: "mb-0 mr-auto"
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
@@ -2819,9 +2871,9 @@ var EditorScreens = function EditorScreens(_ref) {
     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;
+    render: function render(_ref15) {
+      var _ref15$match$params$s = _ref15.match.params.screen,
+          screenId = _ref15$match$params$s === void 0 ? null : _ref15$match$params$s;
       return screens.length > 0 ? /*#__PURE__*/React.createElement(ScreensMenu, {
         items: screens.map(function (it) {
           return {
@@ -2854,8 +2906,8 @@ var EditorScreens = function EditorScreens(_ref) {
       })));
     }
   })), createModalOpened ? /*#__PURE__*/React.createElement(ScreenTypesModal, {
-    selectedTypes: isTheme ? screens.map(function (_ref19) {
-      var type = _ref19.type;
+    selectedTypes: isTheme ? screens.map(function (_ref16) {
+      var type = _ref16.type;
       return type;
     }) : [],
     onClickScreenType: onClickScreenType,
@@ -3001,16 +3053,16 @@ var Editor = function Editor(_ref) {
   return /*#__PURE__*/React.createElement(ModalsProvider, null, /*#__PURE__*/React.createElement(PanelsProvider, null, /*#__PURE__*/React.createElement(ScreenSizeProvider, {
     size: screenSize
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$f.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
-      return styles$f["screen-".concat(screenName)];
-    }) : null, (_ref5 = {}, _defineProperty(_ref5, styles$f.fullscreen, fullscreen), _defineProperty(_ref5, className, className), _ref5)]),
+    className: classNames([styles$h.container, screenSize !== null ? screenSize.screens.map(function (screenName) {
+      return styles$h["screen-".concat(screenName)];
+    }) : null, (_ref5 = {}, _defineProperty(_ref5, styles$h.fullscreen, fullscreen), _defineProperty(_ref5, className, className), _ref5)]),
     ref: refContainer
   }, /*#__PURE__*/React.createElement(Navbar, {
     theme: "light",
     compact: true,
     noWrap: true,
     withoutCollapse: true,
-    className: styles$f.top
+    className: styles$h.top
   }, mobileView !== 'screens' ? /*#__PURE__*/React.createElement(Button, {
     size: "sm",
     theme: "secondary",
@@ -3043,9 +3095,9 @@ var Editor = function Editor(_ref) {
       "value": "View screen"
     }]
   })) : null), /*#__PURE__*/React.createElement("div", {
-    className: styles$f.inner
+    className: styles$h.inner
   }, /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$f.left, _defineProperty({}, styles$f.visible, !isMobile || mobileView === 'screens')]),
+    className: classNames([styles$h.left, _defineProperty({}, styles$h.visible, !isMobile || mobileView === 'screens')]),
     ref: refScreensContainer
   }, /*#__PURE__*/React.createElement(EditorScreens, {
     value: story,
@@ -3055,23 +3107,24 @@ var Editor = function Editor(_ref) {
     onChange: onStoryChange,
     onClickScreen: onClickScreen,
     isVertical: !isMobile,
-    className: styles$f.inner
+    className: styles$h.inner,
+    isTree: true
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$f.center, _defineProperty({}, styles$f.visible, !isMobile || mobileView === 'preview')])
+    className: classNames([styles$h.center, _defineProperty({}, styles$h.visible, !isMobile || mobileView === 'preview')])
   }, /*#__PURE__*/React.createElement(EditorPreview, {
     value: story,
     isTheme: isTheme,
     viewerTheme: viewerTheme,
-    className: styles$f.preview,
+    className: styles$h.preview,
     onScreenChange: onPreviewScreenChange
   })), /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$f.right, _defineProperty({}, styles$f.visible, !isMobile || mobileView === 'form')])
+    className: classNames([styles$h.right, _defineProperty({}, styles$h.visible, !isMobile || mobileView === 'form')])
   }, /*#__PURE__*/React.createElement(EditForm, {
     key: screenId,
     value: story,
     isTheme: isTheme,
     onChange: onStoryChange,
-    className: styles$f.inner
+    className: styles$h.inner
   }))), /*#__PURE__*/React.createElement(Modals, null)))));
 };