@dnb/eufemia 9.16.3 → 9.18.0

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

@@ -22,6 +22,12 @@ require("core-js/modules/es.string.iterator.js");
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
+require("core-js/modules/es.array.slice.js");
+
+require("core-js/modules/es.function.name.js");
+
+require("core-js/modules/es.array.from.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -41,22 +47,48 @@ require("core-js/modules/web.dom-collections.for-each.js");
 
 require("core-js/modules/es.string.starts-with.js");
 
+require("core-js/modules/es.parse-float.js");
+
+require("core-js/modules/es.array.reduce.js");
+
+require("core-js/modules/es.string.includes.js");
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.replace.js");
+
+require("core-js/modules/es.object.entries.js");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _EventEmitter = _interopRequireDefault(require("../../shared/EventEmitter"));
+var _Context = _interopRequireDefault(require("../../shared/Context"));
 
 var _StepIndicatorProps = require("./StepIndicatorProps");
 
+var _componentHelper = require("../../shared/component-helper");
+
+var _MediaQueryUtils = require("../../shared/MediaQueryUtils");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-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; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -77,9 +109,11 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
+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 filterAttributes = Object.keys(_StepIndicatorProps.stepIndicatorDefaultProps).filter(function (item) {
   return !['class', 'className'].includes(item);
-}).concat(['internalId', 'hasSidebar', 'hideSidebar', 'mainTitle', 'stepsLabel', 'stepsLabelExtended', 'listOfReachedSteps', 'setActiveStep', 'activeStep', 'countSteps', 'innerRef', 'filterAttributes', 'listAttributes', 'onChangeState', 'isV1', 'activeUrl']);
+}).concat(['internalId', 'isSidebar', 'hasSidebar', 'hideSidebar', 'sidebarIsVisible', 'mainTitle', 'stepsLabel', 'stepsLabelExtended', 'listOfReachedSteps', 'setActiveStep', 'activeStep', 'countSteps', 'openState', 'onChangeState', 'openHandler', 'closeHandler', 'innerRef', 'hasSkeletonData', 'filterAttributes', 'listAttributes', 'onChangeState', 'isV1', 'activeUrl']);
 
 var StepIndicatorContext = _react.default.createContext(null);
 
@@ -97,8 +131,45 @@ var StepIndicatorProvider = function (_React$PureComponent) {
     _classCallCheck(this, StepIndicatorProvider);
 
     _this = _super.call(this, props);
-    _this._eventEmitter = _EventEmitter.default.createInstance(props.sidebar_id);
-    _this.state = _this._eventEmitter.get();
+
+    _defineProperty(_assertThisInitialized(_this), "setActiveStep", function (activeStep) {
+      _this.setState({
+        activeStep: activeStep
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onChangeState", function () {
+      _this.setState({
+        openState: false
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "openHandler", function () {
+      _this.setState({
+        openState: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closeHandler", function () {
+      _this.setState({
+        openState: false
+      });
+    });
+
+    _this.state = {
+      hasSidebar: true,
+      hideSidebar: false,
+      activeStep: undefined,
+      setActiveStep: _this.setActiveStep,
+      onChangeState: _this.onChangeState,
+      openHandler: _this.openHandler,
+      closeHandler: _this.closeHandler
+    };
+
+    if (!_this.state.listOfReachedSteps) {
+      _this.state.listOfReachedSteps = [];
+    }
+
     return _this;
   }
 
@@ -107,30 +178,73 @@ var StepIndicatorProvider = function (_React$PureComponent) {
     value: function componentDidMount() {
       var _this2 = this;
 
-      this._eventEmitter.listen(function (state) {
-        _this2.setState(state);
-      });
+      this._isMounted = true;
+
+      if (!this.props.isV1) {
+        var _document;
+
+        this._mediaQueryListener = (0, _MediaQueryUtils.onMediaQueryChange)({
+          min: '0',
+          max: 'medium'
+        }, function (hideSidebar) {
+          _this2.setState({
+            hideSidebar: hideSidebar
+          });
+        }, {
+          runOnInit: true
+        });
+        var container = (_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('sidebar__' + this.props.sidebar_id);
+        this.setState({
+          hasSidebar: Boolean(container)
+        });
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      if (this._eventEmitter) {
-        this._eventEmitter.remove();
-
-        this._eventEmitter = null;
+      if (this._mediaQueryListener) {
+        this._mediaQueryListener();
       }
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      this._eventEmitter.update(_objectSpread({}, this.props));
+      this.setState(this.makeContextValue());
+    }
+  }, {
+    key: "getGlobalContext",
+    value: function getGlobalContext() {
+      var context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.context;
+      var data = (0, _componentHelper.extendPropsWithContext)(this.props, _StepIndicatorProps.stepIndicatorDefaultProps, {
+        skeleton: context === null || context === void 0 ? void 0 : context.skeleton
+      }, context.getTranslation(context).StepIndicator, context.FormRow, context.StepIndicator);
+      return data;
+    }
+  }, {
+    key: "makeContextValue",
+    value: function makeContextValue() {
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref$state = _ref.state,
+          state = _ref$state === void 0 ? _objectSpread({}, this.state) : _ref$state,
+          _ref$props = _ref.props,
+          props = _ref$props === void 0 ? this.props : _ref$props,
+          _ref$context = _ref.context,
+          context = _ref$context === void 0 ? this.context : _ref$context;
+
+      var globalContext = this.getGlobalContext(context);
+      var value = extendSafe({
+        filterAttributes: filterAttributes
+      }, globalContext, {
+        defaultProps: _StepIndicatorProps.stepIndicatorDefaultProps,
+        props: props
+      }, state);
+      value.sidebarIsVisible = value.hasSidebar && !value.hideSidebar;
+      return value;
     }
   }, {
     key: "render",
     value: function render() {
-      var value = _objectSpread(_objectSpread({
-        filterAttributes: filterAttributes
-      }, this.props), this.state);
+      var value = this.makeContextValue();
 
       if (typeof window !== 'undefined' && window.IS_TEST) {
         value.no_animation = true;
@@ -145,13 +259,101 @@ var StepIndicatorProvider = function (_React$PureComponent) {
         value: value
       }, this.props.children);
     }
+  }], [{
+    key: "getData",
+    value: function getData(props) {
+      var res = [];
+      if (props.data) res = props.data;else res = (0, _componentHelper.processChildren)(props);
+      if (typeof res === 'string') return res[0] === '[' ? JSON.parse(res) : [];
+      return res || [];
+    }
+  }, {
+    key: "getDerivedStateFromProps",
+    value: function getDerivedStateFromProps(props, state) {
+      var _state$data, _state$step_title, _state$data2, _state$step_title_ext, _state$data3;
+
+      if (props.data) {
+        state.data = StepIndicatorProvider.getData(props);
+      }
+
+      state.countSteps = (_state$data = state.data) === null || _state$data === void 0 ? void 0 : _state$data.length;
+
+      if (parseFloat(props.current_step) > -1 && props.current_step !== state._current_step) {
+        state.activeStep = parseFloat(props.current_step) || 0;
+      }
+
+      if (props.active_item !== null && props.active_item !== state._active_item) {
+        state.activeStep = parseFloat(props.active_item) || 0;
+      }
+
+      if (props.active_url && state.data.length > 0) {
+        state.activeStep = state.data.reduce(function (acc, _ref2, i) {
+          var url = _ref2.url;
+          return url && (url === state.current_step || url === props.active_url) ? i : acc;
+        }, parseFloat(state.current_step) || 0);
+      }
+
+      if (!state.listOfReachedSteps.includes(state.activeStep)) {
+        state.listOfReachedSteps.push(state.activeStep);
+      }
+
+      state.stepsLabel = (_state$step_title = state.step_title) === null || _state$step_title === void 0 ? void 0 : _state$step_title.replace('%step', (state.activeStep || 0) + 1).replace('%count', ((_state$data2 = state.data) === null || _state$data2 === void 0 ? void 0 : _state$data2.length) || 1);
+      state.stepsLabelExtended = (_state$step_title_ext = state.step_title_extended) === null || _state$step_title_ext === void 0 ? void 0 : _state$step_title_ext.replace('%step', (state.activeStep || 0) + 1).replace('%count', ((_state$data3 = state.data) === null || _state$data3 === void 0 ? void 0 : _state$data3.length) || 1);
+      state._current_step = props.current_step;
+      state._active_item = props.active_item;
+      state._active_url = props.active_url;
+      return state;
+    }
   }]);
 
   return StepIndicatorProvider;
 }(_react.default.PureComponent);
 
 exports.StepIndicatorProvider = StepIndicatorProvider;
+
+_defineProperty(StepIndicatorProvider, "contextType", _Context.default);
+
+_defineProperty(StepIndicatorProvider, "defaultProps", {
+  isSidebar: false
+});
+
 process.env.NODE_ENV !== "production" ? StepIndicatorProvider.propTypes = {
   sidebar_id: _propTypes.default.string.isRequired,
-  children: _propTypes.default.node.isRequired
-} : void 0;
+  children: _propTypes.default.node.isRequired,
+  isSidebar: _propTypes.default.bool
+} : void 0;
+
+function extendSafe() {
+  var obj = {};
+
+  for (var _len = arguments.length, objects = new Array(_len), _key = 0; _key < _len; _key++) {
+    objects[_key] = arguments[_key];
+  }
+
+  objects.forEach(function (itm) {
+    if (itm.defaultProps && itm.props) {
+      itm = Object.entries(itm.props).reduce(function (acc, _ref3) {
+        var _ref4 = _slicedToArray(_ref3, 2),
+            k = _ref4[0],
+            v = _ref4[1];
+
+        if (itm.defaultProps[k] !== v) {
+          acc[k] = v;
+        }
+
+        return acc;
+      }, {});
+    }
+
+    Object.entries(itm).forEach(function (_ref5) {
+      var _ref6 = _slicedToArray(_ref5, 2),
+          k = _ref6[0],
+          v = _ref6[1];
+
+      if (!obj[k] || obj[k] && v) {
+        obj[k] = v;
+      }
+    });
+  });
+  return obj;
+}

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

@@ -29,13 +29,13 @@ export interface StepIndicatorItemProps
   on_item_render?: (...args: any[]) => any;
 
   /**
-   * Will be called once the users visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
+   * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
    */
   on_change?: (...args: any[]) => any;
   on_render?: (...args: any[]) => any;
 
   /**
-   * 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 }`.
+   * Will be called once the user 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;
   is_current?: boolean;

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

@@ -43,6 +43,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");
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -59,8 +61,6 @@ var _Icon = _interopRequireDefault(require("../icon/Icon"));
 
 var _FormStatus = require("../../components/form-status/FormStatus");
 
-var _EventEmitter = _interopRequireDefault(require("../../shared/EventEmitter"));
-
 var _StepIndicatorContext = _interopRequireDefault(require("./StepIndicatorContext"));
 
 var _StepIndicatorItemV = require("./StepIndicatorItem-v1");
@@ -143,7 +143,6 @@ var StepIndicatorItem = function (_React$PureComponent) {
       return typeof process !== 'undefined' && process.env.NODE_ENV === 'development';
     });
 
-    _this._eventEmitter = _EventEmitter.default.createInstance(context.sidebar_id);
     _this._heightAnim = new _AnimateHeight.default({
       animate: !(0, _componentHelper.isTrue)(context.no_animation)
     });
@@ -162,8 +161,6 @@ var StepIndicatorItem = function (_React$PureComponent) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this._heightAnim.remove();
-
-      this._eventEmitter.remove();
     }
   }, {
     key: "getSnapshotBeforeUpdate",
@@ -228,7 +225,7 @@ var StepIndicatorItem = function (_React$PureComponent) {
       var isVisited = currentItemNum < activeStep;
       var id = "".concat(sidebar_id || (0, _componentHelper.makeUniqueId)(), "-").concat(currentItemNum);
       var ariaLabel = step_title === null || step_title === void 0 ? void 0 : step_title.replace('%step', currentItemNum + 1).replace('%count', countSteps);
-      var isCurrent = currentItemNum === activeStep || (0, _componentHelper.isTrue)(is_current);
+      var isCurrent = currentItemNum === activeStep || (0, _componentHelper.isTrue)(is_current) && isNaN(parseFloat(activeStep));
 
       var element = _react.default.createElement(StepItemWrapper, {
         number: currentItemNum + 1,
@@ -281,6 +278,7 @@ var StepIndicatorItem = function (_React$PureComponent) {
       if (!buttonParams.onClick) {
         buttonParams.element = 'span';
         buttonParams.type = '';
+        buttonParams.on_click = undefined;
         isInactive = true;
       }
 

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

@@ -8,24 +8,18 @@ require("core-js/modules/es.object.to-string.js");
 
 require("core-js/modules/es.reflect.construct.js");
 
-require("core-js/modules/es.object.assign.js");
+require("core-js/modules/es.symbol.js");
+
+require("core-js/modules/es.symbol.description.js");
+
+require("core-js/modules/es.symbol.iterator.js");
 
 require("core-js/modules/es.array.iterator.js");
 
 require("core-js/modules/es.string.iterator.js");
 
-require("core-js/modules/es.weak-map.js");
-
 require("core-js/modules/web.dom-collections.iterator.js");
 
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.symbol.description.js");
-
-require("core-js/modules/es.symbol.iterator.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -33,24 +27,20 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
 var _Modal = _interopRequireDefault(require("../modal/Modal"));
 
 var _StepIndicatorTriggerButton = _interopRequireDefault(require("./StepIndicatorTriggerButton"));
 
-var _StepIndicatorList2 = _interopRequireDefault(require("./StepIndicatorList"));
-
-var _StepIndicatorContext = _interopRequireWildcard(require("./StepIndicatorContext"));
+var _StepIndicatorList3 = _interopRequireDefault(require("./StepIndicatorList"));
 
-var _StepIndicatorList;
+var _StepIndicatorContext = _interopRequireDefault(require("./StepIndicatorContext"));
 
-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); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _StepIndicatorList, _StepIndicatorList2;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -85,47 +75,51 @@ var StepIndicatorModal = function (_React$PureComponent) {
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      open_state: false
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onChangeState", function () {
-      _this.setState({
-        open_state: false
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "openHandler", function () {
-      _this.setState({
-        open_state: true
-      });
-    });
-
     _defineProperty(_assertThisInitialized(_this), "closeHandler", function () {
-      _this.setState({
-        open_state: false
-      });
+      var _this$context;
 
       if (_this.context.hasSidebar) {
         var _this$_triggerRef$cur;
 
         (_this$_triggerRef$cur = _this._triggerRef.current) === null || _this$_triggerRef$cur === void 0 ? void 0 : _this$_triggerRef$cur.focus();
       }
+
+      (_this$context = _this.context).closeHandler.apply(_this$context, arguments);
     });
 
     _this._triggerRef = _react.default.createRef();
+    _this.state = {
+      container: null
+    };
     return _this;
   }
 
   _createClass(StepIndicatorModal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var container = document.getElementById('sidebar__' + this.context.sidebar_id);
+      this.setState({
+        container: container
+      });
+    }
+  }, {
+    key: "renderPortal",
+    value: function renderPortal() {
+      if (!this.state.container) {
+        return null;
+      }
+
+      return _reactDom.default.createPortal(_StepIndicatorList || (_StepIndicatorList = _react.default.createElement(_StepIndicatorList3.default, null)), this.state.container);
+    }
+  }, {
     key: "render",
     value: function render() {
-      if (this.context.hasSidebar && !this.context.hideSidebar) {
-        return null;
+      if (this.context.sidebarIsVisible) {
+        return this.renderPortal();
       }
 
       return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_StepIndicatorTriggerButton.default, {
-        on_click: this.openHandler,
+        on_click: this.context.openHandler,
         inner_ref: this._triggerRef
       }), _react.default.createElement(_Modal.default, {
         id: this.context.sidebar_id,
@@ -133,19 +127,16 @@ var StepIndicatorModal = function (_React$PureComponent) {
         trigger_hidden: true,
         mode: "drawer",
         animation_direction: "bottom",
-        open_state: this.state.open_state,
-        on_open: this.openHandler,
+        open_state: this.context.openState,
+        on_open: this.context.openHandler,
         on_close: this.closeHandler
-      }, _react.default.createElement(_StepIndicatorContext.StepIndicatorProvider, _extends({}, this.context, {
-        sidebar_id: this.context.sidebar_id,
-        onChangeState: this.onChangeState
-      }), _react.default.createElement(_Modal.default.Content, {
+      }, _react.default.createElement(_Modal.default.Content, {
         style_type: "white"
       }, _react.default.createElement("div", {
         className: "dnb-step-indicator-v2"
       }, _react.default.createElement("p", {
         className: "dnb-p dnb-step-indicator__label"
-      }, this.context.stepsLabelExtended), _StepIndicatorList || (_StepIndicatorList = _react.default.createElement(_StepIndicatorList2.default, null)))))));
+      }, this.context.stepsLabelExtended), _StepIndicatorList2 || (_StepIndicatorList2 = _react.default.createElement(_StepIndicatorList3.default, null))))));
     }
   }]);
 

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

@@ -46,7 +46,7 @@ var stepIndicatorPropTypes = _objectSpread(_objectSpread({
     is_active: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
     url_future: _propTypes.default.string,
     url_passed: _propTypes.default.string
-  }))]).isRequired,
+  }))]),
   overview_title: _propTypes.default.string,
   step_title_extended: _propTypes.default.string,
   step_title: _propTypes.default.string,

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

@@ -1,4 +1,27 @@
 import * as React from 'react';
+export type StepIndicatorSidebarMode = 'static' | 'strict' | 'loose';
+export type StepIndicatorSidebarCurrentStep = string | number;
+export type StepIndicatorSidebarData =
+  | 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 user 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;
+    }[];
 
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
@@ -6,10 +29,26 @@ import * as React from 'react';
 export interface StepIndicatorSidebarProps
   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.
+   * A 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?: StepIndicatorSidebarMode;
+
+  /**
+   * Defines the active number marked step starting by 0. Defaults to `0`.
+   */
+  current_step?: StepIndicatorSidebarCurrentStep;
+
+  /**
+   * Defines the data/steps showing up in a JavaScript Array or JSON format like `[{title,is_current}]`. See parameters and the example above.
+   */
+  data?: StepIndicatorSidebarData;
   internalId?: string;
+  showInitialData?: boolean;
 }
 export default class StepIndicatorSidebar extends React.Component<
   StepIndicatorSidebarProps,