@dnb/eufemia 9.23.0-beta.2 → 9.23.0-beta.3

package/esm/components/tabs/Tabs.js

@@ -1,1143 +0,0 @@
-import "core-js/modules/es.reflect.construct.js";
-import "core-js/modules/es.object.keys.js";
-import "core-js/modules/es.symbol.js";
-import "core-js/modules/es.object.get-own-property-descriptor.js";
-import "core-js/modules/web.dom-collections.for-each.js";
-import "core-js/modules/es.object.get-own-property-descriptors.js";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-import _typeof from "@babel/runtime/helpers/esm/typeof";
-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";
-var _excluded = ["children"],
-    _excluded2 = ["children", "className"],
-    _excluded3 = ["title", "key", "hash"];
-
-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; }
-
-import "core-js/modules/es.parse-float.js";
-import "core-js/modules/es.array.filter.js";
-import "core-js/modules/es.object.to-string.js";
-import "core-js/modules/es.array.reduce.js";
-import "core-js/modules/es.array.map.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.object.entries.js";
-import "core-js/modules/es.array.find-index.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 classnames from 'classnames';
-import keycode from 'keycode';
-import Context from '../../shared/Context';
-import { warn, slugify, isTrue, makeUniqueId, registerElement, extendPropsWithContext, validateDOMAttributes, dispatchCustomElementEvent, getPreviousSibling, filterProps, combineLabelledBy } from '../../shared/component-helper';
-import { spacingPropTypes, createSpacingClasses } from '../space/SpacingHelper';
-import { createSkeletonClass, skeletonDOMAttributes } from '../skeleton/SkeletonHelper';
-import Button from '../button/Button';
-import whatInput from 'what-input';
-import CustomContent from './TabsCustomContent';
-import ContentWrapper from './TabsContentWrapper';
-import EventEmitter from '../../shared/EventEmitter';
-
-var Tabs = function (_React$PureComponent) {
-  _inherits(Tabs, _React$PureComponent);
-
-  var _super = _createSuper(Tabs);
-
-  function Tabs(_props) {
-    var _this;
-
-    _classCallCheck(this, Tabs);
-
-    _this = _super.call(this, _props);
-
-    _defineProperty(_assertThisInitialized(_this), "init", function () {
-      if (_this._isMounted) {
-        _this.addScrollBehaviour();
-
-        _this.scrollToLastPosition();
-
-        _this.scrollToTab('selected');
-
-        if (_this.getLastUsedTab() !== null) {
-          _this.setState(null, _this.setFocusOnTab);
-        }
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onResizeHandler", function () {
-      var hasScrollbar = _this._hasScrollbar = _this.hasScrollbar();
-
-      if (hasScrollbar !== _this.state.hasScrollbar) {
-        _this.setState({
-          hasScrollbar: hasScrollbar
-        });
-      }
-
-      if (_this._hasScrollbar) {
-        try {
-          if (Math.ceil(window.innerWidth / 16) <= 40 || _this.isAtEdge()) {
-            if (!_this._tabsRef.current.style.marginLeft) {
-              var tabsStyle = window.getComputedStyle(_this._tabsRef.current);
-
-              if (!(Math.abs(parseFloat(tabsStyle.marginLeft)) > 0)) {
-                var diff = window.innerWidth - _this._tabsRef.current.offsetWidth;
-                var val = Math.round(diff / 16) / 2 * 16;
-                _this._tabsRef.current.style.marginLeft = "-".concat(val, "px");
-                _this._tabsRef.current.style.marginRight = "-".concat(val, "px");
-
-                if (val < 32) {
-                  val = 32;
-                }
-
-                var tablistStyle = window.getComputedStyle(_this._tablistRef.current);
-                _this._tablistRef.current.style.paddingLeft = "".concat((parseFloat(tablistStyle.paddingLeft) || 0) + val, "px");
-                _this._tablistRef.current.style.paddingRight = "".concat((parseFloat(tablistStyle.paddingRight) || 0) + val, "px");
-              }
-            }
-          } else {
-            _this._tabsRef.current.style.marginLeft = '';
-            _this._tabsRef.current.style.marginRight = '';
-            _this._tablistRef.current.style.paddingLeft = '';
-            _this._tablistRef.current.style.paddingRight = '';
-          }
-        } catch (e) {}
-      }
-
-      _this.setState({
-        atEdge: _this.isAtEdge()
-      });
-
-      if (hasScrollbar) {
-        _this.scrollToTab('selected');
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onTablistKeyDownHandler", function (e) {
-      switch (keycode(e)) {
-        case 'up':
-        case 'page up':
-        case 'left':
-          e.preventDefault();
-
-          _this.focusPrevTab(e);
-
-          break;
-
-        case 'down':
-        case 'page down':
-        case 'right':
-          e.preventDefault();
-
-          _this.focusNextTab(e);
-
-          break;
-
-        case 'home':
-          e.preventDefault();
-
-          _this.focusFirstTab(e);
-
-          break;
-
-        case 'end':
-          e.preventDefault();
-
-          _this.focusLastTab(e);
-
-          break;
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "focusFirstTab", function (e) {
-      var key = _this.state.data[0].key;
-
-      _this.focusTab(key, e, 'step');
-
-      _this.scrollToTab('focus');
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "focusLastTab", function (e) {
-      var key = _this.state.data[_this.state.data.length - 1].key;
-
-      _this.focusTab(key, e, 'step');
-
-      _this.scrollToTab('focus');
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "focusPrevTab", function (e) {
-      _this.focusTab(-1, e, 'step');
-
-      _this.scrollToTab('focus');
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "focusNextTab", function (e) {
-      _this.focusTab(+1, e, 'step');
-
-      _this.scrollToTab('focus');
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "openPrevTab", function (e) {
-      _this.openTab(-1, e, 'step');
-
-      _this.scrollToTab('selected');
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "openNextTab", function (e) {
-      _this.openTab(+1, e, 'step');
-
-      _this.scrollToTab('selected');
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleVerticalScroll", function () {
-      if (isTrue(_this.props.scroll) && _this._tablistRef.current && typeof _this._tablistRef.current.scrollIntoView === 'function') {
-        _this._tablistRef.current.scrollIntoView({
-          block: 'start',
-          behavior: 'smooth'
-        });
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onKeyDownHandler", function (event) {
-      switch (keycode(event)) {
-        case 'enter':
-          try {
-            var elem = document.getElementById("".concat(_this._id, "-content"));
-            elem.focus();
-          } catch (e) {
-            warn(e);
-          }
-
-          break;
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onMouseEnterHandler", function (event) {
-      var selected_key = _this.getCurrentKey(event);
-
-      if (selected_key) {
-        dispatchCustomElementEvent(_assertThisInitialized(_this), 'on_mouse_enter', _this.getEventArgs({
-          event: event,
-          selected_key: selected_key
-        }));
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "onClickHandler", function (event) {
-      var selected_key = _this.getCurrentKey(event);
-
-      if (selected_key) {
-        var ret = dispatchCustomElementEvent(_assertThisInitialized(_this), 'on_click', _this.getEventArgs({
-          event: event,
-          selected_key: selected_key
-        }));
-
-        if (ret !== false) {
-          _this.openTab(selected_key, event);
-
-          _this.scrollToTab('selected');
-        }
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getCurrentKey", function (event) {
-      var selected_key;
-
-      try {
-        selected_key = function (elem) {
-          return getPreviousSibling('dnb-tabs__button', elem) || {
-            dataset: {}
-          };
-        }(event.target).dataset.tabKey;
-      } catch (e) {
-        warn('Tabs Error:', e);
-      }
-
-      return selected_key;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getCurrentTitle", function () {
-      var selected_key = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.selected_key;
-
-      var current = _this.state.data.filter(function (_ref) {
-        var key = _ref.key;
-        return key == selected_key;
-      })[0];
-
-      return current && current.title || null;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "focusTab", function (focus_key) {
-      var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-
-      if (mode === 'step' && parseFloat(focus_key)) {
-        focus_key = _this.getStepKey(focus_key, _this.state.focus_key);
-      }
-
-      _this.setState({
-        focus_key: focus_key,
-        _listenForPropChanges: false
-      }, _this.setFocusOnTab);
-
-      dispatchCustomElementEvent(_assertThisInitialized(_this), 'on_focus', _this.getEventArgs({
-        event: event,
-        focus_key: focus_key
-      }));
-
-      _this.setWhatInput();
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "setFocusOnTab", function () {
-      try {
-        var elem = _this._tablistRef.current.querySelector('.dnb-tabs__button.focus');
-
-        elem.focus();
-
-        if (!document.getElementById("".concat(_this._id, "-content")) && typeof process !== 'undefined' && process.env.NODE_ENV !== 'test') {
-          warn("Could not find the required <Tabs.Content id=\"".concat(_this._id, "-content\" ... /> that provides role=\"tabpanel\""));
-        }
-      } catch (e) {
-        warn(e);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "openTab", function (selected_key) {
-      var event = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      var mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
-
-      _this.saveLastPosition();
-
-      _this.saveLastUsedTab();
-
-      _this.resetWhatInput();
-
-      if (mode === 'step' && parseFloat(selected_key)) {
-        selected_key = _this.getStepKey(selected_key, _this.state.selected_key);
-      }
-
-      if (typeof selected_key !== 'undefined') {
-        _this.setState({
-          selected_key: selected_key,
-          focus_key: selected_key,
-          _listenForPropChanges: false
-        }, _this.handleVerticalScroll);
-      }
-
-      dispatchCustomElementEvent(_assertThisInitialized(_this), 'on_change', _this.getEventArgs({
-        event: event,
-        selected_key: selected_key
-      }));
-
-      if (_this.props.use_hash && typeof window !== 'undefined') {
-        try {
-          window.history.replaceState(undefined, undefined, "#".concat(selected_key));
-        } catch (e) {
-          warn('Tabs Error:', e);
-        }
-      }
-
-      if (_this._eventEmitter) {
-        _this._eventEmitter.update(_this.getEventArgs({
-          event: event,
-          selected_key: selected_key
-        }));
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "getContent", function (selected_key) {
-      var _this$props = _this.props,
-          children = _this$props.children,
-          _content = _this$props.content;
-      var contentToRender = children || _content;
-      var content = null;
-
-      if (contentToRender) {
-        if (_typeof(contentToRender) === 'object' && contentToRender[selected_key]) {
-          content = contentToRender[selected_key];
-        } else if (typeof contentToRender === 'function') {
-          content = contentToRender.apply(_assertThisInitialized(_this), [selected_key]);
-        } else if (React.isValidElement(contentToRender)) {
-          content = contentToRender;
-        }
-      }
-
-      if (!content) {
-        var items = [];
-
-        if (Array.isArray(_this.state.data)) {
-          items = _this.state.data;
-        } else if (Array.isArray(contentToRender)) {
-          items = contentToRender;
-        }
-
-        if (items) {
-          content = items.filter(function (_ref2) {
-            var key = _ref2.key;
-            return key && selected_key && key == selected_key;
-          }).reduce(function (acc, _ref3) {
-            var content = _ref3.content;
-            return content || acc;
-          }, null);
-        }
-      }
-
-      if (typeof content === 'function') {
-        var Component = content;
-        content = React.createElement(Component, null);
-      }
-
-      return content;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "TabsWrapperHandler", function (_ref4) {
-      var children = _ref4.children,
-          rest = _objectWithoutProperties(_ref4, _excluded);
-
-      var _this$props2 = _this.props,
-          className = _this$props2.className,
-          _className = _this$props2.class;
-
-      var _filterProps = filterProps(_this.props, Tabs.defaultProps),
-          attributes = _extends({}, _filterProps);
-
-      var params = _objectSpread(_objectSpread({}, attributes), {}, {
-        className: classnames('dnb-tabs', createSpacingClasses(_this.props), className, _className)
-      });
-
-      validateDOMAttributes(_this.props, params);
-      return React.createElement("div", _extends({}, params, rest), children);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "TabsListHandler", function (_ref5) {
-      var children = _ref5.children,
-          className = _ref5.className,
-          rest = _objectWithoutProperties(_ref5, _excluded2);
-
-      var _this$props3 = _this.props,
-          align = _this$props3.align,
-          tabs_style = _this$props3.tabs_style,
-          tabs_spacing = _this$props3.tabs_spacing,
-          no_border = _this$props3.no_border;
-      var _this$state = _this.state,
-          hasScrollbar = _this$state.hasScrollbar,
-          atEdge = _this$state.atEdge;
-      return React.createElement("div", _extends({
-        className: classnames('dnb-tabs__tabs', className, align && "dnb-tabs__tabs--".concat(align), tabs_style && "dnb-section dnb-section--".concat(tabs_style), tabs_spacing && "dnb-section--spacing-".concat(isTrue(tabs_spacing) ? 'default' : tabs_spacing), hasScrollbar && 'dnb-tabs--has-scrollbar', atEdge && 'dnb-tabs--at-edge', no_border && 'dnb-tabs__tabs--no-border'),
-        ref: _this._tabsRef
-      }, rest), React.createElement(ScrollNavButton, {
-        onMouseDown: _this.openPrevTab,
-        icon: "chevron_left",
-        className: classnames(hasScrollbar && 'dnb-tabs__scroll-nav-button--visible', _this.state.isFirst && 'dnb-tabs__scroll-nav-button--hide')
-      }), children, React.createElement(ScrollNavButton, {
-        onMouseDown: _this.openNextTab,
-        icon: "chevron_right",
-        className: classnames(hasScrollbar && 'dnb-tabs__scroll-nav-button--visible', _this.state.isLast && 'dnb-tabs__scroll-nav-button--hide')
-      }));
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "TabContentHandler", function () {
-      var selected_key = _this.state.selected_key;
-
-      var content = _this.renderContent();
-
-      if (!_this._eventEmitter && !content) {
-        warn("No content was given to the Tabs component!\nTip: Check out other solutions like <Tabs.Content id=\"unique\">Your content, outside of the Tabs component</Tabs.Content>\n");
-      }
-
-      return React.createElement(ContentWrapper, {
-        id: _this._id,
-        selected_key: selected_key,
-        content_style: _this.props.content_style,
-        content_spacing: _this.props.content_spacing
-      }, content);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "TabsHandler", function (props) {
-      var _this$_props$props = _objectSpread(_objectSpread({}, _this._props), props),
-          label = _this$_props$props.label,
-          skeleton = _this$_props$props.skeleton,
-          tab_element = _this$_props$props.tab_element;
-
-      var selected_key = _this.state.selected_key;
-      var TabElement = tab_element || 'button';
-
-      var tabs = _this.state.data.map(function (_ref6) {
-        var title = _ref6.title,
-            key = _ref6.key,
-            _ref6$disabled = _ref6.disabled,
-            disabled = _ref6$disabled === void 0 ? false : _ref6$disabled,
-            to = _ref6.to,
-            href = _ref6.href;
-        var itemParams = {
-          to: to,
-          href: href
-        };
-
-        var isFocus = _this.isFocus(key);
-
-        var isSelected = _this.isSelected(key);
-
-        if (isSelected) {
-          itemParams['aria-controls'] = "".concat(_this._id, "-content");
-        }
-
-        if (isTrue(disabled)) {
-          itemParams.disabled = true;
-          itemParams['aria-disabled'] = true;
-        }
-
-        if (TabElement === 'button') {
-          itemParams.type = 'button';
-        }
-
-        skeletonDOMAttributes(itemParams, skeleton, _this.context);
-        return React.createElement("div", {
-          className: classnames('dnb-tabs__button__snap', isFocus && 'focus', isSelected && 'selected'),
-          key: "tab-".concat(key)
-        }, React.createElement(TabElement, _extends({
-          role: "tab",
-          tabIndex: "-1",
-          id: "".concat(_this._id, "-tab-").concat(key),
-          "aria-selected": isSelected,
-          className: classnames('dnb-tabs__button', isFocus && 'focus', isSelected && 'selected'),
-          onMouseEnter: _this.onMouseEnterHandler,
-          onClick: _this.onClickHandler,
-          onKeyUp: _this.onKeyDownHandler,
-          "data-tab-key": key
-        }, itemParams), React.createElement("span", {
-          className: classnames('dnb-tabs__button__title', createSkeletonClass('font', skeleton, _this.context))
-        }, title), React.createElement(Dummy, null, title)));
-      });
-
-      var params = {};
-
-      if (label) {
-        params['aria-label'] = label;
-      }
-
-      if (selected_key) {
-        params['aria-labelledby'] = combineLabelledBy(params, "".concat(_this._id, "-tab-").concat(selected_key));
-      }
-
-      return React.createElement("div", _extends({
-        role: "tablist",
-        className: "dnb-tabs__tabs__tablist",
-        tabIndex: "0",
-        onKeyDown: _this.onTablistKeyDownHandler,
-        ref: _this._tablistRef
-      }, params), tabs);
-    });
-
-    _this._id = _props.id || makeUniqueId();
-    var data = Tabs.getData(_props);
-
-    var _selected_key = Tabs.getSelectedKeyOrFallback(_props.selected_key, data);
-
-    if (_props.use_hash && typeof window !== 'undefined') {
-      try {
-        var useHashKey = String(window.location.hash).replace('#', '');
-
-        if (useHashKey && String(useHashKey).length > 0) {
-          _selected_key = Tabs.getSelectedKeyOrFallback(useHashKey, data);
-        }
-      } catch (e) {}
-    }
-
-    var lastPosition = _this.getLastPosition();
-
-    _this.state = {
-      data: data,
-      lastPosition: lastPosition,
-      selected_key: _selected_key,
-      focus_key: _selected_key,
-      atEdge: false,
-      hasScrollbar: lastPosition > -1,
-      _selected_key: _selected_key,
-      _data: _props.data || _props.children,
-      _listenForPropChanges: true
-    };
-    _this._tabsRef = React.createRef();
-    _this._tablistRef = React.createRef();
-
-    if (_props.id) {
-      _this._eventEmitter = EventEmitter.createInstance(_props.id);
-
-      _this._eventEmitter.set(_this.getEventArgs({
-        selected_key: _selected_key
-      }));
-    }
-
-    return _this;
-  }
-
-  _createClass(Tabs, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this._isMounted = true;
-
-      if (document.readyState === 'complete') {
-        this.init();
-      } else if (typeof window !== 'undefined') {
-        window.addEventListener('load', this.init);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this._isMounted = false;
-      this.resetWhatInput();
-
-      if (this._eventEmitter) {
-        this._eventEmitter.remove();
-
-        this._eventEmitter = null;
-      }
-
-      clearTimeout(this._scrollToTabTimeout);
-
-      if (typeof window !== 'undefined') {
-        window.removeEventListener('resize', this.onResizeHandler);
-        window.removeEventListener('load', this.init);
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(props) {
-      this.onResizeHandler();
-
-      if (this._eventEmitter && this.props.selected_key !== props.selected_key) {
-        var selected_key = this.state.selected_key;
-
-        this._eventEmitter.update(this.getEventArgs({
-          selected_key: selected_key
-        }));
-      }
-    }
-  }, {
-    key: "getLastPosition",
-    value: function getLastPosition() {
-      if (typeof window !== 'undefined') {
-        try {
-          var pos = parseFloat(window.localStorage.getItem('tmp-tabs-pos')) || -1;
-          window.localStorage.removeItem('tmp-tabs-pos');
-          return pos;
-        } catch (e) {
-          warn(e);
-        }
-      }
-
-      return -1;
-    }
-  }, {
-    key: "getLastUsedTab",
-    value: function getLastUsedTab() {
-      if (typeof window !== 'undefined') {
-        try {
-          var key = window.localStorage.getItem('tmp-tabs-last') || null;
-          window.localStorage.removeItem('tmp-tabs-last');
-          return key;
-        } catch (e) {
-          warn(e);
-        }
-      }
-
-      return -1;
-    }
-  }, {
-    key: "saveLastUsedTab",
-    value: function saveLastUsedTab() {
-      if (typeof window !== 'undefined') {
-        try {
-          window.localStorage.setItem('tmp-tabs-last', this.state.selected_key);
-        } catch (e) {
-          warn(e);
-        }
-      }
-    }
-  }, {
-    key: "saveLastPosition",
-    value: function saveLastPosition() {
-      var pos = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._tablistRef.current.scrollLeft;
-
-      if (typeof window !== 'undefined') {
-        try {
-          window.localStorage.setItem('tmp-tabs-pos', pos);
-        } catch (e) {
-          warn(e);
-        }
-      }
-    }
-  }, {
-    key: "hasScrollbar",
-    value: function hasScrollbar() {
-      return this._tablistRef.current.scrollWidth - 1 > this._tablistRef.current.offsetWidth;
-    }
-  }, {
-    key: "isAtEdge",
-    value: function isAtEdge() {
-      if (!this._hasScrollbar || typeof window === 'undefined') {
-        return false;
-      }
-
-      try {
-        var padding = parseFloat(window.getComputedStyle(this._tablistRef.current).paddingLeft);
-        var width = this._tablistRef.current.offsetWidth + 2 + 64 - padding;
-        var screenWidth = window.innerWidth;
-        return width >= screenWidth;
-      } catch (e) {}
-
-      return false;
-    }
-  }, {
-    key: "addScrollBehaviour",
-    value: function addScrollBehaviour() {
-      this.onResizeHandler();
-
-      if (typeof window !== 'undefined') {
-        window.addEventListener('resize', this.onResizeHandler);
-      }
-    }
-  }, {
-    key: "scrollToLastPosition",
-    value: function scrollToLastPosition() {
-      try {
-        this._tablistRef.current.style.scrollBehavior = 'auto';
-        this._tablistRef.current.scrollLeft = this.state.lastPosition;
-        this._tablistRef.current.style.scrollBehavior = 'smooth';
-      } catch (e) {}
-    }
-  }, {
-    key: "scrollToTab",
-    value: function scrollToTab(type) {
-      var _this2 = this;
-
-      if (typeof window === 'undefined') {
-        return;
-      }
-
-      clearTimeout(this._scrollToTabTimeout);
-      this._scrollToTabTimeout = setTimeout(function () {
-        try {
-          if ((_this2._hasScrollbar || _this2.state.hasScrollbar) && _this2._tablistRef.current) {
-            var first = _this2._tablistRef.current.querySelector('.dnb-tabs__button__snap:first-of-type');
-
-            var isFirst = first.classList.contains(type);
-
-            var last = _this2._tablistRef.current.querySelector('.dnb-tabs__button__snap:last-of-type');
-
-            var isLast = last.classList.contains(type);
-
-            var elem = _this2._tablistRef.current.querySelector(".dnb-tabs__button.".concat(type));
-
-            var style = window.getComputedStyle(_this2._tabsRef.current);
-            var margin = parseFloat(style.marginLeft);
-            var padding = margin < 0 ? parseFloat(style.paddingLeft) : 0;
-
-            if (!isFirst && _this2.state.atEdge && parseFloat(style.paddingLeft) < 16) {
-              var navButton = _this2._tabsRef.current.querySelector('.dnb-tabs__scroll-nav-button:first-of-type');
-
-              padding = parseFloat(window.getComputedStyle(navButton).width);
-            }
-
-            var leftPadding = (margin < 0 ? Math.abs(margin) : 0) + padding + parseFloat(window.getComputedStyle(first).paddingLeft);
-            var left = elem && !isFirst ? elem.offsetLeft - leftPadding : 0;
-
-            _this2._tablistRef.current.scrollTo({
-              left: left,
-              behavior: window.IS_TEST ? 'auto' : 'smooth'
-            });
-
-            _this2.setState({
-              isFirst: isFirst,
-              isLast: isLast
-            });
-          }
-        } catch (e) {
-          warn(e);
-        }
-      }, window.IS_TEST ? 0 : 100);
-    }
-  }, {
-    key: "getStepKey",
-    value: function getStepKey(useKey, stateKey) {
-      var currentData = this.state.data.filter(function (_ref7) {
-        var disabled = _ref7.disabled;
-        return !disabled;
-      });
-      var currentIndex = currentData.reduce(function (acc, _ref8, i) {
-        var key = _ref8.key;
-        return key == stateKey ? i : acc;
-      }, -1);
-      var nextIndex = currentIndex + useKey;
-
-      if (nextIndex < 0) {
-        nextIndex = currentData.length - 1;
-      }
-
-      if (nextIndex >= currentData.length) {
-        nextIndex = 0;
-      }
-
-      return currentData.reduce(function (acc, _ref9, i) {
-        var key = _ref9.key;
-        return i === nextIndex ? key : acc;
-      }, null);
-    }
-  }, {
-    key: "setWhatInput",
-    value: function setWhatInput() {
-      whatInput.specificKeys([9, 37, 39, 33, 34, 35, 36]);
-    }
-  }, {
-    key: "resetWhatInput",
-    value: function resetWhatInput() {
-      whatInput.specificKeys([9]);
-    }
-  }, {
-    key: "getEventArgs",
-    value: function getEventArgs(args) {
-      var _this$state2 = this.state,
-          selected_key = _this$state2.selected_key,
-          focus_key = _this$state2.focus_key;
-      var key = typeof args.selected_key !== 'undefined' ? args.selected_key : selected_key;
-      return _objectSpread({
-        key: key,
-        selected_key: selected_key,
-        focus_key: focus_key,
-        title: this.getCurrentTitle(key)
-      }, args);
-    }
-  }, {
-    key: "isFocus",
-    value: function isFocus(tabKey) {
-      return this.state.focus_key == tabKey;
-    }
-  }, {
-    key: "isSelected",
-    value: function isSelected(tabKey) {
-      return this.state.selected_key == tabKey;
-    }
-  }, {
-    key: "renderCachedContent",
-    value: function renderCachedContent() {
-      var _this3 = this;
-
-      var _this$state3 = this.state,
-          selected_key = _this$state3.selected_key,
-          data = _this$state3.data;
-      var _this$props4 = this.props,
-          prevent_rerender = _this$props4.prevent_rerender,
-          prerender = _this$props4.prerender;
-
-      if (isTrue(prerender)) {
-        this._cache = Object.entries(data).reduce(function (acc, _ref10) {
-          var _ref11 = _slicedToArray(_ref10, 2),
-              idx = _ref11[0],
-              cur = _ref11[1];
-
-          acc[cur.key] = _objectSpread(_objectSpread({}, cur), {}, {
-            content: _this3.getContent(cur.key)
-          });
-          return acc;
-        }, {});
-      } else if (isTrue(prevent_rerender)) {
-        this._cache = _objectSpread(_objectSpread({}, this._cache || {}), {}, _defineProperty({}, selected_key, {
-          content: this.getContent(selected_key)
-        }));
-      }
-
-      var cachedContent = Object.entries(this._cache).map(function (_ref12) {
-        var _ref13 = _slicedToArray(_ref12, 2),
-            key = _ref13[0],
-            content = _ref13[1].content;
-
-        var params = {};
-
-        if (key !== String(selected_key)) {
-          params.hidden = true;
-          params['aria-hidden'] = true;
-        }
-
-        return React.createElement("div", _extends({
-          key: key,
-          className: "dnb-tabs__cached"
-        }, params), content);
-      });
-      return cachedContent;
-    }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      var _this$props5 = this.props,
-          prevent_rerender = _this$props5.prevent_rerender,
-          prerender = _this$props5.prerender;
-
-      if (isTrue(prevent_rerender) || isTrue(prerender)) {
-        return this.renderCachedContent();
-      }
-
-      return this.getContent(this.state.selected_key);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$context;
-
-      var props = this._props = extendPropsWithContext(this.props, Tabs.defaultProps, {
-        skeleton: (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.skeleton
-      });
-      var customRenderer = props.render;
-      var TabItems = this.TabsHandler;
-      TabItems.displayName = 'Tabs';
-      var TabsList = this.TabsListHandler;
-      TabsList.displayName = 'TabsList';
-      var Wrapper = this.TabsWrapperHandler;
-      Wrapper.displayName = 'TabsWrapper';
-      var Content = this.TabContentHandler;
-      Content.displayName = 'TabContent';
-
-      if (typeof customRenderer === 'function') {
-        return customRenderer({
-          Wrapper: Wrapper,
-          Content: Content,
-          TabsList: TabsList,
-          Tabs: TabItems
-        });
-      }
-
-      return React.createElement(Wrapper, null, React.createElement(TabsList, null, React.createElement(TabItems, null)), React.createElement(Content, null));
-    }
-  }], [{
-    key: "enableWebComponent",
-    value: function enableWebComponent() {
-      registerElement(Tabs === null || Tabs === void 0 ? void 0 : Tabs.tagName, Tabs, Tabs.defaultProps);
-    }
-  }, {
-    key: "getSelectedKeyOrFallback",
-    value: function getSelectedKeyOrFallback(selected_key, data) {
-      var useKey = selected_key;
-
-      if (!useKey) {
-        useKey = data.reduce(function (acc, _ref14) {
-          var selected = _ref14.selected,
-              key = _ref14.key;
-          return selected ? key : acc;
-        }, null) || data[0] && data[0].key;
-      } else {
-        var keyExists = data.findIndex(function (_ref15) {
-          var key = _ref15.key;
-          return key == selected_key;
-        });
-
-        if (keyExists === -1) {
-          useKey = data[0] && data[0].key;
-        }
-      }
-
-      return useKey;
-    }
-  }, {
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(props, state) {
-      if (state._listenForPropChanges) {
-        if (props.data) {
-          if (state._data !== props.data) {
-            state._data = props.data;
-            state.data = Tabs.getData(props);
-          }
-        } else if (props.children) {
-          if (state._data !== props.children) {
-            state._data = props.children;
-            state.data = Tabs.getData(props);
-          }
-        }
-
-        if (props.selected_key && state._selected_key !== props.selected_key) {
-          state.selected_key = state._selected_key = Tabs.getSelectedKeyOrFallback(props.selected_key, state.data);
-        }
-      }
-
-      state._listenForPropChanges = true;
-      return state;
-    }
-  }, {
-    key: "getData",
-    value: function getData(props) {
-      var res = [];
-      var data = !props.data && props.children ? props.children : props.data;
-
-      if (Array.isArray(props.children) && (typeof props.children[0] === 'function' || React.isValidElement(props.children[0]))) {
-        res = props.children.reduce(function (acc, content, i) {
-          if (content.props && content.props.displayName === 'CustomContent') {
-            var dataProps = props.tabs && Array.isArray(props.tabs) && props.tabs[i] || {};
-
-            var componentProps = _objectSpread({}, content.props);
-
-            if (componentProps.title === null) {
-              delete componentProps.title;
-            }
-
-            var _dataProps$componentP = _objectSpread(_objectSpread(_objectSpread({}, dataProps), componentProps), {
-              children: null
-            }),
-                title = _dataProps$componentP.title,
-                _key = _dataProps$componentP.key,
-                hash = _dataProps$componentP.hash,
-                rest = _objectWithoutProperties(_dataProps$componentP, _excluded3);
-
-            acc.push(_objectSpread({
-              title: title,
-              key: (!_key && hash ? hash : _key) || slugify(title),
-              content: content
-            }, rest));
-          }
-
-          return acc;
-        }, []);
-      }
-
-      if (!(res && res.length > 0)) {
-        if (props.data && Array.isArray(data)) {
-          res = data;
-        } else if (typeof data === 'string') {
-          res = data[0] === '[' ? JSON.parse(data) : [];
-        } else if (data && _typeof(data) === 'object') {
-          res = Object.entries(data).reduce(function (acc, _ref16) {
-            var _ref17 = _slicedToArray(_ref16, 2),
-                key = _ref17[0],
-                obj = _ref17[1];
-
-            if (obj) {
-              acc.push(_objectSpread({
-                key: key
-              }, obj));
-            }
-
-            return acc;
-          }, []);
-        }
-      }
-
-      return res || [];
-    }
-  }]);
-
-  return Tabs;
-}(React.PureComponent);
-
-_defineProperty(Tabs, "tagName", 'dnb-tabs');
-
-_defineProperty(Tabs, "contextType", Context);
-
-_defineProperty(Tabs, "defaultProps", {
-  data: null,
-  content: null,
-  content_style: null,
-  content_spacing: true,
-  label: null,
-  tab_element: 'button',
-  selected_key: null,
-  align: 'left',
-  tabs_style: null,
-  tabs_spacing: null,
-  no_border: false,
-  use_hash: false,
-  prerender: false,
-  prevent_rerender: false,
-  scroll: null,
-  skeleton: null,
-  id: null,
-  class: null,
-  className: null,
-  children: null,
-  render: null,
-  on_change: null,
-  on_mouse_enter: null,
-  on_click: null,
-  on_focus: null
-});
-
-_defineProperty(Tabs, "Content", CustomContent);
-
-_defineProperty(Tabs, "ContentWrapper", ContentWrapper);
-
-export { Tabs as default };
-process.env.NODE_ENV !== "production" ? Tabs.propTypes = _objectSpread(_objectSpread({
-  data: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.shape({
-    title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]).isRequired,
-    key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-    selected: PropTypes.bool,
-    disabled: PropTypes.bool
-  })), PropTypes.objectOf(PropTypes.shape({
-    title: PropTypes.string.isRequired,
-    selected: PropTypes.bool,
-    disabled: PropTypes.bool
-  }))]),
-  content: PropTypes.oneOfType([PropTypes.object, PropTypes.node, PropTypes.func]),
-  content_style: PropTypes.string,
-  content_spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  label: PropTypes.string,
-  tab_element: PropTypes.oneOfType([PropTypes.object, PropTypes.node, PropTypes.func]),
-  selected_key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  align: PropTypes.oneOf(['left', 'center', 'right']),
-  tabs_style: PropTypes.string,
-  tabs_spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  no_border: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  use_hash: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  prerender: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  prevent_rerender: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  scroll: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  skeleton: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  id: PropTypes.string
-}, spacingPropTypes), {}, {
-  class: PropTypes.string,
-  className: PropTypes.string,
-  children: PropTypes.oneOfType([PropTypes.object, PropTypes.node, PropTypes.func]),
-  render: PropTypes.func,
-  on_change: PropTypes.func,
-  on_mouse_enter: PropTypes.func,
-  on_click: PropTypes.func,
-  on_focus: PropTypes.func
-}) : void 0;
-export var Dummy = function Dummy(_ref18) {
-  var children = _ref18.children;
-  return React.createElement("span", {
-    "aria-hidden": true,
-    hidden: true,
-    className: "dnb-dummy"
-  }, children);
-};
-process.env.NODE_ENV !== "production" ? Dummy.propTypes = {
-  children: PropTypes.node.isRequired
-} : void 0;
-
-var ScrollNavButton = function ScrollNavButton(props) {
-  return React.createElement(Button, _extends({
-    size: "medium",
-    variant: "primary",
-    tabIndex: "-1",
-    bounding: true,
-    "aria-hidden": true,
-    icon_size: "medium"
-  }, props, {
-    className: classnames('dnb-tabs__scroll-nav-button', props.className)
-  }));
-};
-
-process.env.NODE_ENV !== "production" ? ScrollNavButton.propTypes = {
-  className: PropTypes.node.isRequired
-} : void 0;