@dnb/eufemia 9.23.0-beta.4 → 9.24.0

package/components/number-format/NumberFormat.js

@@ -15,7 +15,7 @@ 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 = ["id", "value", "prefix", "suffix", "children", "currency", "currency_display", "currency_position", "ban", "nin", "phone", "org", "percent", "link", "tooltip", "skeleton", "options", "locale", "decimals", "omit_rounding", "clean", "selectall", "copy_selection", "clean_copy_value", "element", "class", "className"];
+var _excluded = ["id", "value", "prefix", "suffix", "children", "currency", "currency_display", "currency_position", "compact", "ban", "nin", "phone", "org", "percent", "link", "tooltip", "skeleton", "options", "locale", "decimals", "omit_rounding", "clean", "selectall", "copy_selection", "clean_copy_value", "element", "class", "className"];
 
 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; }
 
@@ -163,6 +163,7 @@ var NumberFormat = function (_React$PureComponent) {
           currency = props.currency,
           currency_display = props.currency_display,
           currency_position = props.currency_position,
+          compact = props.compact,
           ban = props.ban,
           nin = props.nin,
           phone = props.phone,
@@ -198,6 +199,7 @@ var NumberFormat = function (_React$PureComponent) {
         currency_display: currency_display,
         currency_position: currency_position,
         omit_currency_sign: this.state.omitCurrencySign,
+        compact: compact,
         ban: ban,
         nin: nin,
         phone: phone,
@@ -320,6 +322,7 @@ _defineProperty(NumberFormat, "defaultProps", {
   currency: null,
   currency_display: null,
   currency_position: null,
+  compact: null,
   ban: null,
   nin: null,
   phone: null,
@@ -352,6 +355,7 @@ process.env.NODE_ENV !== "production" ? NumberFormat.propTypes = _objectSpread(_
   currency: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   currency_display: PropTypes.string,
   currency_position: PropTypes.oneOf(['auto', 'before', 'after']),
+  compact: PropTypes.oneOfType([PropTypes.oneOf(['short', 'long']), PropTypes.bool]),
   ban: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   nin: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   phone: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),

package/components/number-format/NumberUtils.d.ts

@@ -34,6 +34,9 @@ export interface formatOptionParams {
   /** Should the number be cleaned */
   clean?: boolean;
 
+  /** shortens any number or currency including an abbreviation. You can combine `compact` with `currency`. It gives you zero decimal by default `decimals={0}`. Use either a boolean, or a string with "short" or "long" */
+  compact?: boolean | 'short' | 'long';
+
   /** How many decimals */
   decimals?: number;
 
@@ -53,13 +56,19 @@ export interface formatOptionParams {
   /** Currency code (ISO 4217) or `true` to use the default, `NOK`. */
   currency?: string | boolean;
 
-  /** Intl.NumberFormat currency option – you can use false or empty string to hide the sign/name */
-  currency_display?: string | boolean;
+  /** Intl.NumberFormat currency option – you can use false or empty string to hide the sign/name. Defaults to narrowSymbol when the locale is no else we default to code. */
+  currency_display?:
+    | boolean
+    | ''
+    | 'code'
+    | 'name'
+    | 'symbol'
+    | 'narrowSymbol';
   /** currency option */
   currency_position?: formatCurrencyPosition;
   /** hides the currency sign */
   omit_currency_sign?: boolean;
-  /** will remove all extra signs,like a currency sign or percent sign for the cleanedValue return when returnAria is true */
+  /** will remove all extra signs, like a currency sign or percent sign for the cleanedValue return when returnAria is true */
   clean_copy_value?: boolean;
 
   /** Intl.NumberFormat options (NumberFormatOptions) */

package/components/number-format/NumberUtils.js

@@ -31,6 +31,7 @@ import "core-js/modules/es.array.filter.js";
 import "core-js/modules/es.string.starts-with.js";
 import "core-js/modules/es.string.ends-with.js";
 import "core-js/modules/es.array.find.js";
+import "core-js/modules/es.parse-int.js";
 import React from 'react';
 import Context from '../../shared/Context';
 import { LOCALE, CURRENCY, CURRENCY_DISPLAY } from '../../shared/defaults';
@@ -43,6 +44,8 @@ export var format = function format(value) {
       locale = _ref$locale === void 0 ? null : _ref$locale,
       _ref$clean = _ref.clean,
       clean = _ref$clean === void 0 ? false : _ref$clean,
+      _ref$compact = _ref.compact,
+      compact = _ref$compact === void 0 ? null : _ref$compact,
       _ref$phone = _ref.phone,
       phone = _ref$phone === void 0 ? null : _ref$phone,
       _ref$org = _ref.org,
@@ -94,7 +97,7 @@ export var format = function format(value) {
 
   if (parseFloat(decimals) >= 0) {
     value = formatDecimals(value, decimals, omit_rounding, opts);
-  } else {
+  } else if (typeof opts.maximumFractionDigits === 'undefined') {
     opts.maximumFractionDigits = 20;
   }
 
@@ -152,6 +155,13 @@ export var format = function format(value) {
   } else if (isTrue(currency) || typeof currency === 'string') {
     type = 'currency';
     opts.currency = opts.currency || (isTrue(currency) ? CURRENCY : currency);
+    handleCompactBeforeDisplay({
+      value: value,
+      locale: locale,
+      compact: compact,
+      decimals: decimals,
+      opts: opts
+    });
 
     if (decimals === null) {
       decimals = 2;
@@ -165,7 +175,7 @@ export var format = function format(value) {
     }
 
     opts.style = 'currency';
-    opts.currencyDisplay = getFallbackCurrencyDisplay(locale, opts.currency_display || currency_display);
+    opts.currencyDisplay = getFallbackCurrencyDisplay(locale, opts.currencyDisplay || currency_display);
 
     if (typeof opts.minimumFractionDigits === 'undefined' && String(value).indexOf('.') === -1 && cleanedNumber % 1 === 0) {
       opts.minimumFractionDigits = 0;
@@ -214,6 +224,11 @@ export var format = function format(value) {
       }
     }
 
+    handleCompactBeforeAria({
+      value: value,
+      compact: compact,
+      opts: opts
+    });
     aria = formatNumber(cleanedNumber, locale, _objectSpread(_objectSpread({
       minimumFractionDigits: 0,
       maximumFractionDigits: 2
@@ -229,12 +244,21 @@ export var format = function format(value) {
       aria = prepareMinus(aria, locale);
     }
   } else {
+    handleCompactBeforeDisplay({
+      value: value,
+      locale: locale,
+      compact: compact,
+      decimals: decimals,
+      opts: opts
+    });
     display = formatNumber(value, locale, opts);
     display = prepareMinus(display, locale);
-    aria = formatNumber(value, locale, _objectSpread(_objectSpread({}, opts), {}, {
-      minimumFractionDigits: 1,
-      maximumFractionDigits: 20
-    }));
+    handleCompactBeforeAria({
+      value: value,
+      compact: compact,
+      opts: opts
+    });
+    aria = formatNumber(value, locale, opts);
     aria = enhanceSR(value, aria, locale);
   }
 
@@ -261,7 +285,7 @@ export var format = function format(value) {
       });
     } else {
       var thousandsSeparator = getThousandsSeparator(locale);
-      cleanedValue = display.replace(new RegExp("".concat(thousandsSeparator, "(?=\\d{3})"), 'g'), '');
+      cleanedValue = String(display).replace(new RegExp("".concat(thousandsSeparator, "(?=\\d{3})"), 'g'), '');
     }
 
     return {
@@ -878,4 +902,78 @@ function formatToParts(_ref9) {
   return [{
     value: number
   }];
+}
+
+function handleCompactBeforeDisplay() {
+  var _ref10 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      value = _ref10.value,
+      locale = _ref10.locale,
+      compact = _ref10.compact,
+      _ref10$decimals = _ref10.decimals,
+      decimals = _ref10$decimals === void 0 ? 0 : _ref10$decimals,
+      opts = _ref10.opts;
+
+  if (!canHandleCompact({
+    value: value,
+    compact: compact
+  })) {
+    return;
+  }
+
+  value = parseInt(Math.abs(value));
+  opts.notation = 'compact';
+
+  if (isTrue(compact) && locale && /(no|nb|nn)$/i.test(locale)) {
+    opts.compactDisplay = Math.abs(value) < 1000000 ? 'long' : 'short';
+  } else {
+    opts.compactDisplay = !isTrue(compact) ? compact : 'short';
+  }
+
+  if (typeof opts.maximumSignificantDigits === 'undefined') {
+    if (isNaN(parseFloat(decimals))) {
+      decimals = 0;
+    } else {
+      decimals = parseFloat(decimals);
+    }
+
+    var ref = String(value).length % 3;
+
+    if (ref === 2) {
+      decimals += 1;
+    } else if (ref === 0) {
+      decimals += 2;
+    }
+
+    opts.maximumSignificantDigits = decimals + 1;
+  }
+}
+
+function handleCompactBeforeAria(_ref11) {
+  var value = _ref11.value,
+      compact = _ref11.compact,
+      opts = _ref11.opts;
+
+  if (!canHandleCompact({
+    value: value,
+    compact: compact
+  })) {
+    return;
+  }
+
+  opts.compactDisplay = 'long';
+}
+
+function canHandleCompact(_ref12) {
+  var value = _ref12.value,
+      compact = _ref12.compact;
+
+  if (IS_IE11) {
+    return false;
+  }
+
+  if (compact && Math.abs(value) >= 1000) {
+    return true;
+  }
+
+  return false;
 }

package/components/tabs/Tabs.js

@@ -68,18 +68,25 @@ var Tabs = function (_React$PureComponent) {
       if (_this._isMounted) {
         _this.addScrollBehaviour();
 
-        _this.setScrollbarState();
+        var hasScrollbar = _this.hasScrollbar();
 
-        _this.scrollToTab({
-          type: 'focus',
-          behavior: 'auto'
-        });
+        var hasLastPosition = _this.hasLastPosition();
 
-        _this.scrollToTab({
-          type: 'selected',
-          behavior: 'auto'
+        _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);
         }
@@ -87,19 +94,25 @@ var Tabs = function (_React$PureComponent) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "setScrollbarState", function () {
-      var hasScrollbar = _this.hasScrollbar();
+      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
         });
       }
-
-      return hasScrollbar;
     });
 
     _defineProperty(_assertThisInitialized(_this), "onResizeHandler", function () {
-      if (_this.setScrollbarState()) {
+      var hasScrollbar = _this.hasScrollbar();
+
+      _this.setScrollbarState({
+        hasScrollbar: hasScrollbar
+      });
+
+      if (hasScrollbar) {
         _this.scrollToTab({
           type: 'selected'
         });
@@ -272,8 +285,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];
 
@@ -387,11 +400,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);
         }
@@ -405,9 +418,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,
@@ -424,10 +437,10 @@ var Tabs = function (_React$PureComponent) {
       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);
+    _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,
@@ -442,11 +455,11 @@ var Tabs = function (_React$PureComponent) {
       }, rest), React.createElement(ScrollNavButton, {
         onMouseDown: _this.openPrevTab,
         icon: "chevron_left",
-        className: classnames(hasScrollbar && typeof _this.state.isFirst !== 'undefined' && 'dnb-tabs__scroll-nav-button--visible', _this.state.isFirst && 'dnb-tabs__scroll-nav-button--hide')
+        className: classnames(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.createElement(ScrollNavButton, {
         onMouseDown: _this.openNextTab,
         icon: "chevron_right",
-        className: classnames(hasScrollbar && typeof _this.state.isLast !== 'undefined' && 'dnb-tabs__scroll-nav-button--visible', _this.state.isLast && 'dnb-tabs__scroll-nav-button--hide')
+        className: classnames(hasScrollbar && (typeof _this.state.isLast !== 'undefined' || _this.hasLastPosition()) && 'dnb-tabs__scroll-nav-button--visible', _this.state.isLast && 'dnb-tabs__scroll-nav-button--hide')
       }));
     });
 
@@ -476,13 +489,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
@@ -566,6 +579,7 @@ var Tabs = function (_React$PureComponent) {
       selected_key: _selected_key,
       focus_key: _selected_key,
       atEdge: false,
+      lastPosition: lastPosition,
       hasScrollbar: lastPosition > -1,
       _selected_key: _selected_key,
       _data: _props.data || _props.children,
@@ -628,14 +642,19 @@ var Tabs = function (_React$PureComponent) {
         }
       }
     }
+  }, {
+    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("tabs-pos-".concat(this._id))) || -1;
+          var pos = parseFloat(window.localStorage.getItem("tabs-pos-".concat(this._id)));
           window.localStorage.removeItem("tabs-pos-".concat(this._id));
-          return pos;
+          return isNaN(pos) ? -1 : pos;
         } catch (e) {
           warn(e);
         }
@@ -672,11 +691,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("tabs-pos-".concat(this._id), pos);
+          window.localStorage.setItem("tabs-pos-".concat(this._id), position);
         } catch (e) {
           warn(e);
         }
@@ -694,14 +713,23 @@ var Tabs = function (_React$PureComponent) {
         window.addEventListener('resize', this.onResizeHandler);
       }
     }
+  }, {
+    key: "setLeftPosition",
+    value: function setLeftPosition(scrollLeft) {
+      try {
+        this._tablistRef.current.style.scrollBehavior = 'auto';
+        this._tablistRef.current.scrollLeft = scrollLeft;
+        this._tablistRef.current.style.scrollBehavior = 'smooth';
+      } catch (e) {}
+    }
   }, {
     key: "scrollToTab",
-    value: function scrollToTab(_ref7) {
+    value: function scrollToTab(_ref8) {
       var _this2 = this;
 
-      var type = _ref7.type,
-          _ref7$behavior = _ref7.behavior,
-          behavior = _ref7$behavior === void 0 ? 'smooth' : _ref7$behavior;
+      var type = _ref8.type,
+          _ref8$behavior = _ref8.behavior,
+          behavior = _ref8$behavior === void 0 ? 'smooth' : _ref8$behavior;
 
       if (typeof window === 'undefined') {
         return;
@@ -727,6 +755,14 @@ var Tabs = function (_React$PureComponent) {
             var style = window.getComputedStyle(_this2._tabsRef.current);
             var margin = parseFloat(style.marginLeft);
             var padding = margin < 0 ? parseFloat(style.paddingLeft) : 0;
+
+            if (!isFirst && !isLast && parseFloat(style.paddingLeft) < 16) {
+              var navButton = _this2._tabsRef.current.querySelector('.dnb-tabs__scroll-nav-button:first-of-type');
+
+              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 offsetLeft = elem.offsetLeft;
             var left = elem && !isFirst ? offsetLeft - leftPadding : 0;
@@ -763,12 +799,12 @@ var Tabs = function (_React$PureComponent) {
   }, {
     key: "getStepKey",
     value: function getStepKey(useKey, stateKey) {
-      var currentData = this.state.data.filter(function (_ref8) {
-        var disabled = _ref8.disabled;
+      var currentData = this.state.data.filter(function (_ref9) {
+        var disabled = _ref9.disabled;
         return !disabled;
       });
-      var currentIndex = currentData.reduce(function (acc, _ref9, i) {
-        var key = _ref9.key;
+      var currentIndex = currentData.reduce(function (acc, _ref10, i) {
+        var key = _ref10.key;
         return key == stateKey ? i : acc;
       }, -1);
       var nextIndex = currentIndex + useKey;
@@ -781,8 +817,8 @@ var Tabs = function (_React$PureComponent) {
         nextIndex = 0;
       }
 
-      return currentData.reduce(function (acc, _ref10, i) {
-        var key = _ref10.key;
+      return currentData.reduce(function (acc, _ref11, i) {
+        var key = _ref11.key;
         return i === nextIndex ? key : acc;
       }, null);
     }
@@ -838,10 +874,10 @@ var Tabs = function (_React$PureComponent) {
           prerender = _this$props4.prerender;
 
       if (isTrue(prerender)) {
-        this._cache = Object.entries(data).reduce(function (acc, _ref11) {
-          var _ref12 = _slicedToArray(_ref11, 2),
-              idx = _ref12[0],
-              cur = _ref12[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)
@@ -854,10 +890,10 @@ var Tabs = function (_React$PureComponent) {
         }));
       }
 
-      var cachedContent = Object.entries(this._cache).map(function (_ref13) {
-        var _ref14 = _slicedToArray(_ref13, 2),
-            key = _ref14[0],
-            content = _ref14[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 = {};
 
@@ -926,14 +962,14 @@ var Tabs = function (_React$PureComponent) {
       var useKey = selected_key;
 
       if (!useKey) {
-        useKey = data.reduce(function (acc, _ref15) {
-          var selected = _ref15.selected,
-              key = _ref15.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 (_ref16) {
-          var key = _ref16.key;
+        var keyExists = data.findIndex(function (_ref17) {
+          var key = _ref17.key;
           return key == selected_key;
         });
 
@@ -1010,10 +1046,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, _ref17) {
-            var _ref18 = _slicedToArray(_ref17, 2),
-                key = _ref18[0],
-                obj = _ref18[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({
@@ -1109,8 +1145,8 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes = _objectSpread(_objectSp
   on_click: PropTypes.func,
   on_focus: PropTypes.func
 }) : void 0;
-export var Dummy = function Dummy(_ref19) {
-  var children = _ref19.children;
+export var Dummy = function Dummy(_ref20) {
+  var children = _ref20.children;
   return React.createElement("span", {
     "aria-hidden": true,
     hidden: true,
@@ -1127,8 +1163,7 @@ var ScrollNavButton = function ScrollNavButton(props) {
     variant: "primary",
     tabIndex: "-1",
     bounding: true,
-    "aria-hidden": true,
-    icon_size: "medium"
+    "aria-hidden": true
   }, props, {
     className: classnames('dnb-tabs__scroll-nav-button', props.className)
   }));

package/components/tabs/style/_tabs.scss

@@ -58,11 +58,13 @@
   }
 
   &__scroll-nav-button {
-    position: relative;
+    position: absolute;
     z-index: 2;
 
-    &.dnb-button--primary {
-      background-color: var(--color-emerald-green);
+    right: -2px;
+    &:first-of-type {
+      left: -2px;
+      right: auto;
     }
 
     display: none; // use "none" to remove it from markup by default
@@ -155,39 +157,19 @@
       padding-right: 0.5rem;
     }
 
-    // Make the transition smooth when its the first or last item
-    // keep focus and selected separate
-    &:first-of-type.selected.focus,
-    &:last-of-type.focus,
-    &:last-of-type.selected {
-      transition: padding 1s #{$defaultEasing} 10ms;
-    }
+    will-change: padding;
+    transition: padding 1s #{$defaultEasing};
   }
 
-  &--has-scrollbar &__button__snap {
-    &:first-of-type {
-      margin-left: -3rem;
-      padding-left: 3rem;
-    }
-    &:last-of-type {
-      margin-right: -3rem;
-      padding-right: 3rem;
-    }
-
-    &:first-of-type.focus,
-    &:first-of-type.selected.focus {
-      padding-left: 0;
-
+  html[data-whatinput='keyboard'] &__button__snap {
+    &:first-of-type.focus {
       // add space so the focus ring is visible within our overflow
       .dnb-tabs__button:focus {
         margin-left: 0.5rem;
       }
     }
 
-    &:last-of-type.focus,
-    &:last-of-type.selected.focus {
-      padding-right: 0;
-
+    &:last-of-type.focus {
       // add space so the focus ring is visible within our overflow
       /* stylelint-disable */
       .dnb-tabs__button:focus {
@@ -197,13 +179,6 @@
     }
   }
 
-  // Do this in order to have the selected tab to be nice aligned during scrollTo
-  &--has-scrollbar &__tabs__tablist {
-    margin: 0 -2rem; // The width of the nav-button
-    padding-left: 3rem;
-    padding-right: 3rem;
-  }
-
   /* stylelint-disable */
   html[data-visual-test] & &__button,
   html[data-visual-test] & &__button__snap,