@micromag/editor 0.3.309 → 0.3.311

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +37 -23
  3. package/lib/index.js +37 -23
  4. package/package.json +10 -10
package/assets/css/styles.css CHANGED
@@ -11,9 +11,9 @@
11
11
  .micromag-editor-preview-container .micromag-editor-preview-noStory,.micromag-editor-preview-container .micromag-editor-preview-story{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-preview-container{position:relative}.micromag-editor-preview-container>.micromag-editor-preview-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%}.micromag-editor-preview-container .micromag-editor-preview-top{display:none;width:100%;padding:20px 0}.micromag-editor-preview-container .micromag-editor-preview-bottom{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:100%;max-width:100%;padding:0;overflow:hidden}.micromag-editor-preview-container .micromag-editor-preview-bottom>.micromag-editor-preview-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:100%;margin:0 auto;overflow:hidden}.micromag-editor-preview-container .micromag-editor-preview-preview{width:100%;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}.micromag-editor-preview-container .micromag-editor-preview-preview,.micromag-editor-preview-container .micromag-editor-preview-viewerContainer{position:relative;height:100%}.micromag-editor-preview-container .micromag-editor-preview-devices{position:absolute;right:10px;bottom:10px}.micromag-editor-preview-screen-medium .micromag-editor-preview-top{display:block;width:100%;overflow-x:auto;text-align:center}.micromag-editor-preview-screen-medium .micromag-editor-preview-bottom{padding:50px 20px}
12
12
  .micromag-editor-screens-container .micromag-editor-screens-navbar{z-index:999;background-color:#1c1c1c}.micromag-editor-screens-container .micromag-editor-screens-navbar>div{padding:0}
13
13
  .micromag-editor-menus-screens-container .micromag-editor-menus-screens-placeholder,.micromag-editor-menus-screens-container .micromag-editor-menus-screens-preview,.micromag-editor-menus-screens-container .micromag-editor-menus-screens-screen{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-menus-screens-item,.micromag-editor-menus-screens-items{margin:0;padding:0;list-style:none}.micromag-editor-menus-screens-container{position:relative}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-items{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-5px;padding:0}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-item{display:block;position:relative;z-index:2;width:33.3%;padding:5px}@media screen and (min-width:540px){.micromag-editor-menus-screens-container .micromag-editor-menus-screens-item{width:20%}}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-button{display:block}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-placeholder,.micromag-editor-menus-screens-container .micromag-editor-menus-screens-preview{-webkit-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-preview{background:rgba(0,0,0,.9)}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-settings{position:absolute;top:0;right:0}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-noWrap .micromag-editor-menus-screens-items{-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-isVertical .micromag-editor-menus-screens-items{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-isVertical .micromag-editor-menus-screens-item{width:100%}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-withPlaceholder .micromag-editor-menus-screens-item{margin:5px;padding:0}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-withPlaceholder .micromag-editor-menus-screens-button{width:100px}
14
- .micromag-editor-sortable-sortable-tree-item{padding-bottom:3px}.micromag-editor-sortable-sortable-tree-item.micromag-editor-sortable-sortable-tree-parent{padding-bottom:0;background-color:#494949}.micromag-editor-sortable-sortable-tree-item.micromag-editor-sortable-sortable-tree-group{padding-top:3px;background-color:#494949}.micromag-editor-sortable-sortable-tree-item.micromag-editor-sortable-sortable-tree-group.micromag-editor-sortable-sortable-tree-isLastChild{margin-bottom:4px;padding-bottom:6px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}
15
14
  .micromag-editor-sortable-sortable-tree-item-container{display:block}.micromag-editor-sortable-sortable-tree-item-container .micromag-editor-sortable-sortable-tree-item-parent{position:relative;z-index:1;-webkit-box-shadow:0 4px 8px rgba(0,0,0,.5);box-shadow:0 4px 8px rgba(0,0,0,.5)}.micromag-editor-sortable-sortable-tree-item-container .micromag-editor-sortable-sortable-tree-item-child{position:absolute;z-index:0;right:5px;bottom:-25px;width:75%;-webkit-filter:brightness(60%);filter:brightness(60%)}
16
15
  .micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-button{display:inline-block;position:relative;padding:0;border:0;background:rgba(0,0,0,0);color:inherit;font-family:inherit;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.micromag-editor-sortable-sortable-tree-item-actions-wrapper{-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px;list-style:none}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;z-index:1;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-align-items:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;background-color:rgba(0,0,0,0);color:#222}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-button{background-color:rgba(0,0,0,0);color:#fff}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-handle{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;border-radius:10px}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-handle .micromag-editor-sortable-sortable-tree-item-actions-icon{display:none;visibility:hidden;position:absolute;top:10px;left:10px}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-text{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;padding-left:.5rem;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-collapsedCount,.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-count{display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;top:-10px;right:-10px;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;width:24px;height:24px;border-radius:50%;background-color:#a13dff;color:#fff;font-size:.8rem;font-weight:600}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-collapsedCount{top:auto;right:3px;bottom:2px;background-color:rgba(0,0,0,0)}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-disableInteraction{pointer-events:none}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-clone .micromag-editor-sortable-sortable-tree-item-actions-count,.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-clone .micromag-editor-sortable-sortable-tree-item-actions-text,.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-disableSelection .micromag-editor-sortable-sortable-tree-item-actions-count,.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-disableSelection .micromag-editor-sortable-sortable-tree-item-actions-text{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-collapse{display:-webkit-flex;display:-ms-flexbox;display:flex;position:absolute;z-index:1;bottom:0;left:0;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;width:100%;height:30px}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-collapse svg{margin-left:10px;-webkit-transition:-webkit-transform .25s ease;transition:-webkit-transform .25s ease;-o-transition:transform .25s ease;transition:transform .25s ease;transition:transform .25s ease, -webkit-transform .25s ease}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-collapse.micromag-editor-sortable-sortable-tree-item-actions-collapsed svg{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg)}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-children{position:relative;z-index:0;width:100%}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-withChildren{background-color:#494949}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-withChildren .micromag-editor-sortable-sortable-tree-item-actions-inner{padding-bottom:30px}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-clone{display:block;width:100%;margin-top:5px;margin-left:10px;padding:0;pointer-events:none}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-clone .micromag-editor-sortable-sortable-tree-item-actions-inner{padding-right:24px;border-radius:10px;-webkit-box-shadow:0 15px 15px 0 rgba(34,33,81,.1);box-shadow:0 15px 15px 0 rgba(34,33,81,.1)}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-ghost:not(.micromag-editor-sortable-sortable-tree-item-actions-indicator){-webkit-filter:opacity(.6);filter:opacity(.6)}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-ghost .micromag-editor-sortable-sortable-tree-item-actions-inner>*{background-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-ghost .micromag-editor-sortable-sortable-tree-item-actions-inner{border:1px solid #a13dff;border-radius:4px}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-ghost.micromag-editor-sortable-sortable-tree-item-actions-indicator{position:relative;z-index:1;margin-bottom:-1px;opacity:1}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-ghost.micromag-editor-sortable-sortable-tree-item-actions-indicator .micromag-editor-sortable-sortable-tree-item-actions-inner{position:relative;height:8px;padding:0;border:1px solid #a13dff;border-radius:10px;background-color:#a13dff}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-ghost.micromag-editor-sortable-sortable-tree-item-actions-indicator .micromag-editor-sortable-sortable-tree-item-actions-inner>*{height:0;opacity:0}
16
+ .micromag-editor-sortable-sortable-tree-item{padding-bottom:3px}.micromag-editor-sortable-sortable-tree-item.micromag-editor-sortable-sortable-tree-parent{padding-bottom:0;background-color:#494949}.micromag-editor-sortable-sortable-tree-item.micromag-editor-sortable-sortable-tree-group{padding-top:3px;background-color:#494949}.micromag-editor-sortable-sortable-tree-item.micromag-editor-sortable-sortable-tree-group.micromag-editor-sortable-sortable-tree-isLastChild{margin-bottom:4px;padding-bottom:6px;border-bottom-right-radius:4px;border-bottom-left-radius:4px}
17
17
  .micromag-editor-menus-screen-types-container{position:relative}.micromag-editor-menus-screen-types-container .micromag-editor-menus-screen-types-row{margin-bottom:2rem}.micromag-editor-menus-screen-types-container .micromag-editor-menus-screen-types-row .micromag-editor-menus-screen-types-title{padding-bottom:.25rem;border-bottom:1px solid #dedede;font-size:.85rem}.micromag-editor-menus-screen-types-container .micromag-editor-menus-screen-types-row:last-child{margin-bottom:0}.micromag-editor-menus-screen-types-container .micromag-editor-menus-screen-types-screen{width:100%;max-width:100px}.micromag-editor-menus-screen-types-container .micromag-editor-menus-screen-types-button{mix-blend-mode:difference}
18
18
  .micromag-editor-modals-screen-types-container .micromag-editor-modals-screen-types-selected{background-color:#a13dff}
19
19
  .micromag-editor-forms-settings-container{position:relative;padding:.5rem}.micromag-editor-forms-settings-container .micromag-editor-forms-settings-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
package/es/index.js CHANGED
@@ -1771,7 +1771,8 @@ function flatten(items) {
1771
1771
  return [].concat(_toConsumableArray(acc), [_objectSpread(_objectSpread({}, item), {}, {
1772
1772
  parentId: item.parentId || parentId,
1773
1773
  depth: item.parentId ? 1 : 0,
1774
- index: index
1774
+ index: index // For some reason this aint enough
1775
+
1775
1776
  })], _toConsumableArray(flatten(item.children || [], item.id, depth + 1)));
1776
1777
  }, []);
1777
1778
  }
@@ -1797,7 +1798,9 @@ function buildTree(flattenedItems) {
1797
1798
  return _objectSpread(_objectSpread({}, item), {}, {
1798
1799
  children: []
1799
1800
  });
1800
- }); // eslint-disable-next-line no-restricted-syntax
1801
+ }); // console.log('BUILD');
1802
+
1803
+ var indexes = {}; // eslint-disable-next-line no-restricted-syntax
1801
1804
 
1802
1805
  var _iterator = _createForOfIteratorHelper(items),
1803
1806
  _step;
@@ -1811,11 +1814,21 @@ function buildTree(flattenedItems) {
1811
1814
  children = item.children;
1812
1815
  var parentId = (_item$parentId = item.parentId) !== null && _item$parentId !== void 0 ? _item$parentId : root.id;
1813
1816
  var parent = (_nodes$parentId = nodes[parentId]) !== null && _nodes$parentId !== void 0 ? _nodes$parentId : findItem(items, parentId);
1817
+
1818
+ if (indexes[parentId]) {
1819
+ indexes[parentId] += 1;
1820
+ } else {
1821
+ indexes[parentId] = 0;
1822
+ }
1823
+
1814
1824
  nodes[id] = {
1815
1825
  id: id,
1816
- children: children
1826
+ children: children,
1827
+ index: indexes[parentId]
1817
1828
  };
1818
- parent.children.push(item);
1829
+ parent.children.push(_objectSpread(_objectSpread({}, item), {}, {
1830
+ index: indexes[parentId]
1831
+ }));
1819
1832
  }
1820
1833
  } catch (err) {
1821
1834
  _iterator.e(err);
@@ -2080,11 +2093,9 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
2080
2093
  };
2081
2094
  };
2082
2095
 
2083
- 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"};
2084
-
2085
- var styles$4 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
2096
+ var styles$5 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
2086
2097
 
2087
- 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"};
2098
+ var styles$4 = {"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"};
2088
2099
 
2089
2100
  var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "showCount", "showCollapsedCount", "children"];
2090
2101
  var propTypes$a = {
@@ -2161,21 +2172,21 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
2161
2172
  props = _objectWithoutProperties(_ref, _excluded$4);
2162
2173
 
2163
2174
  return /*#__PURE__*/React.createElement("div", Object.assign({
2164
- className: classNames([styles$3.wrapper, (_ref2 = {}, _defineProperty(_ref2, styles$3.clone, clone), _defineProperty(_ref2, styles$3.ghost, ghost), _defineProperty(_ref2, styles$3.indicator, indicator), _defineProperty(_ref2, styles$3.disableSelection, disableSelection), _defineProperty(_ref2, styles$3.disableInteraction, disableInteraction), _defineProperty(_ref2, styles$3.withChildren, onCollapse !== null), _ref2)]),
2175
+ className: classNames([styles$4.wrapper, (_ref2 = {}, _defineProperty(_ref2, styles$4.clone, clone), _defineProperty(_ref2, styles$4.ghost, ghost), _defineProperty(_ref2, styles$4.indicator, indicator), _defineProperty(_ref2, styles$4.disableSelection, disableSelection), _defineProperty(_ref2, styles$4.disableInteraction, disableInteraction), _defineProperty(_ref2, styles$4.withChildren, onCollapse !== null), _ref2)]),
2165
2176
  ref: wrapperRef,
2166
2177
  style: {
2167
2178
  marginLeft: "".concat(indentationWidth * depth, "px"),
2168
2179
  marginRight: "".concat(5 * depth, "px")
2169
2180
  }
2170
2181
  }, props), /*#__PURE__*/React.createElement("div", {
2171
- className: styles$3.inner,
2182
+ className: styles$4.inner,
2172
2183
  ref: ref,
2173
2184
  style: style
2174
2185
  }, /*#__PURE__*/React.createElement("button", Object.assign({
2175
- className: classNames([styles$3.button, styles$3.handle]),
2186
+ className: classNames([styles$4.button, styles$4.handle]),
2176
2187
  type: "button"
2177
2188
  }, handleProps), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
2178
- className: styles$3.icon,
2189
+ className: styles$4.icon,
2179
2190
  icon: faGripLines
2180
2191
  })), !clone && onRemove ? /*#__PURE__*/React.createElement("button", {
2181
2192
  type: "button",
@@ -2183,17 +2194,17 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
2183
2194
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
2184
2195
  icon: faTimes
2185
2196
  })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React.createElement("span", {
2186
- className: styles$3.count
2197
+ className: styles$4.count
2187
2198
  }, childCount) : null, showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React.createElement("span", {
2188
- className: styles$3.collapsedCount
2199
+ className: styles$4.collapsedCount
2189
2200
  }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React.createElement("button", {
2190
2201
  type: "button",
2191
2202
  onClick: onCollapse,
2192
- className: classNames(styles$3.button, styles$3.collapse, collapsed && styles$3.collapsed)
2203
+ className: classNames(styles$4.button, styles$4.collapse, collapsed && styles$4.collapsed)
2193
2204
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
2194
2205
  icon: faAngleDown
2195
2206
  })) : null, /*#__PURE__*/React.createElement("div", {
2196
- className: styles$3.children
2207
+ className: styles$4.children
2197
2208
  }, children)));
2198
2209
  });
2199
2210
  SortableTreeItemActions.propTypes = propTypes$a;
@@ -2307,7 +2318,7 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
2307
2318
  }
2308
2319
  }, [onPointerUp]);
2309
2320
  return /*#__PURE__*/React.createElement("div", {
2310
- className: classNames([styles$4.container])
2321
+ className: classNames([styles$5.container])
2311
2322
  }, /*#__PURE__*/React.createElement(SortableTreeItemActions, Object.assign({
2312
2323
  ref: setDraggableNodeRef,
2313
2324
  wrapperRef: setDroppableNodeRef,
@@ -2323,15 +2334,17 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
2323
2334
  collapsed: collapsed,
2324
2335
  onCollapse: onCollapse
2325
2336
  }, props), Component !== null ? /*#__PURE__*/React.createElement("div", {
2326
- className: styles$4.parent
2337
+ className: styles$5.parent
2327
2338
  }, /*#__PURE__*/React.createElement(Component, value)) : null, childValue !== null ? /*#__PURE__*/React.createElement("div", {
2328
- className: styles$4.child
2339
+ className: styles$5.child
2329
2340
  }, /*#__PURE__*/React.createElement(Component, childValue)) : null));
2330
2341
  };
2331
2342
 
2332
2343
  SortableTreeItem.propTypes = propTypes$9;
2333
2344
  SortableTreeItem.defaultProps = defaultProps$9;
2334
2345
 
2346
+ var styles$3 = {"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"};
2347
+
2335
2348
  var initialItems = [{
2336
2349
  id: 'Home',
2337
2350
  children: []
@@ -2589,7 +2602,7 @@ var SortableTree = function SortableTree(_ref2) {
2589
2602
  return "Moving was cancelled. ".concat(id, " was dropped in its original position.");
2590
2603
  }
2591
2604
  };
2592
- }, [flattenedItems, onChange, getMovementAnnouncement]);
2605
+ }, [items, onChange, getMovementAnnouncement]);
2593
2606
  var activeValue = defaultItems.find(function (_ref10) {
2594
2607
  var _ref10$id = _ref10.id,
2595
2608
  defaultId = _ref10$id === void 0 ? null : _ref10$id;
@@ -2673,7 +2686,8 @@ var SortableTree = function SortableTree(_ref2) {
2673
2686
  parentId: parentId
2674
2687
  });
2675
2688
  var sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
2676
- var newItems = buildTree(sortedItems);
2689
+ var newItems = buildTree(sortedItems); // console.log('drag endd', sortedItems, newItems);
2690
+
2677
2691
  setItems(newItems);
2678
2692
  }
2679
2693
  }, [projected, items, resetState, arrayMove, buildTree, setItems]);
@@ -2731,7 +2745,7 @@ var SortableTree = function SortableTree(_ref2) {
2731
2745
  return parentId === id;
2732
2746
  }) : null;
2733
2747
  return /*#__PURE__*/React.createElement("div", {
2734
- className: classNames([styles$5.item, (_ref22 = {}, _defineProperty(_ref22, styles$5.parent, onCollapse !== null && !collapsed), _defineProperty(_ref22, styles$5.group, depth === 1), _defineProperty(_ref22, styles$5.isLastChild, next === null), _ref22)]),
2748
+ className: classNames([styles$3.item, (_ref22 = {}, _defineProperty(_ref22, styles$3.parent, onCollapse !== null && !collapsed), _defineProperty(_ref22, styles$3.group, depth === 1), _defineProperty(_ref22, styles$3.isLastChild, next === null), _ref22)]),
2735
2749
  key: id
2736
2750
  }, /*#__PURE__*/React.createElement(SortableTreeItem, {
2737
2751
  key: id,
@@ -2755,7 +2769,7 @@ var SortableTree = function SortableTree(_ref2) {
2755
2769
  dropAnimation: dropAnimation,
2756
2770
  modifiers: indicator ? [adjustTranslate] : undefined
2757
2771
  }, activeId && activeItem ? /*#__PURE__*/React.createElement("div", {
2758
- className: styles$5.item,
2772
+ className: styles$3.item,
2759
2773
  key: activeId
2760
2774
  }, /*#__PURE__*/React.createElement(SortableTreeItem, {
2761
2775
  id: activeId,
package/lib/index.js CHANGED
@@ -1791,7 +1791,8 @@ function flatten(items) {
1791
1791
  return [].concat(_toConsumableArray__default["default"](acc), [_objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
1792
1792
  parentId: item.parentId || parentId,
1793
1793
  depth: item.parentId ? 1 : 0,
1794
- index: index
1794
+ index: index // For some reason this aint enough
1795
+
1795
1796
  })], _toConsumableArray__default["default"](flatten(item.children || [], item.id, depth + 1)));
1796
1797
  }, []);
1797
1798
  }
@@ -1817,7 +1818,9 @@ function buildTree(flattenedItems) {
1817
1818
  return _objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
1818
1819
  children: []
1819
1820
  });
1820
- }); // eslint-disable-next-line no-restricted-syntax
1821
+ }); // console.log('BUILD');
1822
+
1823
+ var indexes = {}; // eslint-disable-next-line no-restricted-syntax
1821
1824
 
1822
1825
  var _iterator = _createForOfIteratorHelper__default["default"](items),
1823
1826
  _step;
@@ -1831,11 +1834,21 @@ function buildTree(flattenedItems) {
1831
1834
  children = item.children;
1832
1835
  var parentId = (_item$parentId = item.parentId) !== null && _item$parentId !== void 0 ? _item$parentId : root.id;
1833
1836
  var parent = (_nodes$parentId = nodes[parentId]) !== null && _nodes$parentId !== void 0 ? _nodes$parentId : findItem(items, parentId);
1837
+
1838
+ if (indexes[parentId]) {
1839
+ indexes[parentId] += 1;
1840
+ } else {
1841
+ indexes[parentId] = 0;
1842
+ }
1843
+
1834
1844
  nodes[id] = {
1835
1845
  id: id,
1836
- children: children
1846
+ children: children,
1847
+ index: indexes[parentId]
1837
1848
  };
1838
- parent.children.push(item);
1849
+ parent.children.push(_objectSpread__default["default"](_objectSpread__default["default"]({}, item), {}, {
1850
+ index: indexes[parentId]
1851
+ }));
1839
1852
  }
1840
1853
  } catch (err) {
1841
1854
  _iterator.e(err);
@@ -2100,11 +2113,9 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
2100
2113
  };
2101
2114
  };
2102
2115
 
2103
- 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"};
2104
-
2105
- var styles$4 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
2116
+ var styles$5 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
2106
2117
 
2107
- 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"};
2118
+ var styles$4 = {"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"};
2108
2119
 
2109
2120
  var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "showCount", "showCollapsedCount", "children"];
2110
2121
  var propTypes$a = {
@@ -2181,21 +2192,21 @@ var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref)
2181
2192
  props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
2182
2193
 
2183
2194
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
2184
- className: classNames__default["default"]([styles$3.wrapper, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$3.clone, clone), _defineProperty__default["default"](_ref2, styles$3.ghost, ghost), _defineProperty__default["default"](_ref2, styles$3.indicator, indicator), _defineProperty__default["default"](_ref2, styles$3.disableSelection, disableSelection), _defineProperty__default["default"](_ref2, styles$3.disableInteraction, disableInteraction), _defineProperty__default["default"](_ref2, styles$3.withChildren, onCollapse !== null), _ref2)]),
2195
+ className: classNames__default["default"]([styles$4.wrapper, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$4.clone, clone), _defineProperty__default["default"](_ref2, styles$4.ghost, ghost), _defineProperty__default["default"](_ref2, styles$4.indicator, indicator), _defineProperty__default["default"](_ref2, styles$4.disableSelection, disableSelection), _defineProperty__default["default"](_ref2, styles$4.disableInteraction, disableInteraction), _defineProperty__default["default"](_ref2, styles$4.withChildren, onCollapse !== null), _ref2)]),
2185
2196
  ref: wrapperRef,
2186
2197
  style: {
2187
2198
  marginLeft: "".concat(indentationWidth * depth, "px"),
2188
2199
  marginRight: "".concat(5 * depth, "px")
2189
2200
  }
2190
2201
  }, props), /*#__PURE__*/React__default["default"].createElement("div", {
2191
- className: styles$3.inner,
2202
+ className: styles$4.inner,
2192
2203
  ref: ref,
2193
2204
  style: style
2194
2205
  }, /*#__PURE__*/React__default["default"].createElement("button", Object.assign({
2195
- className: classNames__default["default"]([styles$3.button, styles$3.handle]),
2206
+ className: classNames__default["default"]([styles$4.button, styles$4.handle]),
2196
2207
  type: "button"
2197
2208
  }, handleProps), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
2198
- className: styles$3.icon,
2209
+ className: styles$4.icon,
2199
2210
  icon: faGripLines.faGripLines
2200
2211
  })), !clone && onRemove ? /*#__PURE__*/React__default["default"].createElement("button", {
2201
2212
  type: "button",
@@ -2203,17 +2214,17 @@ var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref)
2203
2214
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
2204
2215
  icon: faTimes.faTimes
2205
2216
  })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
2206
- className: styles$3.count
2217
+ className: styles$4.count
2207
2218
  }, childCount) : null, showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
2208
- className: styles$3.collapsedCount
2219
+ className: styles$4.collapsedCount
2209
2220
  }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React__default["default"].createElement("button", {
2210
2221
  type: "button",
2211
2222
  onClick: onCollapse,
2212
- className: classNames__default["default"](styles$3.button, styles$3.collapse, collapsed && styles$3.collapsed)
2223
+ className: classNames__default["default"](styles$4.button, styles$4.collapse, collapsed && styles$4.collapsed)
2213
2224
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
2214
2225
  icon: faAngleDown.faAngleDown
2215
2226
  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
2216
- className: styles$3.children
2227
+ className: styles$4.children
2217
2228
  }, children)));
2218
2229
  });
2219
2230
  SortableTreeItemActions.propTypes = propTypes$a;
@@ -2327,7 +2338,7 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
2327
2338
  }
2328
2339
  }, [onPointerUp]);
2329
2340
  return /*#__PURE__*/React__default["default"].createElement("div", {
2330
- className: classNames__default["default"]([styles$4.container])
2341
+ className: classNames__default["default"]([styles$5.container])
2331
2342
  }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItemActions, Object.assign({
2332
2343
  ref: setDraggableNodeRef,
2333
2344
  wrapperRef: setDroppableNodeRef,
@@ -2343,15 +2354,17 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
2343
2354
  collapsed: collapsed,
2344
2355
  onCollapse: onCollapse
2345
2356
  }, props), Component !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
2346
- className: styles$4.parent
2357
+ className: styles$5.parent
2347
2358
  }, /*#__PURE__*/React__default["default"].createElement(Component, value)) : null, childValue !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
2348
- className: styles$4.child
2359
+ className: styles$5.child
2349
2360
  }, /*#__PURE__*/React__default["default"].createElement(Component, childValue)) : null));
2350
2361
  };
2351
2362
 
2352
2363
  SortableTreeItem.propTypes = propTypes$9;
2353
2364
  SortableTreeItem.defaultProps = defaultProps$9;
2354
2365
 
2366
+ var styles$3 = {"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"};
2367
+
2355
2368
  var initialItems = [{
2356
2369
  id: 'Home',
2357
2370
  children: []
@@ -2609,7 +2622,7 @@ var SortableTree = function SortableTree(_ref2) {
2609
2622
  return "Moving was cancelled. ".concat(id, " was dropped in its original position.");
2610
2623
  }
2611
2624
  };
2612
- }, [flattenedItems, onChange, getMovementAnnouncement]);
2625
+ }, [items, onChange, getMovementAnnouncement]);
2613
2626
  var activeValue = defaultItems.find(function (_ref10) {
2614
2627
  var _ref10$id = _ref10.id,
2615
2628
  defaultId = _ref10$id === void 0 ? null : _ref10$id;
@@ -2693,7 +2706,8 @@ var SortableTree = function SortableTree(_ref2) {
2693
2706
  parentId: parentId
2694
2707
  });
2695
2708
  var sortedItems = sortable.arrayMove(clonedItems, activeIndex, overIndex);
2696
- var newItems = buildTree(sortedItems);
2709
+ var newItems = buildTree(sortedItems); // console.log('drag endd', sortedItems, newItems);
2710
+
2697
2711
  setItems(newItems);
2698
2712
  }
2699
2713
  }, [projected, items, resetState, sortable.arrayMove, buildTree, setItems]);
@@ -2751,7 +2765,7 @@ var SortableTree = function SortableTree(_ref2) {
2751
2765
  return parentId === id;
2752
2766
  }) : null;
2753
2767
  return /*#__PURE__*/React__default["default"].createElement("div", {
2754
- className: classNames__default["default"]([styles$5.item, (_ref22 = {}, _defineProperty__default["default"](_ref22, styles$5.parent, onCollapse !== null && !collapsed), _defineProperty__default["default"](_ref22, styles$5.group, depth === 1), _defineProperty__default["default"](_ref22, styles$5.isLastChild, next === null), _ref22)]),
2768
+ className: classNames__default["default"]([styles$3.item, (_ref22 = {}, _defineProperty__default["default"](_ref22, styles$3.parent, onCollapse !== null && !collapsed), _defineProperty__default["default"](_ref22, styles$3.group, depth === 1), _defineProperty__default["default"](_ref22, styles$3.isLastChild, next === null), _ref22)]),
2755
2769
  key: id
2756
2770
  }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItem, {
2757
2771
  key: id,
@@ -2775,7 +2789,7 @@ var SortableTree = function SortableTree(_ref2) {
2775
2789
  dropAnimation: dropAnimation,
2776
2790
  modifiers: indicator ? [adjustTranslate] : undefined
2777
2791
  }, activeId && activeItem ? /*#__PURE__*/React__default["default"].createElement("div", {
2778
- className: styles$5.item,
2792
+ className: styles$3.item,
2779
2793
  key: activeId
2780
2794
  }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItem, {
2781
2795
  id: activeId,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/editor",
3
- "version": "0.3.309",
3
+ "version": "0.3.311",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -55,18 +55,18 @@
55
55
  },
56
56
  "dependencies": {
57
57
  "@babel/runtime": "^7.13.10",
58
- "@dnd-kit/core": "^5.0.1",
59
- "@dnd-kit/sortable": "^6.0.0",
60
- "@dnd-kit/utilities": "^3.1.0",
58
+ "@dnd-kit/core": "^6.0.6",
59
+ "@dnd-kit/sortable": "^7.0.1",
60
+ "@dnd-kit/utilities": "^3.2.1",
61
61
  "@folklore/size": "^0.1.20",
62
62
  "@fortawesome/fontawesome-svg-core": "^1.2.32",
63
63
  "@fortawesome/free-solid-svg-icons": "^5.15.1",
64
64
  "@fortawesome/react-fontawesome": "^0.1.13",
65
- "@micromag/core": "^0.3.307",
66
- "@micromag/elements": "^0.3.309",
67
- "@micromag/fields": "^0.3.307",
68
- "@micromag/screens": "^0.3.308",
69
- "@micromag/viewer": "^0.3.309",
65
+ "@micromag/core": "^0.3.311",
66
+ "@micromag/elements": "^0.3.311",
67
+ "@micromag/fields": "^0.3.311",
68
+ "@micromag/screens": "^0.3.311",
69
+ "@micromag/viewer": "^0.3.311",
70
70
  "classnames": "^2.2.6",
71
71
  "lodash": "^4.17.21",
72
72
  "prop-types": "^15.7.2",
@@ -81,5 +81,5 @@
81
81
  "publishConfig": {
82
82
  "access": "public"
83
83
  },
84
- "gitHead": "34a88603d2e450d84f7d6045475b515ca4cb9a2b"
84
+ "gitHead": "fab297a7ad204611597c749b969f14d992d35d47"
85
85
  }