@dnb/eufemia 9.23.0-beta.3 → 9.23.1

package/cjs/components/tabs/Tabs.js

@@ -39,12 +39,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Dummy = void 0;
 
-require("core-js/modules/es.parse-float.js");
-
 require("core-js/modules/es.array.filter.js");
 
 require("core-js/modules/es.object.to-string.js");
 
+require("core-js/modules/es.parse-float.js");
+
 require("core-js/modules/es.array.reduce.js");
 
 require("core-js/modules/es.array.map.js");
@@ -153,61 +153,54 @@ var Tabs = function (_React$PureComponent) {
       if (_this._isMounted) {
         _this.addScrollBehaviour();
 
-        _this.scrollToLastPosition();
+        var hasScrollbar = _this.hasScrollbar();
 
-        _this.scrollToTab('selected');
+        var hasLastPosition = _this.hasLastPosition();
 
-        if (_this.getLastUsedTab() !== null) {
-          _this.setState(null, _this.setFocusOnTab);
+        _this.setScrollbarState({
+          hasScrollbar: hasScrollbar
+        });
+
+        if (hasLastPosition) {
+          _this.setLeftPosition(_this.state.lastPosition);
+        }
+
+        if (hasScrollbar) {
+          _this.scrollToTab({
+            type: 'selected',
+            behavior: hasLastPosition ? 'smooth' : 'auto'
+          });
+        }
+
+        if (_this.hasLastUsedTab() !== null) {
+          _this.setState(null, _this.setFocusOnTabButton);
         }
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onResizeHandler", function () {
-      var hasScrollbar = _this._hasScrollbar = _this.hasScrollbar();
+    _defineProperty(_assertThisInitialized(_this), "setScrollbarState", function () {
+      var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          _ref$hasScrollbar = _ref.hasScrollbar,
+          hasScrollbar = _ref$hasScrollbar === void 0 ? _this.hasScrollbar() : _ref$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) {}
-      }
+    _defineProperty(_assertThisInitialized(_this), "onResizeHandler", function () {
+      var hasScrollbar = _this.hasScrollbar();
 
-      _this.setState({
-        atEdge: _this.isAtEdge()
+      _this.setScrollbarState({
+        hasScrollbar: hasScrollbar
       });
 
       if (hasScrollbar) {
-        _this.scrollToTab('selected');
+        _this.scrollToTab({
+          type: 'selected'
+        });
       }
     });
 
@@ -252,7 +245,9 @@ var Tabs = function (_React$PureComponent) {
 
       _this.focusTab(key, e, 'step');
 
-      _this.scrollToTab('focus');
+      _this.scrollToTab({
+        type: 'focus'
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "focusLastTab", function (e) {
@@ -260,31 +255,41 @@ var Tabs = function (_React$PureComponent) {
 
       _this.focusTab(key, e, 'step');
 
-      _this.scrollToTab('focus');
+      _this.scrollToTab({
+        type: 'focus'
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "focusPrevTab", function (e) {
       _this.focusTab(-1, e, 'step');
 
-      _this.scrollToTab('focus');
+      _this.scrollToTab({
+        type: 'focus'
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "focusNextTab", function (e) {
       _this.focusTab(+1, e, 'step');
 
-      _this.scrollToTab('focus');
+      _this.scrollToTab({
+        type: 'focus'
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "openPrevTab", function (e) {
       _this.openTab(-1, e, 'step');
 
-      _this.scrollToTab('selected');
+      _this.scrollToTab({
+        type: 'selected'
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "openNextTab", function (e) {
       _this.openTab(+1, e, 'step');
 
-      _this.scrollToTab('selected');
+      _this.scrollToTab({
+        type: 'selected'
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleVerticalScroll", function () {
@@ -296,14 +301,20 @@ var Tabs = function (_React$PureComponent) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onMouseDown", function (event) {
+      event.preventDefault();
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onKeyDownHandler", function (event) {
       switch ((0, _keycode.default)(event)) {
         case 'enter':
           try {
             var elem = document.getElementById("".concat(_this._id, "-content"));
-            elem.focus();
+            elem.focus({
+              preventScroll: true
+            });
           } catch (e) {
-            (0, _componentHelper.warn)(e);
+            _this.warnAboutMissingContainer();
           }
 
           break;
@@ -333,7 +344,9 @@ var Tabs = function (_React$PureComponent) {
         if (ret !== false) {
           _this.openTab(selected_key, event);
 
-          _this.scrollToTab('selected');
+          _this.scrollToTab({
+            type: 'selected'
+          });
         }
       }
     });
@@ -357,8 +370,8 @@ var Tabs = function (_React$PureComponent) {
     _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;
+      var current = _this.state.data.filter(function (_ref2) {
+        var key = _ref2.key;
         return key == selected_key;
       })[0];
 
@@ -376,7 +389,7 @@ var Tabs = function (_React$PureComponent) {
       _this.setState({
         focus_key: focus_key,
         _listenForPropChanges: false
-      }, _this.setFocusOnTab);
+      }, _this.setFocusOnTabButton);
 
       (0, _componentHelper.dispatchCustomElementEvent)(_assertThisInitialized(_this), 'on_focus', _this.getEventArgs({
         event: event,
@@ -386,14 +399,16 @@ var Tabs = function (_React$PureComponent) {
       _this.setWhatInput();
     });
 
-    _defineProperty(_assertThisInitialized(_this), "setFocusOnTab", function () {
+    _defineProperty(_assertThisInitialized(_this), "setFocusOnTabButton", function () {
       try {
         var elem = _this._tablistRef.current.querySelector('.dnb-tabs__button.focus');
 
-        elem.focus();
+        elem.focus({
+          preventScroll: true
+        });
 
         if (!document.getElementById("".concat(_this._id, "-content")) && typeof process !== 'undefined' && process.env.NODE_ENV !== 'test') {
-          (0, _componentHelper.warn)("Could not find the required <Tabs.Content id=\"".concat(_this._id, "-content\" ... /> that provides role=\"tabpanel\""));
+          _this.warnAboutMissingContainer();
         }
       } catch (e) {
         (0, _componentHelper.warn)(e);
@@ -470,11 +485,11 @@ var Tabs = function (_React$PureComponent) {
         }
 
         if (items) {
-          content = items.filter(function (_ref2) {
-            var key = _ref2.key;
+          content = items.filter(function (_ref3) {
+            var key = _ref3.key;
             return key && selected_key && key == selected_key;
-          }).reduce(function (acc, _ref3) {
-            var content = _ref3.content;
+          }).reduce(function (acc, _ref4) {
+            var content = _ref4.content;
             return content || acc;
           }, null);
         }
@@ -488,9 +503,9 @@ var Tabs = function (_React$PureComponent) {
       return content;
     });
 
-    _defineProperty(_assertThisInitialized(_this), "TabsWrapperHandler", function (_ref4) {
-      var children = _ref4.children,
-          rest = _objectWithoutProperties(_ref4, _excluded);
+    _defineProperty(_assertThisInitialized(_this), "TabsWrapperHandler", function (_ref5) {
+      var children = _ref5.children,
+          rest = _objectWithoutProperties(_ref5, _excluded);
 
       var _this$props2 = _this.props,
           className = _this$props2.className,
@@ -507,30 +522,29 @@ var Tabs = function (_React$PureComponent) {
       return _react.default.createElement("div", _extends({}, params, rest), children);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "TabsListHandler", function (_ref5) {
-      var children = _ref5.children,
-          className = _ref5.className,
-          rest = _objectWithoutProperties(_ref5, _excluded2);
+    _defineProperty(_assertThisInitialized(_this), "TabsListHandler", function (_ref6) {
+      var children = _ref6.children,
+          className = _ref6.className,
+          rest = _objectWithoutProperties(_ref6, _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;
+          no_border = _this$props3.no_border,
+          nav_button_edge = _this$props3.nav_button_edge;
+      var hasScrollbar = _this.state.hasScrollbar;
       return _react.default.createElement("div", _extends({
-        className: (0, _classnames.default)('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((0, _componentHelper.isTrue)(tabs_spacing) ? 'default' : tabs_spacing), hasScrollbar && 'dnb-tabs--has-scrollbar', atEdge && 'dnb-tabs--at-edge', no_border && 'dnb-tabs__tabs--no-border'),
+        className: (0, _classnames.default)('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((0, _componentHelper.isTrue)(tabs_spacing) ? 'default' : tabs_spacing), hasScrollbar && 'dnb-tabs--has-scrollbar', nav_button_edge && 'dnb-tabs--at-edge', no_border && 'dnb-tabs__tabs--no-border'),
         ref: _this._tabsRef
       }, rest), _react.default.createElement(ScrollNavButton, {
         onMouseDown: _this.openPrevTab,
         icon: "chevron_left",
-        className: (0, _classnames.default)(hasScrollbar && 'dnb-tabs__scroll-nav-button--visible', _this.state.isFirst && 'dnb-tabs__scroll-nav-button--hide')
+        className: (0, _classnames.default)(hasScrollbar && (typeof _this.state.isFirst !== 'undefined' || _this.hasLastPosition()) && 'dnb-tabs__scroll-nav-button--visible', _this.state.isFirst && 'dnb-tabs__scroll-nav-button--hide')
       }), children, _react.default.createElement(ScrollNavButton, {
         onMouseDown: _this.openNextTab,
         icon: "chevron_right",
-        className: (0, _classnames.default)(hasScrollbar && 'dnb-tabs__scroll-nav-button--visible', _this.state.isLast && 'dnb-tabs__scroll-nav-button--hide')
+        className: (0, _classnames.default)(hasScrollbar && (typeof _this.state.isLast !== 'undefined' || _this.hasLastPosition()) && 'dnb-tabs__scroll-nav-button--visible', _this.state.isLast && 'dnb-tabs__scroll-nav-button--hide')
       }));
     });
 
@@ -560,13 +574,13 @@ var Tabs = function (_React$PureComponent) {
       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 tabs = _this.state.data.map(function (_ref7) {
+        var title = _ref7.title,
+            key = _ref7.key,
+            _ref7$disabled = _ref7.disabled,
+            disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
+            to = _ref7.to,
+            href = _ref7.href;
         var itemParams = {
           to: to,
           href: href
@@ -602,6 +616,7 @@ var Tabs = function (_React$PureComponent) {
           onMouseEnter: _this.onMouseEnterHandler,
           onClick: _this.onClickHandler,
           onKeyUp: _this.onKeyDownHandler,
+          onMouseDown: _this.onMouseDown,
           "data-tab-key": key
         }, itemParams), _react.default.createElement("span", {
           className: (0, _classnames.default)('dnb-tabs__button__title', (0, _SkeletonHelper.createSkeletonClass)('font', skeleton, _this.context))
@@ -646,10 +661,10 @@ var Tabs = function (_React$PureComponent) {
 
     _this.state = {
       data: data,
-      lastPosition: lastPosition,
       selected_key: _selected_key,
       focus_key: _selected_key,
       atEdge: false,
+      lastPosition: lastPosition,
       hasScrollbar: lastPosition > -1,
       _selected_key: _selected_key,
       _data: _props.data || _props.children,
@@ -692,8 +707,6 @@ var Tabs = function (_React$PureComponent) {
         this._eventEmitter = null;
       }
 
-      clearTimeout(this._scrollToTabTimeout);
-
       if (typeof window !== 'undefined') {
         window.removeEventListener('resize', this.onResizeHandler);
         window.removeEventListener('load', this.init);
@@ -702,24 +715,31 @@ var Tabs = function (_React$PureComponent) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(props) {
-      this.onResizeHandler();
+      if (this._eventEmitter && (this.props.selected_key !== props.selected_key || this.props.data !== props.data)) {
+        this.onResizeHandler();
 
-      if (this._eventEmitter && this.props.selected_key !== props.selected_key) {
-        var selected_key = this.state.selected_key;
+        if (this._eventEmitter) {
+          var selected_key = this.state.selected_key;
 
-        this._eventEmitter.update(this.getEventArgs({
-          selected_key: selected_key
-        }));
+          this._eventEmitter.update(this.getEventArgs({
+            selected_key: selected_key
+          }));
+        }
       }
     }
+  }, {
+    key: "hasLastPosition",
+    value: function hasLastPosition() {
+      return this.state.lastPosition > -1;
+    }
   }, {
     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;
+          var pos = parseFloat(window.localStorage.getItem("tabs-pos-".concat(this._id)));
+          window.localStorage.removeItem("tabs-pos-".concat(this._id));
+          return isNaN(pos) ? -1 : pos;
         } catch (e) {
           (0, _componentHelper.warn)(e);
         }
@@ -728,12 +748,12 @@ var Tabs = function (_React$PureComponent) {
       return -1;
     }
   }, {
-    key: "getLastUsedTab",
-    value: function getLastUsedTab() {
+    key: "hasLastUsedTab",
+    value: function hasLastUsedTab() {
       if (typeof window !== 'undefined') {
         try {
-          var key = window.localStorage.getItem('tmp-tabs-last') || null;
-          window.localStorage.removeItem('tmp-tabs-last');
+          var key = window.localStorage.getItem("tabs-last-".concat(this._id)) || null;
+          window.localStorage.removeItem("tabs-last-".concat(this._id));
           return key;
         } catch (e) {
           (0, _componentHelper.warn)(e);
@@ -747,7 +767,7 @@ var Tabs = function (_React$PureComponent) {
     value: function saveLastUsedTab() {
       if (typeof window !== 'undefined') {
         try {
-          window.localStorage.setItem('tmp-tabs-last', this.state.selected_key);
+          window.localStorage.setItem("tabs-last-".concat(this._id), this.state.selected_key);
         } catch (e) {
           (0, _componentHelper.warn)(e);
         }
@@ -756,11 +776,11 @@ var Tabs = function (_React$PureComponent) {
   }, {
     key: "saveLastPosition",
     value: function saveLastPosition() {
-      var pos = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._tablistRef.current.scrollLeft;
+      var position = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this._tablistRef.current.scrollLeft;
 
       if (typeof window !== 'undefined') {
         try {
-          window.localStorage.setItem('tmp-tabs-pos', pos);
+          window.localStorage.setItem("tabs-pos-".concat(this._id), position);
         } catch (e) {
           (0, _componentHelper.warn)(e);
         }
@@ -771,53 +791,42 @@ var Tabs = function (_React$PureComponent) {
     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() {
+    key: "setLeftPosition",
+    value: function setLeftPosition(scrollLeft) {
       try {
         this._tablistRef.current.style.scrollBehavior = 'auto';
-        this._tablistRef.current.scrollLeft = this.state.lastPosition;
+        this._tablistRef.current.scrollLeft = scrollLeft;
         this._tablistRef.current.style.scrollBehavior = 'smooth';
       } catch (e) {}
     }
   }, {
     key: "scrollToTab",
-    value: function scrollToTab(type) {
+    value: function scrollToTab(_ref8) {
       var _this2 = this;
 
+      var type = _ref8.type,
+          _ref8$behavior = _ref8.behavior,
+          behavior = _ref8$behavior === void 0 ? 'smooth' : _ref8$behavior;
+
       if (typeof window === 'undefined') {
         return;
       }
 
-      clearTimeout(this._scrollToTabTimeout);
-      this._scrollToTabTimeout = setTimeout(function () {
+      if (window.IS_TEST) {
+        behavior = 'auto';
+      }
+
+      var delay = function delay() {
         try {
-          if ((_this2._hasScrollbar || _this2.state.hasScrollbar) && _this2._tablistRef.current) {
+          if (_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);
@@ -832,20 +841,30 @@ var Tabs = function (_React$PureComponent) {
             var margin = parseFloat(style.marginLeft);
             var padding = margin < 0 ? parseFloat(style.paddingLeft) : 0;
 
-            if (!isFirst && _this2.state.atEdge && parseFloat(style.paddingLeft) < 16) {
+            if (!isFirst && !isLast && 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 additionalSpace = parseFloat(window.getComputedStyle(navButton).width) * 1.5;
+              padding += additionalSpace;
             }
 
             var leftPadding = (margin < 0 ? Math.abs(margin) : 0) + padding + parseFloat(window.getComputedStyle(first).paddingLeft);
-            var left = elem && !isFirst ? elem.offsetLeft - leftPadding : 0;
+            var offsetLeft = elem.offsetLeft;
+            var left = elem && !isFirst ? offsetLeft - leftPadding : 0;
+
+            if (behavior === 'auto') {
+              _this2._tablistRef.current.style.scrollBehavior = 'auto';
+            }
 
             _this2._tablistRef.current.scrollTo({
               left: left,
-              behavior: window.IS_TEST ? 'auto' : 'smooth'
+              behavior: behavior
             });
 
+            if (behavior === 'auto') {
+              _this2._tablistRef.current.style.scrollBehavior = '';
+            }
+
             _this2.setState({
               isFirst: isFirst,
               isLast: isLast
@@ -854,17 +873,23 @@ var Tabs = function (_React$PureComponent) {
         } catch (e) {
           (0, _componentHelper.warn)(e);
         }
-      }, window.IS_TEST ? 0 : 100);
+      };
+
+      if (window.IS_TEST) {
+        delay();
+      } else {
+        window.requestAnimationFrame(delay);
+      }
     }
   }, {
     key: "getStepKey",
     value: function getStepKey(useKey, stateKey) {
-      var currentData = this.state.data.filter(function (_ref7) {
-        var disabled = _ref7.disabled;
+      var currentData = this.state.data.filter(function (_ref9) {
+        var disabled = _ref9.disabled;
         return !disabled;
       });
-      var currentIndex = currentData.reduce(function (acc, _ref8, i) {
-        var key = _ref8.key;
+      var currentIndex = currentData.reduce(function (acc, _ref10, i) {
+        var key = _ref10.key;
         return key == stateKey ? i : acc;
       }, -1);
       var nextIndex = currentIndex + useKey;
@@ -877,8 +902,8 @@ var Tabs = function (_React$PureComponent) {
         nextIndex = 0;
       }
 
-      return currentData.reduce(function (acc, _ref9, i) {
-        var key = _ref9.key;
+      return currentData.reduce(function (acc, _ref11, i) {
+        var key = _ref11.key;
         return i === nextIndex ? key : acc;
       }, null);
     }
@@ -892,12 +917,17 @@ var Tabs = function (_React$PureComponent) {
     value: function resetWhatInput() {
       _whatInput.default.specificKeys([9]);
     }
+  }, {
+    key: "warnAboutMissingContainer",
+    value: function warnAboutMissingContainer() {
+      (0, _componentHelper.warn)("Could not find the required <Tabs.Content id=\"".concat(this._id, "-content\" ... /> that provides role=\"tabpanel\""));
+    }
   }, {
     key: "getEventArgs",
     value: function getEventArgs(args) {
-      var _this$state2 = this.state,
-          selected_key = _this$state2.selected_key,
-          focus_key = _this$state2.focus_key;
+      var _this$state = this.state,
+          selected_key = _this$state.selected_key,
+          focus_key = _this$state.focus_key;
       var key = typeof args.selected_key !== 'undefined' ? args.selected_key : selected_key;
       return _objectSpread({
         key: key,
@@ -921,18 +951,18 @@ var Tabs = function (_React$PureComponent) {
     value: function renderCachedContent() {
       var _this3 = this;
 
-      var _this$state3 = this.state,
-          selected_key = _this$state3.selected_key,
-          data = _this$state3.data;
+      var _this$state2 = this.state,
+          selected_key = _this$state2.selected_key,
+          data = _this$state2.data;
       var _this$props4 = this.props,
           prevent_rerender = _this$props4.prevent_rerender,
           prerender = _this$props4.prerender;
 
       if ((0, _componentHelper.isTrue)(prerender)) {
-        this._cache = Object.entries(data).reduce(function (acc, _ref10) {
-          var _ref11 = _slicedToArray(_ref10, 2),
-              idx = _ref11[0],
-              cur = _ref11[1];
+        this._cache = Object.entries(data).reduce(function (acc, _ref12) {
+          var _ref13 = _slicedToArray(_ref12, 2),
+              idx = _ref13[0],
+              cur = _ref13[1];
 
           acc[cur.key] = _objectSpread(_objectSpread({}, cur), {}, {
             content: _this3.getContent(cur.key)
@@ -945,10 +975,10 @@ var Tabs = function (_React$PureComponent) {
         }));
       }
 
-      var cachedContent = Object.entries(this._cache).map(function (_ref12) {
-        var _ref13 = _slicedToArray(_ref12, 2),
-            key = _ref13[0],
-            content = _ref13[1].content;
+      var cachedContent = Object.entries(this._cache).map(function (_ref14) {
+        var _ref15 = _slicedToArray(_ref14, 2),
+            key = _ref15[0],
+            content = _ref15[1].content;
 
         var params = {};
 
@@ -1017,14 +1047,14 @@ var Tabs = function (_React$PureComponent) {
       var useKey = selected_key;
 
       if (!useKey) {
-        useKey = data.reduce(function (acc, _ref14) {
-          var selected = _ref14.selected,
-              key = _ref14.key;
+        useKey = data.reduce(function (acc, _ref16) {
+          var selected = _ref16.selected,
+              key = _ref16.key;
           return selected ? key : acc;
         }, null) || data[0] && data[0].key;
       } else {
-        var keyExists = data.findIndex(function (_ref15) {
-          var key = _ref15.key;
+        var keyExists = data.findIndex(function (_ref17) {
+          var key = _ref17.key;
           return key == selected_key;
         });
 
@@ -1101,10 +1131,10 @@ var Tabs = function (_React$PureComponent) {
         } 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];
+          res = Object.entries(data).reduce(function (acc, _ref18) {
+            var _ref19 = _slicedToArray(_ref18, 2),
+                key = _ref19[0],
+                obj = _ref19[1];
 
             if (obj) {
               acc.push(_objectSpread({
@@ -1142,6 +1172,7 @@ _defineProperty(Tabs, "defaultProps", {
   tabs_style: null,
   tabs_spacing: null,
   no_border: false,
+  nav_button_edge: false,
   use_hash: false,
   prerender: false,
   prevent_rerender: false,
@@ -1183,6 +1214,7 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes = _objectSpread(_objectSp
   tabs_style: _propTypes.default.string,
   tabs_spacing: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   no_border: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  nav_button_edge: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   use_hash: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   prerender: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   prevent_rerender: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
@@ -1200,8 +1232,8 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes = _objectSpread(_objectSp
   on_focus: _propTypes.default.func
 }) : void 0;
 
-var Dummy = function Dummy(_ref18) {
-  var children = _ref18.children;
+var Dummy = function Dummy(_ref20) {
+  var children = _ref20.children;
   return _react.default.createElement("span", {
     "aria-hidden": true,
     hidden: true,
@@ -1220,8 +1252,7 @@ var ScrollNavButton = function ScrollNavButton(props) {
     variant: "primary",
     tabIndex: "-1",
     bounding: true,
-    "aria-hidden": true,
-    icon_size: "medium"
+    "aria-hidden": true
   }, props, {
     className: (0, _classnames.default)('dnb-tabs__scroll-nav-button', props.className)
   }));