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

package/components/tabs/Tabs.js

@@ -23,9 +23,9 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import "core-js/modules/es.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.parse-float.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";
@@ -68,18 +68,26 @@ var Tabs = function (_React$PureComponent) {
       if (_this._isMounted) {
         _this.addScrollBehaviour();
 
-        _this.scrollToLastPosition();
+        _this.setScrollbarState();
+
+        _this.scrollToTab({
+          type: 'focus',
+          behavior: 'auto'
+        });
 
-        _this.scrollToTab('selected');
+        _this.scrollToTab({
+          type: 'selected',
+          behavior: 'auto'
+        });
 
-        if (_this.getLastUsedTab() !== null) {
-          _this.setState(null, _this.setFocusOnTab);
+        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({
@@ -87,42 +95,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'
+        });
       }
     });
 
@@ -167,7 +147,9 @@ var Tabs = function (_React$PureComponent) {
 
       _this.focusTab(key, e, 'step');
 
-      _this.scrollToTab('focus');
+      _this.scrollToTab({
+        type: 'focus'
+      });
     });
 
     _defineProperty(_assertThisInitialized(_this), "focusLastTab", function (e) {
@@ -175,31 +157,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 () {
@@ -211,14 +203,20 @@ var Tabs = function (_React$PureComponent) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onMouseDown", function (event) {
+      event.preventDefault();
+    });
+
     _defineProperty(_assertThisInitialized(_this), "onKeyDownHandler", function (event) {
       switch (keycode(event)) {
         case 'enter':
           try {
             var elem = document.getElementById("".concat(_this._id, "-content"));
-            elem.focus();
+            elem.focus({
+              preventScroll: true
+            });
           } catch (e) {
-            warn(e);
+            _this.warnAboutMissingContainer();
           }
 
           break;
@@ -248,7 +246,9 @@ var Tabs = function (_React$PureComponent) {
         if (ret !== false) {
           _this.openTab(selected_key, event);
 
-          _this.scrollToTab('selected');
+          _this.scrollToTab({
+            type: 'selected'
+          });
         }
       }
     });
@@ -291,7 +291,7 @@ var Tabs = function (_React$PureComponent) {
       _this.setState({
         focus_key: focus_key,
         _listenForPropChanges: false
-      }, _this.setFocusOnTab);
+      }, _this.setFocusOnTabButton);
 
       dispatchCustomElementEvent(_assertThisInitialized(_this), 'on_focus', _this.getEventArgs({
         event: event,
@@ -301,14 +301,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') {
-          warn("Could not find the required <Tabs.Content id=\"".concat(_this._id, "-content\" ... /> that provides role=\"tabpanel\""));
+          _this.warnAboutMissingContainer();
         }
       } catch (e) {
         warn(e);
@@ -431,21 +433,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.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'),
+        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', nav_button_edge && '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')
+        className: classnames(hasScrollbar && typeof _this.state.isFirst !== 'undefined' && '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')
+        className: classnames(hasScrollbar && typeof _this.state.isLast !== 'undefined' && 'dnb-tabs__scroll-nav-button--visible', _this.state.isLast && 'dnb-tabs__scroll-nav-button--hide')
       }));
     });
 
@@ -517,6 +518,7 @@ var Tabs = function (_React$PureComponent) {
           onMouseEnter: _this.onMouseEnterHandler,
           onClick: _this.onClickHandler,
           onKeyUp: _this.onKeyDownHandler,
+          onMouseDown: _this.onMouseDown,
           "data-tab-key": key
         }, itemParams), React.createElement("span", {
           className: classnames('dnb-tabs__button__title', createSkeletonClass('font', skeleton, _this.context))
@@ -561,7 +563,6 @@ var Tabs = function (_React$PureComponent) {
 
     _this.state = {
       data: data,
-      lastPosition: lastPosition,
       selected_key: _selected_key,
       focus_key: _selected_key,
       atEdge: false,
@@ -607,8 +608,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);
@@ -617,14 +616,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
+          }));
+        }
       }
     }
   }, {
@@ -632,8 +633,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) {
           warn(e);
@@ -643,12 +644,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) {
           warn(e);
@@ -662,7 +663,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) {
           warn(e);
         }
@@ -675,7 +676,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) {
           warn(e);
         }
@@ -686,53 +687,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);
@@ -746,21 +727,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
@@ -769,17 +752,23 @@ var Tabs = function (_React$PureComponent) {
         } catch (e) {
           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;
@@ -792,8 +781,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);
     }
@@ -807,12 +796,17 @@ var Tabs = function (_React$PureComponent) {
     value: function resetWhatInput() {
       whatInput.specificKeys([9]);
     }
+  }, {
+    key: "warnAboutMissingContainer",
+    value: function warnAboutMissingContainer() {
+      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,
@@ -836,18 +830,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 (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)
@@ -860,10 +854,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 = {};
 
@@ -932,14 +926,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;
         });
 
@@ -1016,10 +1010,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({
@@ -1055,6 +1049,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,
@@ -1097,6 +1092,7 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes = _objectSpread(_objectSp
   tabs_style: PropTypes.string,
   tabs_spacing: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   no_border: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  nav_button_edge: 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]),
@@ -1113,8 +1109,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(_ref18) {
-  var children = _ref18.children;
+export var Dummy = function Dummy(_ref19) {
+  var children = _ref19.children;
   return React.createElement("span", {
     "aria-hidden": true,
     hidden: true,