@instructure/ui-tabs 8.18.0 → 8.18.1-snapshot.12

package/LICENSE.md

@@ -0,0 +1,27 @@
+---
+title: The MIT License (MIT)
+category: Getting Started
+order: 9
+---
+
+# The MIT License (MIT)
+
+Copyright (c) 2015 Instructure, Inc.
+
+**Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions.**
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/es/Tabs/Panel/index.js

@@ -60,32 +60,36 @@ let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   render() {
-    const _this$props = this.props,
-          labelledBy = _this$props.labelledBy,
-          variant = _this$props.variant,
-          id = _this$props.id,
-          maxHeight = _this$props.maxHeight,
-          minHeight = _this$props.minHeight,
-          padding = _this$props.padding,
-          textAlign = _this$props.textAlign,
-          children = _this$props.children,
-          elementRef = _this$props.elementRef,
-          isDisabled = _this$props.isDisabled,
-          isSelected = _this$props.isSelected,
-          styles = _this$props.styles,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          labelledBy = _this$props3.labelledBy,
+          variant = _this$props3.variant,
+          id = _this$props3.id,
+          maxHeight = _this$props3.maxHeight,
+          minHeight = _this$props3.minHeight,
+          padding = _this$props3.padding,
+          textAlign = _this$props3.textAlign,
+          children = _this$props3.children,
+          elementRef = _this$props3.elementRef,
+          isDisabled = _this$props3.isDisabled,
+          isSelected = _this$props3.isSelected,
+          styles = _this$props3.styles,
+          props = _objectWithoutProperties(_this$props3, _excluded);
 
     const isHidden = !isSelected || !!isDisabled;
     return jsx("div", Object.assign({}, passthroughProps(props), {
-      css: styles?.panel,
+      css: styles === null || styles === void 0 ? void 0 : styles.panel,
       role: "tabpanel",
       id: id,
       "aria-labelledby": labelledBy,
@@ -97,7 +101,7 @@ let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
       unmountOnExit: true,
       transitionExit: false
     }, jsx(View, {
-      css: styles?.content,
+      css: styles === null || styles === void 0 ? void 0 : styles.content,
       maxHeight: maxHeight,
       minHeight: minHeight,
       as: "div",

package/es/Tabs/Panel/theme.js

@@ -38,15 +38,15 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontSize: typography?.fontSizeMedium,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    lineHeight: typography?.lineHeight,
-    color: colors?.textDarkest,
-    background: colors?.backgroundLightest,
-    borderColor: colors?.borderMedium,
-    borderWidth: borders?.widthSmall,
-    borderStyle: borders?.style
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
+    color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/es/Tabs/Tab/index.js

@@ -87,23 +87,27 @@ let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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() {
-    this.props.makeStyles?.();
+    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$props3 = this.props,
-          id = _this$props3.id,
-          variant = _this$props3.variant,
-          isSelected = _this$props3.isSelected,
-          isDisabled = _this$props3.isDisabled,
-          controls = _this$props3.controls,
-          children = _this$props3.children,
-          styles = _this$props3.styles,
-          props = _objectWithoutProperties(_this$props3, _excluded);
+    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 = _objectWithoutProperties(_this$props5, _excluded);
 
     return jsx(View, Object.assign({}, passthroughProps(props), {
       as: "div",
@@ -111,7 +115,7 @@ let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       id: id,
       onClick: this.handleClick,
       onKeyDown: this.handleKeyDown,
-      css: styles?.tab,
+      css: styles === null || styles === void 0 ? void 0 : styles.tab,
       "aria-selected": isSelected ? 'true' : void 0,
       "aria-disabled": isDisabled ? 'true' : void 0,
       "aria-controls": controls,

package/es/Tabs/Tab/theme.js

@@ -40,17 +40,17 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    lineHeight: typography?.lineHeightCondensed,
-    fontSize: typography?.fontSizeMedium,
-    defaultColor: colors?.textDarkest,
-    defaultHoverBorderColor: colors?.borderMedium,
-    defaultSelectedBorderColor: colors?.borderBrand,
-    secondaryColor: colors?.textDarkest,
-    secondarySelectedBackground: colors?.backgroundLightest,
-    secondarySelectedBorderColor: colors?.borderMedium,
-    zIndex: stacking?.above
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    defaultColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    defaultHoverBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
+    defaultSelectedBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
+    secondaryColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    secondarySelectedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    secondarySelectedBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
+    zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.above
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/es/Tabs/index.js

@@ -117,6 +117,8 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
   }
 
   componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+
     if (this.props.tabOverflow === 'scroll' && this._tabList) {
       this.startScrollOverflow();
     }
@@ -125,10 +127,12 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
       this.focus();
     }
 
-    this.props.makeStyles?.();
+    (_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
@@ -156,7 +160,7 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
       this.showActiveTabIfOverlayed(activeTabEl);
     }
 
-    this.props.makeStyles?.();
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   componentWillUnmount() {
@@ -175,7 +179,9 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
         const newWidth = entry.contentRect.width;
 
         if (this._tabListPosition.width !== newWidth) {
-          this._debounced?.();
+          var _this$_debounced;
+
+          (_this$_debounced = this._debounced) === null || _this$_debounced === void 0 ? void 0 : _this$_debounced.call(this);
         }
       }
     });
@@ -194,16 +200,16 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
   }
 
   getOverlayWidth() {
-    const _this$props = this.props,
-          variant = _this$props.variant,
-          tabOverflow = _this$props.tabOverflow,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          variant = _this$props3.variant,
+          tabOverflow = _this$props3.tabOverflow,
+          styles = _this$props3.styles;
 
     if (styles && tabOverflow === 'scroll') {
       if (variant === 'default') {
-        return px(styles?.scrollOverlayWidthDefault);
+        return px(styles === null || styles === void 0 ? void 0 : styles.scrollOverlayWidthDefault);
       } else {
-        return px(styles?.scrollOverlayWidthSecondary);
+        return px(styles === null || styles === void 0 ? void 0 : styles.scrollOverlayWidthSecondary);
       }
     }
 
@@ -317,17 +323,17 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
     const panels = [];
     const tabs = [];
 
-    const _this$props2 = this.props,
-          children = _this$props2.children,
-          elementRef = _this$props2.elementRef,
-          maxWidth = _this$props2.maxWidth,
-          variant = _this$props2.variant,
-          margin = _this$props2.margin,
-          screenReaderLabel = _this$props2.screenReaderLabel,
-          onRequestTabChange = _this$props2.onRequestTabChange,
-          tabOverflow = _this$props2.tabOverflow,
-          styles = _this$props2.styles,
-          props = _objectWithoutProperties(_this$props2, _excluded);
+    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 = _objectWithoutProperties(_this$props4, _excluded);
 
     const selectedChildIndex = React.Children.toArray(children).filter(child => matchComponentTypes(child, [Panel])).findIndex(child => child.props.isSelected && !child.props.isDisabled);
     let index = 0;
@@ -347,19 +353,19 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
 
     const scrollOverlay = selectedIndex !== React.Children.count(children) - 1 ? jsx("span", {
       key: "overlay",
-      css: styles?.scrollOverlay
+      css: styles === null || styles === void 0 ? void 0 : styles.scrollOverlay
     }) : null;
     const scrollFadeEls = [// spacer element prevents final Tab from being obscured by scroll overflow gradient
     jsx("span", {
       key: "spacer",
-      css: styles?.scrollSpacer
+      css: styles === null || styles === void 0 ? void 0 : styles.scrollSpacer
     }), scrollOverlay];
     return jsx(View, Object.assign({}, passthroughProps(props), {
       elementRef: this.handleRef,
       maxWidth: maxWidth,
       margin: margin,
       as: "div",
-      css: styles?.container
+      css: styles === null || styles === void 0 ? void 0 : styles.container
     }), jsx(Focusable, {
       ref: this.handleFocusableRef
     }, () => jsx(View, {
@@ -367,15 +373,15 @@ let Tabs = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = tex
       position: "relative",
       borderRadius: "medium",
       shouldAnimateFocus: false,
-      css: styles?.tabs
+      css: styles === null || styles === void 0 ? void 0 : styles.tabs
     }, jsx(View, {
       as: "div",
       role: "tablist",
-      css: styles?.tabList,
+      css: styles === null || styles === void 0 ? void 0 : styles.tabList,
       "aria-label": screenReaderLabel,
       elementRef: this.handleTabListRef
     }, tabs, withScrollFade && scrollFadeEls))), jsx("div", {
-      css: styles?.panelsContainer
+      css: styles === null || styles === void 0 ? void 0 : styles.panelsContainer
     }, panels));
   }
 

package/es/Tabs/theme.js

@@ -32,11 +32,11 @@ const generateComponentTheme = theme => {
         colors = theme.colors,
         stacking = theme.stacking;
   const componentVariables = {
-    defaultBackground: colors?.backgroundLightest,
-    scrollFadeColor: colors?.backgroundLightest,
-    tabVerticalOffset: borders?.widthSmall,
+    defaultBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    scrollFadeColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    tabVerticalOffset: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
     // gives effect of selected tab "bar" overlaying bottom border
-    zIndex: stacking?.above,
+    zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.above,
     scrollOverlayWidthDefault: '5rem',
     // has to be 4 times the horizontal padding of the default style tab
     scrollOverlayWidthSecondary: '3rem' // has to be 3 times the horizontal padding of the secondary style tab

package/lib/Tabs/Panel/index.js

@@ -52,31 +52,35 @@ let Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   render() {
-    const _this$props = this.props,
-          labelledBy = _this$props.labelledBy,
-          variant = _this$props.variant,
-          id = _this$props.id,
-          maxHeight = _this$props.maxHeight,
-          minHeight = _this$props.minHeight,
-          padding = _this$props.padding,
-          textAlign = _this$props.textAlign,
-          children = _this$props.children,
-          elementRef = _this$props.elementRef,
-          isDisabled = _this$props.isDisabled,
-          isSelected = _this$props.isSelected,
-          styles = _this$props.styles,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props3 = this.props,
+          labelledBy = _this$props3.labelledBy,
+          variant = _this$props3.variant,
+          id = _this$props3.id,
+          maxHeight = _this$props3.maxHeight,
+          minHeight = _this$props3.minHeight,
+          padding = _this$props3.padding,
+          textAlign = _this$props3.textAlign,
+          children = _this$props3.children,
+          elementRef = _this$props3.elementRef,
+          isDisabled = _this$props3.isDisabled,
+          isSelected = _this$props3.isSelected,
+          styles = _this$props3.styles,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     const isHidden = !isSelected || !!isDisabled;
     return (0, _emotion.jsx)("div", Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
-      css: styles?.panel,
+      css: styles === null || styles === void 0 ? void 0 : styles.panel,
       role: "tabpanel",
       id: id,
       "aria-labelledby": labelledBy,
@@ -88,7 +92,7 @@ let Panel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
       unmountOnExit: true,
       transitionExit: false
     }, (0, _emotion.jsx)(_View.View, {
-      css: styles?.content,
+      css: styles === null || styles === void 0 ? void 0 : styles.content,
       maxHeight: maxHeight,
       minHeight: minHeight,
       as: "div",

package/lib/Tabs/Panel/theme.js

@@ -45,15 +45,15 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontSize: typography?.fontSizeMedium,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    lineHeight: typography?.lineHeight,
-    color: colors?.textDarkest,
-    background: colors?.backgroundLightest,
-    borderColor: colors?.borderMedium,
-    borderWidth: borders?.widthSmall,
-    borderStyle: borders?.style
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight,
+    color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
+    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/lib/Tabs/Tab/index.js

@@ -82,30 +82,34 @@ let Tab = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    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() {
-    this.props.makeStyles?.();
+    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$props3 = this.props,
-          id = _this$props3.id,
-          variant = _this$props3.variant,
-          isSelected = _this$props3.isSelected,
-          isDisabled = _this$props3.isDisabled,
-          controls = _this$props3.controls,
-          children = _this$props3.children,
-          styles = _this$props3.styles,
-          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+    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);
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
       as: "div",
       role: "tab",
       id: id,
       onClick: this.handleClick,
       onKeyDown: this.handleKeyDown,
-      css: styles?.tab,
+      css: styles === null || styles === void 0 ? void 0 : styles.tab,
       "aria-selected": isSelected ? 'true' : void 0,
       "aria-disabled": isDisabled ? 'true' : void 0,
       "aria-controls": controls,

package/lib/Tabs/Tab/theme.js

@@ -47,17 +47,17 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    lineHeight: typography?.lineHeightCondensed,
-    fontSize: typography?.fontSizeMedium,
-    defaultColor: colors?.textDarkest,
-    defaultHoverBorderColor: colors?.borderMedium,
-    defaultSelectedBorderColor: colors?.borderBrand,
-    secondaryColor: colors?.textDarkest,
-    secondarySelectedBackground: colors?.backgroundLightest,
-    secondarySelectedBorderColor: colors?.borderMedium,
-    zIndex: stacking?.above
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    defaultColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    defaultHoverBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
+    defaultSelectedBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
+    secondaryColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    secondarySelectedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    secondarySelectedBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
+    zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.above
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/lib/Tabs/index.js

@@ -131,6 +131,8 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
   componentDidMount() {
+    var _this$props$makeStyle, _this$props;
+
     if (this.props.tabOverflow === 'scroll' && this._tabList) {
       this.startScrollOverflow();
     }
@@ -139,10 +141,12 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       this.focus();
     }
 
-    this.props.makeStyles?.();
+    (_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
@@ -170,7 +174,7 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       this.showActiveTabIfOverlayed(activeTabEl);
     }
 
-    this.props.makeStyles?.();
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   componentWillUnmount() {
@@ -189,7 +193,9 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
         const newWidth = entry.contentRect.width;
 
         if (this._tabListPosition.width !== newWidth) {
-          this._debounced?.();
+          var _this$_debounced;
+
+          (_this$_debounced = this._debounced) === null || _this$_debounced === void 0 ? void 0 : _this$_debounced.call(this);
         }
       }
     });
@@ -208,16 +214,16 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
   getOverlayWidth() {
-    const _this$props = this.props,
-          variant = _this$props.variant,
-          tabOverflow = _this$props.tabOverflow,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          variant = _this$props3.variant,
+          tabOverflow = _this$props3.tabOverflow,
+          styles = _this$props3.styles;
 
     if (styles && tabOverflow === 'scroll') {
       if (variant === 'default') {
-        return (0, _px.px)(styles?.scrollOverlayWidthDefault);
+        return (0, _px.px)(styles === null || styles === void 0 ? void 0 : styles.scrollOverlayWidthDefault);
       } else {
-        return (0, _px.px)(styles?.scrollOverlayWidthSecondary);
+        return (0, _px.px)(styles === null || styles === void 0 ? void 0 : styles.scrollOverlayWidthSecondary);
       }
     }
 
@@ -331,17 +337,17 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   render() {
     const panels = [];
     const tabs = [];
-    const _this$props2 = this.props,
-          children = _this$props2.children,
-          elementRef = _this$props2.elementRef,
-          maxWidth = _this$props2.maxWidth,
-          variant = _this$props2.variant,
-          margin = _this$props2.margin,
-          screenReaderLabel = _this$props2.screenReaderLabel,
-          onRequestTabChange = _this$props2.onRequestTabChange,
-          tabOverflow = _this$props2.tabOverflow,
-          styles = _this$props2.styles,
-          props = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
+    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);
 
     const selectedChildIndex = _react.default.Children.toArray(children).filter(child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Panel.Panel])).findIndex(child => child.props.isSelected && !child.props.isDisabled);
 
@@ -364,19 +370,19 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
 
     const scrollOverlay = selectedIndex !== _react.default.Children.count(children) - 1 ? (0, _emotion.jsx)("span", {
       key: "overlay",
-      css: styles?.scrollOverlay
+      css: styles === null || styles === void 0 ? void 0 : styles.scrollOverlay
     }) : null;
     const scrollFadeEls = [// spacer element prevents final Tab from being obscured by scroll overflow gradient
     (0, _emotion.jsx)("span", {
       key: "spacer",
-      css: styles?.scrollSpacer
+      css: styles === null || styles === void 0 ? void 0 : styles.scrollSpacer
     }), scrollOverlay];
     return (0, _emotion.jsx)(_View.View, Object.assign({}, (0, _passthroughProps.passthroughProps)(props), {
       elementRef: this.handleRef,
       maxWidth: maxWidth,
       margin: margin,
       as: "div",
-      css: styles?.container
+      css: styles === null || styles === void 0 ? void 0 : styles.container
     }), (0, _emotion.jsx)(_Focusable.Focusable, {
       ref: this.handleFocusableRef
     }, () => (0, _emotion.jsx)(_View.View, {
@@ -384,15 +390,15 @@ let Tabs = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
       position: "relative",
       borderRadius: "medium",
       shouldAnimateFocus: false,
-      css: styles?.tabs
+      css: styles === null || styles === void 0 ? void 0 : styles.tabs
     }, (0, _emotion.jsx)(_View.View, {
       as: "div",
       role: "tablist",
-      css: styles?.tabList,
+      css: styles === null || styles === void 0 ? void 0 : styles.tabList,
       "aria-label": screenReaderLabel,
       elementRef: this.handleTabListRef
     }, tabs, withScrollFade && scrollFadeEls))), (0, _emotion.jsx)("div", {
-      css: styles?.panelsContainer
+      css: styles === null || styles === void 0 ? void 0 : styles.panelsContainer
     }, panels));
   }
 

package/lib/Tabs/theme.js

@@ -39,11 +39,11 @@ const generateComponentTheme = theme => {
         colors = theme.colors,
         stacking = theme.stacking;
   const componentVariables = {
-    defaultBackground: colors?.backgroundLightest,
-    scrollFadeColor: colors?.backgroundLightest,
-    tabVerticalOffset: borders?.widthSmall,
+    defaultBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    scrollFadeColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
+    tabVerticalOffset: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
     // gives effect of selected tab "bar" overlaying bottom border
-    zIndex: stacking?.above,
+    zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.above,
     scrollOverlayWidthDefault: '5rem',
     // has to be 4 times the horizontal padding of the default style tab
     scrollOverlayWidthSecondary: '3rem' // has to be 3 times the horizontal padding of the secondary style tab

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tabs",
-  "version": "8.18.0",
+  "version": "8.18.1-snapshot.12+ca14b3dc8",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,28 +23,28 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.18.0",
-    "@instructure/ui-color-utils": "8.18.0",
-    "@instructure/ui-test-locator": "8.18.0",
-    "@instructure/ui-test-utils": "8.18.0",
-    "@instructure/ui-themes": "8.18.0"
+    "@instructure/ui-babel-preset": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-color-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-test-locator": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-test-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-themes": "8.18.1-snapshot.12+ca14b3dc8"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.18.0",
-    "@instructure/debounce": "8.18.0",
-    "@instructure/emotion": "8.18.0",
-    "@instructure/shared-types": "8.18.0",
-    "@instructure/ui-dom-utils": "8.18.0",
-    "@instructure/ui-focusable": "8.18.0",
-    "@instructure/ui-i18n": "8.18.0",
-    "@instructure/ui-motion": "8.18.0",
-    "@instructure/ui-prop-types": "8.18.0",
-    "@instructure/ui-react-utils": "8.18.0",
-    "@instructure/ui-testable": "8.18.0",
-    "@instructure/ui-utils": "8.18.0",
-    "@instructure/ui-view": "8.18.0",
-    "@instructure/uid": "8.18.0",
+    "@instructure/console": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/debounce": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/emotion": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/shared-types": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-dom-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-focusable": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-i18n": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-motion": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-prop-types": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-react-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-testable": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-view": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/uid": "8.18.1-snapshot.12+ca14b3dc8",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -54,5 +54,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "ca14b3dc8f0315daef7b86aa05f711e6d6684c58"
 }