@micromag/editor 0.3.454 → 0.3.457

package/assets/css/styles.css

@@ -5,7 +5,7 @@
 .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}
 .micromag-editor-buttons-device-container .micromag-editor-buttons-device-icon{display:block;height:auto;max-height:100%;width:100%}
 .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;position:absolute!important}.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{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;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{-webkit-box-flex:1;-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}
-.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;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{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:rgba(0,0,0,.4);color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.25rem;justify-content:center;opacity:0;pointer-events:none;-webkit-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{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:hsla(0,0%,100%,.6);color:#000!important;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.8rem;justify-content:center;opacity:0;padding:5px;pointer-events:none;text-align:center;text-shadow:1px solid #000;-webkit-transition:opacity .15s ease;transition:opacity .15s ease;word-break:break-word;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,.micromag-editor-buttons-screen-with-preview-button.micromag-editor-buttons-screen-with-preview-withIndex:hover .micromag-editor-buttons-screen-with-preview-name{opacity:1}
+.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;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{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:rgba(0,0,0,.4);color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.25rem;justify-content:center;opacity:0;pointer-events:none;-webkit-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{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:hsla(0,0%,100%,.6);color:#000!important;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.8rem;justify-content:center;opacity:0;padding:5px;pointer-events:none;text-align:center;text-shadow:1px solid #000;-webkit-transition:opacity .15s ease;transition:opacity .15s ease;word-break:break-word;z-index:1}.micromag-editor-buttons-screen-with-preview-button .micromag-editor-buttons-screen-with-preview-deleteButton{cursor:pointer;font-size:.9em;font-weight:600;opacity:0;position:absolute;right:11%;top:4%;-webkit-transition:opacity .15s ease;transition:opacity .15s ease;z-index:3}.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-deleteButton,.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}
 .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}
 .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{-webkit-box-orient:vertical;-webkit-box-direction:normal;display:-webkit-box;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{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-flex:1;-ms-flex-positive:1;display:-webkit-box;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{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-box-flex:1;-ms-flex-positive:1;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;display:-webkit-box;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}
 .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{-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:#222;display:-webkit-box;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{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;overflow:hidden;padding-left:.5rem;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{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:#a13dff;border-radius:50%;color:#fff;display:-webkit-box;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{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;align-items:center;bottom:0;display:-webkit-box;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;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}

package/es/index.js

@@ -27,6 +27,7 @@ import { getSizeWithinBounds } from '@folklore/size';
 import { Viewer } from '@micromag/viewer';
 import _toArray from '@babel/runtime/helpers/toArray';
 import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
+import { faTimesCircle } from '@fortawesome/free-solid-svg-icons/faTimesCircle';
 import isFunction from 'lodash/isFunction';
 import { ReactSortable } from 'react-sortablejs';
 import { KeyboardCode, closestCorners, getFirstCollision, getClientRect, MeasuringStrategy, defaultDropAnimation, useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
@@ -1175,7 +1176,7 @@ var ScreenButton$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-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"};
+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","deleteButton":"micromag-editor-buttons-screen-with-preview-deleteButton","withIndex":"micromag-editor-buttons-screen-with-preview-withIndex"};
 
 var propTypes$d = {
   screen: PropTypes$1.screenComponent,
@@ -1187,8 +1188,10 @@ var propTypes$d = {
   withPlaceholder: PropTypes.bool,
   withIndexIndicator: PropTypes.bool,
   withName: PropTypes.bool,
+  withDeleteButtonOnRepeatables: PropTypes.bool,
   onClick: PropTypes.func,
   onClickItem: PropTypes.func,
+  onDeleteButtonClick: PropTypes.func,
   className: PropTypes.string
 };
 var defaultProps$d = {
@@ -1200,8 +1203,10 @@ var defaultProps$d = {
   withPlaceholder: false,
   withIndexIndicator: false,
   withName: false,
+  withDeleteButtonOnRepeatables: false,
   onClick: null,
   onClickItem: null,
+  onDeleteButtonClick: null,
   className: null
 };
 var ScreenWithPreview = function ScreenWithPreview(_ref) {
@@ -1216,7 +1221,9 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
     onClickItem = _ref.onClickItem,
     withName = _ref.withName,
     withPlaceholder = _ref.withPlaceholder,
-    withIndexIndicator = _ref.withIndexIndicator;
+    withIndexIndicator = _ref.withIndexIndicator,
+    withDeleteButtonOnRepeatables = _ref.withDeleteButtonOnRepeatables,
+    onDeleteButtonClick = _ref.onDeleteButtonClick;
   var intl = useIntl();
   var _useIsVisible = useIsVisible({
       threshold: 0.1
@@ -1250,7 +1257,12 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
     className: styles$b.index
   }, index + 1) : null, withName && !withIndexIndicator ? /*#__PURE__*/React.createElement("div", {
     className: styles$b.name
-  }, finalTitle || null) : null));
+  }, finalTitle || null) : null, withDeleteButtonOnRepeatables ? /*#__PURE__*/React.createElement("div", {
+    className: styles$b.deleteButton,
+    onClick: onDeleteButtonClick
+  }, /*#__PURE__*/React.createElement(FontAwesomeIcon, {
+    icon: faTimesCircle
+  })) : null));
 };
 ScreenWithPreview.propTypes = propTypes$d;
 ScreenWithPreview.defaultProps = defaultProps$d;
@@ -1345,6 +1357,28 @@ function ScreenStates(_ref) {
         field: [id, currentFieldValue.length]
       });
     };
+    var onClickDelete = function onClickDelete(indexToDelete) {
+      var _ref8 = value || {},
+        _ref8$components = _ref8.components,
+        currentComponentsValue = _ref8$components === void 0 ? [] : _ref8$components;
+      var currentScreenIndex = currentComponentsValue.findIndex(function (_ref9) {
+        var screenId = _ref9.id;
+        return screen.id === screenId;
+      });
+      var currentScreenValue = currentComponentsValue[currentScreenIndex] || {};
+      currentScreenValue[fieldName || id] || [];
+      var newValue = _objectSpread(_objectSpread({}, value), {}, {
+        components: [].concat(_toConsumableArray(currentComponentsValue.slice(0, currentScreenIndex)), [_objectSpread(_objectSpread({}, currentScreenValue), {}, _defineProperty({}, fieldName || id, (currentScreenValue[fieldName || id] || []).filter(function (_, index) {
+          return index !== indexToDelete;
+        })))], _toConsumableArray(currentComponentsValue.slice(currentScreenIndex + 1)))
+      });
+      if (onChange !== null) {
+        onChange(newValue);
+      }
+      push('screen', {
+        screen: screen.id
+      });
+    };
     return /*#__PURE__*/React.createElement("div", {
       className: "p-1 align-self-stretch d-flex flex-column"
     }, /*#__PURE__*/React.createElement("h6", {
@@ -1357,6 +1391,7 @@ function ScreenStates(_ref) {
       }, /*#__PURE__*/React.createElement(ScreenWithPreview, {
         index: index,
         withIndexIndicator: true,
+        withDeleteButtonOnRepeatables: true,
         screen: screen,
         screenState: "".concat(id, ".").concat(index),
         className: styles$a.button,
@@ -1364,7 +1399,10 @@ function ScreenStates(_ref) {
         href: url('screen.field', {
           screen: screen.id,
           field: [id, index]
-        })
+        }),
+        onDeleteButtonClick: function onDeleteButtonClick() {
+          return onClickDelete(index);
+        }
       }));
     }), !withoutCreate ? /*#__PURE__*/React.createElement("li", {
       className: "p-1"

package/lib/index.js

@@ -31,6 +31,7 @@ var size = require('@folklore/size');
 var viewer = require('@micromag/viewer');
 var _toArray = require('@babel/runtime/helpers/toArray');
 var faPlus = require('@fortawesome/free-solid-svg-icons/faPlus');
+var faTimesCircle = require('@fortawesome/free-solid-svg-icons/faTimesCircle');
 var isFunction = require('lodash/isFunction');
 var reactSortablejs = require('react-sortablejs');
 var core$1 = require('@dnd-kit/core');
@@ -1179,7 +1180,7 @@ var ScreenButton$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
 });
 
-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"};
+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","deleteButton":"micromag-editor-buttons-screen-with-preview-deleteButton","withIndex":"micromag-editor-buttons-screen-with-preview-withIndex"};
 
 var propTypes$d = {
   screen: core.PropTypes.screenComponent,
@@ -1191,8 +1192,10 @@ var propTypes$d = {
   withPlaceholder: PropTypes.bool,
   withIndexIndicator: PropTypes.bool,
   withName: PropTypes.bool,
+  withDeleteButtonOnRepeatables: PropTypes.bool,
   onClick: PropTypes.func,
   onClickItem: PropTypes.func,
+  onDeleteButtonClick: PropTypes.func,
   className: PropTypes.string
 };
 var defaultProps$d = {
@@ -1204,8 +1207,10 @@ var defaultProps$d = {
   withPlaceholder: false,
   withIndexIndicator: false,
   withName: false,
+  withDeleteButtonOnRepeatables: false,
   onClick: null,
   onClickItem: null,
+  onDeleteButtonClick: null,
   className: null
 };
 var ScreenWithPreview = function ScreenWithPreview(_ref) {
@@ -1220,7 +1225,9 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
     onClickItem = _ref.onClickItem,
     withName = _ref.withName,
     withPlaceholder = _ref.withPlaceholder,
-    withIndexIndicator = _ref.withIndexIndicator;
+    withIndexIndicator = _ref.withIndexIndicator,
+    withDeleteButtonOnRepeatables = _ref.withDeleteButtonOnRepeatables,
+    onDeleteButtonClick = _ref.onDeleteButtonClick;
   var intl = reactIntl.useIntl();
   var _useIsVisible = hooks.useIsVisible({
       threshold: 0.1
@@ -1254,7 +1261,12 @@ var ScreenWithPreview = function ScreenWithPreview(_ref) {
     className: styles$b.index
   }, index + 1) : null, withName && !withIndexIndicator ? /*#__PURE__*/React.createElement("div", {
     className: styles$b.name
-  }, finalTitle || null) : null));
+  }, finalTitle || null) : null, withDeleteButtonOnRepeatables ? /*#__PURE__*/React.createElement("div", {
+    className: styles$b.deleteButton,
+    onClick: onDeleteButtonClick
+  }, /*#__PURE__*/React.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: faTimesCircle.faTimesCircle
+  })) : null));
 };
 ScreenWithPreview.propTypes = propTypes$d;
 ScreenWithPreview.defaultProps = defaultProps$d;
@@ -1349,6 +1361,28 @@ function ScreenStates(_ref) {
         field: [id, currentFieldValue.length]
       });
     };
+    var onClickDelete = function onClickDelete(indexToDelete) {
+      var _ref8 = value || {},
+        _ref8$components = _ref8.components,
+        currentComponentsValue = _ref8$components === void 0 ? [] : _ref8$components;
+      var currentScreenIndex = currentComponentsValue.findIndex(function (_ref9) {
+        var screenId = _ref9.id;
+        return screen.id === screenId;
+      });
+      var currentScreenValue = currentComponentsValue[currentScreenIndex] || {};
+      currentScreenValue[fieldName || id] || [];
+      var newValue = _objectSpread(_objectSpread({}, value), {}, {
+        components: [].concat(_toConsumableArray(currentComponentsValue.slice(0, currentScreenIndex)), [_objectSpread(_objectSpread({}, currentScreenValue), {}, _defineProperty({}, fieldName || id, (currentScreenValue[fieldName || id] || []).filter(function (_, index) {
+          return index !== indexToDelete;
+        })))], _toConsumableArray(currentComponentsValue.slice(currentScreenIndex + 1)))
+      });
+      if (onChange !== null) {
+        onChange(newValue);
+      }
+      push('screen', {
+        screen: screen.id
+      });
+    };
     return /*#__PURE__*/React.createElement("div", {
       className: "p-1 align-self-stretch d-flex flex-column"
     }, /*#__PURE__*/React.createElement("h6", {
@@ -1361,6 +1395,7 @@ function ScreenStates(_ref) {
       }, /*#__PURE__*/React.createElement(ScreenWithPreview, {
         index: index,
         withIndexIndicator: true,
+        withDeleteButtonOnRepeatables: true,
         screen: screen,
         screenState: "".concat(id, ".").concat(index),
         className: styles$a.button,
@@ -1368,7 +1403,10 @@ function ScreenStates(_ref) {
         href: url('screen.field', {
           screen: screen.id,
           field: [id, index]
-        })
+        }),
+        onDeleteButtonClick: function onDeleteButtonClick() {
+          return onClickDelete(index);
+        }
       }));
     }), !withoutCreate ? /*#__PURE__*/React.createElement("li", {
       className: "p-1"

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/editor",
-    "version": "0.3.454",
+    "version": "0.3.457",
     "private": false,
     "description": "",
     "keywords": [
@@ -69,11 +69,11 @@
         "@fortawesome/fontawesome-svg-core": "^1.2.32",
         "@fortawesome/free-solid-svg-icons": "^5.15.1",
         "@fortawesome/react-fontawesome": "^0.1.13",
-        "@micromag/core": "^0.3.454",
-        "@micromag/elements": "^0.3.454",
-        "@micromag/fields": "^0.3.454",
-        "@micromag/screens": "^0.3.454",
-        "@micromag/viewer": "^0.3.454",
+        "@micromag/core": "^0.3.456",
+        "@micromag/elements": "^0.3.456",
+        "@micromag/fields": "^0.3.457",
+        "@micromag/screens": "^0.3.457",
+        "@micromag/viewer": "^0.3.457",
         "classnames": "^2.2.6",
         "lodash": "^4.17.21",
         "prop-types": "^15.7.2",
@@ -89,5 +89,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "f5cd283e3d266f5c970ae53b9df9bcd4b425985d"
+    "gitHead": "260b51e232a7be8655e03ebb53fa1c31cf74db78"
 }