@micromag/editor 0.2.409 → 0.2.410

package/es/index.js

@@ -791,6 +791,8 @@ var useThemeValue = function useThemeValue(value) {
   return valueWithTheme;
 };
 
+var styles$a = {"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$9 = {"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$9.container, _defineProperty({}, className, className !== null)])
   }, props), /*#__PURE__*/React.createElement(DeviceIcon, {
-    className: styles$a.icon
+    className: styles$9.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$a.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$a.button,
         onClick: function onClick(e) {
           return onClickItem !== null ? onClickItem(e, item, index) : 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;
+      }
 
-    newItems.push(item);
+      if (item.children.length) {
+        item.children = removeItem(item.children, id);
+      }
+
+      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,7 +1642,7 @@ 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$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","withChildren":"micromag-editor-sortable-sortable-tree-item-actions-withChildren","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","ghost":"micromag-editor-sortable-sortable-tree-item-actions-ghost","indicator":"micromag-editor-sortable-sortable-tree-item-actions-indicator","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","Count":"micromag-editor-sortable-sortable-tree-item-actions-Count","Text":"micromag-editor-sortable-sortable-tree-item-actions-Text","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"};
 
 var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "children"];
 var propTypes$a = {
@@ -1710,13 +1703,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,
-      children = _ref.children,
+      onRemove = _ref.onRemove;
+      _ref.onClick;
+      var style = _ref.style;
+      _ref.value;
+      var wrapperRef = _ref.wrapperRef;
+      _ref.showId;
+      var children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded$4);
 
   return /*#__PURE__*/React.createElement("li", Object.assign({
@@ -1736,18 +1729,9 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
     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, {
@@ -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", "onCollapse", "onClickItem"];
 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,17 @@ var propTypes$9 = {
     transform: PropTypes.string.isRequired,
     scale: PropTypes.number.isRequired
   }),
+  smallScale: PropTypes.number,
   onCollapse: PropTypes.func,
-  onClick: PropTypes.func
+  onClickItem: PropTypes.func
 };
 var defaultProps$9 = {
   component: null,
-  screenValue: null,
+  value: null,
   style: null,
+  smallScale: 0.75,
   onCollapse: null,
-  onClick: null
+  onClickItem: null
 };
 
 var animateLayoutChanges = function animateLayoutChanges(_ref) {
@@ -1806,12 +1793,14 @@ 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,
       onCollapse = _ref2.onCollapse,
-      onClick = _ref2.onClick,
+      onClickItem = _ref2.onClickItem,
       props = _objectWithoutProperties(_ref2, _excluded$3);
 
   var _useSortable = useSortable({
@@ -1836,17 +1825,29 @@ 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, ")")
   };
+
+  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(SortableTreeItemActions, Object.assign({
     ref: setDraggableNodeRef,
     wrapperRef: setDroppableNodeRef,
@@ -1855,10 +1856,11 @@ 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
+    }),
+    onCollapse: onCollapse
+  }, props), Component !== null ? /*#__PURE__*/React.createElement(Component, Object.assign({}, value, {
     previewStyle: previewStyle
   })) : null);
 };
@@ -1978,7 +1980,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 +2038,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 +2065,12 @@ 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));
+  }, []);
   return /*#__PURE__*/React.createElement(DndContext, {
     announcements: announcements,
     sensors: sensors,
@@ -2083,12 +2090,11 @@ var SortableTree = function SortableTree(_ref2) {
         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;
+        _ref7$value = _ref7.value,
+        value = _ref7$value === void 0 ? null : _ref7$value;
     return /*#__PURE__*/React.createElement(SortableTreeItem, {
       key: id,
       id: id,
-      value: id,
       depth: id === activeId && projected ? projected.depth : depth,
       indentationWidth: indentationWidth,
       indicator: indicator,
@@ -2101,15 +2107,10 @@ var SortableTree = function SortableTree(_ref2) {
       } : undefined,
       childCount: getChildCount(items, id),
       component: component,
-      screenValue: screenValue,
+      value: value,
       style: itemStyle,
-      onClick: function onClick() {
-        if (onClickItem !== null) {
-          onClickItem({
-            id: id
-          }, idx);
-        }
-      }
+      onClickItem: onClickItem,
+      index: idx
     });
   }), /*#__PURE__*/createPortal( /*#__PURE__*/React.createElement(DragOverlay, {
     dropAnimation: dropAnimation,
@@ -2119,19 +2120,23 @@ var SortableTree = function SortableTree(_ref2) {
     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: activeItem === null || activeItem === void 0 ? void 0 : activeItem.value,
+    onClickItem: onClickItem,
+    index: flattenedItems.findIndex(function (_ref8) {
+      var id = _ref8.id;
+      return activeId === id;
+    }),
     style: itemStyle
   }) : null), document.body)));
 
-  function handleDragStart(_ref8) {
-    var newActiveId = _ref8.active.id;
+  function handleDragStart(_ref9) {
+    var newActiveId = _ref9.active.id;
     setActiveId(newActiveId);
     setOverId(newActiveId);
-    var newActiveItem = flattenedItems.find(function (_ref9) {
-      var id = _ref9.id;
+    var newActiveItem = flattenedItems.find(function (_ref10) {
+      var id = _ref10.id;
       return id === newActiveId;
     });
 
@@ -2145,15 +2150,15 @@ var SortableTree = function SortableTree(_ref2) {
     document.body.style.setProperty('cursor', 'grabbing');
   }
 
-  function handleDragMove(_ref10) {
-    var delta = _ref10.delta;
+  function handleDragMove(_ref11) {
+    var delta = _ref11.delta;
     setOffsetLeft(delta.x);
   }
 
-  function handleDragOver(_ref11) {
+  function handleDragOver(_ref12) {
     var _over$id;
 
-    var over = _ref11.over;
+    var over = _ref12.over;
     setOverId((_over$id = over === null || over === void 0 ? void 0 : over.id) !== null && _over$id !== void 0 ? _over$id : null);
   }
 
@@ -2165,24 +2170,44 @@ var SortableTree = function SortableTree(_ref2) {
     document.body.style.setProperty('cursor', '');
   }
 
-  function handleDragEnd(_ref12) {
-    var active = _ref12.active,
-        over = _ref12.over;
+  function handleDragEnd(_ref13) {
+    var active = _ref13.active,
+        over = _ref13.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 (_ref14) {
+        var id = _ref14.id;
         return id === over.id;
       });
-      var activeIndex = clonedItems.findIndex(function (_ref14) {
-        var id = _ref14.id;
+      var activeIndex = clonedItems.findIndex(function (_ref15) {
+        var id = _ref15.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 (_ref16) {
+            var id = _ref16.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 +2250,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 (_ref17) {
+        var id = _ref17.id;
         return id === currentOverId;
       });
-      var activeIndex = clonedItems.findIndex(function (_ref16) {
-        var id = _ref16.id;
+      var activeIndex = clonedItems.findIndex(function (_ref18) {
+        var id = _ref18.id;
         return id === currentActiveId;
       });
       var sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
@@ -2247,17 +2272,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 (_ref19) {
+            var id = _ref19.id;
             return id === parentId;
           });
         };
 
         while (previousSibling && projected.depth < previousSibling.depth) {
-          _loop();
+          _loop2();
         }
 
         if (previousSibling) {
@@ -2273,7 +2298,7 @@ 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,
@@ -2311,7 +2336,7 @@ var defaultProps$7 = {
 };
 
 var ScreensMenu = function ScreensMenu(_ref) {
-  var _ref9;
+  var _ref10;
 
   var items = _ref.items,
       withPreview = _ref.withPreview,
@@ -2384,6 +2409,8 @@ 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", {
@@ -2400,44 +2427,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'])
     }, 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;
+
+      var _ref8 = group || {},
+          _ref8$collapsed = _ref8.collapsed,
+          collapsed = _ref8$collapsed === void 0 ? true : _ref8$collapsed;
 
-      acc.push(_objectSpread({
+      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$6.container, (_ref10 = {}, _defineProperty(_ref10, styles$6.noWrap, noWrap), _defineProperty(_ref10, styles$6.isVertical, isVertical), _defineProperty(_ref10, styles$6.isTree, isTree), _defineProperty(_ref10, styles$6.withPlaceholder, withPlaceholder), _defineProperty(_ref10, className, className), _ref10)]),
     ref: columnRef
   }, isTree && !sortable ? /*#__PURE__*/React.createElement(SortableTree, {
     items: sortableItems,
@@ -3055,7 +3084,8 @@ var Editor = function Editor(_ref) {
     onChange: onStoryChange,
     onClickScreen: onClickScreen,
     isVertical: !isMobile,
-    className: styles$f.inner
+    className: styles$f.inner,
+    isTree: true
   })), /*#__PURE__*/React.createElement("div", {
     className: classNames([styles$f.center, _defineProperty({}, styles$f.visible, !isMobile || mobileView === 'preview')])
   }, /*#__PURE__*/React.createElement(EditorPreview, {