@instructure/ui-tabs 11.7.3-snapshot-7 → 11.7.3-snapshot-26

package/CHANGELOG.md

@@ -3,11 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.3-snapshot-7](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-7) (2026-04-29)
+## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
 
 
 ### Bug Fixes
 
+* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 * **ui-tabs:** fix tabs panel layout when unmountOnExit is false ([826ff62](https://github.com/instructure/instructure-ui/commit/826ff62fba56bc0cadd6995b366e3ca505b1b6c1))
 
 

package/es/Tabs/v1/Panel/index.js

@@ -1,6 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["labelledBy", "variant", "id", "maxHeight", "minHeight", "padding", "textAlign", "children", "elementRef", "isDisabled", "isSelected", "styles", "active", "unmountOnExit", "tabIndex"];
-var _dec, _class, _Panel;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -40,62 +38,73 @@ id: Tabs.Panel
 ---
 **/
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Panel = class Panel extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      const elementRef = this.props.elementRef;
-      this.ref = el;
-      if (typeof elementRef === 'function') {
-        elementRef(el);
-      }
-    };
-  }
+let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Panel extends Component {
+  static displayName = "Panel";
+  static componentId = 'Tabs.Panel';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    isDisabled: false,
+    textAlign: 'start',
+    variant: 'default',
+    isSelected: false,
+    padding: 'small',
+    active: false,
+    unmountOnExit: true
+  };
   componentDidMount() {
-    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, {
+    this.props.makeStyles?.({
       isHidden: this.isHidden
     });
   }
   componentDidUpdate() {
-    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, {
+    this.props.makeStyles?.({
       isHidden: this.isHidden
     });
   }
+  ref = null;
   get isHidden() {
-    const _this$props3 = this.props,
-      isDisabled = _this$props3.isDisabled,
-      isSelected = _this$props3.isSelected;
+    const {
+      isDisabled,
+      isSelected
+    } = this.props;
     return !isSelected || !!isDisabled;
   }
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   render() {
-    const _this$props4 = this.props,
-      labelledBy = _this$props4.labelledBy,
-      variant = _this$props4.variant,
-      id = _this$props4.id,
-      maxHeight = _this$props4.maxHeight,
-      minHeight = _this$props4.minHeight,
-      padding = _this$props4.padding,
-      textAlign = _this$props4.textAlign,
-      children = _this$props4.children,
-      elementRef = _this$props4.elementRef,
-      isDisabled = _this$props4.isDisabled,
-      isSelected = _this$props4.isSelected,
-      styles = _this$props4.styles,
-      active = _this$props4.active,
-      unmountOnExit = _this$props4.unmountOnExit,
-      tabIndex = _this$props4.tabIndex,
-      props = _objectWithoutProperties(_this$props4, _excluded);
+    const {
+      labelledBy,
+      variant,
+      id,
+      maxHeight,
+      minHeight,
+      padding,
+      textAlign,
+      children,
+      elementRef,
+      isDisabled,
+      isSelected,
+      styles,
+      active,
+      unmountOnExit,
+      tabIndex,
+      ...props
+    } = this.props;
     return _jsx("div", {
       ...passthroughProps(props),
-      css: styles === null || styles === void 0 ? void 0 : styles.panel,
+      css: styles?.panel,
       role: "tabpanel",
       id: id,
       "aria-labelledby": labelledBy,
-      "aria-hidden": this.isHidden ? 'true' : void 0,
-      tabIndex: this.isHidden ? void 0 : tabIndex,
+      "aria-hidden": this.isHidden ? 'true' : undefined,
+      tabIndex: this.isHidden ? undefined : tabIndex,
       ref: this.handleRef,
       children: _jsx(Transition, {
         type: "fade",
@@ -103,7 +112,7 @@ let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
         unmountOnExit: unmountOnExit,
         transitionExit: false,
         children: _jsx(View, {
-          css: styles === null || styles === void 0 ? void 0 : styles.content,
+          css: styles?.content,
           maxHeight: maxHeight,
           minHeight: minHeight,
           as: "div",
@@ -114,14 +123,6 @@ let Panel = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
       })
     });
   }
-}, _Panel.displayName = "Panel", _Panel.componentId = 'Tabs.Panel', _Panel.allowedProps = allowedProps, _Panel.defaultProps = {
-  isDisabled: false,
-  textAlign: 'start',
-  variant: 'default',
-  isSelected: false,
-  padding: 'small',
-  active: false,
-  unmountOnExit: true
-}, _Panel)) || _class);
+}) || _class);
 export default Panel;
 export { Panel };

package/es/Tabs/v1/Panel/styles.js

@@ -33,9 +33,13 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, state) => {
-  const maxHeight = props.maxHeight,
-    isSelected = props.isSelected;
-  const isHidden = state.isHidden;
+  const {
+    maxHeight,
+    isSelected
+  } = props;
+  const {
+    isHidden
+  } = state;
   return {
     panel: {
       label: 'panel',

package/es/Tabs/v1/Panel/theme.js

@@ -28,11 +28,12 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3;
-  const typography = theme.typography,
-    colors = theme.colors,
-    borders = theme.borders,
-    themeName = theme.key;
+  const {
+    typography,
+    colors,
+    borders,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       color: theme['ic-brand-font-color-dark'],
@@ -40,15 +41,15 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    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$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-    background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
-    borderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey3045,
-    borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
-    borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
+    fontSize: typography?.fontSizeMedium,
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightNormal,
+    lineHeight: typography?.lineHeight,
+    color: colors?.contrasts?.grey125125,
+    background: colors?.contrasts?.white1010,
+    borderColor: colors?.contrasts?.grey3045,
+    borderWidth: borders?.widthSmall,
+    borderStyle: borders?.style,
     defaultOverflowY: 'auto',
     focusOutlineColor: colors.contrasts.blue4570
   };

package/es/Tabs/v1/Tab/index.js

@@ -1,6 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["id", "variant", "isSelected", "isDisabled", "controls", "children", "styles"];
-var _dec, _class, _Tab;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -39,60 +37,66 @@ id: Tabs.Tab
 ---
 **/
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Tab = class Tab extends Component {
-  constructor(...args) {
-    super(...args);
-    this.handleClick = event => {
-      const _this$props = this.props,
-        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,
-          id
-        });
-      }
-    };
-    this.handleKeyDown = event => {
-      const _this$props2 = this.props,
-        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,
-          id
-        });
-      }
-    };
-  }
+let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Tab extends Component {
+  static displayName = "Tab";
+  static componentId = 'Tabs.Tab';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    variant: 'default',
+    isDisabled: false,
+    isSelected: false
+  };
   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);
+    this.props.makeStyles?.();
   }
   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);
+    this.props.makeStyles?.();
   }
+  handleClick = event => {
+    const {
+      onClick,
+      index,
+      id,
+      isDisabled
+    } = this.props;
+    if (isDisabled) {
+      return;
+    }
+    if (typeof onClick === 'function') {
+      onClick(event, {
+        index,
+        id
+      });
+    }
+  };
+  handleKeyDown = event => {
+    const {
+      onKeyDown,
+      index,
+      id,
+      isDisabled
+    } = this.props;
+    if (isDisabled) {
+      return;
+    }
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event, {
+        index,
+        id
+      });
+    }
+  };
   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 = _objectWithoutProperties(_this$props5, _excluded);
+    const {
+      id,
+      variant,
+      isSelected,
+      isDisabled,
+      controls,
+      children,
+      styles,
+      ...props
+    } = this.props;
     return _jsx(View, {
       ...passthroughProps(props),
       as: "div",
@@ -100,20 +104,16 @@ let Tab = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
       id: id,
       onClick: this.handleClick,
       onKeyDown: this.handleKeyDown,
-      css: styles === null || styles === void 0 ? void 0 : styles.tab,
-      "aria-selected": isSelected ? 'true' : void 0,
-      "aria-disabled": isDisabled ? 'true' : void 0,
+      css: styles?.tab,
+      "aria-selected": isSelected ? 'true' : undefined,
+      "aria-disabled": isDisabled ? 'true' : undefined,
       "aria-controls": controls,
-      tabIndex: isSelected && !isDisabled ? 0 : void 0,
+      tabIndex: isSelected && !isDisabled ? 0 : undefined,
       position: "relative",
       focusPosition: "inset",
       children: callRenderProp(children)
     });
   }
-}, _Tab.displayName = "Tab", _Tab.componentId = 'Tabs.Tab', _Tab.allowedProps = allowedProps, _Tab.defaultProps = {
-  variant: 'default',
-  isDisabled: false,
-  isSelected: false
-}, _Tab)) || _class);
+}) || _class);
 export default Tab;
 export { Tab };

package/es/Tabs/v1/Tab/styles.js

@@ -42,10 +42,12 @@ const selectedTab = keyframes`
  * @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,
-    isOverflowScroll = props.isOverflowScroll;
+  const {
+    variant,
+    isSelected,
+    isDisabled,
+    isOverflowScroll
+  } = props;
   const variants = {
     default: {
       padding: '1rem 1.25rem',

package/es/Tabs/v1/Tab/theme.js

@@ -28,11 +28,12 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6;
-  const colors = theme.colors,
-    typography = theme.typography,
-    stacking = theme.stacking,
-    themeName = theme.key;
+  const {
+    colors,
+    typography,
+    stacking,
+    key: themeName
+  } = theme;
   const themeSpecificStyle = {
     canvas: {
       defaultColor: theme['ic-brand-font-color-dark'],
@@ -41,17 +42,17 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    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$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
-    defaultHoverBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey1214,
-    defaultSelectedBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
-    secondaryColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.grey125125,
-    secondarySelectedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
-    secondarySelectedBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey3045,
-    zIndex: stacking === null || stacking === void 0 ? void 0 : stacking.above
+    fontFamily: typography?.fontFamily,
+    fontWeight: typography?.fontWeightNormal,
+    lineHeight: typography?.lineHeightCondensed,
+    fontSize: typography?.fontSizeMedium,
+    defaultColor: colors?.contrasts?.grey125125,
+    defaultHoverBorderColor: colors?.contrasts?.grey1214,
+    defaultSelectedBorderColor: colors?.contrasts?.blue4570,
+    secondaryColor: colors?.contrasts?.grey125125,
+    secondarySelectedBackground: colors?.contrasts?.white1010,
+    secondarySelectedBorderColor: colors?.contrasts?.grey3045,
+    zIndex: stacking?.above
   };
   return {
     ...componentVariables,