@micromag/editor 0.3.251 → 0.3.262

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +102 -91
  3. package/lib/index.js +102 -91
  4. package/package.json +7 -7
package/assets/css/styles.css CHANGED
@@ -1,8 +1,8 @@
1
1
  .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-fullscreen,.micromag-editor-container .micromag-editor-left,.micromag-editor-container .micromag-editor-preview,.micromag-editor-container .micromag-editor-right{position:absolute;top:0;left:0;width:100%;height:100%}.micromag-editor-container{display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.micromag-editor-container>.micromag-editor-inner{position:relative;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;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:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;width:100%;height:100%}.micromag-editor-screen-medium .micromag-editor-center,.micromag-editor-screen-medium .micromag-editor-left,.micromag-editor-screen-medium .micromag-editor-right{position:relative;height:100%}.micromag-editor-screen-medium .micromag-editor-left{width:140px}.micromag-editor-screen-medium .micromag-editor-center{-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;width:auto}.micromag-editor-screen-medium .micromag-editor-right{width:320px}
2
- .micromag-editor-form-panel.micromag-editor-form-exit{position:absolute;z-index:0;top:0;left:0;width:100%}.micromag-editor-form-content{position:relative}.micromag-editor-form-navbar{background-color:#1c1c1c;z-index:999}.micromag-editor-form-panel{position:relative}.micromag-editor-form-panel.micromag-editor-form-enterBottom,.micromag-editor-form-panel.micromag-editor-form-enterLeft,.micromag-editor-form-panel.micromag-editor-form-enterRight,.micromag-editor-form-panel.micromag-editor-form-enterTop{z-index:1;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-enterRight{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-editor-form-panel.micromag-editor-form-enterLeft{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-editor-form-panel.micromag-editor-form-enterTop{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.micromag-editor-form-panel.micromag-editor-form-enterBottom{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-editor-form-panel.micromag-editor-form-enterActiveHorizontal,.micromag-editor-form-panel.micromag-editor-form-enterActiveVertical{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);opacity:1}.micromag-editor-form-panel.micromag-editor-form-enterActiveHorizontal{-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out,-webkit-transform .2s ease-out}.micromag-editor-form-panel.micromag-editor-form-enterActiveVertical{-webkit-transition:opacity .5s ease-out,-webkit-transform .5s ease-out;transition:opacity .5s ease-out,-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out,-webkit-transform .5s ease-out}.micromag-editor-form-panel.micromag-editor-form-exit{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);opacity:1}.micromag-editor-form-panel.micromag-editor-form-exitActiveLeft,.micromag-editor-form-panel.micromag-editor-form-exitActiveRight{-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out,-webkit-transform .2s ease-out;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-exitActiveBottom,.micromag-editor-form-panel.micromag-editor-form-exitActiveTop{-webkit-transition:opacity .5s ease-out,-webkit-transform .5s ease-out;transition:opacity .5s ease-out,-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out,-webkit-transform .5s ease-out;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-exitActiveRight{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-editor-form-panel.micromag-editor-form-exitActiveLeft{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-editor-form-panel.micromag-editor-form-exitActiveTop{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-editor-form-panel.micromag-editor-form-exitActiveBottom{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}
3
2
  .micromag-editor-forms-screen-container{position:relative;padding:.5rem}.micromag-editor-forms-screen-container .micromag-editor-forms-screen-inner{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
4
3
  .micromag-editor-menus-breadcrumb-container li{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap}.micromag-editor-menus-breadcrumb-container li:before{float:none}.micromag-editor-menus-breadcrumb-container li:last-child{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0}
5
4
  .micromag-editor-modals-delete-screen-container .micromag-editor-modals-delete-screen-description{margin-bottom:10px}.micromag-editor-modals-delete-screen-container .micromag-editor-modals-delete-screen-actions{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
5
+ .micromag-editor-form-panel.micromag-editor-form-exit{position:absolute;z-index:0;top:0;left:0;width:100%}.micromag-editor-form-content{position:relative}.micromag-editor-form-navbar{background-color:#1c1c1c;z-index:999}.micromag-editor-form-panel{position:relative}.micromag-editor-form-panel.micromag-editor-form-enterBottom,.micromag-editor-form-panel.micromag-editor-form-enterLeft,.micromag-editor-form-panel.micromag-editor-form-enterRight,.micromag-editor-form-panel.micromag-editor-form-enterTop{z-index:1;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-enterRight{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-editor-form-panel.micromag-editor-form-enterLeft{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-editor-form-panel.micromag-editor-form-enterTop{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.micromag-editor-form-panel.micromag-editor-form-enterBottom{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-editor-form-panel.micromag-editor-form-enterActiveHorizontal,.micromag-editor-form-panel.micromag-editor-form-enterActiveVertical{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);opacity:1}.micromag-editor-form-panel.micromag-editor-form-enterActiveHorizontal{-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out,-webkit-transform .2s ease-out}.micromag-editor-form-panel.micromag-editor-form-enterActiveVertical{-webkit-transition:opacity .5s ease-out,-webkit-transform .5s ease-out;transition:opacity .5s ease-out,-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out,-webkit-transform .5s ease-out}.micromag-editor-form-panel.micromag-editor-form-exit{-webkit-transform:translate(0);-ms-transform:translate(0);transform:translate(0);opacity:1}.micromag-editor-form-panel.micromag-editor-form-exitActiveLeft,.micromag-editor-form-panel.micromag-editor-form-exitActiveRight{-webkit-transition:opacity .2s ease-out,-webkit-transform .2s ease-out;transition:opacity .2s ease-out,-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out;transition:transform .2s ease-out,opacity .2s ease-out,-webkit-transform .2s ease-out;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-exitActiveBottom,.micromag-editor-form-panel.micromag-editor-form-exitActiveTop{-webkit-transition:opacity .5s ease-out,-webkit-transform .5s ease-out;transition:opacity .5s ease-out,-webkit-transform .5s ease-out;-o-transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out;transition:transform .5s ease-out,opacity .5s ease-out,-webkit-transform .5s ease-out;opacity:.5}.micromag-editor-form-panel.micromag-editor-form-exitActiveRight{-webkit-transform:translate(-100%);-ms-transform:translate(-100%);transform:translate(-100%)}.micromag-editor-form-panel.micromag-editor-form-exitActiveLeft{-webkit-transform:translate(100%);-ms-transform:translate(100%);transform:translate(100%)}.micromag-editor-form-panel.micromag-editor-form-exitActiveTop{-webkit-transform:translateY(100%);-ms-transform:translateY(100%);transform:translateY(100%)}.micromag-editor-form-panel.micromag-editor-form-exitActiveBottom{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}
6
6
  .micromag-editor-menus-devices-container{display:inline-block;position:relative}.micromag-editor-menus-devices-container .micromag-editor-menus-devices-button{display:block;width:40px;height:30px;padding:5px}
7
7
  .micromag-editor-buttons-device-container .micromag-editor-buttons-device-icon{display:block;width:100%;height:auto;max-height:100%}
8
8
  .micromag-editor-partials-screen-states-container{display:inline-block}.micromag-editor-partials-screen-states-button{width:50px;min-height:75px}.micromag-editor-partials-screen-states-button.btn-outline-secondary{border-color:#6c6c6c;color:#6c6c6c}.micromag-editor-partials-screen-states-button.btn-outline-secondary:hover{border-color:#e9e9e9;background:rgba(0,0,0,0);color:#e9e9e9}.micromag-editor-partials-screen-states-addButton{border-style:dashed}.micromag-editor-partials-screen-states-title{padding:0 .2em;font-size:.75em;text-align:left}
package/es/index.js CHANGED
@@ -123,12 +123,10 @@ var useFormTransition = function useFormTransition(url, screenIndex, styles) {
123
123
  };
124
124
  };
125
125
 
126
- var styles$h = {"panel":"micromag-editor-form-panel","exit":"micromag-editor-form-exit","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterBottom":"micromag-editor-form-enterBottom","enterLeft":"micromag-editor-form-enterLeft","enterRight":"micromag-editor-form-enterRight","enterTop":"micromag-editor-form-enterTop","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","exitActiveLeft":"micromag-editor-form-exitActiveLeft","exitActiveRight":"micromag-editor-form-exitActiveRight","exitActiveBottom":"micromag-editor-form-exitActiveBottom","exitActiveTop":"micromag-editor-form-exitActiveTop"};
127
-
128
126
  function getScreenFieldsWithStates(definition) {
129
127
  var _ref = definition || {},
130
128
  _ref$fields = _ref.fields,
131
- screenFields = _ref$fields === void 0 ? [] : _ref$fields,
129
+ screenFields = _ref$fields === void 0 ? null : _ref$fields,
132
130
  _ref$states = _ref.states,
133
131
  states = _ref$states === void 0 ? null : _ref$states;
134
132
 
@@ -136,19 +134,24 @@ function getScreenFieldsWithStates(definition) {
136
134
  return screenFields;
137
135
  }
138
136
 
139
- return [].concat(_toConsumableArray(states.reduce(function (statesFields, _ref2) {
140
- var id = _ref2.id,
137
+ var extraFields = states.reduce(function (statesFields, current) {
138
+ var _ref2 = current || {},
139
+ id = _ref2.id,
141
140
  _ref2$fields = _ref2.fields,
142
141
  fields = _ref2$fields === void 0 ? [] : _ref2$fields,
143
142
  _ref2$repeatable = _ref2.repeatable,
144
143
  repeatable = _ref2$repeatable === void 0 ? false : _ref2$repeatable,
145
144
  _ref2$fieldName = _ref2.fieldName,
146
145
  fieldName = _ref2$fieldName === void 0 ? null : _ref2$fieldName,
147
- label = _ref2.label;
146
+ label = _ref2.label,
147
+ _ref2$defaultValue = _ref2.defaultValue,
148
+ defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue;
149
+
148
150
  return [].concat(_toConsumableArray(statesFields), _toConsumableArray(repeatable ? [{
149
151
  type: 'items',
150
152
  name: fieldName || id,
151
153
  label: label,
154
+ defaultValue: defaultValue,
152
155
  stateId: id,
153
156
  itemsField: {
154
157
  label: label,
@@ -165,7 +168,8 @@ function getScreenFieldsWithStates(definition) {
165
168
  stateId: id
166
169
  });
167
170
  }) : []));
168
- }, [])), _toConsumableArray(screenFields));
171
+ }, []);
172
+ return [].concat(_toConsumableArray(extraFields), _toConsumableArray(screenFields));
169
173
  }
170
174
 
171
175
  var createScreen = function createScreen(definition) {
@@ -313,13 +317,10 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
313
317
  form = _ref.form,
314
318
  props = _objectWithoutProperties(_ref, _excluded$8);
315
319
 
316
- // Get definitions
317
320
  var definition = useScreenDefinition() || null;
318
321
  var _definition$states = definition.states,
319
322
  states = _definition$states === void 0 ? null : _definition$states;
320
- var screenFields = getScreenFieldsWithStates(definition); // const [stateId = null] = name.split('.');
321
- // const currentState = states !== null ? states.find(({ id }) => id === stateId) || null : null;
322
-
323
+ var screenFields = getScreenFieldsWithStates(definition);
323
324
  var nameParts = name.split('.');
324
325
 
325
326
  var _nameParts = _slicedToArray(nameParts, 1),
@@ -340,35 +341,23 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
340
341
  _ref3$fields = _ref3.fields,
341
342
  stateFields = _ref3$fields === void 0 ? [] : _ref3$fields;
342
343
 
344
+ var finalScreenFields = fieldName !== null && stateId !== null ? screenFields.filter(function (_ref4) {
345
+ var itemName = _ref4.name,
346
+ fieldStateId = _ref4.stateId;
347
+ return fieldName !== itemName || stateId === fieldStateId || fieldStateId === null;
348
+ }) : screenFields;
349
+
343
350
  if (currentState !== null) {
344
351
  finalNameParts = (repeatable || fieldName !== null) && nameParts.length <= (repeatable ? 2 : 1) ? [fieldName || stateId].concat(_toConsumableArray(nameParts.slice(1))) : nameParts.slice(1);
345
352
  }
346
353
 
347
- var formComponents = useFormsComponents(); // if (currentState !== null && !repeatable && stateFieldName === null) {
348
- // return (
349
- // <div className="p-2">
350
- // <Fields fields={stateFields} {...props} />
351
- // </div>
352
- // );
353
- // }
354
- // const finalFields =
355
- // repeatable || stateFieldName !== null
356
- // ? [{
357
- // name: stateFieldName || stateId,
358
- // itemsField: {
359
- // type: 'fields',
360
- // fields: stateFields,
361
- // className: 'p-2'
362
- // },
363
- // }]
364
- // : fields;
365
-
354
+ var formComponents = useFormsComponents();
366
355
  return definition !== null ? /*#__PURE__*/React.createElement("div", {
367
356
  className: classNames({
368
357
  'p-2': form === null
369
358
  })
370
359
  }, finalNameParts.length > 0 ? /*#__PURE__*/React.createElement(FieldForm, Object.assign({
371
- fields: screenFields,
360
+ fields: finalScreenFields,
372
361
  formComponents: formComponents,
373
362
  name: finalNameParts.join('.'),
374
363
  form: form
@@ -380,7 +369,7 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
380
369
  FieldWithContexts.propTypes = propTypes$n;
381
370
  FieldWithContexts.defaultProps = defaultProps$n;
382
371
 
383
- var styles$g = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
372
+ var styles$h = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
384
373
 
385
374
  var propTypes$m = {
386
375
  value: PropTypes$1.component,
@@ -423,9 +412,9 @@ var ScreenForm = function ScreenForm(_ref) {
423
412
 
424
413
 
425
414
  return /*#__PURE__*/React.createElement("div", {
426
- className: classNames([styles$g.container, _defineProperty({}, className, className)])
415
+ className: classNames([styles$h.container, _defineProperty({}, className, className)])
427
416
  }, /*#__PURE__*/React.createElement("div", {
428
- className: styles$g.inner
417
+ className: styles$h.inner
429
418
  }, fields !== null ? /*#__PURE__*/React.createElement(Fields, {
430
419
  fields: fields,
431
420
  value: value,
@@ -438,7 +427,7 @@ var ScreenForm = function ScreenForm(_ref) {
438
427
  ScreenForm.propTypes = propTypes$m;
439
428
  ScreenForm.defaultProps = defaultProps$m;
440
429
 
441
- var styles$f = {"container":"micromag-editor-menus-breadcrumb-container"};
430
+ var styles$g = {"container":"micromag-editor-menus-breadcrumb-container"};
442
431
 
443
432
  var propTypes$l = {
444
433
  story: PropTypes$1.story,
@@ -541,19 +530,24 @@ var Breadcrumb = function Breadcrumb(_ref) {
541
530
  var lastKeyIndex = finalFieldPath.length - 1;
542
531
  var parentItem = null;
543
532
  finalFieldPath.reduce(function (currentFields, key, keyIndex) {
544
- var _currentFields$type = currentFields.type,
545
- fieldType = _currentFields$type === void 0 ? null : _currentFields$type,
546
- _currentFields$fields = currentFields.fields,
547
- currentSubFields = _currentFields$fields === void 0 ? null : _currentFields$fields,
548
- _currentFields$itemsF = currentFields.itemsField,
549
- currentItemsField = _currentFields$itemsF === void 0 ? null : _currentFields$itemsF;
533
+ var _ref6 = currentFields || {},
534
+ _ref6$type = _ref6.type,
535
+ fieldType = _ref6$type === void 0 ? null : _ref6$type,
536
+ _ref6$fields = _ref6.fields,
537
+ currentSubFields = _ref6$fields === void 0 ? null : _ref6$fields,
538
+ _ref6$itemsField = _ref6.itemsField,
539
+ currentItemsField = _ref6$itemsField === void 0 ? null : _ref6$itemsField;
540
+
550
541
  var fieldsDef = fieldType !== null ? fieldsManager.getDefinition(fieldType) : currentFields;
551
- var _fieldsDef$fields = fieldsDef.fields,
552
- defSubFields = _fieldsDef$fields === void 0 ? null : _fieldsDef$fields,
553
- _fieldsDef$settings = fieldsDef.settings,
554
- settings = _fieldsDef$settings === void 0 ? null : _fieldsDef$settings,
555
- _fieldsDef$itemsField = fieldsDef.itemsField,
556
- defItemsField = _fieldsDef$itemsField === void 0 ? null : _fieldsDef$itemsField;
542
+
543
+ var _ref7 = fieldsDef || {},
544
+ _ref7$fields = _ref7.fields,
545
+ defSubFields = _ref7$fields === void 0 ? null : _ref7$fields,
546
+ _ref7$settings = _ref7.settings,
547
+ settings = _ref7$settings === void 0 ? null : _ref7$settings,
548
+ _ref7$itemsField = _ref7.itemsField,
549
+ defItemsField = _ref7$itemsField === void 0 ? null : _ref7$itemsField;
550
+
557
551
  var itemsField = currentItemsField || defItemsField;
558
552
  var subFields = currentSubFields || defSubFields;
559
553
  var currentSubfields = subFields !== null ? getFieldByName(subFields, key) : null;
@@ -596,9 +590,9 @@ var Breadcrumb = function Breadcrumb(_ref) {
596
590
  var fieldLabel = nextFields ? nextFields.breadcrumbLabel || nextFields.label : null;
597
591
  var itemLabel = isMessage(fieldLabel) ? intl.formatMessage(fieldLabel) : fieldLabel;
598
592
 
599
- var _ref6 = parentItem || {},
600
- _ref6$label = _ref6.label,
601
- parentItemLabel = _ref6$label === void 0 ? null : _ref6$label;
593
+ var _ref8 = parentItem || {},
594
+ _ref8$label = _ref8.label,
595
+ parentItemLabel = _ref8$label === void 0 ? null : _ref8$label;
602
596
 
603
597
  var finalItemLabel = isListItems ? "".concat(itemLabel, " #").concat(parseInt(key, 10) + 1) : itemLabel || parentItemLabel;
604
598
  var item = {
@@ -614,17 +608,21 @@ var Breadcrumb = function Breadcrumb(_ref) {
614
608
  parentItem = item;
615
609
  return nextFields;
616
610
  }, {
617
- fields: screenFields
611
+ fields: stateId === null ? screenFields : screenFields.filter(function (_ref9) {
612
+ var _ref9$stateId = _ref9.stateId,
613
+ fieldStateId = _ref9$stateId === void 0 ? null : _ref9$stateId;
614
+ return fieldStateId === null || fieldStateId === stateId;
615
+ })
618
616
  });
619
617
  }
620
618
 
621
- var _ref7 = screenParameters || {},
622
- _ref7$metadata = _ref7.metadata,
623
- metadata = _ref7$metadata === void 0 ? null : _ref7$metadata;
619
+ var _ref10 = screenParameters || {},
620
+ _ref10$metadata = _ref10.metadata,
621
+ metadata = _ref10$metadata === void 0 ? null : _ref10$metadata;
624
622
 
625
- var _ref8 = metadata || {},
626
- _ref8$title = _ref8.title,
627
- title = _ref8$title === void 0 ? null : _ref8$title;
623
+ var _ref11 = metadata || {},
624
+ _ref11$title = _ref11.title,
625
+ title = _ref11$title === void 0 ? null : _ref11$title;
628
626
 
629
627
  var typeTitle = screenTitle !== null ? /*#__PURE__*/React.createElement(FormattedMessage, screenTitle) : null;
630
628
  var parametersMessage = intl.formatMessage({
@@ -668,14 +666,14 @@ var Breadcrumb = function Breadcrumb(_ref) {
668
666
  theme: "secondary",
669
667
  withoutBar: true,
670
668
  noWrap: true,
671
- className: classNames([styles$f.container, 'text-truncate', _defineProperty({}, className, className !== null)])
669
+ className: classNames([styles$g.container, 'text-truncate', _defineProperty({}, className, className !== null)])
672
670
  }));
673
671
  };
674
672
 
675
673
  Breadcrumb.propTypes = propTypes$l;
676
674
  Breadcrumb.defaultProps = defaultProps$l;
677
675
 
678
- var styles$e = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
676
+ var styles$f = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
679
677
 
680
678
  var propTypes$k = {
681
679
  className: PropTypes.string,
@@ -700,10 +698,10 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
700
698
  "value": "Delete screen"
701
699
  }]
702
700
  }),
703
- className: classNames([styles$e.container, _defineProperty({}, className, className)]),
701
+ className: classNames([styles$f.container, _defineProperty({}, className, className)]),
704
702
  onClickClose: onCancel
705
703
  }, /*#__PURE__*/React.createElement("div", {
706
- className: styles$e.description
704
+ className: styles$f.description
707
705
  }, /*#__PURE__*/React.createElement(Label, null, /*#__PURE__*/React.createElement(FormattedMessage, {
708
706
  id: "q/tLk0",
709
707
  defaultMessage: [{
@@ -711,7 +709,7 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
711
709
  "value": "Are you sure you want to delete this screen?"
712
710
  }]
713
711
  }))), /*#__PURE__*/React.createElement("div", {
714
- className: styles$e.actions
712
+ className: styles$f.actions
715
713
  }, /*#__PURE__*/React.createElement(Button, {
716
714
  onClick: onCancel,
717
715
  className: "btn-outline-secondary me-2"
@@ -737,6 +735,8 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
737
735
  DeleteScreenModal.propTypes = propTypes$k;
738
736
  DeleteScreenModal.defaultProps = defaultProps$k;
739
737
 
738
+ var styles$e = {"panel":"micromag-editor-form-panel","exit":"micromag-editor-form-exit","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterBottom":"micromag-editor-form-enterBottom","enterLeft":"micromag-editor-form-enterLeft","enterRight":"micromag-editor-form-enterRight","enterTop":"micromag-editor-form-enterTop","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","exitActiveLeft":"micromag-editor-form-exitActiveLeft","exitActiveRight":"micromag-editor-form-exitActiveRight","exitActiveBottom":"micromag-editor-form-exitActiveBottom","exitActiveTop":"micromag-editor-form-exitActiveTop"};
739
+
740
740
  var propTypes$j = {
741
741
  value: PropTypes.oneOfType([PropTypes$1.story, PropTypes$1.theme]),
742
742
  isTheme: PropTypes.bool,
@@ -786,7 +786,7 @@ var EditForm = function EditForm(_ref) {
786
786
  return definition != null ? getScreenFieldsWithStates(definition) : [];
787
787
  }, [screensManager, screen]); // Get transition value
788
788
 
789
- var _useFormTransition = useFormTransition(url, screenIndex, styles$h),
789
+ var _useFormTransition = useFormTransition(url, screenIndex, styles$e),
790
790
  transitionClassNames = _useFormTransition.classNames,
791
791
  transitionTimeout = _useFormTransition.timeout;
792
792
 
@@ -823,12 +823,18 @@ var EditForm = function EditForm(_ref) {
823
823
  _ref5$ = _ref5[0],
824
824
  rootFieldName = _ref5$ === void 0 ? null : _ref5$;
825
825
 
826
- var _ref6 = (rootFieldName !== null ? screenFields.find(function (_ref7) {
827
- var name = _ref7.name;
828
- return name === rootFieldName;
826
+ var _ref6 = fieldParams !== null ? fieldParams.split('/') : [],
827
+ _ref7 = _slicedToArray(_ref6, 1),
828
+ _ref7$ = _ref7[0],
829
+ currentStateId = _ref7$ === void 0 ? null : _ref7$;
830
+
831
+ var _ref8 = (rootFieldName !== null ? screenFields.find(function (_ref9) {
832
+ var name = _ref9.name,
833
+ fieldStateId = _ref9.stateId;
834
+ return name === rootFieldName && currentStateId === fieldStateId;
829
835
  }) || null : null) || {},
830
- _ref6$stateId = _ref6.stateId,
831
- stateId = _ref6$stateId === void 0 ? null : _ref6$stateId;
836
+ _ref8$stateId = _ref8.stateId,
837
+ stateId = _ref8$stateId === void 0 ? null : _ref8$stateId;
832
838
 
833
839
  routePush(hasField ? fieldRoute : 'screen', {
834
840
  screen: screenId,
@@ -839,7 +845,7 @@ var EditForm = function EditForm(_ref) {
839
845
  });
840
846
  setFieldForms(_objectSpread(_objectSpread({}, fieldForms), {}, _defineProperty({}, "".concat(field).concat(formName !== null ? ":".concat(formName) : ''), url)));
841
847
  setFieldContext(context);
842
- }, [routePush, screenId, screenFields, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
848
+ }, [routePush, screenId, screenFields, fieldParams, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
843
849
  var closeFieldForm = useCallback(function (field) {
844
850
  var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
845
851
  var fieldKey = "".concat(field).concat(formName !== null ? ":".concat(formName) : '');
@@ -876,21 +882,21 @@ var EditForm = function EditForm(_ref) {
876
882
  setScreenSettingsOpened(false);
877
883
  }, [setScreenSettingsOpened]);
878
884
  var onDeleteScreenConfirm = useCallback(function () {
879
- var current = screens.findIndex(function (_ref8) {
880
- var _ref8$id = _ref8.id,
881
- scrId = _ref8$id === void 0 ? null : _ref8$id;
885
+ var current = screens.findIndex(function (_ref10) {
886
+ var _ref10$id = _ref10.id,
887
+ scrId = _ref10$id === void 0 ? null : _ref10$id;
882
888
  return scrId === screenId;
883
889
  }) || 0;
884
- var previous = screens.find(function (_ref9, i) {
885
- var _ref9$id = _ref9.id,
886
- scrId = _ref9$id === void 0 ? null : _ref9$id;
890
+ var previous = screens.find(function (_ref11, i) {
891
+ var _ref11$id = _ref11.id,
892
+ scrId = _ref11$id === void 0 ? null : _ref11$id;
887
893
  return scrId !== screenId && (i === current - 1 || current === 0);
888
894
  }) || null;
889
895
 
890
896
  if (previous !== null) {
891
- var _ref10 = previous || {},
892
- _ref10$id = _ref10.id,
893
- firstScreenId = _ref10$id === void 0 ? null : _ref10$id;
897
+ var _ref12 = previous || {},
898
+ _ref12$id = _ref12.id,
899
+ firstScreenId = _ref12$id === void 0 ? null : _ref12$id;
894
900
 
895
901
  routePush('screen', {
896
902
  screen: firstScreenId
@@ -934,7 +940,7 @@ var EditForm = function EditForm(_ref) {
934
940
  compact: true,
935
941
  noWrap: true,
936
942
  withoutCollapse: true,
937
- className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$h.navbar])
943
+ className: classNames(['sticky-top', 'border-bottom', 'border-dark', styles$e.navbar])
938
944
  }, /*#__PURE__*/React.createElement(Breadcrumb, {
939
945
  story: value,
940
946
  url: url,
@@ -955,7 +961,7 @@ var EditForm = function EditForm(_ref) {
955
961
  visible: screenSettingsOpened,
956
962
  onClickOutside: onDropdownClickOutside
957
963
  })) : null) : null, /*#__PURE__*/React.createElement("div", {
958
- className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$h.content])
964
+ className: classNames(['flex-grow-1', 'd-flex', 'w-100', styles$e.content])
959
965
  }, screen !== null ? /*#__PURE__*/React.createElement(TransitionGroup, {
960
966
  className: "w-100 flex-grow-1",
961
967
  childFactory: function childFactory(child) {
@@ -967,14 +973,14 @@ var EditForm = function EditForm(_ref) {
967
973
  timeout: transitionTimeout,
968
974
  key: "field-".concat(fieldParams, "-").concat(formParams)
969
975
  }, /*#__PURE__*/React.createElement("div", {
970
- className: classNames(['w-100', styles$h.panel])
976
+ className: classNames(['w-100', styles$e.panel])
971
977
  }, /*#__PURE__*/React.createElement(ScreenProvider, {
972
978
  data: screen
973
979
  }, /*#__PURE__*/React.createElement(FieldWithContexts, {
974
980
  name: fieldParams.replace(/\//g, '.'),
975
981
  value: screen,
976
982
  form: formParams,
977
- className: styles$h.form,
983
+ className: styles$e.form,
978
984
  gotoFieldForm: gotoFieldForm,
979
985
  closeFieldForm: closeFieldForm,
980
986
  fieldContext: fieldContext,
@@ -984,13 +990,13 @@ var EditForm = function EditForm(_ref) {
984
990
  timeout: transitionTimeout,
985
991
  key: "screen-".concat(screen.id)
986
992
  }, /*#__PURE__*/React.createElement("div", {
987
- className: classNames(['w-100', styles$h.panel]),
993
+ className: classNames(['w-100', styles$e.panel]),
988
994
  key: "screen-".concat(screen.id)
989
995
  }, /*#__PURE__*/React.createElement(ScreenProvider, {
990
996
  data: screen
991
997
  }, /*#__PURE__*/React.createElement(ScreenForm, {
992
998
  value: screen,
993
- className: styles$h.form,
999
+ className: styles$e.form,
994
1000
  onChange: onScreenFormChange,
995
1001
  gotoFieldForm: gotoFieldForm,
996
1002
  closeFieldForm: closeFieldForm
@@ -3547,7 +3553,7 @@ var styles = {"container":"micromag-editor-forms-settings-container","inner":"mi
3547
3553
 
3548
3554
  var propTypes$2 = {
3549
3555
  name: PropTypes.string,
3550
- field: PropTypes$1.formField.isRequired,
3556
+ field: PropTypes$1.formField,
3551
3557
  value: PropTypes$1.component,
3552
3558
  className: PropTypes.string,
3553
3559
  gotoFieldForm: PropTypes.func.isRequired,
@@ -3556,6 +3562,7 @@ var propTypes$2 = {
3556
3562
  };
3557
3563
  var defaultProps$2 = {
3558
3564
  name: null,
3565
+ field: null,
3559
3566
  value: null,
3560
3567
  className: null,
3561
3568
  onChange: null
@@ -3569,14 +3576,18 @@ var SettingsForm = function SettingsForm(_ref) {
3569
3576
  gotoFieldForm = _ref.gotoFieldForm,
3570
3577
  closeFieldForm = _ref.closeFieldForm,
3571
3578
  onChange = _ref.onChange;
3572
- var _field$type = field.type,
3573
- type = _field$type === void 0 ? null : _field$type;
3579
+ if (field === null) return false;
3580
+
3581
+ var _ref2 = field || {},
3582
+ _ref2$type = _ref2.type,
3583
+ type = _ref2$type === void 0 ? null : _ref2$type;
3584
+
3574
3585
  var fieldsManager = useFieldsManager();
3575
3586
 
3576
- var _ref2 = type !== null ? fieldsManager.getDefinition(type) : field,
3577
- _ref2$component = _ref2.component,
3578
- fieldComponent = _ref2$component === void 0 ? null : _ref2$component,
3579
- settings = _ref2.settings;
3587
+ var _ref3 = type !== null ? fieldsManager.getDefinition(type) : field,
3588
+ _ref3$component = _ref3.component,
3589
+ fieldComponent = _ref3$component === void 0 ? null : _ref3$component,
3590
+ settings = _ref3.settings;
3580
3591
 
3581
3592
  var FieldComponent = useFieldComponent(fieldComponent);
3582
3593
  var FieldsComponent = useFieldComponent('fields');
package/lib/index.js CHANGED
@@ -143,12 +143,10 @@ var useFormTransition = function useFormTransition(url, screenIndex, styles) {
143
143
  };
144
144
  };
145
145
 
146
- var styles$h = {"panel":"micromag-editor-form-panel","exit":"micromag-editor-form-exit","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterBottom":"micromag-editor-form-enterBottom","enterLeft":"micromag-editor-form-enterLeft","enterRight":"micromag-editor-form-enterRight","enterTop":"micromag-editor-form-enterTop","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","exitActiveLeft":"micromag-editor-form-exitActiveLeft","exitActiveRight":"micromag-editor-form-exitActiveRight","exitActiveBottom":"micromag-editor-form-exitActiveBottom","exitActiveTop":"micromag-editor-form-exitActiveTop"};
147
-
148
146
  function getScreenFieldsWithStates(definition) {
149
147
  var _ref = definition || {},
150
148
  _ref$fields = _ref.fields,
151
- screenFields = _ref$fields === void 0 ? [] : _ref$fields,
149
+ screenFields = _ref$fields === void 0 ? null : _ref$fields,
152
150
  _ref$states = _ref.states,
153
151
  states = _ref$states === void 0 ? null : _ref$states;
154
152
 
@@ -156,19 +154,24 @@ function getScreenFieldsWithStates(definition) {
156
154
  return screenFields;
157
155
  }
158
156
 
159
- return [].concat(_toConsumableArray__default["default"](states.reduce(function (statesFields, _ref2) {
160
- var id = _ref2.id,
157
+ var extraFields = states.reduce(function (statesFields, current) {
158
+ var _ref2 = current || {},
159
+ id = _ref2.id,
161
160
  _ref2$fields = _ref2.fields,
162
161
  fields = _ref2$fields === void 0 ? [] : _ref2$fields,
163
162
  _ref2$repeatable = _ref2.repeatable,
164
163
  repeatable = _ref2$repeatable === void 0 ? false : _ref2$repeatable,
165
164
  _ref2$fieldName = _ref2.fieldName,
166
165
  fieldName = _ref2$fieldName === void 0 ? null : _ref2$fieldName,
167
- label = _ref2.label;
166
+ label = _ref2.label,
167
+ _ref2$defaultValue = _ref2.defaultValue,
168
+ defaultValue = _ref2$defaultValue === void 0 ? null : _ref2$defaultValue;
169
+
168
170
  return [].concat(_toConsumableArray__default["default"](statesFields), _toConsumableArray__default["default"](repeatable ? [{
169
171
  type: 'items',
170
172
  name: fieldName || id,
171
173
  label: label,
174
+ defaultValue: defaultValue,
172
175
  stateId: id,
173
176
  itemsField: {
174
177
  label: label,
@@ -185,7 +188,8 @@ function getScreenFieldsWithStates(definition) {
185
188
  stateId: id
186
189
  });
187
190
  }) : []));
188
- }, [])), _toConsumableArray__default["default"](screenFields));
191
+ }, []);
192
+ return [].concat(_toConsumableArray__default["default"](extraFields), _toConsumableArray__default["default"](screenFields));
189
193
  }
190
194
 
191
195
  var createScreen = function createScreen(definition) {
@@ -333,13 +337,10 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
333
337
  form = _ref.form,
334
338
  props = _objectWithoutProperties__default["default"](_ref, _excluded$8);
335
339
 
336
- // Get definitions
337
340
  var definition = contexts.useScreenDefinition() || null;
338
341
  var _definition$states = definition.states,
339
342
  states = _definition$states === void 0 ? null : _definition$states;
340
- var screenFields = getScreenFieldsWithStates(definition); // const [stateId = null] = name.split('.');
341
- // const currentState = states !== null ? states.find(({ id }) => id === stateId) || null : null;
342
-
343
+ var screenFields = getScreenFieldsWithStates(definition);
343
344
  var nameParts = name.split('.');
344
345
 
345
346
  var _nameParts = _slicedToArray__default["default"](nameParts, 1),
@@ -360,35 +361,23 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
360
361
  _ref3$fields = _ref3.fields,
361
362
  stateFields = _ref3$fields === void 0 ? [] : _ref3$fields;
362
363
 
364
+ var finalScreenFields = fieldName !== null && stateId !== null ? screenFields.filter(function (_ref4) {
365
+ var itemName = _ref4.name,
366
+ fieldStateId = _ref4.stateId;
367
+ return fieldName !== itemName || stateId === fieldStateId || fieldStateId === null;
368
+ }) : screenFields;
369
+
363
370
  if (currentState !== null) {
364
371
  finalNameParts = (repeatable || fieldName !== null) && nameParts.length <= (repeatable ? 2 : 1) ? [fieldName || stateId].concat(_toConsumableArray__default["default"](nameParts.slice(1))) : nameParts.slice(1);
365
372
  }
366
373
 
367
- var formComponents = contexts.useFormsComponents(); // if (currentState !== null && !repeatable && stateFieldName === null) {
368
- // return (
369
- // <div className="p-2">
370
- // <Fields fields={stateFields} {...props} />
371
- // </div>
372
- // );
373
- // }
374
- // const finalFields =
375
- // repeatable || stateFieldName !== null
376
- // ? [{
377
- // name: stateFieldName || stateId,
378
- // itemsField: {
379
- // type: 'fields',
380
- // fields: stateFields,
381
- // className: 'p-2'
382
- // },
383
- // }]
384
- // : fields;
385
-
374
+ var formComponents = contexts.useFormsComponents();
386
375
  return definition !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
387
376
  className: classNames__default["default"]({
388
377
  'p-2': form === null
389
378
  })
390
379
  }, finalNameParts.length > 0 ? /*#__PURE__*/React__default["default"].createElement(components.FieldForm, Object.assign({
391
- fields: screenFields,
380
+ fields: finalScreenFields,
392
381
  formComponents: formComponents,
393
382
  name: finalNameParts.join('.'),
394
383
  form: form
@@ -400,7 +389,7 @@ var FieldWithContexts = function FieldWithContexts(_ref) {
400
389
  FieldWithContexts.propTypes = propTypes$n;
401
390
  FieldWithContexts.defaultProps = defaultProps$n;
402
391
 
403
- var styles$g = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
392
+ var styles$h = {"container":"micromag-editor-forms-screen-container","inner":"micromag-editor-forms-screen-inner"};
404
393
 
405
394
  var propTypes$m = {
406
395
  value: core.PropTypes.component,
@@ -443,9 +432,9 @@ var ScreenForm = function ScreenForm(_ref) {
443
432
 
444
433
 
445
434
  return /*#__PURE__*/React__default["default"].createElement("div", {
446
- className: classNames__default["default"]([styles$g.container, _defineProperty__default["default"]({}, className, className)])
435
+ className: classNames__default["default"]([styles$h.container, _defineProperty__default["default"]({}, className, className)])
447
436
  }, /*#__PURE__*/React__default["default"].createElement("div", {
448
- className: styles$g.inner
437
+ className: styles$h.inner
449
438
  }, fields$1 !== null ? /*#__PURE__*/React__default["default"].createElement(fields.Fields, {
450
439
  fields: fields$1,
451
440
  value: value,
@@ -458,7 +447,7 @@ var ScreenForm = function ScreenForm(_ref) {
458
447
  ScreenForm.propTypes = propTypes$m;
459
448
  ScreenForm.defaultProps = defaultProps$m;
460
449
 
461
- var styles$f = {"container":"micromag-editor-menus-breadcrumb-container"};
450
+ var styles$g = {"container":"micromag-editor-menus-breadcrumb-container"};
462
451
 
463
452
  var propTypes$l = {
464
453
  story: core.PropTypes.story,
@@ -561,19 +550,24 @@ var Breadcrumb = function Breadcrumb(_ref) {
561
550
  var lastKeyIndex = finalFieldPath.length - 1;
562
551
  var parentItem = null;
563
552
  finalFieldPath.reduce(function (currentFields, key, keyIndex) {
564
- var _currentFields$type = currentFields.type,
565
- fieldType = _currentFields$type === void 0 ? null : _currentFields$type,
566
- _currentFields$fields = currentFields.fields,
567
- currentSubFields = _currentFields$fields === void 0 ? null : _currentFields$fields,
568
- _currentFields$itemsF = currentFields.itemsField,
569
- currentItemsField = _currentFields$itemsF === void 0 ? null : _currentFields$itemsF;
553
+ var _ref6 = currentFields || {},
554
+ _ref6$type = _ref6.type,
555
+ fieldType = _ref6$type === void 0 ? null : _ref6$type,
556
+ _ref6$fields = _ref6.fields,
557
+ currentSubFields = _ref6$fields === void 0 ? null : _ref6$fields,
558
+ _ref6$itemsField = _ref6.itemsField,
559
+ currentItemsField = _ref6$itemsField === void 0 ? null : _ref6$itemsField;
560
+
570
561
  var fieldsDef = fieldType !== null ? fieldsManager.getDefinition(fieldType) : currentFields;
571
- var _fieldsDef$fields = fieldsDef.fields,
572
- defSubFields = _fieldsDef$fields === void 0 ? null : _fieldsDef$fields,
573
- _fieldsDef$settings = fieldsDef.settings,
574
- settings = _fieldsDef$settings === void 0 ? null : _fieldsDef$settings,
575
- _fieldsDef$itemsField = fieldsDef.itemsField,
576
- defItemsField = _fieldsDef$itemsField === void 0 ? null : _fieldsDef$itemsField;
562
+
563
+ var _ref7 = fieldsDef || {},
564
+ _ref7$fields = _ref7.fields,
565
+ defSubFields = _ref7$fields === void 0 ? null : _ref7$fields,
566
+ _ref7$settings = _ref7.settings,
567
+ settings = _ref7$settings === void 0 ? null : _ref7$settings,
568
+ _ref7$itemsField = _ref7.itemsField,
569
+ defItemsField = _ref7$itemsField === void 0 ? null : _ref7$itemsField;
570
+
577
571
  var itemsField = currentItemsField || defItemsField;
578
572
  var subFields = currentSubFields || defSubFields;
579
573
  var currentSubfields = subFields !== null ? getFieldByName(subFields, key) : null;
@@ -616,9 +610,9 @@ var Breadcrumb = function Breadcrumb(_ref) {
616
610
  var fieldLabel = nextFields ? nextFields.breadcrumbLabel || nextFields.label : null;
617
611
  var itemLabel = utils.isMessage(fieldLabel) ? intl.formatMessage(fieldLabel) : fieldLabel;
618
612
 
619
- var _ref6 = parentItem || {},
620
- _ref6$label = _ref6.label,
621
- parentItemLabel = _ref6$label === void 0 ? null : _ref6$label;
613
+ var _ref8 = parentItem || {},
614
+ _ref8$label = _ref8.label,
615
+ parentItemLabel = _ref8$label === void 0 ? null : _ref8$label;
622
616
 
623
617
  var finalItemLabel = isListItems ? "".concat(itemLabel, " #").concat(parseInt(key, 10) + 1) : itemLabel || parentItemLabel;
624
618
  var item = {
@@ -634,17 +628,21 @@ var Breadcrumb = function Breadcrumb(_ref) {
634
628
  parentItem = item;
635
629
  return nextFields;
636
630
  }, {
637
- fields: screenFields
631
+ fields: stateId === null ? screenFields : screenFields.filter(function (_ref9) {
632
+ var _ref9$stateId = _ref9.stateId,
633
+ fieldStateId = _ref9$stateId === void 0 ? null : _ref9$stateId;
634
+ return fieldStateId === null || fieldStateId === stateId;
635
+ })
638
636
  });
639
637
  }
640
638
 
641
- var _ref7 = screenParameters || {},
642
- _ref7$metadata = _ref7.metadata,
643
- metadata = _ref7$metadata === void 0 ? null : _ref7$metadata;
639
+ var _ref10 = screenParameters || {},
640
+ _ref10$metadata = _ref10.metadata,
641
+ metadata = _ref10$metadata === void 0 ? null : _ref10$metadata;
644
642
 
645
- var _ref8 = metadata || {},
646
- _ref8$title = _ref8.title,
647
- title = _ref8$title === void 0 ? null : _ref8$title;
643
+ var _ref11 = metadata || {},
644
+ _ref11$title = _ref11.title,
645
+ title = _ref11$title === void 0 ? null : _ref11$title;
648
646
 
649
647
  var typeTitle = screenTitle !== null ? /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, screenTitle) : null;
650
648
  var parametersMessage = intl.formatMessage({
@@ -688,14 +686,14 @@ var Breadcrumb = function Breadcrumb(_ref) {
688
686
  theme: "secondary",
689
687
  withoutBar: true,
690
688
  noWrap: true,
691
- className: classNames__default["default"]([styles$f.container, 'text-truncate', _defineProperty__default["default"]({}, className, className !== null)])
689
+ className: classNames__default["default"]([styles$g.container, 'text-truncate', _defineProperty__default["default"]({}, className, className !== null)])
692
690
  }));
693
691
  };
694
692
 
695
693
  Breadcrumb.propTypes = propTypes$l;
696
694
  Breadcrumb.defaultProps = defaultProps$l;
697
695
 
698
- var styles$e = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
696
+ var styles$f = {"container":"micromag-editor-modals-delete-screen-container","description":"micromag-editor-modals-delete-screen-description","actions":"micromag-editor-modals-delete-screen-actions"};
699
697
 
700
698
  var propTypes$k = {
701
699
  className: PropTypes__default["default"].string,
@@ -720,10 +718,10 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
720
718
  "value": "Delete screen"
721
719
  }]
722
720
  }),
723
- className: classNames__default["default"]([styles$e.container, _defineProperty__default["default"]({}, className, className)]),
721
+ className: classNames__default["default"]([styles$f.container, _defineProperty__default["default"]({}, className, className)]),
724
722
  onClickClose: onCancel
725
723
  }, /*#__PURE__*/React__default["default"].createElement("div", {
726
- className: styles$e.description
724
+ className: styles$f.description
727
725
  }, /*#__PURE__*/React__default["default"].createElement(components.Label, null, /*#__PURE__*/React__default["default"].createElement(reactIntl.FormattedMessage, {
728
726
  id: "q/tLk0",
729
727
  defaultMessage: [{
@@ -731,7 +729,7 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
731
729
  "value": "Are you sure you want to delete this screen?"
732
730
  }]
733
731
  }))), /*#__PURE__*/React__default["default"].createElement("div", {
734
- className: styles$e.actions
732
+ className: styles$f.actions
735
733
  }, /*#__PURE__*/React__default["default"].createElement(components.Button, {
736
734
  onClick: onCancel,
737
735
  className: "btn-outline-secondary me-2"
@@ -757,6 +755,8 @@ var DeleteScreenModal = function DeleteScreenModal(_ref) {
757
755
  DeleteScreenModal.propTypes = propTypes$k;
758
756
  DeleteScreenModal.defaultProps = defaultProps$k;
759
757
 
758
+ var styles$e = {"panel":"micromag-editor-form-panel","exit":"micromag-editor-form-exit","content":"micromag-editor-form-content","navbar":"micromag-editor-form-navbar","enterBottom":"micromag-editor-form-enterBottom","enterLeft":"micromag-editor-form-enterLeft","enterRight":"micromag-editor-form-enterRight","enterTop":"micromag-editor-form-enterTop","enterActiveHorizontal":"micromag-editor-form-enterActiveHorizontal","enterActiveVertical":"micromag-editor-form-enterActiveVertical","exitActiveLeft":"micromag-editor-form-exitActiveLeft","exitActiveRight":"micromag-editor-form-exitActiveRight","exitActiveBottom":"micromag-editor-form-exitActiveBottom","exitActiveTop":"micromag-editor-form-exitActiveTop"};
759
+
760
760
  var propTypes$j = {
761
761
  value: PropTypes__default["default"].oneOfType([core.PropTypes.story, core.PropTypes.theme]),
762
762
  isTheme: PropTypes__default["default"].bool,
@@ -806,7 +806,7 @@ var EditForm = function EditForm(_ref) {
806
806
  return definition != null ? getScreenFieldsWithStates(definition) : [];
807
807
  }, [screensManager, screen]); // Get transition value
808
808
 
809
- var _useFormTransition = useFormTransition(url, screenIndex, styles$h),
809
+ var _useFormTransition = useFormTransition(url, screenIndex, styles$e),
810
810
  transitionClassNames = _useFormTransition.classNames,
811
811
  transitionTimeout = _useFormTransition.timeout;
812
812
 
@@ -843,12 +843,18 @@ var EditForm = function EditForm(_ref) {
843
843
  _ref5$ = _ref5[0],
844
844
  rootFieldName = _ref5$ === void 0 ? null : _ref5$;
845
845
 
846
- var _ref6 = (rootFieldName !== null ? screenFields.find(function (_ref7) {
847
- var name = _ref7.name;
848
- return name === rootFieldName;
846
+ var _ref6 = fieldParams !== null ? fieldParams.split('/') : [],
847
+ _ref7 = _slicedToArray__default["default"](_ref6, 1),
848
+ _ref7$ = _ref7[0],
849
+ currentStateId = _ref7$ === void 0 ? null : _ref7$;
850
+
851
+ var _ref8 = (rootFieldName !== null ? screenFields.find(function (_ref9) {
852
+ var name = _ref9.name,
853
+ fieldStateId = _ref9.stateId;
854
+ return name === rootFieldName && currentStateId === fieldStateId;
849
855
  }) || null : null) || {},
850
- _ref6$stateId = _ref6.stateId,
851
- stateId = _ref6$stateId === void 0 ? null : _ref6$stateId;
856
+ _ref8$stateId = _ref8.stateId,
857
+ stateId = _ref8$stateId === void 0 ? null : _ref8$stateId;
852
858
 
853
859
  routePush(hasField ? fieldRoute : 'screen', {
854
860
  screen: screenId,
@@ -859,7 +865,7 @@ var EditForm = function EditForm(_ref) {
859
865
  });
860
866
  setFieldForms(_objectSpread__default["default"](_objectSpread__default["default"]({}, fieldForms), {}, _defineProperty__default["default"]({}, "".concat(field).concat(formName !== null ? ":".concat(formName) : ''), url)));
861
867
  setFieldContext(context);
862
- }, [routePush, screenId, screenFields, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
868
+ }, [routePush, screenId, screenFields, fieldParams, url, fieldForms, setFieldForms, fieldContext, setFieldContext]);
863
869
  var closeFieldForm = React.useCallback(function (field) {
864
870
  var formName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
865
871
  var fieldKey = "".concat(field).concat(formName !== null ? ":".concat(formName) : '');
@@ -896,21 +902,21 @@ var EditForm = function EditForm(_ref) {
896
902
  setScreenSettingsOpened(false);
897
903
  }, [setScreenSettingsOpened]);
898
904
  var onDeleteScreenConfirm = React.useCallback(function () {
899
- var current = screens.findIndex(function (_ref8) {
900
- var _ref8$id = _ref8.id,
901
- scrId = _ref8$id === void 0 ? null : _ref8$id;
905
+ var current = screens.findIndex(function (_ref10) {
906
+ var _ref10$id = _ref10.id,
907
+ scrId = _ref10$id === void 0 ? null : _ref10$id;
902
908
  return scrId === screenId;
903
909
  }) || 0;
904
- var previous = screens.find(function (_ref9, i) {
905
- var _ref9$id = _ref9.id,
906
- scrId = _ref9$id === void 0 ? null : _ref9$id;
910
+ var previous = screens.find(function (_ref11, i) {
911
+ var _ref11$id = _ref11.id,
912
+ scrId = _ref11$id === void 0 ? null : _ref11$id;
907
913
  return scrId !== screenId && (i === current - 1 || current === 0);
908
914
  }) || null;
909
915
 
910
916
  if (previous !== null) {
911
- var _ref10 = previous || {},
912
- _ref10$id = _ref10.id,
913
- firstScreenId = _ref10$id === void 0 ? null : _ref10$id;
917
+ var _ref12 = previous || {},
918
+ _ref12$id = _ref12.id,
919
+ firstScreenId = _ref12$id === void 0 ? null : _ref12$id;
914
920
 
915
921
  routePush('screen', {
916
922
  screen: firstScreenId
@@ -954,7 +960,7 @@ var EditForm = function EditForm(_ref) {
954
960
  compact: true,
955
961
  noWrap: true,
956
962
  withoutCollapse: true,
957
- className: classNames__default["default"](['sticky-top', 'border-bottom', 'border-dark', styles$h.navbar])
963
+ className: classNames__default["default"](['sticky-top', 'border-bottom', 'border-dark', styles$e.navbar])
958
964
  }, /*#__PURE__*/React__default["default"].createElement(Breadcrumb, {
959
965
  story: value,
960
966
  url: url,
@@ -975,7 +981,7 @@ var EditForm = function EditForm(_ref) {
975
981
  visible: screenSettingsOpened,
976
982
  onClickOutside: onDropdownClickOutside
977
983
  })) : null) : null, /*#__PURE__*/React__default["default"].createElement("div", {
978
- className: classNames__default["default"](['flex-grow-1', 'd-flex', 'w-100', styles$h.content])
984
+ className: classNames__default["default"](['flex-grow-1', 'd-flex', 'w-100', styles$e.content])
979
985
  }, screen !== null ? /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.TransitionGroup, {
980
986
  className: "w-100 flex-grow-1",
981
987
  childFactory: function childFactory(child) {
@@ -987,14 +993,14 @@ var EditForm = function EditForm(_ref) {
987
993
  timeout: transitionTimeout,
988
994
  key: "field-".concat(fieldParams, "-").concat(formParams)
989
995
  }, /*#__PURE__*/React__default["default"].createElement("div", {
990
- className: classNames__default["default"](['w-100', styles$h.panel])
996
+ className: classNames__default["default"](['w-100', styles$e.panel])
991
997
  }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
992
998
  data: screen
993
999
  }, /*#__PURE__*/React__default["default"].createElement(FieldWithContexts, {
994
1000
  name: fieldParams.replace(/\//g, '.'),
995
1001
  value: screen,
996
1002
  form: formParams,
997
- className: styles$h.form,
1003
+ className: styles$e.form,
998
1004
  gotoFieldForm: gotoFieldForm,
999
1005
  closeFieldForm: closeFieldForm,
1000
1006
  fieldContext: fieldContext,
@@ -1004,13 +1010,13 @@ var EditForm = function EditForm(_ref) {
1004
1010
  timeout: transitionTimeout,
1005
1011
  key: "screen-".concat(screen.id)
1006
1012
  }, /*#__PURE__*/React__default["default"].createElement("div", {
1007
- className: classNames__default["default"](['w-100', styles$h.panel]),
1013
+ className: classNames__default["default"](['w-100', styles$e.panel]),
1008
1014
  key: "screen-".concat(screen.id)
1009
1015
  }, /*#__PURE__*/React__default["default"].createElement(contexts.ScreenProvider, {
1010
1016
  data: screen
1011
1017
  }, /*#__PURE__*/React__default["default"].createElement(ScreenForm, {
1012
1018
  value: screen,
1013
- className: styles$h.form,
1019
+ className: styles$e.form,
1014
1020
  onChange: onScreenFormChange,
1015
1021
  gotoFieldForm: gotoFieldForm,
1016
1022
  closeFieldForm: closeFieldForm
@@ -3567,7 +3573,7 @@ var styles = {"container":"micromag-editor-forms-settings-container","inner":"mi
3567
3573
 
3568
3574
  var propTypes$2 = {
3569
3575
  name: PropTypes__default["default"].string,
3570
- field: core.PropTypes.formField.isRequired,
3576
+ field: core.PropTypes.formField,
3571
3577
  value: core.PropTypes.component,
3572
3578
  className: PropTypes__default["default"].string,
3573
3579
  gotoFieldForm: PropTypes__default["default"].func.isRequired,
@@ -3576,6 +3582,7 @@ var propTypes$2 = {
3576
3582
  };
3577
3583
  var defaultProps$2 = {
3578
3584
  name: null,
3585
+ field: null,
3579
3586
  value: null,
3580
3587
  className: null,
3581
3588
  onChange: null
@@ -3589,14 +3596,18 @@ var SettingsForm = function SettingsForm(_ref) {
3589
3596
  gotoFieldForm = _ref.gotoFieldForm,
3590
3597
  closeFieldForm = _ref.closeFieldForm,
3591
3598
  onChange = _ref.onChange;
3592
- var _field$type = field.type,
3593
- type = _field$type === void 0 ? null : _field$type;
3599
+ if (field === null) return false;
3600
+
3601
+ var _ref2 = field || {},
3602
+ _ref2$type = _ref2.type,
3603
+ type = _ref2$type === void 0 ? null : _ref2$type;
3604
+
3594
3605
  var fieldsManager = contexts.useFieldsManager();
3595
3606
 
3596
- var _ref2 = type !== null ? fieldsManager.getDefinition(type) : field,
3597
- _ref2$component = _ref2.component,
3598
- fieldComponent = _ref2$component === void 0 ? null : _ref2$component,
3599
- settings = _ref2.settings;
3607
+ var _ref3 = type !== null ? fieldsManager.getDefinition(type) : field,
3608
+ _ref3$component = _ref3.component,
3609
+ fieldComponent = _ref3$component === void 0 ? null : _ref3$component,
3610
+ settings = _ref3.settings;
3600
3611
 
3601
3612
  var FieldComponent = contexts.useFieldComponent(fieldComponent);
3602
3613
  var FieldsComponent = contexts.useFieldComponent('fields');
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/editor",
3
- "version": "0.3.251",
3
+ "version": "0.3.262",
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.251",
66
- "@micromag/elements": "^0.3.251",
67
- "@micromag/fields": "^0.3.251",
68
- "@micromag/screens": "^0.3.251",
69
- "@micromag/viewer": "^0.3.251",
65
+ "@micromag/core": "^0.3.262",
66
+ "@micromag/elements": "^0.3.262",
67
+ "@micromag/fields": "^0.3.262",
68
+ "@micromag/screens": "^0.3.262",
69
+ "@micromag/viewer": "^0.3.262",
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": "3b6fb00baaa7f3ab90684a88cbe4c30929b6b27d"
84
+ "gitHead": "2299eaeb150cfdd14b4da321bf9089ab1e6383c2"
85
85
  }