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

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,18 +153,26 @@ var Tabs = function (_React$PureComponent) {
       if (_this._isMounted) {
         _this.addScrollBehaviour();
 
-        _this.scrollToLastPosition();
+        _this.setScrollbarState();
 
-        _this.scrollToTab('selected');
+        _this.scrollToTab({
+          type: 'focus',
+          behavior: 'auto'
+        });
 
-        if (_this.getLastUsedTab() !== null) {
-          _this.setState(null, _this.setFocusOnTab);
+        _this.scrollToTab({
+          type: 'selected',
+          behavior: '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 hasScrollbar = _this.hasScrollbar();
 
       if (hasScrollbar !== _this.state.hasScrollbar) {
         _this.setState({
@@ -172,42 +180,14 @@ var Tabs = function (_React$PureComponent) {
         });
       }
 
-      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()
-      });
+      return hasScrollbar;
+    });
 
-      if (hasScrollbar) {
-        _this.scrollToTab('selected');
+    _defineProperty(_assertThisInitialized(_this), "onResizeHandler", function () {
+      if (_this.setScrollbarState()) {
+        _this.scrollToTab({
+          type: 'selected'
+        });
       }
     });
 
@@ -252,7 +232,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 +242,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 +288,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 +331,9 @@ var Tabs = function (_React$PureComponent) {
         if (ret !== false) {
           _this.openTab(selected_key, event);
 
-          _this.scrollToTab('selected');
+          _this.scrollToTab({
+            type: 'selected'
+          });
         }
       }
     });
@@ -376,7 +376,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 +386,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);
@@ -516,21 +518,20 @@ var Tabs = function (_React$PureComponent) {
           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' && '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' && 'dnb-tabs__scroll-nav-button--visible', _this.state.isLast && 'dnb-tabs__scroll-nav-button--hide')
       }));
     });
 
@@ -602,6 +603,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,7 +648,6 @@ var Tabs = function (_React$PureComponent) {
 
     _this.state = {
       data: data,
-      lastPosition: lastPosition,
       selected_key: _selected_key,
       focus_key: _selected_key,
       atEdge: false,
@@ -692,8 +693,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,14 +701,16 @@ 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
+          }));
+        }
       }
     }
   }, {
@@ -717,8 +718,8 @@ var Tabs = function (_React$PureComponent) {
     value: function getLastPosition() {
       if (typeof window !== 'undefined') {
         try {
-          var pos = parseFloat(window.localStorage.getItem('tmp-tabs-pos')) || -1;
-          window.localStorage.removeItem('tmp-tabs-pos');
+          var pos = parseFloat(window.localStorage.getItem("tabs-pos-".concat(this._id))) || -1;
+          window.localStorage.removeItem("tabs-pos-".concat(this._id));
           return pos;
         } catch (e) {
           (0, _componentHelper.warn)(e);
@@ -728,12 +729,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 +748,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);
         }
@@ -760,7 +761,7 @@ var Tabs = function (_React$PureComponent) {
 
       if (typeof window !== 'undefined') {
         try {
-          window.localStorage.setItem('tmp-tabs-pos', pos);
+          window.localStorage.setItem("tabs-pos-".concat(this._id), pos);
         } catch (e) {
           (0, _componentHelper.warn)(e);
         }
@@ -771,53 +772,33 @@ 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() {
-      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) {
+    value: function scrollToTab(_ref7) {
       var _this2 = this;
 
+      var type = _ref7.type,
+          _ref7$behavior = _ref7.behavior,
+          behavior = _ref7$behavior === void 0 ? 'smooth' : _ref7$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);
@@ -831,21 +812,23 @@ 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;
+            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;
 
-            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);
+            if (behavior === 'auto') {
+              _this2._tablistRef.current.style.scrollBehavior = 'auto';
             }
 
-            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'
+              behavior: behavior
             });
 
+            if (behavior === 'auto') {
+              _this2._tablistRef.current.style.scrollBehavior = '';
+            }
+
             _this2.setState({
               isFirst: isFirst,
               isLast: isLast
@@ -854,17 +837,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 (_ref8) {
+        var disabled = _ref8.disabled;
         return !disabled;
       });
-      var currentIndex = currentData.reduce(function (acc, _ref8, i) {
-        var key = _ref8.key;
+      var currentIndex = currentData.reduce(function (acc, _ref9, i) {
+        var key = _ref9.key;
         return key == stateKey ? i : acc;
       }, -1);
       var nextIndex = currentIndex + useKey;
@@ -877,8 +866,8 @@ var Tabs = function (_React$PureComponent) {
         nextIndex = 0;
       }
 
-      return currentData.reduce(function (acc, _ref9, i) {
-        var key = _ref9.key;
+      return currentData.reduce(function (acc, _ref10, i) {
+        var key = _ref10.key;
         return i === nextIndex ? key : acc;
       }, null);
     }
@@ -892,12 +881,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 +915,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, _ref11) {
+          var _ref12 = _slicedToArray(_ref11, 2),
+              idx = _ref12[0],
+              cur = _ref12[1];
 
           acc[cur.key] = _objectSpread(_objectSpread({}, cur), {}, {
             content: _this3.getContent(cur.key)
@@ -945,10 +939,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 (_ref13) {
+        var _ref14 = _slicedToArray(_ref13, 2),
+            key = _ref14[0],
+            content = _ref14[1].content;
 
         var params = {};
 
@@ -1017,14 +1011,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, _ref15) {
+          var selected = _ref15.selected,
+              key = _ref15.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 (_ref16) {
+          var key = _ref16.key;
           return key == selected_key;
         });
 
@@ -1101,10 +1095,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, _ref17) {
+            var _ref18 = _slicedToArray(_ref17, 2),
+                key = _ref18[0],
+                obj = _ref18[1];
 
             if (obj) {
               acc.push(_objectSpread({
@@ -1142,6 +1136,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 +1178,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 +1196,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(_ref19) {
+  var children = _ref19.children;
   return _react.default.createElement("span", {
     "aria-hidden": true,
     hidden: true,