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

package/CHANGELOG.md

@@ -3,9 +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)
 
-**Note:** Version bump only for package @instructure/ui-grid
+
+### Bug Fixes
+
+* **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
 
 
 

package/es/Grid/v1/index.js

@@ -1,7 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["styles", "makeStyles"],
-  _excluded2 = ["styles"];
-var _dec, _class, _Grid;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -40,27 +37,37 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 category: components
 ---
 **/
-let Grid = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_Grid = class Grid extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+let Grid = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Grid extends Component {
+  static displayName = "Grid";
+  static componentId = 'Grid';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    colSpacing: 'medium',
+    rowSpacing: 'medium',
+    hAlign: 'start',
+    startAt: 'small',
+    vAlign: 'top',
+    visualDebug: false,
+    children: null
+  };
+  static Row = GridRow;
+  static Col = GridCol;
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
   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?.();
   }
   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?.();
   }
   renderChildren() {
-    const _this$props3 = this.props,
-      styles = _this$props3.styles,
-      makeStyles = _this$props3.makeStyles,
-      props = _objectWithoutProperties(_this$props3, _excluded);
+    const {
+      styles,
+      makeStyles,
+      ...props
+    } = this.props;
     const children = Children.toArray(this.props.children);
     return children.map((child, index) => {
       if (matchComponentTypes(child, [GridRow])) {
@@ -75,25 +82,18 @@ let Grid = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
     });
   }
   render() {
-    const _this$props4 = this.props,
-      styles = _this$props4.styles,
-      restProps = _objectWithoutProperties(_this$props4, _excluded2);
+    const {
+      styles,
+      ...restProps
+    } = this.props;
     const props = omitProps(restProps, Grid.allowedProps);
     return _jsx("span", {
       ...props,
-      css: styles === null || styles === void 0 ? void 0 : styles.grid,
+      css: styles?.grid,
       ref: this.handleRef,
       children: this.renderChildren()
     });
   }
-}, _Grid.displayName = "Grid", _Grid.componentId = 'Grid', _Grid.allowedProps = allowedProps, _Grid.defaultProps = {
-  colSpacing: 'medium',
-  rowSpacing: 'medium',
-  hAlign: 'start',
-  startAt: 'small',
-  vAlign: 'top',
-  visualDebug: false,
-  children: null
-}, _Grid.Row = GridRow, _Grid.Col = GridCol, _Grid)) || _class);
+}) || _class);
 export default Grid;
 export { Grid, GridRow, GridCol };

package/es/Grid/v1/styles.js

@@ -33,8 +33,10 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const startAt = props.startAt,
-    visualDebug = props.visualDebug;
+  const {
+    startAt,
+    visualDebug
+  } = props;
   const getStartAtVariants = breakpoint => !!startAt && startAt === breakpoint ? {
     boxSizing: 'border-box'
   } : {};

package/es/Grid/v1/theme.js

@@ -28,12 +28,14 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  const spacing = theme.spacing,
-    media = theme.media;
+  const {
+    spacing,
+    media
+  } = theme;
   const componentVariables = {
-    spacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    spacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
-    spacingLarge: spacing === null || spacing === void 0 ? void 0 : spacing.large,
+    spacingSmall: spacing?.small,
+    spacingMedium: spacing?.medium,
+    spacingLarge: spacing?.large,
     ...media
   };
   return {

package/es/Grid/v2/index.js

@@ -1,7 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["styles", "makeStyles"],
-  _excluded2 = ["styles"];
-var _dec, _class, _Grid;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -39,27 +36,37 @@ import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 category: components
 ---
 **/
-let Grid = (_dec = withStyle(generateStyle), _dec(_class = (_Grid = class Grid extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+let Grid = (_dec = withStyle(generateStyle), _dec(_class = class Grid extends Component {
+  static displayName = "Grid";
+  static componentId = 'Grid';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    colSpacing: 'medium',
+    rowSpacing: 'medium',
+    hAlign: 'start',
+    startAt: 'small',
+    vAlign: 'top',
+    visualDebug: false,
+    children: null
+  };
+  static Row = GridRow;
+  static Col = GridCol;
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
   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?.();
   }
   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?.();
   }
   renderChildren() {
-    const _this$props3 = this.props,
-      styles = _this$props3.styles,
-      makeStyles = _this$props3.makeStyles,
-      props = _objectWithoutProperties(_this$props3, _excluded);
+    const {
+      styles,
+      makeStyles,
+      ...props
+    } = this.props;
     const children = Children.toArray(this.props.children);
     return children.map((child, index) => {
       if (matchComponentTypes(child, [GridRow])) {
@@ -74,25 +81,18 @@ let Grid = (_dec = withStyle(generateStyle), _dec(_class = (_Grid = class Grid e
     });
   }
   render() {
-    const _this$props4 = this.props,
-      styles = _this$props4.styles,
-      restProps = _objectWithoutProperties(_this$props4, _excluded2);
+    const {
+      styles,
+      ...restProps
+    } = this.props;
     const props = omitProps(restProps, Grid.allowedProps);
     return _jsx("span", {
       ...props,
-      css: styles === null || styles === void 0 ? void 0 : styles.grid,
+      css: styles?.grid,
       ref: this.handleRef,
       children: this.renderChildren()
     });
   }
-}, _Grid.displayName = "Grid", _Grid.componentId = 'Grid', _Grid.allowedProps = allowedProps, _Grid.defaultProps = {
-  colSpacing: 'medium',
-  rowSpacing: 'medium',
-  hAlign: 'start',
-  startAt: 'small',
-  vAlign: 'top',
-  visualDebug: false,
-  children: null
-}, _Grid.Row = GridRow, _Grid.Col = GridCol, _Grid)) || _class);
+}) || _class);
 export default Grid;
 export { Grid, GridRow, GridCol };

package/es/Grid/v2/styles.js

@@ -33,8 +33,10 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const startAt = props.startAt,
-    visualDebug = props.visualDebug;
+  const {
+    startAt,
+    visualDebug
+  } = props;
   const getStartAtVariants = breakpoint => !!startAt && startAt === breakpoint ? {
     boxSizing: 'border-box'
   } : {};

package/es/GridCol/v1/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _GridCol;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -37,20 +37,30 @@ parent: Grid
 id: Grid.Col
 ---
 **/
-let GridCol = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_GridCol = class GridCol 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 GridCol = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class GridCol extends Component {
+  static displayName = "GridCol";
+  static componentId = 'Grid.Col';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    textAlign: 'inherit',
+    children: null,
+    isLastCol: false,
+    isLastRow: false
+  };
+  ref = null;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   widthCheck() {
-    const width = this.props.width;
+    const {
+      width
+    } = this.props;
     let shouldWarn = false;
     if (width) {
       if (typeof width === 'number' && width <= 0) {
@@ -70,32 +80,26 @@ let GridCol = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cl
     }
   }
   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?.();
     this.widthCheck();
   }
   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?.();
     this.widthCheck();
   }
   render() {
-    const _this$props3 = this.props,
-      children = _this$props3.children,
-      styles = _this$props3.styles;
+    const {
+      children,
+      styles
+    } = this.props;
     const props = omitProps(this.props, GridCol.allowedProps);
     return _jsx("span", {
       ...props,
       ref: this.handleRef,
-      css: styles === null || styles === void 0 ? void 0 : styles.gridCol,
+      css: styles?.gridCol,
       children: children
     });
   }
-}, _GridCol.displayName = "GridCol", _GridCol.componentId = 'Grid.Col', _GridCol.allowedProps = allowedProps, _GridCol.defaultProps = {
-  textAlign: 'inherit',
-  children: null,
-  isLastCol: false,
-  isLastRow: false
-}, _GridCol)) || _class);
+}) || _class);
 export default GridCol;
 export { GridCol };

package/es/GridCol/v1/styles.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 /*
  * The MIT License (MIT)
  *
@@ -33,14 +34,16 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const vAlign = props.vAlign,
-    textAlign = props.textAlign,
-    rowSpacing = props.rowSpacing,
-    colSpacing = props.colSpacing,
-    isLastRow = props.isLastRow,
-    isLastCol = props.isLastCol,
-    startAt = props.startAt,
-    visualDebug = props.visualDebug;
+  const {
+    vAlign,
+    textAlign,
+    rowSpacing,
+    colSpacing,
+    isLastRow,
+    isLastCol,
+    startAt,
+    visualDebug
+  } = props;
   const rowSpacingVariants = {
     small: {
       marginBottom: componentTheme.spacingSmall
@@ -118,7 +121,9 @@ const generateStyle = (componentTheme, props) => {
     return enabledBreakpoints().includes(breakpoint);
   };
   const getColSize = breakpoint => {
-    let width = props.width;
+    let {
+      width
+    } = props;
     if (!width) return;
     if (width && typeof width === 'object') {
       width = width[breakpoint === 'x-large' ? 'xLarge' : breakpoint];
@@ -126,7 +131,9 @@ const generateStyle = (componentTheme, props) => {
     return width;
   };
   const getColOffset = breakpoint => {
-    let offset = props.offset;
+    let {
+      offset
+    } = props;
     if (!offset) return;
     if (offset && typeof offset === 'object') {
       offset = offset[breakpoint === 'x-large' ? 'xLarge' : breakpoint];

package/es/GridCol/v1/theme.js

@@ -28,12 +28,14 @@
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  const spacing = theme.spacing,
-    media = theme.media;
+  const {
+    spacing,
+    media
+  } = theme;
   const componentVariables = {
-    spacingSmall: spacing === null || spacing === void 0 ? void 0 : spacing.small,
-    spacingMedium: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
-    spacingLarge: spacing === null || spacing === void 0 ? void 0 : spacing.large,
+    spacingSmall: spacing?.small,
+    spacingMedium: spacing?.medium,
+    spacingLarge: spacing?.large,
     ...media
   };
   return {

package/es/GridCol/v2/index.js

@@ -1,4 +1,4 @@
-var _dec, _class, _GridCol;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -36,20 +36,30 @@ parent: Grid
 id: Grid.Col
 ---
 **/
-let GridCol = (_dec = withStyle(generateStyle), _dec(_class = (_GridCol = class GridCol 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 GridCol = (_dec = withStyle(generateStyle), _dec(_class = class GridCol extends Component {
+  static displayName = "GridCol";
+  static componentId = 'Grid.Col';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    textAlign: 'inherit',
+    children: null,
+    isLastCol: false,
+    isLastRow: false
+  };
+  ref = null;
+  handleRef = el => {
+    const {
+      elementRef
+    } = this.props;
+    this.ref = el;
+    if (typeof elementRef === 'function') {
+      elementRef(el);
+    }
+  };
   widthCheck() {
-    const width = this.props.width;
+    const {
+      width
+    } = this.props;
     let shouldWarn = false;
     if (width) {
       if (typeof width === 'number' && width <= 0) {
@@ -69,32 +79,26 @@ let GridCol = (_dec = withStyle(generateStyle), _dec(_class = (_GridCol = class
     }
   }
   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?.();
     this.widthCheck();
   }
   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?.();
     this.widthCheck();
   }
   render() {
-    const _this$props3 = this.props,
-      children = _this$props3.children,
-      styles = _this$props3.styles;
+    const {
+      children,
+      styles
+    } = this.props;
     const props = omitProps(this.props, GridCol.allowedProps);
     return _jsx("span", {
       ...props,
       ref: this.handleRef,
-      css: styles === null || styles === void 0 ? void 0 : styles.gridCol,
+      css: styles?.gridCol,
       children: children
     });
   }
-}, _GridCol.displayName = "GridCol", _GridCol.componentId = 'Grid.Col', _GridCol.allowedProps = allowedProps, _GridCol.defaultProps = {
-  textAlign: 'inherit',
-  children: null,
-  isLastCol: false,
-  isLastRow: false
-}, _GridCol)) || _class);
+}) || _class);
 export default GridCol;
 export { GridCol };

package/es/GridCol/v2/styles.js

@@ -1,3 +1,4 @@
+import "core-js/modules/es.array.includes.js";
 /*
  * The MIT License (MIT)
  *
@@ -33,14 +34,16 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const vAlign = props.vAlign,
-    textAlign = props.textAlign,
-    rowSpacing = props.rowSpacing,
-    colSpacing = props.colSpacing,
-    isLastRow = props.isLastRow,
-    isLastCol = props.isLastCol,
-    startAt = props.startAt,
-    visualDebug = props.visualDebug;
+  const {
+    vAlign,
+    textAlign,
+    rowSpacing,
+    colSpacing,
+    isLastRow,
+    isLastCol,
+    startAt,
+    visualDebug
+  } = props;
   const rowSpacingVariants = {
     small: {
       marginBottom: componentTheme.spacingSmall
@@ -118,7 +121,9 @@ const generateStyle = (componentTheme, props) => {
     return enabledBreakpoints().includes(breakpoint);
   };
   const getColSize = breakpoint => {
-    let width = props.width;
+    let {
+      width
+    } = props;
     if (!width) return;
     if (width && typeof width === 'object') {
       width = width[breakpoint === 'x-large' ? 'xLarge' : breakpoint];
@@ -126,7 +131,9 @@ const generateStyle = (componentTheme, props) => {
     return width;
   };
   const getColOffset = breakpoint => {
-    let offset = props.offset;
+    let {
+      offset
+    } = props;
     if (!offset) return;
     if (offset && typeof offset === 'object') {
       offset = offset[breakpoint === 'x-large' ? 'xLarge' : breakpoint];

package/es/GridRow/v1/index.js

@@ -1,7 +1,4 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["styles", "makeStyles"],
-  _excluded2 = ["styles"];
-var _dec, _class, _GridRow;
+var _dec, _class;
 /*
  * The MIT License (MIT)
  *
@@ -40,27 +37,30 @@ parent: Grid
 id: Grid.Row
 ---
 **/
-let GridRow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_GridRow = class GridRow extends Component {
-  constructor(...args) {
-    super(...args);
-    this.ref = null;
-    this.handleRef = el => {
-      this.ref = el;
-    };
-  }
+let GridRow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class GridRow extends Component {
+  static displayName = "GridRow";
+  static componentId = 'Grid.Row';
+  static allowedProps = allowedProps;
+  static defaultProps = {
+    children: null,
+    isLastRow: false
+  };
+  ref = null;
+  handleRef = el => {
+    this.ref = el;
+  };
   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?.();
   }
   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?.();
   }
   renderChildren() {
-    const _this$props3 = this.props,
-      styles = _this$props3.styles,
-      makeStyles = _this$props3.makeStyles,
-      props = _objectWithoutProperties(_this$props3, _excluded);
+    const {
+      styles,
+      makeStyles,
+      ...props
+    } = this.props;
     return Children.map(this.props.children, (child, index) => {
       if (matchComponentTypes(child, [GridCol])) {
         return safeCloneElement(child, {
@@ -75,20 +75,18 @@ let GridRow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cl
     });
   }
   render() {
-    const _this$props4 = this.props,
-      styles = _this$props4.styles,
-      restProps = _objectWithoutProperties(_this$props4, _excluded2);
+    const {
+      styles,
+      ...restProps
+    } = this.props;
     const props = omitProps(restProps, GridRow.allowedProps);
     return _jsx("span", {
       ...props,
-      css: styles === null || styles === void 0 ? void 0 : styles.gridRow,
+      css: styles?.gridRow,
       ref: this.handleRef,
       children: this.renderChildren()
     });
   }
-}, _GridRow.displayName = "GridRow", _GridRow.componentId = 'Grid.Row', _GridRow.allowedProps = allowedProps, _GridRow.defaultProps = {
-  children: null,
-  isLastRow: false
-}, _GridRow)) || _class);
+}) || _class);
 export default GridRow;
 export { GridRow };

package/es/GridRow/v1/styles.js

@@ -33,13 +33,15 @@
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props) => {
-  const hAlign = props.hAlign,
-    vAlign = props.vAlign,
-    rowSpacing = props.rowSpacing,
-    colSpacing = props.colSpacing,
-    isLastRow = props.isLastRow,
-    startAt = props.startAt,
-    visualDebug = props.visualDebug;
+  const {
+    hAlign,
+    vAlign,
+    rowSpacing,
+    colSpacing,
+    isLastRow,
+    startAt,
+    visualDebug
+  } = props;
   const getGridRowStyle = () => {
     const hAlignVariants = {
       center: {