@instructure/ui-tabs 8.33.1 → 8.33.2

package/lib/Tabs/Tab/index.js

@@ -1,36 +1,22 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Tab = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-
 var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
-
 var _View = require("@instructure/ui-view/lib/View");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _props = require("./props");
-
 const _excluded = ["id", "variant", "isSelected", "isDisabled", "controls", "children", "styles"];
-
 var _dec, _class, _class2;
-
 /**
 ---
 parent: Tabs
@@ -41,18 +27,15 @@ id: Tabs.Tab
 let Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_class2 = class Tab extends _react.Component {
   constructor() {
     super(...arguments);
-
     this.handleClick = event => {
       const _this$props = this.props,
-            onClick = _this$props.onClick,
-            index = _this$props.index,
-            id = _this$props.id,
-            isDisabled = _this$props.isDisabled;
-
+        onClick = _this$props.onClick,
+        index = _this$props.index,
+        id = _this$props.id,
+        isDisabled = _this$props.isDisabled;
       if (isDisabled) {
         return;
       }
-
       if (typeof onClick === 'function') {
         onClick(event, {
           index,
@@ -60,18 +43,15 @@ let Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
         });
       }
     };
-
     this.handleKeyDown = event => {
       const _this$props2 = this.props,
-            onKeyDown = _this$props2.onKeyDown,
-            index = _this$props2.index,
-            id = _this$props2.id,
-            isDisabled = _this$props2.isDisabled;
-
+        onKeyDown = _this$props2.onKeyDown,
+        index = _this$props2.index,
+        id = _this$props2.id,
+        isDisabled = _this$props2.isDisabled;
       if (isDisabled) {
         return;
       }
-
       if (typeof onKeyDown === 'function') {
         onKeyDown(event, {
           index,
@@ -80,29 +60,24 @@ let Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
       }
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props3;
-
     (_this$props$makeStyle = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props3);
   }
-
   componentDidUpdate() {
     var _this$props$makeStyle2, _this$props4;
-
     (_this$props$makeStyle2 = (_this$props4 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props4);
   }
-
   render() {
     const _this$props5 = this.props,
-          id = _this$props5.id,
-          variant = _this$props5.variant,
-          isSelected = _this$props5.isSelected,
-          isDisabled = _this$props5.isDisabled,
-          controls = _this$props5.controls,
-          children = _this$props5.children,
-          styles = _this$props5.styles,
-          props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
+      id = _this$props5.id,
+      variant = _this$props5.variant,
+      isSelected = _this$props5.isSelected,
+      isDisabled = _this$props5.isDisabled,
+      controls = _this$props5.controls,
+      children = _this$props5.children,
+      styles = _this$props5.styles,
+      props = (0, _objectWithoutProperties2.default)(_this$props5, _excluded);
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
       as: "div",
       role: "tab",
@@ -118,7 +93,6 @@ let Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
       focusPosition: "inset"
     }), (0, _callRenderProp.callRenderProp)(children));
   }
-
 }, _class2.displayName = "Tab", _class2.componentId = 'Tabs.Tab', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   variant: 'default',
   isDisabled: false,

package/lib/Tabs/Tab/props.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   variant: _propTypes.default.oneOf(['default', 'secondary']),
   id: _propTypes.default.string.isRequired,

package/lib/Tabs/Tab/styles.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _emotion = require("@instructure/emotion");
-
 /*
  * The MIT License (MIT)
  *
@@ -30,6 +28,7 @@ var _emotion = require("@instructure/emotion");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 // keyframes have to be outside of 'generateStyle',
 // since it is causing problems in style recalculation
 const selectedTab = (0, _emotion.keyframes)`
@@ -37,6 +36,7 @@ const selectedTab = (0, _emotion.keyframes)`
     opacity: 1;
     transform: translate3d(0, 0, 0) scaleX(1);
   }`;
+
 /**
  * ---
  * private: true
@@ -47,11 +47,10 @@ const selectedTab = (0, _emotion.keyframes)`
  * @param  {Object} state the state of the component, the style is applied to
  * @return {Object} The final style object, which will be used in the component
  */
-
 const generateStyle = (componentTheme, props) => {
   const variant = props.variant,
-        isSelected = props.isSelected,
-        isDisabled = props.isDisabled;
+    isSelected = props.isSelected,
+    isDisabled = props.isDisabled;
   const variants = {
     default: {
       padding: '1rem 1.25rem',
@@ -80,7 +79,8 @@ const generateStyle = (componentTheme, props) => {
           animationTimingFunction: 'ease-out'
         })
       },
-      '&:hover': { ...(!isDisabled && !isSelected && {
+      '&:hover': {
+        ...(!isDisabled && !isSelected && {
           borderBottomColor: componentTheme.defaultHoverBorderColor
         })
       }
@@ -104,14 +104,16 @@ const generateStyle = (componentTheme, props) => {
       '&:first-of-type': {
         marginInlineStart: '0'
       },
-      '&:hover': { ...(!isDisabled && !isSelected && {
+      '&:hover': {
+        ...(!isDisabled && !isSelected && {
           background: componentTheme.secondarySelectedBackground,
           borderColor: componentTheme.secondarySelectedBorderColor
         })
       }
     }
-  }; // overrides for View default focus ring
+  };
 
+  // overrides for View default focus ring
   const focusRingStyles = {
     '&:before': {
       inset: '0.5rem',
@@ -144,6 +146,5 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/Tabs/Tab/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -36,9 +35,9 @@ exports.default = void 0;
  */
 const generateComponentTheme = theme => {
   const colors = theme.colors,
-        typography = theme.typography,
-        stacking = theme.stacking,
-        themeName = theme.key;
+    typography = theme.typography,
+    stacking = theme.stacking,
+    themeName = theme.key;
   const themeSpecificStyle = {
     canvas: {
       defaultColor: theme['ic-brand-font-color-dark'],
@@ -59,10 +58,10 @@ const generateComponentTheme = theme => {
     secondarySelectedBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
     zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.above
   };
-  return { ...componentVariables,
+  return {
+    ...componentVariables,
     ...themeSpecificStyle[themeName]
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;

package/lib/Tabs/TabsLocator.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabsLocator = void 0;
-
 var _locator = require("@instructure/ui-test-locator/lib/utils/locator.js");
-
 var _index = require("./index");
-
 /*
  * The MIT License (MIT)
  *
@@ -32,10 +29,12 @@ var _index = require("./index");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const TabLocator = (0, _locator.locator)('[role="tab"]');
 const PanelLocator = (0, _locator.locator)('[role="tabpanel"]');
-const SelectedTabLocator = (0, _locator.locator)('[role="tab"][aria-selected="true"]'); // @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
+const SelectedTabLocator = (0, _locator.locator)('[role="tab"][aria-selected="true"]');
 
+// @ts-expect-error ts-migrate(2339) FIXME: Property 'selector' does not exist on type 'typeof... Remove this comment to see the full error message
 const TabsLocator = (0, _locator.locator)(_index.Tabs.selector, {
   findTab: function () {
     return TabLocator.find(...arguments);

package/lib/Tabs/index.js

@@ -1,9 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -14,51 +12,28 @@ Object.defineProperty(exports, "Panel", {
   }
 });
 exports.default = exports.Tabs = void 0;
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _keycode = _interopRequireDefault(require("keycode"));
-
 var _View = require("@instructure/ui-view/lib/View");
-
 var _matchComponentTypes = require("@instructure/ui-react-utils/lib/matchComponentTypes.js");
-
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-
 var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
-
 var _console = require("@instructure/console");
-
 var _uid = require("@instructure/uid");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _Focusable = require("@instructure/ui-focusable/lib/Focusable");
-
 var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
-
 var _debounce = require("@instructure/debounce");
-
 var _px = require("@instructure/ui-utils/lib/px.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _Tab = require("./Tab");
-
 var _Panel = require("./Panel");
-
 var _props = require("./props");
-
 const _excluded = ["children", "elementRef", "maxWidth", "variant", "margin", "screenReaderLabel", "onRequestTabChange", "tabOverflow", "styles"];
-
 var _dec, _dec2, _class, _class2;
-
 /**
 ---
 category: components
@@ -74,26 +49,21 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     this._debounced = void 0;
     this._resizeListener = void 0;
     this.ref = null;
-
     this.handleRef = el => {
       const elementRef = this.props.elementRef;
       this.ref = el;
-
       if (typeof elementRef === 'function') {
         elementRef(el);
       }
     };
-
     this.handleTabClick = (event, _ref) => {
       let index = _ref.index;
       const nextTab = this.getNextTab(index, 0);
       this.fireOnChange(event, nextTab);
     };
-
     this.handleTabKeyDown = (event, _ref2) => {
       let index = _ref2.index;
       let nextTab;
-
       if (event.keyCode === _keycode.default.codes.up || event.keyCode === _keycode.default.codes.left) {
         // Select next tab to the left
         nextTab = this.getNextTab(index, -1);
@@ -101,34 +71,28 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
         // Select next tab to the right
         nextTab = this.getNextTab(index, 1);
       }
-
       if (nextTab) {
         event.preventDefault();
         this.fireOnChange(event, nextTab);
       }
     };
-
     this.handleResize = () => {
       this.setState({
         withTabListOverflow: this._tabList.scrollWidth > this._tabList.offsetWidth
       });
       this._tabListPosition = (0, _getBoundingClientRect.getBoundingClientRect)(this._tabList);
     };
-
     this.handleFocusableRef = el => {
       this._focusable = el;
     };
-
     this.handleTabListRef = el => {
       this._tabList = el;
     };
-
     this.handleScroll = event => {
       if (this.props.tabOverflow !== 'scroll' || !this.state.withTabListOverflow) {
         event.preventDefault();
         return;
       }
-
       const tabList = event.currentTarget;
       const scrollLeftMax = Math.round(tabList.scrollWidth - (0, _getBoundingClientRect.getBoundingClientRect)(tabList).width);
       const scrollLeft = Math.floor(Math.abs(tabList.scrollLeft));
@@ -137,65 +101,54 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
         showEndOverLay: scrollLeft < scrollLeftMax
       });
     };
-
     this.state = {
       withTabListOverflow: false,
       showStartOverLay: false,
       showEndOverLay: false
     };
   }
-
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
-
     if (this.props.tabOverflow === 'scroll' && this._tabList) {
       this.startScrollOverflow();
     }
-
     if (this.props.shouldFocusOnRender) {
       this.focus();
     }
-
     (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
-
   componentDidUpdate(prevProps, prevState) {
     var _this$props$makeStyle2, _this$props2;
-
     if (this.props.shouldFocusOnRender && !prevProps.shouldFocusOnRender) {
       this.focus();
-    } // start event listeners for scroll overflow
-
+    }
 
+    // start event listeners for scroll overflow
     if (prevProps.tabOverflow === 'stack' && this.props.tabOverflow === 'scroll') {
       this.startScrollOverflow();
-    } // cancel event listeners for scroll overflow
-
+    }
 
+    // cancel event listeners for scroll overflow
     if (prevProps.tabOverflow === 'scroll' && this.props.tabOverflow === 'stack') {
       this.cancelScrollOverflow();
-    } // we need to recalculate the scroll overflow if the style changes
-
+    }
 
+    // we need to recalculate the scroll overflow if the style changes
     if (this.props.tabOverflow === 'scroll' && prevProps.styles !== this.props.styles) {
       this.handleResize();
-    } // when tabList is set as overflown,
-    // make sure active tab is always visible
-
+    }
 
+    // when tabList is set as overflown,
+    // make sure active tab is always visible
     if (this.props.tabOverflow === 'scroll' && this._tabList && !prevState.withTabListOverflow && this.state.withTabListOverflow) {
       const activeTabEl = this._tabList.querySelector('[aria-selected="true"]');
-
       this.showActiveTabIfOverlayed(activeTabEl);
     }
-
     (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
-
   componentWillUnmount() {
     this.cancelScrollOverflow();
   }
-
   startScrollOverflow() {
     this.handleResize();
     this._debounced = (0, _debounce.debounce)(this.handleResize, 300, {
@@ -206,34 +159,27 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
     this._resizeListener = new ResizeObserver(entries => {
       for (const entry of entries) {
         const newWidth = entry.contentRect.width;
-
         if (this._tabListPosition.width !== newWidth) {
           var _this$_debounced;
-
           (_this$_debounced = this._debounced) === null || _this$_debounced === void 0 ? void 0 : _this$_debounced.call(this);
         }
       }
     });
-
     this._resizeListener.observe(this._tabList);
   }
-
   cancelScrollOverflow() {
     if (this._resizeListener) {
       this._resizeListener.disconnect();
     }
-
     if (this._debounced) {
       this._debounced.cancel();
     }
   }
-
   getOverlayWidth() {
     const _this$props3 = this.props,
-          variant = _this$props3.variant,
-          tabOverflow = _this$props3.tabOverflow,
-          styles = _this$props3.styles;
-
+      variant = _this$props3.variant,
+      tabOverflow = _this$props3.tabOverflow,
+      styles = _this$props3.styles;
     if (styles && tabOverflow === 'scroll') {
       if (variant === 'default') {
         return (0, _px.px)(styles === null || styles === void 0 ? void 0 : styles.scrollOverlayWidthDefault);
@@ -241,10 +187,8 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
         return (0, _px.px)(styles === null || styles === void 0 ? void 0 : styles.scrollOverlayWidthSecondary);
       }
     }
-
     return 0;
   }
-
   showActiveTabIfOverlayed(activeTabEl) {
     if (this._tabList && this._tabListPosition && typeof this._tabList.scrollTo === 'function' // test for scrollTo support
     ) {
@@ -254,10 +198,8 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       const tabListBoundEnd = tabListPosition.right + this.getOverlayWidth();
       const tabPositionStart = tabPosition.left;
       const tabPositionEnd = tabPosition.right;
-
       if (tabListBoundEnd > tabPositionEnd) {
         const offset = Math.round(tabListBoundEnd - tabPositionEnd);
-
         this._tabList.scrollTo({
           top: 0,
           left: this._tabList.scrollLeft + offset,
@@ -265,7 +207,6 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
         });
       } else if (tabListBoundStart > tabPositionStart) {
         const offset = Math.round(tabListBoundStart - tabPositionStart);
-
         this._tabList.scrollTo({
           top: 0,
           left: this._tabList.scrollLeft - offset,
@@ -274,42 +215,34 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       }
     }
   }
-
   getNextTab(startIndex, step) {
     const tabs = _react.default.Children.toArray(this.props.children).map(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel]) && child);
-
     const count = tabs.length;
     const change = step < 0 ? step + count : step;
     (0, _console.logError)(startIndex >= 0 && startIndex < count, `[Tabs] Invalid tab index: '${startIndex}'.`);
     let nextIndex = startIndex;
     let nextTab;
-
     do {
       nextIndex = (nextIndex + change) % count;
       nextTab = tabs[nextIndex];
     } while (nextTab && nextTab.props && nextTab.props.isDisabled);
-
     (0, _console.logError)(nextIndex >= 0 && nextIndex < count, `[Tabs] Invalid tab index: '${nextIndex}'.`);
     return {
       index: nextIndex,
       id: nextTab.props.id
     };
   }
-
   fireOnChange(event, _ref3) {
     let index = _ref3.index,
-        id = _ref3.id;
-
+      id = _ref3.id;
     if (typeof this.props.onRequestTabChange === 'function') {
       this.props.onRequestTabChange(event, {
         index,
         id
       });
     }
-
     this.state.withTabListOverflow && this.showActiveTabIfOverlayed(this._tabList.querySelector(`#tab-${id}`));
   }
-
   createTab(index, generatedId, selected, panel) {
     const id = panel.props.id || generatedId;
     return /*#__PURE__*/(0, _react.createElement)(_Tab.Tab, {
@@ -325,10 +258,10 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       onKeyDown: this.handleTabKeyDown
     });
   }
-
   clonePanel(_index, generatedId, selected, panel) {
-    const id = panel.props.id || generatedId; // fixHeight can be 0, so simply `fixheight` could return falsy value
+    const id = panel.props.id || generatedId;
 
+    // fixHeight can be 0, so simply `fixheight` could return falsy value
     const hasFixedHeight = typeof this.props.fixHeight !== 'undefined';
     return (0, _safeCloneElement.safeCloneElement)(panel, {
       id: panel.props.id || `panel-${id}`,
@@ -342,31 +275,26 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       minHeight: !hasFixedHeight ? this.props.minHeight : '100%'
     });
   }
-
   focus() {
     this._focusable && typeof this._focusable.focus === 'function' && this._focusable.focus();
   }
-
   render() {
     const panels = [];
     const tabs = [];
     const _this$props4 = this.props,
-          children = _this$props4.children,
-          elementRef = _this$props4.elementRef,
-          maxWidth = _this$props4.maxWidth,
-          variant = _this$props4.variant,
-          margin = _this$props4.margin,
-          screenReaderLabel = _this$props4.screenReaderLabel,
-          onRequestTabChange = _this$props4.onRequestTabChange,
-          tabOverflow = _this$props4.tabOverflow,
-          styles = _this$props4.styles,
-          props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
-
+      children = _this$props4.children,
+      elementRef = _this$props4.elementRef,
+      maxWidth = _this$props4.maxWidth,
+      variant = _this$props4.variant,
+      margin = _this$props4.margin,
+      screenReaderLabel = _this$props4.screenReaderLabel,
+      onRequestTabChange = _this$props4.onRequestTabChange,
+      tabOverflow = _this$props4.tabOverflow,
+      styles = _this$props4.styles,
+      props = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
     const selectedChildIndex = _react.default.Children.toArray(children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])).findIndex(child => child.props.isSelected && !child.props.isDisabled);
-
     let index = 0;
     const selectedIndex = selectedChildIndex >= 0 ? selectedChildIndex : 0;
-
     _react.default.Children.forEach(children, child => {
       if ((0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])) {
         const selected = !child.props.isDisabled && (child.props.isSelected || selectedIndex === index);
@@ -378,9 +306,9 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
         panels.push(child);
       }
     });
+    const withScrollFade = tabOverflow === 'scroll' && this.state.withTabListOverflow;
 
-    const withScrollFade = tabOverflow === 'scroll' && this.state.withTabListOverflow; // suppress overlay whenever final Tab is active, or Firefox will cover it
-
+    // suppress overlay whenever final Tab is active, or Firefox will cover it
     const startScrollOverlay = this.state.showStartOverLay ? (0, _emotion.jsx)("span", {
       key: "start-overlay",
       css: styles === null || styles === void 0 ? void 0 : styles.startScrollOverlay
@@ -414,7 +342,6 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       css: styles === null || styles === void 0 ? void 0 : styles.panelsContainer
     }, panels));
   }
-
 }, _class2.displayName = "Tabs", _class2.componentId = 'Tabs', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   variant: 'default',
   shouldFocusOnRender: false,

package/lib/Tabs/locator.js

@@ -10,9 +10,7 @@ Object.defineProperty(exports, "TabsLocator", {
   }
 });
 exports.default = void 0;
-
 var _TabsLocator = require("./TabsLocator");
-
 /*
  * The MIT License (MIT)
  *