@micromag/editor 0.3.415 → 0.3.416

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 +2 -2
  2. package/es/index.js +39 -41
  3. package/lib/index.js +39 -41
  4. package/package.json +4 -4
package/assets/css/styles.css CHANGED
@@ -8,12 +8,12 @@
8
8
  .micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-index,.micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-name{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-editor-buttons-screen-with-preview-button{display:block;position:relative;-webkit-transition:-webkit-filter .2s ease;transition:-webkit-filter .2s ease;-o-transition:filter .2s ease;transition:filter .2s ease;transition:filter .2s ease,-webkit-filter .2s ease}.micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-index{background-color:rgba(0,0,0,.4);color:#fff;font-size:1.25rem}.micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-index,.micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-name{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;justify-content:center;opacity:0;pointer-events:none;-webkit-transition:opacity .15s ease;-o-transition:opacity .15s ease;transition:opacity .15s ease;z-index:1}.micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-name{background-color:hsla(0,0%,100%,.6);color:#000!important;font-size:.8rem;padding:5px;text-align:center;text-shadow:1px solid #000;word-break:break-word}.micromag-editor-buttons-screen-with-preview-button:hover{-webkit-filter:grayscale(.5);filter:grayscale(.5)}.micromag-editor-buttons-screen-with-preview-button.micromag-editor-buttons-screen-with-preview-withIndex:hover .micromag-editor-buttons-screen-with-preview-index,.micromag-editor-buttons-screen-with-preview-button.micromag-editor-buttons-screen-with-preview-withIndex:hover .micromag-editor-buttons-screen-with-preview-name{opacity:1}
9
9
  .micromag-editor-partials-screen-states-container{display:inline-block}.micromag-editor-partials-screen-states-button{min-height:75px;width:50px}.micromag-editor-partials-screen-states-button.btn-outline-secondary{border-color:#6c6c6c;color:#6c6c6c}.micromag-editor-partials-screen-states-button.btn-outline-secondary:hover{background:transparent;border-color:#e9e9e9;color:#e9e9e9}.micromag-editor-partials-screen-states-addButton{border-style:dashed}.micromag-editor-partials-screen-states-title{font-size:.75em;padding:0 .2em;text-align:left}
10
10
  .micromag-editor-preview-container .micromag-editor-preview-noStory,.micromag-editor-preview-container .micromag-editor-preview-story{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-editor-preview-container{position:relative}.micromag-editor-preview-container>.micromag-editor-preview-inner{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}.micromag-editor-preview-container .micromag-editor-preview-top{display:none;padding:20px 0;width:100%}.micromag-editor-preview-container .micromag-editor-preview-bottom{-ms-flex-positive:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;flex-grow:1;max-width:100%;overflow:hidden;padding:0;width:100%}.micromag-editor-preview-container .micromag-editor-preview-bottom>.micromag-editor-preview-inner{-ms-flex-positive:1;-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;flex-grow:1;justify-content:center;margin:0 auto;overflow:hidden;width:100%}.micromag-editor-preview-container .micromag-editor-preview-preview{height:100%;position:relative;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;width:100%}.micromag-editor-preview-container .micromag-editor-preview-viewerContainer{height:100%;position:relative}.micromag-editor-preview-container .micromag-editor-preview-devices{bottom:10px;position:absolute;right:10px}.micromag-editor-preview-screen-medium .micromag-editor-preview-top{display:block;overflow-x:auto;text-align:center;width:100%}.micromag-editor-preview-screen-medium .micromag-editor-preview-bottom{padding:50px 20px}
11
- .micromag-editor-screens-container .micromag-editor-screens-navbar{background-color:#1c1c1c;z-index:999}.micromag-editor-screens-container .micromag-editor-screens-navbar>div{padding:0}
12
- .micromag-editor-sortable-sortable-tree-item-container{display:block}.micromag-editor-sortable-sortable-tree-item-container .micromag-editor-sortable-sortable-tree-item-parent{-webkit-box-shadow:0 4px 8px rgba(0,0,0,.5);box-shadow:0 4px 8px rgba(0,0,0,.5);position:relative;z-index:1}.micromag-editor-sortable-sortable-tree-item-container .micromag-editor-sortable-sortable-tree-item-child{bottom:-25px;-webkit-filter:brightness(60%);filter:brightness(60%);position:absolute;right:5px;width:75%;z-index:0}
13
11
  .micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;position:relative}.micromag-editor-sortable-sortable-tree-item-actions-wrapper{border-radius:4px;-webkit-box-sizing:border-box;box-sizing:border-box;list-style:none}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner{-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:#222;display:-ms-flexbox;display:flex;height:100%;position:relative;width:100%;z-index:1}.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:transparent;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{border-radius:10px;height:100%;left:0;position:absolute;top:0;width:100%;z-index:1}.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;left:10px;position:absolute;top:10px;visibility:hidden}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-text{-ms-flex-positive:1;flex-grow:1;overflow:hidden;padding-left:.5rem;-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{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:#a13dff;border-radius:50%;color:#fff;display:-ms-flexbox;display:flex;font-size:.8rem;font-weight:600;height:24px;justify-content:center;position:absolute;right:-10px;top:-10px;width:24px}.micromag-editor-sortable-sortable-tree-item-actions-wrapper .micromag-editor-sortable-sortable-tree-item-actions-inner .micromag-editor-sortable-sortable-tree-item-actions-collapsedCount{background-color:transparent;bottom:2px;right:3px;top:auto}.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{-ms-flex-align:center;-ms-flex-pack:justify;align-items:center;bottom:0;display:-ms-flexbox;display:flex;height:30px;justify-content:space-between;left:0;position:absolute;width:100%;z-index:1}.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;width:100%;z-index:0}.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;margin-left:10px;margin-top:5px;padding:0;pointer-events:none;width:100%}.micromag-editor-sortable-sortable-tree-item-actions-wrapper.micromag-editor-sortable-sortable-tree-item-actions-clone .micromag-editor-sortable-sortable-tree-item-actions-inner{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);padding-right:24px}.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:transparent;-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{margin-bottom:-1px;opacity:1;position:relative;z-index: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{background-color:#a13dff;border:1px solid #a13dff;border-radius:10px;height:8px;padding:0;position:relative}.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}
12
+ .micromag-editor-sortable-sortable-tree-item-container{display:block}.micromag-editor-sortable-sortable-tree-item-container .micromag-editor-sortable-sortable-tree-item-parent{-webkit-box-shadow:0 4px 8px rgba(0,0,0,.5);box-shadow:0 4px 8px rgba(0,0,0,.5);position:relative;z-index:1}.micromag-editor-sortable-sortable-tree-item-container .micromag-editor-sortable-sortable-tree-item-child{bottom:-25px;-webkit-filter:brightness(60%);filter:brightness(60%);position:absolute;right:5px;width:75%;z-index:0}
14
13
  .micromag-editor-sortable-sortable-tree-item{padding-bottom:3px}.micromag-editor-sortable-sortable-tree-item.micromag-editor-sortable-sortable-tree-parent{background-color:#494949;padding-bottom:0}.micromag-editor-sortable-sortable-tree-item.micromag-editor-sortable-sortable-tree-group{background-color:#494949;padding-top:3px}.micromag-editor-sortable-sortable-tree-item.micromag-editor-sortable-sortable-tree-group.micromag-editor-sortable-sortable-tree-isLastChild{border-bottom-left-radius:4px;border-bottom-right-radius:4px;margin-bottom:4px;padding-bottom:6px}
15
14
  .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{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-editor-menus-screens-item,.micromag-editor-menus-screens-items{list-style:none;margin:0;padding:0}.micromag-editor-menus-screens-container{position:relative}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-items{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;margin:-5px;padding:0}.micromag-editor-menus-screens-container .micromag-editor-menus-screens-item{display:block;padding:5px;position:relative;width:33.3%;z-index:2}@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;right:0;top:0}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-noWrap .micromag-editor-menus-screens-items{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.micromag-editor-menus-screens-container.micromag-editor-menus-screens-isVertical .micromag-editor-menus-screens-items{-ms-flex-direction:column;flex-direction:column;-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}
16
15
  .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{border-bottom:1px solid #dedede;font-size:.85rem;padding-bottom:.25rem}.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{max-width:100px;width:100%}.micromag-editor-menus-screen-types-container .micromag-editor-menus-screen-types-button{mix-blend-mode:difference}
17
16
  .micromag-editor-modals-screen-types-container .micromag-editor-modals-screen-types-selected{background-color:#a13dff}
17
+ .micromag-editor-screens-container .micromag-editor-screens-navbar{background-color:#1c1c1c;z-index:999}.micromag-editor-screens-container .micromag-editor-screens-navbar>div{padding:0}
18
18
  .micromag-editor-container .micromag-editor-left,.micromag-editor-container .micromag-editor-right{scrollbar-width:none}.micromag-editor-container .micromag-editor-left::-webkit-scrollbar,.micromag-editor-container .micromag-editor-right::-webkit-scrollbar{display:none}.micromag-editor-container .micromag-editor-center,.micromag-editor-container .micromag-editor-left,.micromag-editor-container .micromag-editor-preview,.micromag-editor-container .micromag-editor-right,.micromag-editor-container.micromag-editor-fullscreen{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-editor-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:relative}.micromag-editor-container>.micromag-editor-inner{-ms-flex-positive:1;flex-grow:1;position:relative;width:100%}.micromag-editor-container .micromag-editor-center,.micromag-editor-container .micromag-editor-left,.micromag-editor-container .micromag-editor-right{display:none;z-index:1}.micromag-editor-container .micromag-editor-center.micromag-editor-visible,.micromag-editor-container .micromag-editor-left.micromag-editor-visible,.micromag-editor-container .micromag-editor-right.micromag-editor-visible{display:block}.micromag-editor-container .micromag-editor-left,.micromag-editor-container .micromag-editor-right{overflow-y:auto;scroll-behavior:smooth}.micromag-editor-container .micromag-editor-left>.micromag-editor-inner,.micromag-editor-container .micromag-editor-right>.micromag-editor-inner{min-height:100%}.micromag-editor-container .micromag-editor-center{background-color:#2b2b2b}.micromag-editor-screen-medium>.micromag-editor-top{display:none}.micromag-editor-screen-medium>.micromag-editor-inner{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%;position:relative;width:100%}.micromag-editor-screen-medium .micromag-editor-center,.micromag-editor-screen-medium .micromag-editor-left,.micromag-editor-screen-medium .micromag-editor-right{height:100%;position:relative}.micromag-editor-screen-medium .micromag-editor-left{width:140px}.micromag-editor-screen-medium .micromag-editor-center{-ms-flex-positive:1;flex-grow:1;width:auto}.micromag-editor-screen-medium .micromag-editor-right{width:320px}
19
19
  .micromag-editor-forms-settings-container{padding:.5rem;position:relative}.micromag-editor-forms-settings-container .micromag-editor-forms-settings-inner{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}
package/es/index.js CHANGED
@@ -1571,8 +1571,6 @@ var EditorPreview = function EditorPreview(_ref) {
1571
1571
  EditorPreview.propTypes = propTypes$b;
1572
1572
  EditorPreview.defaultProps = defaultProps$b;
1573
1573
 
1574
- var styles$8 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
1575
-
1576
1574
  var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
1577
1575
  function getDragDepth(offset, indentationWidth) {
1578
1576
  return Math.round(offset / indentationWidth);
@@ -1918,9 +1916,7 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
1918
1916
  };
1919
1917
  };
1920
1918
 
1921
- var styles$7 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
1922
-
1923
- var styles$6 = {"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","count":"micromag-editor-sortable-sortable-tree-item-actions-count","collapsedCount":"micromag-editor-sortable-sortable-tree-item-actions-collapsedCount","disableInteraction":"micromag-editor-sortable-sortable-tree-item-actions-disableInteraction","disableSelection":"micromag-editor-sortable-sortable-tree-item-actions-disableSelection","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","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"};
1919
+ var styles$8 = {"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","count":"micromag-editor-sortable-sortable-tree-item-actions-count","collapsedCount":"micromag-editor-sortable-sortable-tree-item-actions-collapsedCount","disableInteraction":"micromag-editor-sortable-sortable-tree-item-actions-disableInteraction","disableSelection":"micromag-editor-sortable-sortable-tree-item-actions-disableSelection","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","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"};
1924
1920
 
1925
1921
  var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "showCount", "showCollapsedCount", "children"];
1926
1922
  var propTypes$a = {
@@ -1995,21 +1991,21 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
1995
1991
  children = _ref.children,
1996
1992
  props = _objectWithoutProperties(_ref, _excluded$4);
1997
1993
  return /*#__PURE__*/React.createElement("div", Object.assign({
1998
- className: classNames([styles$6.wrapper, (_ref2 = {}, _defineProperty(_ref2, styles$6.clone, clone), _defineProperty(_ref2, styles$6.ghost, ghost), _defineProperty(_ref2, styles$6.indicator, indicator), _defineProperty(_ref2, styles$6.disableSelection, disableSelection), _defineProperty(_ref2, styles$6.disableInteraction, disableInteraction), _defineProperty(_ref2, styles$6.withChildren, onCollapse !== null), _ref2)]),
1994
+ className: classNames([styles$8.wrapper, (_ref2 = {}, _defineProperty(_ref2, styles$8.clone, clone), _defineProperty(_ref2, styles$8.ghost, ghost), _defineProperty(_ref2, styles$8.indicator, indicator), _defineProperty(_ref2, styles$8.disableSelection, disableSelection), _defineProperty(_ref2, styles$8.disableInteraction, disableInteraction), _defineProperty(_ref2, styles$8.withChildren, onCollapse !== null), _ref2)]),
1999
1995
  ref: wrapperRef,
2000
1996
  style: {
2001
1997
  marginLeft: "".concat(indentationWidth * depth, "px"),
2002
1998
  marginRight: "".concat(5 * depth, "px")
2003
1999
  }
2004
2000
  }, props), /*#__PURE__*/React.createElement("div", {
2005
- className: styles$6.inner,
2001
+ className: styles$8.inner,
2006
2002
  ref: ref,
2007
2003
  style: style
2008
2004
  }, /*#__PURE__*/React.createElement("button", Object.assign({
2009
- className: classNames([styles$6.button, styles$6.handle]),
2005
+ className: classNames([styles$8.button, styles$8.handle]),
2010
2006
  type: "button"
2011
2007
  }, handleProps), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
2012
- className: styles$6.icon,
2008
+ className: styles$8.icon,
2013
2009
  icon: faGripLines
2014
2010
  })), !clone && onRemove ? /*#__PURE__*/React.createElement("button", {
2015
2011
  type: "button",
@@ -2017,22 +2013,24 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
2017
2013
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
2018
2014
  icon: faTimes
2019
2015
  })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React.createElement("span", {
2020
- className: styles$6.count
2016
+ className: styles$8.count
2021
2017
  }, childCount) : null, showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React.createElement("span", {
2022
- className: styles$6.collapsedCount
2018
+ className: styles$8.collapsedCount
2023
2019
  }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React.createElement("button", {
2024
2020
  type: "button",
2025
2021
  onClick: onCollapse,
2026
- className: classNames(styles$6.button, styles$6.collapse, collapsed && styles$6.collapsed)
2022
+ className: classNames(styles$8.button, styles$8.collapse, collapsed && styles$8.collapsed)
2027
2023
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
2028
2024
  icon: faAngleDown
2029
2025
  })) : null, /*#__PURE__*/React.createElement("div", {
2030
- className: styles$6.children
2026
+ className: styles$8.children
2031
2027
  }, children)));
2032
2028
  });
2033
2029
  SortableTreeItemActions.propTypes = propTypes$a;
2034
2030
  SortableTreeItemActions.defaultProps = defaultProps$a;
2035
2031
 
2032
+ var styles$7 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
2033
+
2036
2034
  var _excluded$3 = ["id", "index", "depth", "component", "value", "style", "smallScale", "collapsed", "onCollapse", "onClickItem", "childValue", "isLastChild"];
2037
2035
  var propTypes$9 = {
2038
2036
  id: PropTypes.string.isRequired,
@@ -2156,7 +2154,7 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
2156
2154
  SortableTreeItem.propTypes = propTypes$9;
2157
2155
  SortableTreeItem.defaultProps = defaultProps$9;
2158
2156
 
2159
- 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"};
2157
+ var styles$6 = {"item":"micromag-editor-sortable-sortable-tree-item","parent":"micromag-editor-sortable-sortable-tree-parent","group":"micromag-editor-sortable-sortable-tree-group","isLastChild":"micromag-editor-sortable-sortable-tree-isLastChild"};
2160
2158
 
2161
2159
  var initialItems = [{
2162
2160
  id: 'Home',
@@ -2444,14 +2442,11 @@ var SortableTree = function SortableTree(_ref2) {
2444
2442
  });
2445
2443
  var sortedItems = arrayMove(clonedItems, activeIndex, overIndex);
2446
2444
  var newItems = buildTree(sortedItems);
2447
-
2448
- // console.log('drag endd', sortedItems, newItems);
2449
-
2450
2445
  setItems(newItems);
2451
2446
  if (onChange !== null) {
2452
- // console.log('hell is flatss', newItems);
2453
-
2454
- onChange((newItems || []).map(function (_ref18) {
2447
+ // console.log('hell is flat', sortedItems);
2448
+ // console.log('hell is tree', newItems);
2449
+ onChange((sortedItems || []).map(function (_ref18) {
2455
2450
  var itemId = _ref18.id,
2456
2451
  _ref18$children = _ref18.children,
2457
2452
  children = _ref18$children === void 0 ? [] : _ref18$children,
@@ -2535,7 +2530,7 @@ var SortableTree = function SortableTree(_ref2) {
2535
2530
  return parentId === id;
2536
2531
  }) : null;
2537
2532
  return /*#__PURE__*/React.createElement("div", {
2538
- 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)]),
2533
+ className: classNames([styles$6.item, (_ref22 = {}, _defineProperty(_ref22, styles$6.parent, onCollapse !== null && !collapsed), _defineProperty(_ref22, styles$6.group, depth === 1), _defineProperty(_ref22, styles$6.isLastChild, next === null), _ref22)]),
2539
2534
  key: id
2540
2535
  }, /*#__PURE__*/React.createElement(SortableTreeItem, {
2541
2536
  key: id,
@@ -2559,7 +2554,7 @@ var SortableTree = function SortableTree(_ref2) {
2559
2554
  dropAnimation: dropAnimation,
2560
2555
  modifiers: indicator ? [adjustTranslate] : undefined
2561
2556
  }, activeId && activeItem ? /*#__PURE__*/React.createElement("div", {
2562
- className: styles$5.item,
2557
+ className: styles$6.item,
2563
2558
  key: activeId
2564
2559
  }, /*#__PURE__*/React.createElement(SortableTreeItem, {
2565
2560
  id: activeId,
@@ -2579,7 +2574,7 @@ var SortableTree = function SortableTree(_ref2) {
2579
2574
  SortableTree.propTypes = propTypes$8;
2580
2575
  SortableTree.defaultProps = defaultProps$8;
2581
2576
 
2582
- var styles$4 = {"container":"micromag-editor-menus-screens-container","screen":"micromag-editor-menus-screens-screen","preview":"micromag-editor-menus-screens-preview","placeholder":"micromag-editor-menus-screens-placeholder","items":"micromag-editor-menus-screens-items","item":"micromag-editor-menus-screens-item","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","noWrap":"micromag-editor-menus-screens-noWrap","isVertical":"micromag-editor-menus-screens-isVertical","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
2577
+ var styles$5 = {"container":"micromag-editor-menus-screens-container","screen":"micromag-editor-menus-screens-screen","preview":"micromag-editor-menus-screens-preview","placeholder":"micromag-editor-menus-screens-placeholder","items":"micromag-editor-menus-screens-items","item":"micromag-editor-menus-screens-item","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","noWrap":"micromag-editor-menus-screens-noWrap","isVertical":"micromag-editor-menus-screens-isVertical","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
2583
2578
 
2584
2579
  var _excluded$2 = ["className", "screen", "type", "title", "onClick", "active", "href"],
2585
2580
  _excluded2 = ["id", "screen", "href"];
@@ -2648,7 +2643,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
2648
2643
  item = _objectWithoutProperties(_ref2, _excluded$2);
2649
2644
  return /*#__PURE__*/React.createElement("li", {
2650
2645
  key: item.id,
2651
- className: classNames([styles$4.item, (_ref3 = {}, _defineProperty(_ref3, itemClassName, itemClassName !== null), _defineProperty(_ref3, itemCustomClassName, itemCustomClassName !== null), _ref3)]),
2646
+ className: classNames([styles$5.item, (_ref3 = {}, _defineProperty(_ref3, itemClassName, itemClassName !== null), _defineProperty(_ref3, itemCustomClassName, itemCustomClassName !== null), _ref3)]),
2652
2647
  "data-screen-id": item.id
2653
2648
  }, /*#__PURE__*/React.createElement(ScreenWithPreview, {
2654
2649
  index: index,
@@ -2665,7 +2660,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
2665
2660
  onClick: onClick,
2666
2661
  onClickItem: onClickItem
2667
2662
  }), settings !== null ? /*#__PURE__*/React.createElement("div", {
2668
- className: classNames([_defineProperty({}, settingsClassName, settingsClassName !== null), styles$4.settings, 'p-2'])
2663
+ className: classNames([_defineProperty({}, settingsClassName, settingsClassName !== null), styles$5.settings, 'p-2'])
2669
2664
  }, isFunction(settings) ? settings(index) : settings) : null);
2670
2665
  }) : [];
2671
2666
  var sortableItems = useMemo(function () {
@@ -2700,7 +2695,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
2700
2695
  });
2701
2696
  }, [items, isTree, items.length]);
2702
2697
  return /*#__PURE__*/React.createElement("div", {
2703
- className: classNames([styles$4.container, (_ref8 = {}, _defineProperty(_ref8, styles$4.noWrap, noWrap), _defineProperty(_ref8, styles$4.isVertical, isVertical), _defineProperty(_ref8, styles$4.isTree, isTree), _defineProperty(_ref8, styles$4.withPlaceholder, withPlaceholder), _defineProperty(_ref8, className, className), _ref8)])
2698
+ className: classNames([styles$5.container, (_ref8 = {}, _defineProperty(_ref8, styles$5.noWrap, noWrap), _defineProperty(_ref8, styles$5.isVertical, isVertical), _defineProperty(_ref8, styles$5.isTree, isTree), _defineProperty(_ref8, styles$5.withPlaceholder, withPlaceholder), _defineProperty(_ref8, className, className), _ref8)])
2704
2699
  }, isTree && !sortable ? /*#__PURE__*/React.createElement(SortableTree, {
2705
2700
  items: sortableItems,
2706
2701
  component: ScreenWithPreview,
@@ -2713,15 +2708,15 @@ var ScreensMenu = function ScreensMenu(_ref) {
2713
2708
  delayOnTouchStart: true,
2714
2709
  delay: 2,
2715
2710
  tag: "ul",
2716
- className: styles$4.items
2711
+ className: styles$5.items
2717
2712
  }, itemsElements) : null, !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/React.createElement("ul", {
2718
- className: styles$4.items
2713
+ className: styles$5.items
2719
2714
  }, itemsElements) : null);
2720
2715
  };
2721
2716
  ScreensMenu.propTypes = propTypes$7;
2722
2717
  ScreensMenu.defaultProps = defaultProps$7;
2723
2718
 
2724
- var styles$3 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title","screen":"micromag-editor-menus-screen-types-screen","button":"micromag-editor-menus-screen-types-button"};
2719
+ var styles$4 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title","screen":"micromag-editor-menus-screen-types-screen","button":"micromag-editor-menus-screen-types-button"};
2725
2720
 
2726
2721
  var propTypes$6 = {
2727
2722
  screens: PropTypes$1.screenDefinitions,
@@ -2786,7 +2781,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
2786
2781
  className: classNames(_defineProperty({
2787
2782
  'bg-secondary': !selected,
2788
2783
  'bg-primary': selected
2789
- }, styles$3.selected, selected))
2784
+ }, styles$4.selected, selected))
2790
2785
  };
2791
2786
  return groupIndex !== -1 ? [].concat(_toConsumableArray(allGroups.slice(0, groupIndex)), [_objectSpread(_objectSpread({}, allGroups[groupIndex]), {}, {
2792
2787
  items: [].concat(_toConsumableArray(allGroups[groupIndex].items), [item])
@@ -2800,29 +2795,29 @@ var ScreenTypes = function ScreenTypes(_ref) {
2800
2795
  return orderBy(groupItems, ['order', 'name'], ['asc', 'asc']);
2801
2796
  }, [finalDefinitions, selectedTypes]);
2802
2797
  return /*#__PURE__*/React.createElement("div", {
2803
- className: classNames([styles$3.container, _defineProperty({}, className, className)])
2798
+ className: classNames([styles$4.container, _defineProperty({}, className, className)])
2804
2799
  }, /*#__PURE__*/React.createElement("div", {
2805
- className: styles$3.rows
2800
+ className: styles$4.rows
2806
2801
  }, groups.map(function (_ref6) {
2807
2802
  var id = _ref6.id,
2808
2803
  name = _ref6.name,
2809
2804
  items = _ref6.items;
2810
2805
  return /*#__PURE__*/React.createElement("div", {
2811
2806
  key: "group-".concat(id),
2812
- className: styles$3.row
2807
+ className: styles$4.row
2813
2808
  }, /*#__PURE__*/React.createElement(Label, null, name), /*#__PURE__*/React.createElement("div", {
2814
- className: styles$3.layouts
2809
+ className: styles$4.layouts
2815
2810
  }, /*#__PURE__*/React.createElement(ScreensMenu, {
2816
2811
  items: items,
2817
2812
  withPlaceholder: true,
2818
2813
  withName: true,
2819
- itemClassName: classNames([styles$3.screen, 'border', 'rounded', {
2814
+ itemClassName: classNames([styles$4.screen, 'border', 'rounded', {
2820
2815
  'border-secondary': selectedTypes === null,
2821
2816
  'border-dark': selectedTypes !== null,
2822
2817
  'bg-secondary': selectedTypes === null,
2823
2818
  'text-secondary': selectedTypes !== null
2824
2819
  }]),
2825
- buttonClassName: styles$3.button,
2820
+ buttonClassName: styles$4.button,
2826
2821
  onClickItem: onClickItem
2827
2822
  })));
2828
2823
  })));
@@ -2830,7 +2825,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
2830
2825
  ScreenTypes.propTypes = propTypes$6;
2831
2826
  ScreenTypes.defaultProps = defaultProps$6;
2832
2827
 
2833
- var styles$2 = {"container":"micromag-editor-modals-screen-types-container","selected":"micromag-editor-modals-screen-types-selected"};
2828
+ var styles$3 = {"container":"micromag-editor-modals-screen-types-container","selected":"micromag-editor-modals-screen-types-selected"};
2834
2829
 
2835
2830
  var propTypes$5 = {
2836
2831
  selectedTypes: PropTypes.arrayOf(PropTypes.string),
@@ -2857,17 +2852,19 @@ var ScreenTypesModal = function ScreenTypesModal(_ref) {
2857
2852
  "value": "Add a screen"
2858
2853
  }]
2859
2854
  }),
2860
- className: classNames([styles$2.container, _defineProperty({}, className, className)]),
2855
+ className: classNames([styles$3.container, _defineProperty({}, className, className)]),
2861
2856
  onClickClose: onRequestClose
2862
2857
  }, /*#__PURE__*/React.createElement(ScreenTypes, {
2863
2858
  selectedTypes: selectedTypes,
2864
- className: styles$2.menu,
2859
+ className: styles$3.menu,
2865
2860
  onClickItem: onClickScreenType
2866
2861
  })));
2867
2862
  };
2868
2863
  ScreenTypesModal.propTypes = propTypes$5;
2869
2864
  ScreenTypesModal.defaultProps = defaultProps$5;
2870
2865
 
2866
+ var styles$2 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
2867
+
2871
2868
  var _excluded$1 = ["id"];
2872
2869
  var propTypes$4 = {
2873
2870
  value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
@@ -3003,6 +3000,7 @@ var EditorScreens = function EditorScreens(_ref) {
3003
3000
  })
3004
3001
  });
3005
3002
  if (onChange !== null) {
3003
+ // console.log('og!', listItems, newValue);
3006
3004
  onChange(newValue);
3007
3005
  }
3008
3006
  }
@@ -3028,12 +3026,12 @@ var EditorScreens = function EditorScreens(_ref) {
3028
3026
  return setCreateModalOpened(false);
3029
3027
  }, [setCreateModalOpened]);
3030
3028
  return /*#__PURE__*/React.createElement("div", {
3031
- className: classNames(['d-flex', 'flex-column', styles$8.container, className])
3029
+ className: classNames(['d-flex', 'flex-column', styles$2.container, className])
3032
3030
  }, /*#__PURE__*/React.createElement(Navbar, {
3033
3031
  compact: true,
3034
3032
  noWrap: true,
3035
3033
  withoutCollapse: true,
3036
- className: classNames(['sticky-top', styles$8.navbar])
3034
+ className: classNames(['sticky-top', styles$2.navbar])
3037
3035
  }, /*#__PURE__*/React.createElement("strong", {
3038
3036
  className: "mb-0 me-auto"
3039
3037
  }, /*#__PURE__*/React.createElement(FormattedMessage, {
package/lib/index.js CHANGED
@@ -1591,8 +1591,6 @@ var EditorPreview = function EditorPreview(_ref) {
1591
1591
  EditorPreview.propTypes = propTypes$b;
1592
1592
  EditorPreview.defaultProps = defaultProps$b;
1593
1593
 
1594
- var styles$8 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
1595
-
1596
1594
  var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
1597
1595
  function getDragDepth(offset, indentationWidth) {
1598
1596
  return Math.round(offset / indentationWidth);
@@ -1938,9 +1936,7 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
1938
1936
  };
1939
1937
  };
1940
1938
 
1941
- var styles$7 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
1942
-
1943
- var styles$6 = {"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","count":"micromag-editor-sortable-sortable-tree-item-actions-count","collapsedCount":"micromag-editor-sortable-sortable-tree-item-actions-collapsedCount","disableInteraction":"micromag-editor-sortable-sortable-tree-item-actions-disableInteraction","disableSelection":"micromag-editor-sortable-sortable-tree-item-actions-disableSelection","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","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"};
1939
+ var styles$8 = {"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","count":"micromag-editor-sortable-sortable-tree-item-actions-count","collapsedCount":"micromag-editor-sortable-sortable-tree-item-actions-collapsedCount","disableInteraction":"micromag-editor-sortable-sortable-tree-item-actions-disableInteraction","disableSelection":"micromag-editor-sortable-sortable-tree-item-actions-disableSelection","clone":"micromag-editor-sortable-sortable-tree-item-actions-clone","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"};
1944
1940
 
1945
1941
  var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "showCount", "showCollapsedCount", "children"];
1946
1942
  var propTypes$a = {
@@ -2015,21 +2011,21 @@ var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref)
2015
2011
  children = _ref.children,
2016
2012
  props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
2017
2013
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
2018
- className: classNames__default["default"]([styles$6.wrapper, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$6.clone, clone), _defineProperty__default["default"](_ref2, styles$6.ghost, ghost), _defineProperty__default["default"](_ref2, styles$6.indicator, indicator), _defineProperty__default["default"](_ref2, styles$6.disableSelection, disableSelection), _defineProperty__default["default"](_ref2, styles$6.disableInteraction, disableInteraction), _defineProperty__default["default"](_ref2, styles$6.withChildren, onCollapse !== null), _ref2)]),
2014
+ className: classNames__default["default"]([styles$8.wrapper, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$8.clone, clone), _defineProperty__default["default"](_ref2, styles$8.ghost, ghost), _defineProperty__default["default"](_ref2, styles$8.indicator, indicator), _defineProperty__default["default"](_ref2, styles$8.disableSelection, disableSelection), _defineProperty__default["default"](_ref2, styles$8.disableInteraction, disableInteraction), _defineProperty__default["default"](_ref2, styles$8.withChildren, onCollapse !== null), _ref2)]),
2019
2015
  ref: wrapperRef,
2020
2016
  style: {
2021
2017
  marginLeft: "".concat(indentationWidth * depth, "px"),
2022
2018
  marginRight: "".concat(5 * depth, "px")
2023
2019
  }
2024
2020
  }, props), /*#__PURE__*/React__default["default"].createElement("div", {
2025
- className: styles$6.inner,
2021
+ className: styles$8.inner,
2026
2022
  ref: ref,
2027
2023
  style: style
2028
2024
  }, /*#__PURE__*/React__default["default"].createElement("button", Object.assign({
2029
- className: classNames__default["default"]([styles$6.button, styles$6.handle]),
2025
+ className: classNames__default["default"]([styles$8.button, styles$8.handle]),
2030
2026
  type: "button"
2031
2027
  }, handleProps), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
2032
- className: styles$6.icon,
2028
+ className: styles$8.icon,
2033
2029
  icon: faGripLines.faGripLines
2034
2030
  })), !clone && onRemove ? /*#__PURE__*/React__default["default"].createElement("button", {
2035
2031
  type: "button",
@@ -2037,22 +2033,24 @@ var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref)
2037
2033
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
2038
2034
  icon: faTimes.faTimes
2039
2035
  })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
2040
- className: styles$6.count
2036
+ className: styles$8.count
2041
2037
  }, childCount) : null, showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
2042
- className: styles$6.collapsedCount
2038
+ className: styles$8.collapsedCount
2043
2039
  }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React__default["default"].createElement("button", {
2044
2040
  type: "button",
2045
2041
  onClick: onCollapse,
2046
- className: classNames__default["default"](styles$6.button, styles$6.collapse, collapsed && styles$6.collapsed)
2042
+ className: classNames__default["default"](styles$8.button, styles$8.collapse, collapsed && styles$8.collapsed)
2047
2043
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
2048
2044
  icon: faAngleDown.faAngleDown
2049
2045
  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
2050
- className: styles$6.children
2046
+ className: styles$8.children
2051
2047
  }, children)));
2052
2048
  });
2053
2049
  SortableTreeItemActions.propTypes = propTypes$a;
2054
2050
  SortableTreeItemActions.defaultProps = defaultProps$a;
2055
2051
 
2052
+ var styles$7 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
2053
+
2056
2054
  var _excluded$3 = ["id", "index", "depth", "component", "value", "style", "smallScale", "collapsed", "onCollapse", "onClickItem", "childValue", "isLastChild"];
2057
2055
  var propTypes$9 = {
2058
2056
  id: PropTypes__default["default"].string.isRequired,
@@ -2176,7 +2174,7 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
2176
2174
  SortableTreeItem.propTypes = propTypes$9;
2177
2175
  SortableTreeItem.defaultProps = defaultProps$9;
2178
2176
 
2179
- 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"};
2177
+ var styles$6 = {"item":"micromag-editor-sortable-sortable-tree-item","parent":"micromag-editor-sortable-sortable-tree-parent","group":"micromag-editor-sortable-sortable-tree-group","isLastChild":"micromag-editor-sortable-sortable-tree-isLastChild"};
2180
2178
 
2181
2179
  var initialItems = [{
2182
2180
  id: 'Home',
@@ -2464,14 +2462,11 @@ var SortableTree = function SortableTree(_ref2) {
2464
2462
  });
2465
2463
  var sortedItems = sortable.arrayMove(clonedItems, activeIndex, overIndex);
2466
2464
  var newItems = buildTree(sortedItems);
2467
-
2468
- // console.log('drag endd', sortedItems, newItems);
2469
-
2470
2465
  setItems(newItems);
2471
2466
  if (onChange !== null) {
2472
- // console.log('hell is flatss', newItems);
2473
-
2474
- onChange((newItems || []).map(function (_ref18) {
2467
+ // console.log('hell is flat', sortedItems);
2468
+ // console.log('hell is tree', newItems);
2469
+ onChange((sortedItems || []).map(function (_ref18) {
2475
2470
  var itemId = _ref18.id,
2476
2471
  _ref18$children = _ref18.children,
2477
2472
  children = _ref18$children === void 0 ? [] : _ref18$children,
@@ -2555,7 +2550,7 @@ var SortableTree = function SortableTree(_ref2) {
2555
2550
  return parentId === id;
2556
2551
  }) : null;
2557
2552
  return /*#__PURE__*/React__default["default"].createElement("div", {
2558
- 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)]),
2553
+ className: classNames__default["default"]([styles$6.item, (_ref22 = {}, _defineProperty__default["default"](_ref22, styles$6.parent, onCollapse !== null && !collapsed), _defineProperty__default["default"](_ref22, styles$6.group, depth === 1), _defineProperty__default["default"](_ref22, styles$6.isLastChild, next === null), _ref22)]),
2559
2554
  key: id
2560
2555
  }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItem, {
2561
2556
  key: id,
@@ -2579,7 +2574,7 @@ var SortableTree = function SortableTree(_ref2) {
2579
2574
  dropAnimation: dropAnimation,
2580
2575
  modifiers: indicator ? [adjustTranslate] : undefined
2581
2576
  }, activeId && activeItem ? /*#__PURE__*/React__default["default"].createElement("div", {
2582
- className: styles$5.item,
2577
+ className: styles$6.item,
2583
2578
  key: activeId
2584
2579
  }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItem, {
2585
2580
  id: activeId,
@@ -2599,7 +2594,7 @@ var SortableTree = function SortableTree(_ref2) {
2599
2594
  SortableTree.propTypes = propTypes$8;
2600
2595
  SortableTree.defaultProps = defaultProps$8;
2601
2596
 
2602
- var styles$4 = {"container":"micromag-editor-menus-screens-container","screen":"micromag-editor-menus-screens-screen","preview":"micromag-editor-menus-screens-preview","placeholder":"micromag-editor-menus-screens-placeholder","items":"micromag-editor-menus-screens-items","item":"micromag-editor-menus-screens-item","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","noWrap":"micromag-editor-menus-screens-noWrap","isVertical":"micromag-editor-menus-screens-isVertical","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
2597
+ var styles$5 = {"container":"micromag-editor-menus-screens-container","screen":"micromag-editor-menus-screens-screen","preview":"micromag-editor-menus-screens-preview","placeholder":"micromag-editor-menus-screens-placeholder","items":"micromag-editor-menus-screens-items","item":"micromag-editor-menus-screens-item","button":"micromag-editor-menus-screens-button","settings":"micromag-editor-menus-screens-settings","noWrap":"micromag-editor-menus-screens-noWrap","isVertical":"micromag-editor-menus-screens-isVertical","withPlaceholder":"micromag-editor-menus-screens-withPlaceholder"};
2603
2598
 
2604
2599
  var _excluded$2 = ["className", "screen", "type", "title", "onClick", "active", "href"],
2605
2600
  _excluded2 = ["id", "screen", "href"];
@@ -2668,7 +2663,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
2668
2663
  item = _objectWithoutProperties__default["default"](_ref2, _excluded$2);
2669
2664
  return /*#__PURE__*/React__default["default"].createElement("li", {
2670
2665
  key: item.id,
2671
- className: classNames__default["default"]([styles$4.item, (_ref3 = {}, _defineProperty__default["default"](_ref3, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref3, itemCustomClassName, itemCustomClassName !== null), _ref3)]),
2666
+ className: classNames__default["default"]([styles$5.item, (_ref3 = {}, _defineProperty__default["default"](_ref3, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref3, itemCustomClassName, itemCustomClassName !== null), _ref3)]),
2672
2667
  "data-screen-id": item.id
2673
2668
  }, /*#__PURE__*/React__default["default"].createElement(ScreenWithPreview, {
2674
2669
  index: index,
@@ -2685,7 +2680,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
2685
2680
  onClick: onClick,
2686
2681
  onClickItem: onClickItem
2687
2682
  }), settings !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
2688
- className: classNames__default["default"]([_defineProperty__default["default"]({}, settingsClassName, settingsClassName !== null), styles$4.settings, 'p-2'])
2683
+ className: classNames__default["default"]([_defineProperty__default["default"]({}, settingsClassName, settingsClassName !== null), styles$5.settings, 'p-2'])
2689
2684
  }, isFunction__default["default"](settings) ? settings(index) : settings) : null);
2690
2685
  }) : [];
2691
2686
  var sortableItems = React.useMemo(function () {
@@ -2720,7 +2715,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
2720
2715
  });
2721
2716
  }, [items, isTree, items.length]);
2722
2717
  return /*#__PURE__*/React__default["default"].createElement("div", {
2723
- className: classNames__default["default"]([styles$4.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$4.noWrap, noWrap), _defineProperty__default["default"](_ref8, styles$4.isVertical, isVertical), _defineProperty__default["default"](_ref8, styles$4.isTree, isTree), _defineProperty__default["default"](_ref8, styles$4.withPlaceholder, withPlaceholder), _defineProperty__default["default"](_ref8, className, className), _ref8)])
2718
+ className: classNames__default["default"]([styles$5.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$5.noWrap, noWrap), _defineProperty__default["default"](_ref8, styles$5.isVertical, isVertical), _defineProperty__default["default"](_ref8, styles$5.isTree, isTree), _defineProperty__default["default"](_ref8, styles$5.withPlaceholder, withPlaceholder), _defineProperty__default["default"](_ref8, className, className), _ref8)])
2724
2719
  }, isTree && !sortable ? /*#__PURE__*/React__default["default"].createElement(SortableTree, {
2725
2720
  items: sortableItems,
2726
2721
  component: ScreenWithPreview,
@@ -2733,15 +2728,15 @@ var ScreensMenu = function ScreensMenu(_ref) {
2733
2728
  delayOnTouchStart: true,
2734
2729
  delay: 2,
2735
2730
  tag: "ul",
2736
- className: styles$4.items
2731
+ className: styles$5.items
2737
2732
  }, itemsElements) : null, !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/React__default["default"].createElement("ul", {
2738
- className: styles$4.items
2733
+ className: styles$5.items
2739
2734
  }, itemsElements) : null);
2740
2735
  };
2741
2736
  ScreensMenu.propTypes = propTypes$7;
2742
2737
  ScreensMenu.defaultProps = defaultProps$7;
2743
2738
 
2744
- var styles$3 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title","screen":"micromag-editor-menus-screen-types-screen","button":"micromag-editor-menus-screen-types-button"};
2739
+ var styles$4 = {"container":"micromag-editor-menus-screen-types-container","row":"micromag-editor-menus-screen-types-row","title":"micromag-editor-menus-screen-types-title","screen":"micromag-editor-menus-screen-types-screen","button":"micromag-editor-menus-screen-types-button"};
2745
2740
 
2746
2741
  var propTypes$6 = {
2747
2742
  screens: core.PropTypes.screenDefinitions,
@@ -2806,7 +2801,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
2806
2801
  className: classNames__default["default"](_defineProperty__default["default"]({
2807
2802
  'bg-secondary': !selected,
2808
2803
  'bg-primary': selected
2809
- }, styles$3.selected, selected))
2804
+ }, styles$4.selected, selected))
2810
2805
  };
2811
2806
  return groupIndex !== -1 ? [].concat(_toConsumableArray__default["default"](allGroups.slice(0, groupIndex)), [_objectSpread__default["default"](_objectSpread__default["default"]({}, allGroups[groupIndex]), {}, {
2812
2807
  items: [].concat(_toConsumableArray__default["default"](allGroups[groupIndex].items), [item])
@@ -2820,29 +2815,29 @@ var ScreenTypes = function ScreenTypes(_ref) {
2820
2815
  return orderBy__default["default"](groupItems, ['order', 'name'], ['asc', 'asc']);
2821
2816
  }, [finalDefinitions, selectedTypes]);
2822
2817
  return /*#__PURE__*/React__default["default"].createElement("div", {
2823
- className: classNames__default["default"]([styles$3.container, _defineProperty__default["default"]({}, className, className)])
2818
+ className: classNames__default["default"]([styles$4.container, _defineProperty__default["default"]({}, className, className)])
2824
2819
  }, /*#__PURE__*/React__default["default"].createElement("div", {
2825
- className: styles$3.rows
2820
+ className: styles$4.rows
2826
2821
  }, groups.map(function (_ref6) {
2827
2822
  var id = _ref6.id,
2828
2823
  name = _ref6.name,
2829
2824
  items = _ref6.items;
2830
2825
  return /*#__PURE__*/React__default["default"].createElement("div", {
2831
2826
  key: "group-".concat(id),
2832
- className: styles$3.row
2827
+ className: styles$4.row
2833
2828
  }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, name), /*#__PURE__*/React__default["default"].createElement("div", {
2834
- className: styles$3.layouts
2829
+ className: styles$4.layouts
2835
2830
  }, /*#__PURE__*/React__default["default"].createElement(ScreensMenu, {
2836
2831
  items: items,
2837
2832
  withPlaceholder: true,
2838
2833
  withName: true,
2839
- itemClassName: classNames__default["default"]([styles$3.screen, 'border', 'rounded', {
2834
+ itemClassName: classNames__default["default"]([styles$4.screen, 'border', 'rounded', {
2840
2835
  'border-secondary': selectedTypes === null,
2841
2836
  'border-dark': selectedTypes !== null,
2842
2837
  'bg-secondary': selectedTypes === null,
2843
2838
  'text-secondary': selectedTypes !== null
2844
2839
  }]),
2845
- buttonClassName: styles$3.button,
2840
+ buttonClassName: styles$4.button,
2846
2841
  onClickItem: onClickItem
2847
2842
  })));
2848
2843
  })));
@@ -2850,7 +2845,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
2850
2845
  ScreenTypes.propTypes = propTypes$6;
2851
2846
  ScreenTypes.defaultProps = defaultProps$6;
2852
2847
 
2853
- var styles$2 = {"container":"micromag-editor-modals-screen-types-container","selected":"micromag-editor-modals-screen-types-selected"};
2848
+ var styles$3 = {"container":"micromag-editor-modals-screen-types-container","selected":"micromag-editor-modals-screen-types-selected"};
2854
2849
 
2855
2850
  var propTypes$5 = {
2856
2851
  selectedTypes: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string),
@@ -2877,17 +2872,19 @@ var ScreenTypesModal = function ScreenTypesModal(_ref) {
2877
2872
  "value": "Add a screen"
2878
2873
  }]
2879
2874
  }),
2880
- className: classNames__default["default"]([styles$2.container, _defineProperty__default["default"]({}, className, className)]),
2875
+ className: classNames__default["default"]([styles$3.container, _defineProperty__default["default"]({}, className, className)]),
2881
2876
  onClickClose: onRequestClose
2882
2877
  }, /*#__PURE__*/React__default["default"].createElement(ScreenTypes, {
2883
2878
  selectedTypes: selectedTypes,
2884
- className: styles$2.menu,
2879
+ className: styles$3.menu,
2885
2880
  onClickItem: onClickScreenType
2886
2881
  })));
2887
2882
  };
2888
2883
  ScreenTypesModal.propTypes = propTypes$5;
2889
2884
  ScreenTypesModal.defaultProps = defaultProps$5;
2890
2885
 
2886
+ var styles$2 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
2887
+
2891
2888
  var _excluded$1 = ["id"];
2892
2889
  var propTypes$4 = {
2893
2890
  value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
@@ -3023,6 +3020,7 @@ var EditorScreens = function EditorScreens(_ref) {
3023
3020
  })
3024
3021
  });
3025
3022
  if (onChange !== null) {
3023
+ // console.log('og!', listItems, newValue);
3026
3024
  onChange(newValue);
3027
3025
  }
3028
3026
  }
@@ -3048,12 +3046,12 @@ var EditorScreens = function EditorScreens(_ref) {
3048
3046
  return setCreateModalOpened(false);
3049
3047
  }, [setCreateModalOpened]);
3050
3048
  return /*#__PURE__*/React__default["default"].createElement("div", {
3051
- className: classNames__default["default"](['d-flex', 'flex-column', styles$8.container, className])
3049
+ className: classNames__default["default"](['d-flex', 'flex-column', styles$2.container, className])
3052
3050
  }, /*#__PURE__*/React__default["default"].createElement(components.Navbar, {
3053
3051
  compact: true,
3054
3052
  noWrap: true,
3055
3053
  withoutCollapse: true,
3056
- className: classNames__default["default"](['sticky-top', styles$8.navbar])
3054
+ className: classNames__default["default"](['sticky-top', styles$2.navbar])
3057
3055
  }, /*#__PURE__*/React__default["default"].createElement("strong", {
3058
3056
  className: "mb-0 me-auto"
3059
3057
  }, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/editor",
3
- "version": "0.3.415",
3
+ "version": "0.3.416",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "keywords": [
@@ -67,8 +67,8 @@
67
67
  "@micromag/core": "^0.3.410",
68
68
  "@micromag/elements": "^0.3.414",
69
69
  "@micromag/fields": "^0.3.412",
70
- "@micromag/screens": "^0.3.415",
71
- "@micromag/viewer": "^0.3.415",
70
+ "@micromag/screens": "^0.3.416",
71
+ "@micromag/viewer": "^0.3.416",
72
72
  "classnames": "^2.2.6",
73
73
  "lodash": "^4.17.21",
74
74
  "prop-types": "^15.7.2",
@@ -84,5 +84,5 @@
84
84
  "access": "public",
85
85
  "registry": "https://registry.npmjs.org/"
86
86
  },
87
- "gitHead": "2a98c45442258ad40d3914644530de6d9a32e3ea"
87
+ "gitHead": "4990d8fa86965538a258b8061630290f8c2d7ae6"
88
88
  }