@micromag/core 0.2.300 → 0.2.323

package/es/components.js

@@ -65,6 +65,7 @@ var propTypes$H = {
   target: PropTypes$1.string,
   label: PropTypes.label,
   children: PropTypes.label,
+  focusable: PropTypes$1.bool,
   active: PropTypes$1.bool,
   icon: PropTypes$1.node,
   iconPosition: PropTypes$1.oneOf(['left', 'right', 'inline']),
@@ -97,6 +98,7 @@ var defaultProps$H = {
   target: '_blank',
   label: null,
   children: null,
+  focusable: true,
   active: false,
   icon: null,
   iconPosition: 'inline',
@@ -129,6 +131,7 @@ var Button$1 = function Button(_ref) {
       target = _ref.target,
       label = _ref.label,
       children = _ref.children,
+      focusable = _ref.focusable,
       active = _ref.active,
       icon = _ref.icon,
       iconPosition = _ref.iconPosition,
@@ -147,7 +150,7 @@ var Button$1 = function Button(_ref) {
       iconClassName = _ref.iconClassName,
       labelClassName = _ref.labelClassName,
       refButton = _ref.refButton,
-      props = _objectWithoutProperties(_ref, ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"]);
+      props = _objectWithoutProperties(_ref, ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"]);
 
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React.createElement(Label, null, finalLabel) : null;
@@ -180,12 +183,14 @@ var Button$1 = function Button(_ref) {
       className: linkClassNames,
       onClick: onClick,
       target: external ? target : null,
-      ref: refButton
+      ref: refButton,
+      tabIndex: focusable ? '' : '-1'
     }), content) : /*#__PURE__*/React.createElement(Link$1, {
       to: href,
       className: linkClassNames,
       onClick: onClick,
-      ref: refButton
+      ref: refButton,
+      tabIndex: focusable ? '' : '-1'
     }, content);
   }
 
@@ -194,7 +199,8 @@ var Button$1 = function Button(_ref) {
     className: buttonClassNames,
     onClick: onClick,
     disabled: disabled || disableOnLoading && loading,
-    ref: refButton
+    ref: refButton,
+    tabIndex: focusable ? '0' : '-1'
   }), content);
 };
 
@@ -2859,8 +2865,7 @@ var Meta = function Meta(_ref) {
 
   var _ref5 = favicon || {},
       _ref5$url = _ref5.url,
-      faviconUrl = _ref5$url === void 0 ? null : _ref5$url; //
-
+      faviconUrl = _ref5$url === void 0 ? null : _ref5$url;
 
   return /*#__PURE__*/React.createElement(Helmet, null, /*#__PURE__*/React.createElement("title", null, realTitle !== null && realTitle.length > 0 ? realTitle : 'Micromag'), description !== null ? /*#__PURE__*/React.createElement("meta", {
     name: "description",
@@ -3456,6 +3461,7 @@ var Conversation = function Conversation() {
     className: styles$4.container
   }, _toConsumableArray(Array(4)).map(function (e, idx) {
     return /*#__PURE__*/React.createElement("div", {
+      key: "message-".concat(idx + 1),
       className: classNames([styles$4.message, styles$4["placeholderMessage".concat(idx)]])
     });
   }), /*#__PURE__*/React.createElement(FontAwesomeIcon, {

package/es/contexts.js

@@ -10,13 +10,13 @@ import uniqBy from 'lodash/uniqBy';
 import isObject from 'lodash/isObject';
 import { getJSON } from '@folklore/fetch';
 import { loadGoogleApi, loadGoogleMaps } from '@folklore/services';
-import { getDisplayName } from '@micromag/core/utils';
+import { getDisplayName, getScreenExtraField } from '@micromag/core/utils';
 import { generatePath, useHistory } from 'react-router';
+import { useIntl } from 'react-intl';
 import { TrackingContext, TrackingContainer } from '@folklore/tracking';
 export { TrackingContext } from '@folklore/tracking';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { v1 } from 'uuid';
-import { useIntl } from 'react-intl';
 
 var MODALS_NAMESPACE = 'modals';
 var FIELDS_NAMESPACE = 'fields';
@@ -884,7 +884,6 @@ var RoutesProvider = function RoutesProvider(_ref2) {
 RoutesProvider.propTypes = propTypes$6;
 RoutesProvider.defaultProps = defaultProps$6;
 
-/* eslint-disable react/jsx-props-no-spreading */
 var ScreenContext = /*#__PURE__*/React.createContext({
   data: null,
   definition: null,
@@ -894,21 +893,31 @@ var useScreen = function useScreen() {
   return useContext(ScreenContext);
 };
 var useScreenDefinition = function useScreenDefinition() {
+  var intl = useIntl();
+
   var _ref = useScreen() || {},
       definition = _ref.definition;
 
-  return definition;
+  var _ref2 = definition || {},
+      fields = _ref2.fields;
+
+  var finalFields = useMemo(function () {
+    return [].concat(_toConsumableArray(fields), [getScreenExtraField(intl)]);
+  }, [fields]);
+  return _objectSpread(_objectSpread({}, definition), {}, {
+    fields: finalFields
+  });
 };
 var useScreenData = function useScreenData() {
-  var _ref2 = useScreen() || {},
-      data = _ref2.data;
+  var _ref3 = useScreen() || {},
+      data = _ref3.data;
 
   return data;
 };
 var useScreenRenderContext = function useScreenRenderContext() {
-  var _ref3 = useScreen() || {},
-      _ref3$renderContext = _ref3.renderContext,
-      renderContext = _ref3$renderContext === void 0 ? 'view' : _ref3$renderContext;
+  var _ref4 = useScreen() || {},
+      _ref4$renderContext = _ref4.renderContext,
+      renderContext = _ref4$renderContext === void 0 ? 'view' : _ref4$renderContext;
 
   var isPlaceholder = renderContext === 'placeholder';
   var isPreview = renderContext === 'preview';
@@ -937,25 +946,25 @@ var defaultProps$5 = {
   definition: null,
   renderContext: null
 };
-var ScreenProvider = function ScreenProvider(_ref4) {
-  var data = _ref4.data,
-      definition = _ref4.definition,
-      renderContext = _ref4.renderContext,
-      children = _ref4.children;
+var ScreenProvider = function ScreenProvider(_ref5) {
+  var data = _ref5.data,
+      definition = _ref5.definition,
+      renderContext = _ref5.renderContext,
+      children = _ref5.children;
 
-  var _ref5 = useScreen() || {},
-      _ref5$data = _ref5.data,
-      previousData = _ref5$data === void 0 ? null : _ref5$data,
-      _ref5$definition = _ref5.definition,
-      previousDefinition = _ref5$definition === void 0 ? null : _ref5$definition,
-      _ref5$renderContext = _ref5.renderContext,
-      previousContext = _ref5$renderContext === void 0 ? null : _ref5$renderContext;
+  var _ref6 = useScreen() || {},
+      _ref6$data = _ref6.data,
+      previousData = _ref6$data === void 0 ? null : _ref6$data,
+      _ref6$definition = _ref6.definition,
+      previousDefinition = _ref6$definition === void 0 ? null : _ref6$definition,
+      _ref6$renderContext = _ref6.renderContext,
+      previousContext = _ref6$renderContext === void 0 ? null : _ref6$renderContext;
 
   var finalData = data || previousData || null;
 
-  var _ref6 = finalData || {},
-      _ref6$type = _ref6.type,
-      type = _ref6$type === void 0 ? null : _ref6$type;
+  var _ref7 = finalData || {},
+      _ref7$type = _ref7.type,
+      type = _ref7$type === void 0 ? null : _ref7$type;
 
   var screensManager = useScreensManager();
   var contextDefinition = screensManager !== null ? screensManager.getDefinition(type) : null;

package/es/utils.js

@@ -314,6 +314,20 @@ var getSecondsFromTime = function getSecondsFromTime(time) {
   }
 };
 
+var getScreenExtraField = function getScreenExtraField(intl) {
+  return {
+    name: 'parameters',
+    type: 'parameters',
+    label: intl.formatMessage({
+      "id": "8A8cuq",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Parameters"
+      }]
+    })
+  };
+};
+
 var getStyleFromColor = function getStyleFromColor(value) {
   var property = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'backgroundColor';
   var overideAlpha = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
@@ -610,4 +624,4 @@ var validateFields = function validateFields(fields, value) {
   }, true);
 };
 
-export { convertStyleToString, createNullableOnChange, createUseEvent, getComponentFromName, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayoutParts, getOptimalImageUrl, getSecondsFromTime, getStyleFromBorder, getStyleFromButton, getStyleFromColor, getStyleFromContainer, getStyleFromImage, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };
+export { convertStyleToString, createNullableOnChange, createUseEvent, getComponentFromName, getDeviceScreens, getDisplayName, getFieldByName, getFieldFromPath, getFileName, getFontFamily as getFontFamilyFromFont, getGridLayoutName, largestRemainderRound as getLargestRemainderRound, getLayoutParts, getOptimalImageUrl, getScreenExtraField, getSecondsFromTime, getStyleFromBorder, getStyleFromButton, getStyleFromColor, getStyleFromContainer, getStyleFromImage, getStyleFromMargin, getStyleFromText, isImageFilled, isIos, isTextFilled$1 as isLabelFilled, isMessage, isTextFilled, isValidUrl, schemaId, setValue as setFieldValue, slug, unique, validateFields };

package/lib/components.js

@@ -88,6 +88,7 @@ var propTypes$H = {
   target: PropTypes__default['default'].string,
   label: core.PropTypes.label,
   children: core.PropTypes.label,
+  focusable: PropTypes__default['default'].bool,
   active: PropTypes__default['default'].bool,
   icon: PropTypes__default['default'].node,
   iconPosition: PropTypes__default['default'].oneOf(['left', 'right', 'inline']),
@@ -120,6 +121,7 @@ var defaultProps$H = {
   target: '_blank',
   label: null,
   children: null,
+  focusable: true,
   active: false,
   icon: null,
   iconPosition: 'inline',
@@ -152,6 +154,7 @@ var Button$1 = function Button(_ref) {
       target = _ref.target,
       label = _ref.label,
       children = _ref.children,
+      focusable = _ref.focusable,
       active = _ref.active,
       icon = _ref.icon,
       iconPosition = _ref.iconPosition,
@@ -170,7 +173,7 @@ var Button$1 = function Button(_ref) {
       iconClassName = _ref.iconClassName,
       labelClassName = _ref.labelClassName,
       refButton = _ref.refButton,
-      props = _objectWithoutProperties__default['default'](_ref, ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"]);
+      props = _objectWithoutProperties__default['default'](_ref, ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"]);
 
   var finalLabel = label || children;
   var text = finalLabel !== null ? /*#__PURE__*/React__default['default'].createElement(Label, null, finalLabel) : null;
@@ -203,12 +206,14 @@ var Button$1 = function Button(_ref) {
       className: linkClassNames,
       onClick: onClick,
       target: external ? target : null,
-      ref: refButton
+      ref: refButton,
+      tabIndex: focusable ? '' : '-1'
     }), content) : /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
       to: href,
       className: linkClassNames,
       onClick: onClick,
-      ref: refButton
+      ref: refButton,
+      tabIndex: focusable ? '' : '-1'
     }, content);
   }
 
@@ -217,7 +222,8 @@ var Button$1 = function Button(_ref) {
     className: buttonClassNames,
     onClick: onClick,
     disabled: disabled || disableOnLoading && loading,
-    ref: refButton
+    ref: refButton,
+    tabIndex: focusable ? '0' : '-1'
   }), content);
 };
 
@@ -2882,8 +2888,7 @@ var Meta = function Meta(_ref) {
 
   var _ref5 = favicon || {},
       _ref5$url = _ref5.url,
-      faviconUrl = _ref5$url === void 0 ? null : _ref5$url; //
-
+      faviconUrl = _ref5$url === void 0 ? null : _ref5$url;
 
   return /*#__PURE__*/React__default['default'].createElement(reactHelmet.Helmet, null, /*#__PURE__*/React__default['default'].createElement("title", null, realTitle !== null && realTitle.length > 0 ? realTitle : 'Micromag'), description !== null ? /*#__PURE__*/React__default['default'].createElement("meta", {
     name: "description",
@@ -3479,6 +3484,7 @@ var Conversation = function Conversation() {
     className: styles$4.container
   }, _toConsumableArray__default['default'](Array(4)).map(function (e, idx) {
     return /*#__PURE__*/React__default['default'].createElement("div", {
+      key: "message-".concat(idx + 1),
       className: classNames__default['default']([styles$4.message, styles$4["placeholderMessage".concat(idx)]])
     });
   }), /*#__PURE__*/React__default['default'].createElement(reactFontawesome.FontAwesomeIcon, {

package/lib/contexts.js

@@ -16,10 +16,10 @@ var fetch = require('@folklore/fetch');
 var services = require('@folklore/services');
 var utils = require('@micromag/core/utils');
 var reactRouter = require('react-router');
+var reactIntl = require('react-intl');
 var tracking = require('@folklore/tracking');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var uuid = require('uuid');
-var reactIntl = require('react-intl');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -920,7 +920,6 @@ var RoutesProvider = function RoutesProvider(_ref2) {
 RoutesProvider.propTypes = propTypes$6;
 RoutesProvider.defaultProps = defaultProps$6;
 
-/* eslint-disable react/jsx-props-no-spreading */
 var ScreenContext = /*#__PURE__*/React__default['default'].createContext({
   data: null,
   definition: null,
@@ -930,21 +929,31 @@ var useScreen = function useScreen() {
   return React.useContext(ScreenContext);
 };
 var useScreenDefinition = function useScreenDefinition() {
+  var intl = reactIntl.useIntl();
+
   var _ref = useScreen() || {},
       definition = _ref.definition;
 
-  return definition;
+  var _ref2 = definition || {},
+      fields = _ref2.fields;
+
+  var finalFields = React.useMemo(function () {
+    return [].concat(_toConsumableArray__default['default'](fields), [utils.getScreenExtraField(intl)]);
+  }, [fields]);
+  return _objectSpread__default['default'](_objectSpread__default['default']({}, definition), {}, {
+    fields: finalFields
+  });
 };
 var useScreenData = function useScreenData() {
-  var _ref2 = useScreen() || {},
-      data = _ref2.data;
+  var _ref3 = useScreen() || {},
+      data = _ref3.data;
 
   return data;
 };
 var useScreenRenderContext = function useScreenRenderContext() {
-  var _ref3 = useScreen() || {},
-      _ref3$renderContext = _ref3.renderContext,
-      renderContext = _ref3$renderContext === void 0 ? 'view' : _ref3$renderContext;
+  var _ref4 = useScreen() || {},
+      _ref4$renderContext = _ref4.renderContext,
+      renderContext = _ref4$renderContext === void 0 ? 'view' : _ref4$renderContext;
 
   var isPlaceholder = renderContext === 'placeholder';
   var isPreview = renderContext === 'preview';
@@ -973,25 +982,25 @@ var defaultProps$5 = {
   definition: null,
   renderContext: null
 };
-var ScreenProvider = function ScreenProvider(_ref4) {
-  var data = _ref4.data,
-      definition = _ref4.definition,
-      renderContext = _ref4.renderContext,
-      children = _ref4.children;
+var ScreenProvider = function ScreenProvider(_ref5) {
+  var data = _ref5.data,
+      definition = _ref5.definition,
+      renderContext = _ref5.renderContext,
+      children = _ref5.children;
 
-  var _ref5 = useScreen() || {},
-      _ref5$data = _ref5.data,
-      previousData = _ref5$data === void 0 ? null : _ref5$data,
-      _ref5$definition = _ref5.definition,
-      previousDefinition = _ref5$definition === void 0 ? null : _ref5$definition,
-      _ref5$renderContext = _ref5.renderContext,
-      previousContext = _ref5$renderContext === void 0 ? null : _ref5$renderContext;
+  var _ref6 = useScreen() || {},
+      _ref6$data = _ref6.data,
+      previousData = _ref6$data === void 0 ? null : _ref6$data,
+      _ref6$definition = _ref6.definition,
+      previousDefinition = _ref6$definition === void 0 ? null : _ref6$definition,
+      _ref6$renderContext = _ref6.renderContext,
+      previousContext = _ref6$renderContext === void 0 ? null : _ref6$renderContext;
 
   var finalData = data || previousData || null;
 
-  var _ref6 = finalData || {},
-      _ref6$type = _ref6.type,
-      type = _ref6$type === void 0 ? null : _ref6$type;
+  var _ref7 = finalData || {},
+      _ref7$type = _ref7.type,
+      type = _ref7$type === void 0 ? null : _ref7$type;
 
   var screensManager = useScreensManager();
   var contextDefinition = screensManager !== null ? screensManager.getDefinition(type) : null;

package/lib/utils.js

@@ -330,6 +330,20 @@ var getSecondsFromTime = function getSecondsFromTime(time) {
   }
 };
 
+var getScreenExtraField = function getScreenExtraField(intl) {
+  return {
+    name: 'parameters',
+    type: 'parameters',
+    label: intl.formatMessage({
+      "id": "8A8cuq",
+      "defaultMessage": [{
+        "type": 0,
+        "value": "Parameters"
+      }]
+    })
+  };
+};
+
 var getStyleFromColor = function getStyleFromColor(value) {
   var property = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'backgroundColor';
   var overideAlpha = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
@@ -652,6 +666,7 @@ exports.getGridLayoutName = getGridLayoutName;
 exports.getLargestRemainderRound = largestRemainderRound;
 exports.getLayoutParts = getLayoutParts;
 exports.getOptimalImageUrl = getOptimalImageUrl;
+exports.getScreenExtraField = getScreenExtraField;
 exports.getSecondsFromTime = getSecondsFromTime;
 exports.getStyleFromBorder = getStyleFromBorder;
 exports.getStyleFromButton = getStyleFromButton;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.2.300",
+    "version": "0.2.323",
     "description": "",
     "keywords": [
         "javascript"
@@ -116,5 +116,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "0beff892194f4a52ce6b916d3c819f46354b92ec"
+    "gitHead": "23e128eb7548a633d1f7542f3948039aea9bd55c"
 }