@micromag/editor 0.3.353 → 0.3.355

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 +43 -28
  3. package/lib/index.js +43 -28
  4. package/package.json +7 -7
package/assets/css/styles.css CHANGED
@@ -5,14 +5,14 @@
5
5
  .micromag-editor-menus-devices-container{display:inline-block;position:relative}.micromag-editor-menus-devices-container .micromag-editor-menus-devices-button{display:block;height:30px;padding:5px;width:40px}
6
6
  .micromag-editor-buttons-device-container .micromag-editor-buttons-device-icon{display:block;height:auto;max-height:100%;width:100%}
7
7
  .micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;color:inherit;cursor:pointer;font-family:inherit;padding:0;position:relative}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-border,.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-button,.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-screen .micromag-editor-buttons-screen-inner{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-editor-buttons-screen-container{overflow:hidden;position:relative}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-button{display:inline-block}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-border{display:block}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-screen{display:block;height:0;padding-bottom:150%;pointer-events:none;position:relative;width:100%}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-screen .micromag-editor-buttons-screen-inner{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-screen .micromag-editor-buttons-screen-icon{-ms-flex-positive:1;flex-grow:1;position:relative;width:100%}.micromag-editor-buttons-screen-container .micromag-editor-buttons-screen-screen .micromag-editor-buttons-screen-label{font-size:.75rem;font-weight:700;padding:5px 0}.micromag-editor-buttons-screen-container.micromag-editor-buttons-screen-active .micromag-editor-buttons-screen-border{border:3px solid #a13dff;z-index:2}
8
- .micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-index{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{-ms-flex-align:center;-ms-flex-pack:center;align-items:center;background-color:rgba(0,0,0,.4);color:#fff;display:-ms-flexbox;display:flex;font-size:1.25rem;justify-content:center;opacity:0;pointer-events:none;-webkit-transition:opacity .2s ease;-o-transition:opacity .2s ease;transition:opacity .2s ease;z-index:1}.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{opacity:1}
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
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-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}
13
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-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}
15
14
  .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
+ .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
16
  .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
17
  .micromag-editor-modals-screen-types-container .micromag-editor-modals-screen-types-selected{background-color:#a13dff}
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}
package/es/index.js CHANGED
@@ -1180,7 +1180,7 @@ var ScreenButton$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
1180
1180
  }));
1181
1181
  });
1182
1182
 
1183
- var styles$b = {"button":"micromag-editor-buttons-screen-with-preview-button","index":"micromag-editor-buttons-screen-with-preview-index","withIndex":"micromag-editor-buttons-screen-with-preview-withIndex"};
1183
+ var styles$b = {"button":"micromag-editor-buttons-screen-with-preview-button","name":"micromag-editor-buttons-screen-with-preview-name","index":"micromag-editor-buttons-screen-with-preview-index","withIndex":"micromag-editor-buttons-screen-with-preview-withIndex"};
1184
1184
 
1185
1185
  var propTypes$d = {
1186
1186
  screen: PropTypes$1.screenComponent,
@@ -1191,6 +1191,7 @@ var propTypes$d = {
1191
1191
  active: PropTypes.bool,
1192
1192
  withPlaceholder: PropTypes.bool,
1193
1193
  withIndexIndicator: PropTypes.bool,
1194
+ withName: PropTypes.bool,
1194
1195
  onClick: PropTypes.func,
1195
1196
  onClickItem: PropTypes.func,
1196
1197
  className: PropTypes.string
@@ -1203,6 +1204,7 @@ var defaultProps$d = {
1203
1204
  active: false,
1204
1205
  withPlaceholder: false,
1205
1206
  withIndexIndicator: false,
1207
+ withName: false,
1206
1208
  onClick: null,
1207
1209
  onClickItem: null,
1208
1210
  className: null
@@ -1218,15 +1220,17 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
1218
1220
  className = _ref.className,
1219
1221
  _onClick = _ref.onClick,
1220
1222
  onClickItem = _ref.onClickItem,
1223
+ withName = _ref.withName,
1221
1224
  withPlaceholder = _ref.withPlaceholder,
1222
1225
  withIndexIndicator = _ref.withIndexIndicator;
1223
1226
  var intl = useIntl();
1224
1227
  var ScreenComponent = withPlaceholder ? ScreenPlaceholder : ScreenPreview;
1228
+ var finalTitle = isMessage(title) ? intl.formatMessage(title) : title || null;
1225
1229
  return /*#__PURE__*/React.createElement(ScreenButton$1, {
1226
1230
  href: href,
1227
1231
  active: active,
1228
- className: classNames([styles$b.button, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$b.withIndex, withIndexIndicator), _ref2)]),
1229
- title: isMessage(title) ? intl.formatMessage(title) : null,
1232
+ className: classNames([styles$b.button, (_ref2 = {}, _defineProperty(_ref2, className, className !== null), _defineProperty(_ref2, styles$b.withIndex, withIndexIndicator || withName), _ref2)]),
1233
+ title: finalTitle,
1230
1234
  onClick: function onClick() {
1231
1235
  if (_onClick !== null) {
1232
1236
  _onClick(screen, index);
@@ -1242,7 +1246,9 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
1242
1246
  withSize: true
1243
1247
  }), index !== null && withIndexIndicator ? /*#__PURE__*/React.createElement("div", {
1244
1248
  className: styles$b.index
1245
- }, index + 1) : null);
1249
+ }, index + 1) : null, withName && !withIndexIndicator ? /*#__PURE__*/React.createElement("div", {
1250
+ className: styles$b.name
1251
+ }, finalTitle || null) : null);
1246
1252
  };
1247
1253
  ScreenWithPreview.propTypes = propTypes$d;
1248
1254
  ScreenWithPreview.defaultProps = defaultProps$d;
@@ -1567,8 +1573,6 @@ EditorPreview.defaultProps = defaultProps$b;
1567
1573
 
1568
1574
  var styles$8 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
1569
1575
 
1570
- var styles$7 = {"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"};
1571
-
1572
1576
  var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
1573
1577
  function getDragDepth(offset, indentationWidth) {
1574
1578
  return Math.round(offset / indentationWidth);
@@ -1914,9 +1918,9 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
1914
1918
  };
1915
1919
  };
1916
1920
 
1917
- var styles$6 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
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"};
1918
1922
 
1919
- var styles$5 = {"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"};
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"};
1920
1924
 
1921
1925
  var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "showCount", "showCollapsedCount", "children"];
1922
1926
  var propTypes$a = {
@@ -1991,21 +1995,21 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
1991
1995
  children = _ref.children,
1992
1996
  props = _objectWithoutProperties(_ref, _excluded$4);
1993
1997
  return /*#__PURE__*/React.createElement("div", Object.assign({
1994
- className: classNames([styles$5.wrapper, (_ref2 = {}, _defineProperty(_ref2, styles$5.clone, clone), _defineProperty(_ref2, styles$5.ghost, ghost), _defineProperty(_ref2, styles$5.indicator, indicator), _defineProperty(_ref2, styles$5.disableSelection, disableSelection), _defineProperty(_ref2, styles$5.disableInteraction, disableInteraction), _defineProperty(_ref2, styles$5.withChildren, onCollapse !== null), _ref2)]),
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)]),
1995
1999
  ref: wrapperRef,
1996
2000
  style: {
1997
2001
  marginLeft: "".concat(indentationWidth * depth, "px"),
1998
2002
  marginRight: "".concat(5 * depth, "px")
1999
2003
  }
2000
2004
  }, props), /*#__PURE__*/React.createElement("div", {
2001
- className: styles$5.inner,
2005
+ className: styles$6.inner,
2002
2006
  ref: ref,
2003
2007
  style: style
2004
2008
  }, /*#__PURE__*/React.createElement("button", Object.assign({
2005
- className: classNames([styles$5.button, styles$5.handle]),
2009
+ className: classNames([styles$6.button, styles$6.handle]),
2006
2010
  type: "button"
2007
2011
  }, handleProps), /*#__PURE__*/React.createElement(FontAwesomeIcon, {
2008
- className: styles$5.icon,
2012
+ className: styles$6.icon,
2009
2013
  icon: faGripLines
2010
2014
  })), !clone && onRemove ? /*#__PURE__*/React.createElement("button", {
2011
2015
  type: "button",
@@ -2013,17 +2017,17 @@ var SortableTreeItemActions = /*#__PURE__*/forwardRef(function (_ref, ref) {
2013
2017
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
2014
2018
  icon: faTimes
2015
2019
  })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React.createElement("span", {
2016
- className: styles$5.count
2020
+ className: styles$6.count
2017
2021
  }, childCount) : null, showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React.createElement("span", {
2018
- className: styles$5.collapsedCount
2022
+ className: styles$6.collapsedCount
2019
2023
  }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React.createElement("button", {
2020
2024
  type: "button",
2021
2025
  onClick: onCollapse,
2022
- className: classNames(styles$5.button, styles$5.collapse, collapsed && styles$5.collapsed)
2026
+ className: classNames(styles$6.button, styles$6.collapse, collapsed && styles$6.collapsed)
2023
2027
  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
2024
2028
  icon: faAngleDown
2025
2029
  })) : null, /*#__PURE__*/React.createElement("div", {
2026
- className: styles$5.children
2030
+ className: styles$6.children
2027
2031
  }, children)));
2028
2032
  });
2029
2033
  SortableTreeItemActions.propTypes = propTypes$a;
@@ -2128,7 +2132,7 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
2128
2132
  }
2129
2133
  }, [onPointerUp]);
2130
2134
  return /*#__PURE__*/React.createElement("div", {
2131
- className: classNames([styles$6.container])
2135
+ className: classNames([styles$7.container])
2132
2136
  }, /*#__PURE__*/React.createElement(SortableTreeItemActions, Object.assign({
2133
2137
  ref: setDraggableNodeRef,
2134
2138
  wrapperRef: setDroppableNodeRef,
@@ -2144,15 +2148,15 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
2144
2148
  collapsed: collapsed,
2145
2149
  onCollapse: onCollapse
2146
2150
  }, props), Component !== null ? /*#__PURE__*/React.createElement("div", {
2147
- className: styles$6.parent
2151
+ className: styles$7.parent
2148
2152
  }, /*#__PURE__*/React.createElement(Component, value)) : null, childValue !== null ? /*#__PURE__*/React.createElement("div", {
2149
- className: styles$6.child
2153
+ className: styles$7.child
2150
2154
  }, /*#__PURE__*/React.createElement(Component, childValue)) : null));
2151
2155
  };
2152
2156
  SortableTreeItem.propTypes = propTypes$9;
2153
2157
  SortableTreeItem.defaultProps = defaultProps$9;
2154
2158
 
2155
- var styles$4 = {"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"};
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"};
2156
2160
 
2157
2161
  var initialItems = [{
2158
2162
  id: 'Home',
@@ -2531,7 +2535,7 @@ var SortableTree = function SortableTree(_ref2) {
2531
2535
  return parentId === id;
2532
2536
  }) : null;
2533
2537
  return /*#__PURE__*/React.createElement("div", {
2534
- className: classNames([styles$4.item, (_ref22 = {}, _defineProperty(_ref22, styles$4.parent, onCollapse !== null && !collapsed), _defineProperty(_ref22, styles$4.group, depth === 1), _defineProperty(_ref22, styles$4.isLastChild, next === null), _ref22)]),
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)]),
2535
2539
  key: id
2536
2540
  }, /*#__PURE__*/React.createElement(SortableTreeItem, {
2537
2541
  key: id,
@@ -2555,7 +2559,7 @@ var SortableTree = function SortableTree(_ref2) {
2555
2559
  dropAnimation: dropAnimation,
2556
2560
  modifiers: indicator ? [adjustTranslate] : undefined
2557
2561
  }, activeId && activeItem ? /*#__PURE__*/React.createElement("div", {
2558
- className: styles$4.item,
2562
+ className: styles$5.item,
2559
2563
  key: activeId
2560
2564
  }, /*#__PURE__*/React.createElement(SortableTreeItem, {
2561
2565
  id: activeId,
@@ -2575,12 +2579,15 @@ var SortableTree = function SortableTree(_ref2) {
2575
2579
  SortableTree.propTypes = propTypes$8;
2576
2580
  SortableTree.defaultProps = defaultProps$8;
2577
2581
 
2578
- var _excluded$2 = ["className", "screen", "type", "onClick", "active", "href"],
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"};
2583
+
2584
+ var _excluded$2 = ["className", "screen", "type", "title", "onClick", "active", "href"],
2579
2585
  _excluded2 = ["id", "screen", "href"];
2580
2586
  var propTypes$7 = {
2581
2587
  items: PropTypes$1.menuItems,
2582
2588
  withPreview: PropTypes.bool,
2583
2589
  withPlaceholder: PropTypes.bool,
2590
+ withName: PropTypes.bool,
2584
2591
  settings: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
2585
2592
  sortable: PropTypes.bool,
2586
2593
  isTree: PropTypes.bool,
@@ -2597,6 +2604,7 @@ var defaultProps$7 = {
2597
2604
  items: [],
2598
2605
  withPreview: false,
2599
2606
  withPlaceholder: false,
2607
+ withName: false,
2600
2608
  settings: null,
2601
2609
  sortable: false,
2602
2610
  isTree: false,
@@ -2614,6 +2622,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
2614
2622
  var items = _ref.items,
2615
2623
  withPreview = _ref.withPreview,
2616
2624
  withPlaceholder = _ref.withPlaceholder,
2625
+ withName = _ref.withName,
2617
2626
  settings = _ref.settings,
2618
2627
  isVertical = _ref.isVertical,
2619
2628
  noWrap = _ref.noWrap,
@@ -2625,12 +2634,14 @@ var ScreensMenu = function ScreensMenu(_ref) {
2625
2634
  isTree = _ref.isTree,
2626
2635
  onClickItem = _ref.onClickItem,
2627
2636
  onOrderChange = _ref.onOrderChange;
2637
+ console.log('withName', withName, items);
2628
2638
  var itemsElements = !isTree ? items.map(function (_ref2, index) {
2629
2639
  var _ref3;
2630
2640
  var _ref2$className = _ref2.className,
2631
2641
  itemCustomClassName = _ref2$className === void 0 ? null : _ref2$className,
2632
2642
  screen = _ref2.screen,
2633
2643
  type = _ref2.type,
2644
+ title = _ref2.title,
2634
2645
  _ref2$onClick = _ref2.onClick,
2635
2646
  onClick = _ref2$onClick === void 0 ? null : _ref2$onClick,
2636
2647
  active = _ref2.active,
@@ -2638,7 +2649,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
2638
2649
  item = _objectWithoutProperties(_ref2, _excluded$2);
2639
2650
  return /*#__PURE__*/React.createElement("li", {
2640
2651
  key: item.id,
2641
- className: classNames([styles$7.item, (_ref3 = {}, _defineProperty(_ref3, itemClassName, itemClassName !== null), _defineProperty(_ref3, itemCustomClassName, itemCustomClassName !== null), _ref3)]),
2652
+ className: classNames([styles$4.item, (_ref3 = {}, _defineProperty(_ref3, itemClassName, itemClassName !== null), _defineProperty(_ref3, itemCustomClassName, itemCustomClassName !== null), _ref3)]),
2642
2653
  "data-screen-id": item.id
2643
2654
  }, /*#__PURE__*/React.createElement(ScreenWithPreview, {
2644
2655
  index: index,
@@ -2647,13 +2658,15 @@ var ScreensMenu = function ScreensMenu(_ref) {
2647
2658
  }) : screen,
2648
2659
  href: href,
2649
2660
  className: buttonClassName,
2661
+ title: title,
2650
2662
  active: active,
2651
2663
  withPreview: withPreview,
2652
2664
  withPlaceholder: withPlaceholder,
2665
+ withName: withName,
2653
2666
  onClick: onClick,
2654
2667
  onClickItem: onClickItem
2655
2668
  }), settings !== null ? /*#__PURE__*/React.createElement("div", {
2656
- className: classNames([_defineProperty({}, settingsClassName, settingsClassName !== null), styles$7.settings, 'p-2'])
2669
+ className: classNames([_defineProperty({}, settingsClassName, settingsClassName !== null), styles$4.settings, 'p-2'])
2657
2670
  }, isFunction(settings) ? settings(index) : settings) : null);
2658
2671
  }) : [];
2659
2672
  var sortableItems = useMemo(function () {
@@ -2688,7 +2701,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
2688
2701
  });
2689
2702
  }, [items, isTree, items.length]);
2690
2703
  return /*#__PURE__*/React.createElement("div", {
2691
- className: classNames([styles$7.container, (_ref8 = {}, _defineProperty(_ref8, styles$7.noWrap, noWrap), _defineProperty(_ref8, styles$7.isVertical, isVertical), _defineProperty(_ref8, styles$7.isTree, isTree), _defineProperty(_ref8, styles$7.withPlaceholder, withPlaceholder), _defineProperty(_ref8, className, className), _ref8)])
2704
+ 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)])
2692
2705
  }, isTree && !sortable ? /*#__PURE__*/React.createElement(SortableTree, {
2693
2706
  items: sortableItems,
2694
2707
  component: ScreenWithPreview,
@@ -2701,9 +2714,9 @@ var ScreensMenu = function ScreensMenu(_ref) {
2701
2714
  delayOnTouchStart: true,
2702
2715
  delay: 2,
2703
2716
  tag: "ul",
2704
- className: styles$7.items
2717
+ className: styles$4.items
2705
2718
  }, itemsElements) : null, !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/React.createElement("ul", {
2706
- className: styles$7.items
2719
+ className: styles$4.items
2707
2720
  }, itemsElements) : null);
2708
2721
  };
2709
2722
  ScreensMenu.propTypes = propTypes$7;
@@ -2770,6 +2783,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
2770
2783
  id: id,
2771
2784
  type: id,
2772
2785
  screen: definition,
2786
+ title: title,
2773
2787
  className: classNames(_defineProperty({
2774
2788
  'bg-secondary': !selected,
2775
2789
  'bg-primary': selected
@@ -2802,6 +2816,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
2802
2816
  }, /*#__PURE__*/React.createElement(ScreensMenu, {
2803
2817
  items: items,
2804
2818
  withPlaceholder: true,
2819
+ withName: true,
2805
2820
  itemClassName: classNames([styles$3.screen, 'border', 'rounded', {
2806
2821
  'border-secondary': selectedTypes === null,
2807
2822
  'border-dark': selectedTypes !== null,
package/lib/index.js CHANGED
@@ -1200,7 +1200,7 @@ var ScreenButton$1 = /*#__PURE__*/React__default["default"].forwardRef(function
1200
1200
  }));
1201
1201
  });
1202
1202
 
1203
- var styles$b = {"button":"micromag-editor-buttons-screen-with-preview-button","index":"micromag-editor-buttons-screen-with-preview-index","withIndex":"micromag-editor-buttons-screen-with-preview-withIndex"};
1203
+ var styles$b = {"button":"micromag-editor-buttons-screen-with-preview-button","name":"micromag-editor-buttons-screen-with-preview-name","index":"micromag-editor-buttons-screen-with-preview-index","withIndex":"micromag-editor-buttons-screen-with-preview-withIndex"};
1204
1204
 
1205
1205
  var propTypes$d = {
1206
1206
  screen: core.PropTypes.screenComponent,
@@ -1211,6 +1211,7 @@ var propTypes$d = {
1211
1211
  active: PropTypes__default["default"].bool,
1212
1212
  withPlaceholder: PropTypes__default["default"].bool,
1213
1213
  withIndexIndicator: PropTypes__default["default"].bool,
1214
+ withName: PropTypes__default["default"].bool,
1214
1215
  onClick: PropTypes__default["default"].func,
1215
1216
  onClickItem: PropTypes__default["default"].func,
1216
1217
  className: PropTypes__default["default"].string
@@ -1223,6 +1224,7 @@ var defaultProps$d = {
1223
1224
  active: false,
1224
1225
  withPlaceholder: false,
1225
1226
  withIndexIndicator: false,
1227
+ withName: false,
1226
1228
  onClick: null,
1227
1229
  onClickItem: null,
1228
1230
  className: null
@@ -1238,15 +1240,17 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
1238
1240
  className = _ref.className,
1239
1241
  _onClick = _ref.onClick,
1240
1242
  onClickItem = _ref.onClickItem,
1243
+ withName = _ref.withName,
1241
1244
  withPlaceholder = _ref.withPlaceholder,
1242
1245
  withIndexIndicator = _ref.withIndexIndicator;
1243
1246
  var intl = reactIntl.useIntl();
1244
1247
  var ScreenComponent = withPlaceholder ? components.ScreenPlaceholder : components.ScreenPreview;
1248
+ var finalTitle = utils.isMessage(title) ? intl.formatMessage(title) : title || null;
1245
1249
  return /*#__PURE__*/React__default["default"].createElement(ScreenButton$1, {
1246
1250
  href: href,
1247
1251
  active: active,
1248
- className: classNames__default["default"]([styles$b.button, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$b.withIndex, withIndexIndicator), _ref2)]),
1249
- title: utils.isMessage(title) ? intl.formatMessage(title) : null,
1252
+ className: classNames__default["default"]([styles$b.button, (_ref2 = {}, _defineProperty__default["default"](_ref2, className, className !== null), _defineProperty__default["default"](_ref2, styles$b.withIndex, withIndexIndicator || withName), _ref2)]),
1253
+ title: finalTitle,
1250
1254
  onClick: function onClick() {
1251
1255
  if (_onClick !== null) {
1252
1256
  _onClick(screen, index);
@@ -1262,7 +1266,9 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
1262
1266
  withSize: true
1263
1267
  }), index !== null && withIndexIndicator ? /*#__PURE__*/React__default["default"].createElement("div", {
1264
1268
  className: styles$b.index
1265
- }, index + 1) : null);
1269
+ }, index + 1) : null, withName && !withIndexIndicator ? /*#__PURE__*/React__default["default"].createElement("div", {
1270
+ className: styles$b.name
1271
+ }, finalTitle || null) : null);
1266
1272
  };
1267
1273
  ScreenWithPreview.propTypes = propTypes$d;
1268
1274
  ScreenWithPreview.defaultProps = defaultProps$d;
@@ -1587,8 +1593,6 @@ EditorPreview.defaultProps = defaultProps$b;
1587
1593
 
1588
1594
  var styles$8 = {"container":"micromag-editor-screens-container","navbar":"micromag-editor-screens-navbar"};
1589
1595
 
1590
- var styles$7 = {"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"};
1591
-
1592
1596
  var iOS = /iPad|iPhone|iPod/.test(navigator.platform);
1593
1597
  function getDragDepth(offset, indentationWidth) {
1594
1598
  return Math.round(offset / indentationWidth);
@@ -1934,9 +1938,9 @@ var sortableTreeKeyboardCoordinates = function sortableTreeKeyboardCoordinates(c
1934
1938
  };
1935
1939
  };
1936
1940
 
1937
- var styles$6 = {"container":"micromag-editor-sortable-sortable-tree-item-container","parent":"micromag-editor-sortable-sortable-tree-item-parent","child":"micromag-editor-sortable-sortable-tree-item-child"};
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"};
1938
1942
 
1939
- var styles$5 = {"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"};
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"};
1940
1944
 
1941
1945
  var _excluded$4 = ["childCount", "clone", "depth", "disableSelection", "disableInteraction", "ghost", "handleProps", "indentationWidth", "indicator", "collapsed", "onCollapse", "onRemove", "onClick", "style", "value", "wrapperRef", "showId", "showCount", "showCollapsedCount", "children"];
1942
1946
  var propTypes$a = {
@@ -2011,21 +2015,21 @@ var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref)
2011
2015
  children = _ref.children,
2012
2016
  props = _objectWithoutProperties__default["default"](_ref, _excluded$4);
2013
2017
  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
2014
- className: classNames__default["default"]([styles$5.wrapper, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$5.clone, clone), _defineProperty__default["default"](_ref2, styles$5.ghost, ghost), _defineProperty__default["default"](_ref2, styles$5.indicator, indicator), _defineProperty__default["default"](_ref2, styles$5.disableSelection, disableSelection), _defineProperty__default["default"](_ref2, styles$5.disableInteraction, disableInteraction), _defineProperty__default["default"](_ref2, styles$5.withChildren, onCollapse !== null), _ref2)]),
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)]),
2015
2019
  ref: wrapperRef,
2016
2020
  style: {
2017
2021
  marginLeft: "".concat(indentationWidth * depth, "px"),
2018
2022
  marginRight: "".concat(5 * depth, "px")
2019
2023
  }
2020
2024
  }, props), /*#__PURE__*/React__default["default"].createElement("div", {
2021
- className: styles$5.inner,
2025
+ className: styles$6.inner,
2022
2026
  ref: ref,
2023
2027
  style: style
2024
2028
  }, /*#__PURE__*/React__default["default"].createElement("button", Object.assign({
2025
- className: classNames__default["default"]([styles$5.button, styles$5.handle]),
2029
+ className: classNames__default["default"]([styles$6.button, styles$6.handle]),
2026
2030
  type: "button"
2027
2031
  }, handleProps), /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
2028
- className: styles$5.icon,
2032
+ className: styles$6.icon,
2029
2033
  icon: faGripLines.faGripLines
2030
2034
  })), !clone && onRemove ? /*#__PURE__*/React__default["default"].createElement("button", {
2031
2035
  type: "button",
@@ -2033,17 +2037,17 @@ var SortableTreeItemActions = /*#__PURE__*/React.forwardRef(function (_ref, ref)
2033
2037
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
2034
2038
  icon: faTimes.faTimes
2035
2039
  })) : null, clone && showCount && childCount && childCount > 1 ? /*#__PURE__*/React__default["default"].createElement("span", {
2036
- className: styles$5.count
2040
+ className: styles$6.count
2037
2041
  }, childCount) : null, showCollapsedCount && onCollapse && collapsed && childCount !== null && childCount > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
2038
- className: styles$5.collapsedCount
2042
+ className: styles$6.collapsedCount
2039
2043
  }, childCount) : null, onCollapse && depth === 0 ? /*#__PURE__*/React__default["default"].createElement("button", {
2040
2044
  type: "button",
2041
2045
  onClick: onCollapse,
2042
- className: classNames__default["default"](styles$5.button, styles$5.collapse, collapsed && styles$5.collapsed)
2046
+ className: classNames__default["default"](styles$6.button, styles$6.collapse, collapsed && styles$6.collapsed)
2043
2047
  }, /*#__PURE__*/React__default["default"].createElement(reactFontawesome.FontAwesomeIcon, {
2044
2048
  icon: faAngleDown.faAngleDown
2045
2049
  })) : null, /*#__PURE__*/React__default["default"].createElement("div", {
2046
- className: styles$5.children
2050
+ className: styles$6.children
2047
2051
  }, children)));
2048
2052
  });
2049
2053
  SortableTreeItemActions.propTypes = propTypes$a;
@@ -2148,7 +2152,7 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
2148
2152
  }
2149
2153
  }, [onPointerUp]);
2150
2154
  return /*#__PURE__*/React__default["default"].createElement("div", {
2151
- className: classNames__default["default"]([styles$6.container])
2155
+ className: classNames__default["default"]([styles$7.container])
2152
2156
  }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItemActions, Object.assign({
2153
2157
  ref: setDraggableNodeRef,
2154
2158
  wrapperRef: setDroppableNodeRef,
@@ -2164,15 +2168,15 @@ var SortableTreeItem = function SortableTreeItem(_ref2) {
2164
2168
  collapsed: collapsed,
2165
2169
  onCollapse: onCollapse
2166
2170
  }, props), Component !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
2167
- className: styles$6.parent
2171
+ className: styles$7.parent
2168
2172
  }, /*#__PURE__*/React__default["default"].createElement(Component, value)) : null, childValue !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
2169
- className: styles$6.child
2173
+ className: styles$7.child
2170
2174
  }, /*#__PURE__*/React__default["default"].createElement(Component, childValue)) : null));
2171
2175
  };
2172
2176
  SortableTreeItem.propTypes = propTypes$9;
2173
2177
  SortableTreeItem.defaultProps = defaultProps$9;
2174
2178
 
2175
- var styles$4 = {"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"};
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"};
2176
2180
 
2177
2181
  var initialItems = [{
2178
2182
  id: 'Home',
@@ -2551,7 +2555,7 @@ var SortableTree = function SortableTree(_ref2) {
2551
2555
  return parentId === id;
2552
2556
  }) : null;
2553
2557
  return /*#__PURE__*/React__default["default"].createElement("div", {
2554
- className: classNames__default["default"]([styles$4.item, (_ref22 = {}, _defineProperty__default["default"](_ref22, styles$4.parent, onCollapse !== null && !collapsed), _defineProperty__default["default"](_ref22, styles$4.group, depth === 1), _defineProperty__default["default"](_ref22, styles$4.isLastChild, next === null), _ref22)]),
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)]),
2555
2559
  key: id
2556
2560
  }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItem, {
2557
2561
  key: id,
@@ -2575,7 +2579,7 @@ var SortableTree = function SortableTree(_ref2) {
2575
2579
  dropAnimation: dropAnimation,
2576
2580
  modifiers: indicator ? [adjustTranslate] : undefined
2577
2581
  }, activeId && activeItem ? /*#__PURE__*/React__default["default"].createElement("div", {
2578
- className: styles$4.item,
2582
+ className: styles$5.item,
2579
2583
  key: activeId
2580
2584
  }, /*#__PURE__*/React__default["default"].createElement(SortableTreeItem, {
2581
2585
  id: activeId,
@@ -2595,12 +2599,15 @@ var SortableTree = function SortableTree(_ref2) {
2595
2599
  SortableTree.propTypes = propTypes$8;
2596
2600
  SortableTree.defaultProps = defaultProps$8;
2597
2601
 
2598
- var _excluded$2 = ["className", "screen", "type", "onClick", "active", "href"],
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"};
2603
+
2604
+ var _excluded$2 = ["className", "screen", "type", "title", "onClick", "active", "href"],
2599
2605
  _excluded2 = ["id", "screen", "href"];
2600
2606
  var propTypes$7 = {
2601
2607
  items: core.PropTypes.menuItems,
2602
2608
  withPreview: PropTypes__default["default"].bool,
2603
2609
  withPlaceholder: PropTypes__default["default"].bool,
2610
+ withName: PropTypes__default["default"].bool,
2604
2611
  settings: PropTypes__default["default"].oneOfType([PropTypes__default["default"].node, PropTypes__default["default"].func]),
2605
2612
  sortable: PropTypes__default["default"].bool,
2606
2613
  isTree: PropTypes__default["default"].bool,
@@ -2617,6 +2624,7 @@ var defaultProps$7 = {
2617
2624
  items: [],
2618
2625
  withPreview: false,
2619
2626
  withPlaceholder: false,
2627
+ withName: false,
2620
2628
  settings: null,
2621
2629
  sortable: false,
2622
2630
  isTree: false,
@@ -2634,6 +2642,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
2634
2642
  var items = _ref.items,
2635
2643
  withPreview = _ref.withPreview,
2636
2644
  withPlaceholder = _ref.withPlaceholder,
2645
+ withName = _ref.withName,
2637
2646
  settings = _ref.settings,
2638
2647
  isVertical = _ref.isVertical,
2639
2648
  noWrap = _ref.noWrap,
@@ -2645,12 +2654,14 @@ var ScreensMenu = function ScreensMenu(_ref) {
2645
2654
  isTree = _ref.isTree,
2646
2655
  onClickItem = _ref.onClickItem,
2647
2656
  onOrderChange = _ref.onOrderChange;
2657
+ console.log('withName', withName, items);
2648
2658
  var itemsElements = !isTree ? items.map(function (_ref2, index) {
2649
2659
  var _ref3;
2650
2660
  var _ref2$className = _ref2.className,
2651
2661
  itemCustomClassName = _ref2$className === void 0 ? null : _ref2$className,
2652
2662
  screen = _ref2.screen,
2653
2663
  type = _ref2.type,
2664
+ title = _ref2.title,
2654
2665
  _ref2$onClick = _ref2.onClick,
2655
2666
  onClick = _ref2$onClick === void 0 ? null : _ref2$onClick,
2656
2667
  active = _ref2.active,
@@ -2658,7 +2669,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
2658
2669
  item = _objectWithoutProperties__default["default"](_ref2, _excluded$2);
2659
2670
  return /*#__PURE__*/React__default["default"].createElement("li", {
2660
2671
  key: item.id,
2661
- className: classNames__default["default"]([styles$7.item, (_ref3 = {}, _defineProperty__default["default"](_ref3, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref3, itemCustomClassName, itemCustomClassName !== null), _ref3)]),
2672
+ className: classNames__default["default"]([styles$4.item, (_ref3 = {}, _defineProperty__default["default"](_ref3, itemClassName, itemClassName !== null), _defineProperty__default["default"](_ref3, itemCustomClassName, itemCustomClassName !== null), _ref3)]),
2662
2673
  "data-screen-id": item.id
2663
2674
  }, /*#__PURE__*/React__default["default"].createElement(ScreenWithPreview, {
2664
2675
  index: index,
@@ -2667,13 +2678,15 @@ var ScreensMenu = function ScreensMenu(_ref) {
2667
2678
  }) : screen,
2668
2679
  href: href,
2669
2680
  className: buttonClassName,
2681
+ title: title,
2670
2682
  active: active,
2671
2683
  withPreview: withPreview,
2672
2684
  withPlaceholder: withPlaceholder,
2685
+ withName: withName,
2673
2686
  onClick: onClick,
2674
2687
  onClickItem: onClickItem
2675
2688
  }), settings !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
2676
- className: classNames__default["default"]([_defineProperty__default["default"]({}, settingsClassName, settingsClassName !== null), styles$7.settings, 'p-2'])
2689
+ className: classNames__default["default"]([_defineProperty__default["default"]({}, settingsClassName, settingsClassName !== null), styles$4.settings, 'p-2'])
2677
2690
  }, isFunction__default["default"](settings) ? settings(index) : settings) : null);
2678
2691
  }) : [];
2679
2692
  var sortableItems = React.useMemo(function () {
@@ -2708,7 +2721,7 @@ var ScreensMenu = function ScreensMenu(_ref) {
2708
2721
  });
2709
2722
  }, [items, isTree, items.length]);
2710
2723
  return /*#__PURE__*/React__default["default"].createElement("div", {
2711
- className: classNames__default["default"]([styles$7.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$7.noWrap, noWrap), _defineProperty__default["default"](_ref8, styles$7.isVertical, isVertical), _defineProperty__default["default"](_ref8, styles$7.isTree, isTree), _defineProperty__default["default"](_ref8, styles$7.withPlaceholder, withPlaceholder), _defineProperty__default["default"](_ref8, className, className), _ref8)])
2724
+ 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)])
2712
2725
  }, isTree && !sortable ? /*#__PURE__*/React__default["default"].createElement(SortableTree, {
2713
2726
  items: sortableItems,
2714
2727
  component: ScreenWithPreview,
@@ -2721,9 +2734,9 @@ var ScreensMenu = function ScreensMenu(_ref) {
2721
2734
  delayOnTouchStart: true,
2722
2735
  delay: 2,
2723
2736
  tag: "ul",
2724
- className: styles$7.items
2737
+ className: styles$4.items
2725
2738
  }, itemsElements) : null, !isTree && (!sortable || items.length < 1) ? /*#__PURE__*/React__default["default"].createElement("ul", {
2726
- className: styles$7.items
2739
+ className: styles$4.items
2727
2740
  }, itemsElements) : null);
2728
2741
  };
2729
2742
  ScreensMenu.propTypes = propTypes$7;
@@ -2790,6 +2803,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
2790
2803
  id: id,
2791
2804
  type: id,
2792
2805
  screen: definition,
2806
+ title: title,
2793
2807
  className: classNames__default["default"](_defineProperty__default["default"]({
2794
2808
  'bg-secondary': !selected,
2795
2809
  'bg-primary': selected
@@ -2822,6 +2836,7 @@ var ScreenTypes = function ScreenTypes(_ref) {
2822
2836
  }, /*#__PURE__*/React__default["default"].createElement(ScreensMenu, {
2823
2837
  items: items,
2824
2838
  withPlaceholder: true,
2839
+ withName: true,
2825
2840
  itemClassName: classNames__default["default"]([styles$3.screen, 'border', 'rounded', {
2826
2841
  'border-secondary': selectedTypes === null,
2827
2842
  'border-dark': selectedTypes !== null,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/editor",
3
- "version": "0.3.353",
3
+ "version": "0.3.355",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -62,11 +62,11 @@
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.348",
66
- "@micromag/elements": "^0.3.353",
67
- "@micromag/fields": "^0.3.350",
68
- "@micromag/screens": "^0.3.353",
69
- "@micromag/viewer": "^0.3.353",
65
+ "@micromag/core": "^0.3.354",
66
+ "@micromag/elements": "^0.3.354",
67
+ "@micromag/fields": "^0.3.354",
68
+ "@micromag/screens": "^0.3.354",
69
+ "@micromag/viewer": "^0.3.355",
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": "dd48df1c43175f674ab8c61cb7013900f8841683"
84
+ "gitHead": "bea8b2678342cf4e6fda75b7089af1df64da31ba"
85
85
  }