@dnb/eufemia 9.16.3 → 9.17.0

package/components/step-indicator/StepIndicator.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.reflect.construct.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.symbol.js";
@@ -20,23 +21,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
-import "core-js/modules/es.regexp.exec.js";
-import "core-js/modules/es.string.replace.js";
-import "core-js/modules/es.parse-float.js";
-import "core-js/modules/es.array.reduce.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.array.includes.js";
-import "core-js/modules/es.string.includes.js";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import Context from '../../shared/Context';
-import { makeUniqueId, warn, registerElement, processChildren, extendPropsWithContext } from '../../shared/component-helper';
-import EventEmitter from '../../shared/EventEmitter';
+import { makeUniqueId, warn, registerElement } from '../../shared/component-helper';
 import StepIndicatorSidebar from './StepIndicatorSidebar';
 import StepIndicatorModal from './StepIndicatorModal';
 import StepIndicatorList from './StepIndicatorList';
@@ -59,12 +50,6 @@ var StepIndicator = function (_React$PureComponent) {
       return typeof process !== 'undefined' && process.env.NODE_ENV === 'development';
     });
 
-    _defineProperty(_assertThisInitialized(_this), "setActiveStep", function (activeStep) {
-      _this.setState({
-        activeStep: activeStep
-      });
-    });
-
     _this.state = {
       isV1: !props.mode,
       sidebar_id: props.internalId || props.sidebar_id || makeUniqueId()
@@ -90,46 +75,15 @@ var StepIndicator = function (_React$PureComponent) {
       warn('StepIndicator: `show_numbers` is deprecated. Use `hide_numbers` instead.');
     }
 
-    _this._eventEmitter = EventEmitter.createInstance(_this.state.sidebar_id);
-
-    if (!_this.state.listOfReachedSteps) {
-      _this.state.listOfReachedSteps = [];
-    }
-
     return _this;
   }
 
   _createClass(StepIndicator, [{
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this._eventEmitter) {
-        this._eventEmitter.remove();
-
-        this._eventEmitter = null;
-      }
-    }
-  }, {
-    key: "getContextData",
-    value: function getContextData() {
-      var _data$step_title, _data$step_title_exte;
-
-      var context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.context;
-      var data = extendPropsWithContext(this.props, StepIndicator.defaultProps, {
-        skeleton: context === null || context === void 0 ? void 0 : context.skeleton
-      }, context.getTranslation(this.props).StepIndicator, context.FormRow, context.StepIndicator);
-      data.stepsLabel = (_data$step_title = data.step_title) === null || _data$step_title === void 0 ? void 0 : _data$step_title.replace('%step', this.state.activeStep + 1).replace('%count', this.state.countSteps);
-      data.stepsLabelExtended = (_data$step_title_exte = data.step_title_extended) === null || _data$step_title_exte === void 0 ? void 0 : _data$step_title_exte.replace('%step', this.state.activeStep + 1).replace('%count', this.state.countSteps);
-      return data;
-    }
-  }, {
     key: "render",
     value: function render() {
-      var contextData = this.getContextData(this.context);
-
       if (this.state.isV1) {
-        return React.createElement(StepIndicatorProvider, _extends({}, this.state, contextData, {
+        return React.createElement(StepIndicatorProvider, _extends({}, this.props, {
           sidebar_id: this.state.sidebar_id,
-          setActiveStep: this.setActiveStep,
           listAttributes: this.props,
           isV1: this.state.isV1
         }), _div || (_div = React.createElement("div", {
@@ -141,9 +95,8 @@ var StepIndicator = function (_React$PureComponent) {
         warn('StepIndicator needs an unique "sidebar_id" property, also on the <StepIndicator.Sidebar... />');
       }
 
-      return React.createElement(StepIndicatorProvider, _extends({}, this.state, contextData, {
+      return React.createElement(StepIndicatorProvider, _extends({}, this.props, {
         sidebar_id: this.state.sidebar_id,
-        setActiveStep: this.setActiveStep,
         isV1: this.state.isV1
       }), _div2 || (_div2 = React.createElement("div", {
         className: "dnb-step-indicator-v2"
@@ -154,44 +107,6 @@ var StepIndicator = function (_React$PureComponent) {
     value: function enableWebComponent() {
       registerElement(StepIndicator === null || StepIndicator === void 0 ? void 0 : StepIndicator.tagName, StepIndicator, StepIndicator.defaultProps);
     }
-  }, {
-    key: "getData",
-    value: function getData(props) {
-      var res = [];
-      if (props.data) res = props.data;else res = processChildren(props);
-      if (typeof res === 'string') return res[0] === '[' ? JSON.parse(res) : [];
-      return res || [];
-    }
-  }, {
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      state.data = StepIndicator.getData(props);
-      state.countSteps = state.data.length;
-
-      if (props.current_step !== null && 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, _ref, i) {
-          var url = _ref.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._current_step = props.current_step;
-      state._active_item = props.active_item;
-      state._active_url = props.active_url;
-      return state;
-    }
   }]);
 
   return StepIndicator;
@@ -199,8 +114,6 @@ var StepIndicator = function (_React$PureComponent) {
 
 _defineProperty(StepIndicator, "tagName", 'dnb-step-indicator');
 
-_defineProperty(StepIndicator, "contextType", Context);
-
 _defineProperty(StepIndicator, "Sidebar", StepIndicatorSidebar);
 
 _defineProperty(StepIndicator, "defaultProps", _objectSpread({

package/components/step-indicator/StepIndicatorContext.d.ts

@@ -9,6 +9,7 @@ export interface StepIndicatorProviderProps {
    */
   sidebar_id: string;
   children: React.ReactNode;
+  isSidebar?: boolean;
 }
 export class StepIndicatorProvider extends React.Component<
   StepIndicatorProviderProps,

package/components/step-indicator/StepIndicatorContext.js

@@ -2,12 +2,14 @@ import "core-js/modules/es.reflect.construct.js";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.object.get-own-property-descriptor.js";
 import "core-js/modules/es.object.get-own-property-descriptors.js";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
 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; }
 
@@ -24,13 +26,21 @@ import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.array.includes.js";
 import "core-js/modules/web.dom-collections.for-each.js";
 import "core-js/modules/es.string.starts-with.js";
+import "core-js/modules/es.parse-float.js";
+import "core-js/modules/es.array.reduce.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.object.entries.js";
 import React from 'react';
 import PropTypes from 'prop-types';
-import EventEmitter from '../../shared/EventEmitter';
+import Context from '../../shared/Context';
 import { stepIndicatorDefaultProps } from './StepIndicatorProps';
+import { processChildren, extendPropsWithContext } from '../../shared/component-helper';
+import { onMediaQueryChange } from '../../shared/MediaQueryUtils';
 var filterAttributes = Object.keys(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.createContext(null);
 export default StepIndicatorContext;
 export var StepIndicatorProvider = function (_React$PureComponent) {
@@ -44,8 +54,45 @@ export var StepIndicatorProvider = function (_React$PureComponent) {
     _classCallCheck(this, StepIndicatorProvider);
 
     _this = _super.call(this, props);
-    _this._eventEmitter = EventEmitter.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;
   }
 
@@ -54,30 +101,73 @@ export 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 = 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 = extendPropsWithContext(this.props, 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: 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;
@@ -92,11 +182,99 @@ export 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 = 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.PureComponent);
+
+_defineProperty(StepIndicatorProvider, "contextType", Context);
+
+_defineProperty(StepIndicatorProvider, "defaultProps", {
+  isSidebar: false
+});
+
 process.env.NODE_ENV !== "production" ? StepIndicatorProvider.propTypes = {
   sidebar_id: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired
-} : void 0;
+  children: PropTypes.node.isRequired,
+  isSidebar: PropTypes.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/components/step-indicator/StepIndicatorItem.js

@@ -18,6 +18,7 @@ import "core-js/modules/es.string.includes.js";
 import "core-js/modules/es.array.concat.js";
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.parse-float.js";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -31,7 +32,6 @@ import AnimateHeight from '../../shared/AnimateHeight';
 import Button from '../button/Button';
 import Icon from '../icon/Icon';
 import { WarnIcon, InfoIcon, ErrorIcon } from '../../components/form-status/FormStatus';
-import EventEmitter from '../../shared/EventEmitter';
 import StepIndicatorContext from './StepIndicatorContext';
 import { deprecated_v1 } from './StepIndicatorItem-v1';
 
@@ -80,7 +80,6 @@ var StepIndicatorItem = function (_React$PureComponent) {
       return typeof process !== 'undefined' && process.env.NODE_ENV === 'development';
     });
 
-    _this._eventEmitter = EventEmitter.createInstance(context.sidebar_id);
     _this._heightAnim = new AnimateHeight({
       animate: !isTrue(context.no_animation)
     });
@@ -99,8 +98,6 @@ var StepIndicatorItem = function (_React$PureComponent) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this._heightAnim.remove();
-
-      this._eventEmitter.remove();
     }
   }, {
     key: "getSnapshotBeforeUpdate",
@@ -165,7 +162,7 @@ var StepIndicatorItem = function (_React$PureComponent) {
       var isVisited = currentItemNum < activeStep;
       var id = "".concat(sidebar_id || 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 || isTrue(is_current);
+      var isCurrent = currentItemNum === activeStep || isTrue(is_current) && isNaN(parseFloat(activeStep));
       var element = React.createElement(StepItemWrapper, {
         number: currentItemNum + 1,
         hide_numbers: hide_numbers,

package/components/step-indicator/StepIndicatorModal.js

@@ -1,6 +1,5 @@
 import "core-js/modules/es.object.to-string.js";
 import "core-js/modules/es.reflect.construct.js";
-import _extends from "@babel/runtime/helpers/esm/extends";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
@@ -9,17 +8,18 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConst
 import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 
-var _StepIndicatorList;
+var _StepIndicatorList, _StepIndicatorList2;
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 import React from 'react';
+import ReactDOM from 'react-dom';
 import Modal from '../modal/Modal';
 import StepIndicatorTriggerButton from './StepIndicatorTriggerButton';
 import StepIndicatorList from './StepIndicatorList';
-import StepIndicatorContext, { StepIndicatorProvider } from './StepIndicatorContext';
+import StepIndicatorContext from './StepIndicatorContext';
 
 var StepIndicatorModal = function (_React$PureComponent) {
   _inherits(StepIndicatorModal, _React$PureComponent);
@@ -33,47 +33,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.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.createPortal(_StepIndicatorList || (_StepIndicatorList = React.createElement(StepIndicatorList, 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.createElement(React.Fragment, null, React.createElement(StepIndicatorTriggerButton, {
-        on_click: this.openHandler,
+        on_click: this.context.openHandler,
         inner_ref: this._triggerRef
       }), React.createElement(Modal, {
         id: this.context.sidebar_id,
@@ -81,19 +85,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.createElement(StepIndicatorProvider, _extends({}, this.context, {
-        sidebar_id: this.context.sidebar_id,
-        onChangeState: this.onChangeState
-      }), React.createElement(Modal.Content, {
+      }, React.createElement(Modal.Content, {
         style_type: "white"
       }, React.createElement("div", {
         className: "dnb-step-indicator-v2"
       }, React.createElement("p", {
         className: "dnb-p dnb-step-indicator__label"
-      }, this.context.stepsLabelExtended), _StepIndicatorList || (_StepIndicatorList = React.createElement(StepIndicatorList, null)))))));
+      }, this.context.stepsLabelExtended), _StepIndicatorList2 || (_StepIndicatorList2 = React.createElement(StepIndicatorList, null))))));
     }
   }]);
 

package/components/step-indicator/StepIndicatorProps.js

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

package/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 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;
+    }[];
 
 /**
  * NB: Do not change the docs (comments) in here. The docs are updated during build time by "generateTypes.js" and "fetchPropertiesFromDocs.js".
@@ -9,7 +32,23 @@ export interface StepIndicatorSidebarProps
    * 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?: 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 example above.
+   */
+  data?: StepIndicatorSidebarData;
   internalId?: string;
+  showInitialData?: boolean;
 }
 export default class StepIndicatorSidebar extends React.Component<
   StepIndicatorSidebarProps,