@dnb/eufemia 9.12.1 → 9.13.0

package/cjs/components/input-masked/InputMasked.js

@@ -37,12 +37,16 @@ require("core-js/modules/es.symbol.iterator.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.fixPositionIssue = exports.default = void 0;
+exports.correctPositionSelection = exports.default = void 0;
+
+require("core-js/modules/es.parse-float.js");
 
 require("core-js/modules/es.regexp.exec.js");
 
 require("core-js/modules/es.string.replace.js");
 
+require("core-js/modules/es.string.match.js");
+
 require("core-js/modules/es.array.includes.js");
 
 require("core-js/modules/es.string.includes.js");
@@ -55,6 +59,8 @@ require("core-js/modules/es.array.slice.js");
 
 require("core-js/modules/es.array.index-of.js");
 
+require("core-js/modules/es.number.constructor.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -77,7 +83,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _keycode = _interopRequireDefault(require("keycode"));
 
-var _excluded = ["mask", "number_mask", "currency_mask", "number_format", "as_currency", "as_number", "locale", "show_mask", "show_guide", "pipe", "keep_char_positions", "placeholder_char"];
+var _excluded = ["mask", "number_mask", "currency_mask", "number_format", "as_currency", "as_number", "as_percent", "locale", "show_mask", "show_guide", "pipe", "keep_char_positions", "placeholder_char"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -148,6 +154,7 @@ var InputMasked = function (_React$PureComponent) {
           number_format = _this$props.number_format,
           as_currency = _this$props.as_currency,
           as_number = _this$props.as_number,
+          as_percent = _this$props.as_percent,
           locale = _this$props.locale,
           show_mask = _this$props.show_mask,
           show_guide = _this$props.show_guide,
@@ -172,13 +179,7 @@ var InputMasked = function (_React$PureComponent) {
         locale = this.context.locale;
       }
 
-      if (as_number || as_currency) {
-        if ((0, _componentHelper.isTrue)(as_number)) {
-          as_number = {};
-        } else if ((0, _componentHelper.isTrue)(as_currency)) {
-          as_currency = {};
-        }
-
+      if (as_number || as_percent || as_currency || number_mask || currency_mask) {
         if (props.value !== 'initval') {
           var _this$context2, _this$context2$InputM;
 
@@ -194,27 +195,35 @@ var InputMasked = function (_React$PureComponent) {
 
           _extends(options, (_this$context2 = this.context) === null || _this$context2 === void 0 ? void 0 : (_this$context2$InputM = _this$context2.InputMasked) === null || _this$context2$InputM === void 0 ? void 0 : _this$context2$InputM.number_format, number_format);
 
-          if (as_currency) {
+          if (currency_mask || as_currency) {
             var _this$context3, _this$context3$InputM;
 
             currency_mask = _objectSpread(_objectSpread({}, (_this$context3 = this.context) === null || _this$context3 === void 0 ? void 0 : (_this$context3$InputM = _this$context3.InputMasked) === null || _this$context3$InputM === void 0 ? void 0 : _this$context3$InputM.currency_mask), currency_mask);
 
             if (currency_mask.allowDecimal !== false) {
-              var _currency_mask$decima;
-
-              currency_mask.decimalLimit = options.decimals = (_currency_mask$decima = currency_mask.decimalLimit) !== null && _currency_mask$decima !== void 0 ? _currency_mask$decima : 2;
+              currency_mask.decimalLimit = options.decimals = typeof currency_mask.decimalLimit !== 'undefined' ? currency_mask.decimalLimit : 2;
+            } else if (currency_mask.decimalLimit > 0) {
+              options.decimals = currency_mask.decimalLimit;
             }
-          } else if (as_number) {
+          } else if (number_mask || as_number || as_percent) {
             var _this$context4, _this$context4$InputM;
 
             number_mask = _objectSpread(_objectSpread({}, (_this$context4 = this.context) === null || _this$context4 === void 0 ? void 0 : (_this$context4$InputM = _this$context4.InputMasked) === null || _this$context4$InputM === void 0 ? void 0 : _this$context4$InputM.number_mask), number_mask);
 
-            if (number_mask.allowDecimal !== false && number_mask.decimalLimit > -1) {
+            if (number_mask.allowDecimal === true) {
+              number_mask.decimalLimit = options.decimals = typeof number_mask.decimalLimit !== 'undefined' ? number_mask.decimalLimit : 2;
+            } else if (number_mask.decimalLimit > 0) {
               options.decimals = number_mask.decimalLimit;
             }
           }
 
-          props.value = (0, _NumberUtils.format)(props.value, options);
+          if (as_percent) {
+            options.percent = true;
+          }
+
+          if (!isNaN(parseFloat(props.value))) {
+            props.value = (0, _NumberUtils.format)(props.value, options);
+          }
         }
 
         var thousandsSeparatorSymbol = (0, _NumberUtils.getThousandsSeparator)(locale).replace(' ', ' ');
@@ -229,11 +238,19 @@ var InputMasked = function (_React$PureComponent) {
             decimalSymbol: decimalSymbol,
             thousandsSeparatorSymbol: thousandsSeparatorSymbol
           }, number_mask);
+        } else if (as_percent) {
+          var _props$value$match;
+
+          number_mask = _objectSpread({
+            decimalSymbol: decimalSymbol,
+            thousandsSeparatorSymbol: thousandsSeparatorSymbol,
+            suffix: ((_props$value$match = props.value.match(/((\s|)%)$/g, '$1')) === null || _props$value$match === void 0 ? void 0 : _props$value$match[0]) || ' %'
+          }, number_mask);
         } else if (as_currency) {
           currency_mask = _objectSpread({
             decimalSymbol: decimalSymbol,
             thousandsSeparatorSymbol: thousandsSeparatorSymbol,
-            currency: (0, _NumberUtils.getCurrencySymbol)(locale, typeof as_currency !== 'string' ? null : as_currency)
+            currency: (0, _NumberUtils.getCurrencySymbol)(locale, typeof as_currency === 'string' ? as_currency : null)
           }, currency_mask);
         }
       }
@@ -247,24 +264,17 @@ var InputMasked = function (_React$PureComponent) {
           allowDecimal: ((_number_mask = number_mask) === null || _number_mask === void 0 ? void 0 : _number_mask.decimalLimit) > 0,
           decimalSymbol: ','
         }, (_this$context5 = this.context) === null || _this$context5 === void 0 ? void 0 : (_this$context5$InputM = _this$context5.InputMasked) === null || _this$context5$InputM === void 0 ? void 0 : _this$context5$InputM.number_mask), number_mask);
-        props.align = props.align || 'right';
       } else if (currency_mask) {
         var _this$context6, _this$context6$InputM;
 
         show_mask = true;
         placeholder_char = null;
-        props.align = props.align || 'right';
         maskParams = _objectSpread(_objectSpread({
           allowDecimal: true,
           decimalSymbol: ','
         }, (_this$context6 = this.context) === null || _this$context6 === void 0 ? void 0 : (_this$context6$InputM = _this$context6.InputMasked) === null || _this$context6$InputM === void 0 ? void 0 : _this$context6$InputM.currency_mask), currency_mask);
         var fix = typeof currency_mask === 'string' ? currency_mask : typeof currency_mask.currency === 'string' ? currency_mask.currency : 'kr';
-
-        if (props.align === 'left') {
-          maskParams.prefix = "".concat(fix, " ");
-        } else {
-          maskParams.suffix = " ".concat(fix);
-        }
+        maskParams.suffix = " ".concat(fix);
       }
 
       if (maskParams) {
@@ -329,27 +339,28 @@ var InputMasked = function (_React$PureComponent) {
             return (0, _componentHelper.dispatchCustomElementEvent)(_this, name, {
               event: event,
               value: value,
-              numberValue: numberValue,
+              numberValue: Number(numberValue),
+              cleanedValue: numberValue,
               cleaned_value: numberValue
             });
           };
 
           props.onMouseUp = function (event) {
-            fixPositionIssue(event.target, props);
+            correctPositionSelection(event, maskParams);
             callEvent({
               event: event
             }, 'on_mouse_up');
           };
 
           props.onTouchEnd = function (event) {
-            fixPositionIssue(event.target, props);
+            correctPositionSelection(event, maskParams);
             callEvent({
               event: event
             }, 'on_touch_end');
           };
 
           props.on_focus = function (params) {
-            fixPositionIssue(params.event.target, props);
+            correctPositionSelection(params.event, maskParams);
             callEvent(params, 'on_focus');
           };
 
@@ -417,6 +428,7 @@ _defineProperty(InputMasked, "defaultProps", _objectSpread(_objectSpread({}, _In
   number_format: null,
   as_currency: null,
   as_number: null,
+  as_percent: null,
   locale: null,
   show_mask: false,
   show_guide: true,
@@ -439,6 +451,7 @@ process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
   locale: _propTypes.default.string,
   as_currency: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   as_number: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  as_percent: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   show_mask: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   show_guide: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   pipe: _propTypes.default.func,
@@ -452,28 +465,29 @@ process.env.NODE_ENV !== "production" ? InputMasked.propTypes = _objectSpread({
   on_submit_blur: _propTypes.default.func
 }, _Input.inputPropTypes) : void 0;
 
-var fixPositionIssue = function fixPositionIssue(elem) {
-  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref3$align = _ref3.align,
-      align = _ref3$align === void 0 ? 'right' : _ref3$align;
-
+var correctPositionSelection = function correctPositionSelection(event, maskParams) {
   clearTimeout(_selectionTimeout);
   _selectionTimeout = setTimeout(function () {
-    if (elem.value.length > 0) {
-      return;
-    }
-
     try {
-      var end = elem.selectionEnd;
+      var fix = (maskParams === null || maskParams === void 0 ? void 0 : maskParams.suffix) || (maskParams === null || maskParams === void 0 ? void 0 : maskParams.prefix);
 
-      if (elem.selectionStart === end && end === elem.value.length) {
-        var pos = 0;
+      if (fix) {
+        var elem = event.target;
+        var start = elem.selectionStart;
+        var fixStart = elem.value.indexOf(fix);
+        var fixEnd = fixStart + fix.length;
 
-        if (align === 'left') {
-          pos = end - 1;
-        }
+        if (start >= fixStart && start <= fixEnd) {
+          var pos = 0;
 
-        elem.setSelectionRange(pos, pos);
+          if (fixStart === 1) {
+            pos = fixStart - 1;
+          } else {
+            pos = fixStart;
+          }
+
+          elem.setSelectionRange(pos, pos);
+        }
       }
     } catch (e) {
       (0, _componentHelper.warn)(e);
@@ -481,6 +495,6 @@ var fixPositionIssue = function fixPositionIssue(elem) {
   }, 1);
 };
 
-exports.fixPositionIssue = fixPositionIssue;
+exports.correctPositionSelection = correctPositionSelection;
 
 var _selectionTimeout;

package/cjs/components/logo/Logo.js

@@ -37,6 +37,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.parse-float.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));

package/cjs/components/modal/Modal.js

@@ -45,6 +45,8 @@ Object.defineProperty(exports, "CloseButton", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/web.dom-collections.for-each.js");
 
 require("core-js/modules/es.object.freeze.js");

package/cjs/components/modal/ModalContent.js

@@ -48,6 +48,8 @@ require("core-js/modules/web.dom-collections.for-each.js");
 
 require("core-js/modules/es.array.filter.js");
 
+require("core-js/modules/es.parse-float.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -69,7 +71,7 @@ var _ModalHeader = _interopRequireWildcard(require("./ModalHeader"));
 var _helpers = require("../../shared/helpers");
 
 var _excluded = ["triggeredBy"],
-    _excluded2 = ["mode", "hide", "title", "labelled_by", "header_content", "modal_content", "bar_content", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "spacing", "prevent_close", "open_delay", "prevent_core_style", "animation_duration", "no_animation", "no_animation_on_mobile", "min_width", "max_width", "fullscreen", "align_content", "container_placement", "closeModal", "className", "class", "content_class", "overlay_class", "content_id", "toggleOpenClose", "children"];
+    _excluded2 = ["mode", "hide", "title", "labelled_by", "header_content", "modal_content", "bar_content", "id", "close_title", "dialog_title", "hide_close_button", "close_button_attributes", "spacing", "prevent_close", "open_delay", "prevent_core_style", "animation_duration", "no_animation", "no_animation_on_mobile", "min_width", "max_width", "fullscreen", "align_content", "container_placement", "closeModal", "className", "class", "content_class", "overlay_class", "content_id", "toggleOpenClose", "children"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -398,6 +400,7 @@ var ModalContent = function (_React$PureComponent) {
           header_content = _this$props2.header_content,
           modal_content = _this$props2.modal_content,
           bar_content = _this$props2.bar_content,
+          _id = _this$props2.id,
           close_title = _this$props2.close_title,
           dialog_title = _this$props2.dialog_title,
           hide_close_button = _this$props2.hide_close_button,
@@ -437,9 +440,10 @@ var ModalContent = function (_React$PureComponent) {
         minWidth = 0;
       }
 
+      var useDialogRole = !(_helpers.IS_MAC || _helpers.IS_SAFARI || _helpers.IS_IOS);
       var contentParams = {
-        role: _helpers.IS_MAC || _helpers.IS_SAFARI || _helpers.IS_IOS ? undefined : 'dialog',
-        'aria-modal': 'true',
+        role: useDialogRole ? 'dialog' : 'region',
+        'aria-modal': useDialogRole ? 'true' : undefined,
         'aria-labelledby': (0, _componentHelper.combineLabelledBy)(this.props, title ? id + '-title' : null, labelled_by),
         'aria-describedby': (0, _componentHelper.combineDescribedBy)(this.props, id + '-content'),
         'aria-label': !title && !labelled_by ? this.props.dialog_title : undefined,

package/cjs/components/number-format/NumberUtils.js

@@ -30,6 +30,8 @@ exports.formatNIN = exports.formatORG = exports.formatBAN = exports.formatPhone
 
 require("regenerator-runtime/runtime.js");
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.array.index-of.js");
 
 require("core-js/modules/es.string.trim.js");
@@ -291,26 +293,31 @@ var format = function format(value) {
     aria = display;
   }
 
-  var cleanedValue = formatNumber(value, locale, opts, function (item) {
-    switch (item.type) {
-      case 'currency':
-      case 'group':
-      case 'literal':
-        item.value = '';
-        return item;
+  if (returnAria) {
+    var cleanedValue = formatNumber(opts.style === 'percent' ? value / 100 : value, locale, opts, function (item) {
+      switch (item.type) {
+        case 'currency':
+        case 'group':
+        case 'literal':
+        case 'percentSign':
+          item.value = '';
+          return item;
 
-      default:
-        return item;
-    }
-  });
-  return returnAria ? {
-    value: value,
-    cleanedValue: cleanedValue,
-    number: display,
-    aria: aria,
-    locale: locale,
-    type: type
-  } : display;
+        default:
+          return item;
+      }
+    });
+    return {
+      value: value,
+      cleanedValue: cleanedValue,
+      number: display,
+      aria: aria,
+      locale: locale,
+      type: type
+    };
+  }
+
+  return display;
 };
 
 exports.format = format;

package/cjs/components/pagination/PaginationInfinity.js

@@ -43,6 +43,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InfinityLoadButton = exports.default = void 0;
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.array.find-index.js");
 
 require("core-js/modules/web.dom-collections.for-each.js");

package/cjs/components/pagination/PaginationProvider.js

@@ -39,6 +39,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.array.find.js");
 
 require("core-js/modules/es.array.concat.js");

package/cjs/components/progress-indicator/ProgressIndicator.js

@@ -41,6 +41,8 @@ exports.default = void 0;
 
 require("core-js/modules/es.array.concat.js");
 
+require("core-js/modules/es.parse-float.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));

package/cjs/components/progress-indicator/ProgressIndicatorCircular.js

@@ -39,6 +39,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.parse-float.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));

package/cjs/components/progress-indicator/ProgressIndicatorLinear.js

@@ -39,6 +39,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.parse-float.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));

package/cjs/components/slider/Slider.js

@@ -41,6 +41,8 @@ exports.default = void 0;
 
 require("core-js/modules/es.array.reverse.js");
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.number.to-fixed.js");
 
 require("core-js/modules/es.regexp.exec.js");

package/cjs/components/space/SpacingHelper.js

@@ -39,6 +39,8 @@ require("core-js/modules/es.array.reduce.js");
 
 require("core-js/modules/es.array.map.js");
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/web.dom-collections.for-each.js");
 
 require("core-js/modules/es.array.find.js");

package/cjs/components/step-indicator/StepIndicator.d.ts

@@ -1,5 +1,69 @@
 import * as React from 'react';
 import StepIndicatorSidebar from './StepIndicatorSidebar';
+export type StepIndicatorMode = 'static' | 'strict' | 'loose';
+export type StepIndicatorData =
+  | string
+  | string[]
+  | {
+      title: string | React.ReactNode;
+      is_current?: boolean;
+      inactive?: boolean;
+      disabled?: boolean;
+      status?: string | React.ReactNode;
+      status_state?: 'warn' | 'info' | 'error';
+
+      /**
+       * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+       */
+      on_click?: (...args: any[]) => any;
+      on_render?: (...args: any[]) => any;
+      url?: string;
+      is_active?: string | boolean;
+      url_future?: string;
+      url_passed?: string;
+    }[];
+export type StepIndicatorTitle = string | React.ReactNode;
+export type StepIndicatorStatus = string | React.ReactNode;
+export type StepIndicatorStatusState = 'warn' | 'info' | 'error';
+export type StepIndicatorIsActive = string | boolean;
+export type StepIndicatorCurrentStep = string | number;
+export type StepIndicatorActiveItem = string | number;
+export type StepIndicatorHideNumbers = string | boolean;
+export type StepIndicatorUseNavigation = string | boolean;
+export type StepIndicatorNoAnimation = string | boolean;
+export type StepIndicatorSkeleton = string | boolean;
+export type StepIndicatorSpace =
+  | string
+  | number
+  | boolean
+  | {
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+       */
+      top?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+       */
+      right?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+       */
+      bottom?: string | number | boolean;
+
+      /**
+       * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+       */
+      left?: string | number | boolean;
+    };
+export type StepIndicatorTop = string | number | boolean;
+export type StepIndicatorRight = string | number | boolean;
+export type StepIndicatorBottom = string | number | boolean;
+export type StepIndicatorLeft = string | number | boolean;
+export type StepIndicatorChildren =
+  | React.ReactNode
+  | ((...args: any[]) => any);
 
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
@@ -9,6 +73,92 @@ export interface StepIndicatorProps extends React.HTMLProps<HTMLElement> {
    * An unique string based ID in order to bind together the main component and the sidebar (`<StepIndicator.Sidebar />`). Both have to get the same ID.
    */
   sidebar_id?: string;
+
+  /**
+   * Defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
+   */
+  mode?: StepIndicatorMode;
+
+  /**
+   * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and example above.
+   */
+  data: StepIndicatorData;
+  title: StepIndicatorTitle;
+  is_current?: boolean;
+  inactive?: boolean;
+  disabled?: boolean;
+  status?: StepIndicatorStatus;
+  status_state?: StepIndicatorStatusState;
+
+  /**
+   * Will be called once the users clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+   */
+  on_click?: (...args: any[]) => any;
+  on_render?: (...args: any[]) => any;
+  url?: string;
+  is_active?: StepIndicatorIsActive;
+  url_future?: string;
+  url_passed?: string;
+  overview_title?: string;
+  step_title_extended?: string;
+  step_title?: string;
+
+  /**
+   * Defines the active number marked step starting by 0. Defaults to `0`.
+   */
+  current_step?: StepIndicatorCurrentStep;
+  active_item?: StepIndicatorActiveItem;
+  active_url?: string;
+
+  /**
+   * Define whether to show automatically counted numbers or not. Defaults to `false`.
+   */
+  hide_numbers?: StepIndicatorHideNumbers;
+  use_navigation?: StepIndicatorUseNavigation;
+
+  /**
+   * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.
+   */
+  on_item_render?: (...args: any[]) => any;
+
+  /**
+   * If set to `true`, the height animation on the step items and the drawer button will be omitted. Defaults to false.
+   */
+  no_animation?: StepIndicatorNoAnimation;
+  skeleton?: StepIndicatorSkeleton;
+
+  /**
+   * Has to be an object with either: `top`, `right`, `bottom` or `left`. Use spacing values like: `small`, `1rem`, `1` or , `16px`.
+   */
+  space?: StepIndicatorSpace;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. Will use `margin-top`.
+   */
+  top?: StepIndicatorTop;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-right`.
+   */
+  right?: StepIndicatorRight;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-bottom`.
+   */
+  bottom?: StepIndicatorBottom;
+
+  /**
+   * Use spacing values like: `small`, `1rem`, `1` or , `16px`. will use `margin-left`.
+   */
+  left?: StepIndicatorLeft;
+  class?: string;
+  className?: string;
+  children?: StepIndicatorChildren;
+
+  /**
+   * Will be called once the users visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
+   */
+  on_change?: (...args: any[]) => any;
 }
 export default class StepIndicator extends React.Component<
   StepIndicatorProps,

package/cjs/components/step-indicator/StepIndicator.js

@@ -41,6 +41,8 @@ require("core-js/modules/es.regexp.exec.js");
 
 require("core-js/modules/es.string.replace.js");
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.array.reduce.js");
 
 require("core-js/modules/es.array.includes.js");
@@ -267,4 +269,4 @@ _defineProperty(StepIndicator, "defaultProps", _objectSpread({
 
 process.env.NODE_ENV !== "production" ? StepIndicator.propTypes = _objectSpread({
   sidebar_id: _propTypes.default.string
-}, _StepIndicatorProps.stepIndicatorPropsTypes) : void 0;
+}, _StepIndicatorProps.stepIndicatorPropTypes) : void 0;

package/cjs/components/step-indicator/StepIndicatorProps.js

@@ -15,7 +15,7 @@ require("core-js/modules/es.object.get-own-property-descriptors.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.stepIndicatorDefaultProps = exports.stepIndicatorPropsTypes = void 0;
+exports.stepIndicatorDefaultProps = exports.stepIndicatorPropTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -29,7 +29,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-var stepIndicatorPropsTypes = _objectSpread(_objectSpread({
+var stepIndicatorPropTypes = _objectSpread(_objectSpread({
   mode: _propTypes.default.oneOf(['static', 'strict', 'loose']),
   data: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.shape({
     title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired,
@@ -64,7 +64,7 @@ var stepIndicatorPropsTypes = _objectSpread(_objectSpread({
   on_click: _propTypes.default.func
 });
 
-exports.stepIndicatorPropsTypes = stepIndicatorPropsTypes;
+exports.stepIndicatorPropTypes = stepIndicatorPropTypes;
 var stepIndicatorDefaultProps = {
   mode: null,
   data: [],