@instructure/ui-grid 8.12.1-snapshot.7 → 8.13.1-snapshot.9

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
+
+**Note:** Version bump only for package @instructure/ui-grid
+
 # [8.12.0](https://github.com/instructure/instructure-ui/compare/v8.11.1...v8.12.0) (2021-11-17)
 
 **Note:** Version bump only for package @instructure/ui-grid

package/es/Grid/index.js

@@ -42,10 +42,11 @@ import { propTypes, allowedProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 let Grid = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Grid extends Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     this.ref = null;
 
     this.handleRef = el => {
@@ -54,18 +55,22 @@ let Grid = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
   }
 
   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(prevProps, prevState, snapshot) {
-    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);
   }
 
   renderChildren() {
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          makeStyles = _this$props.makeStyles,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          makeStyles = _this$props3.makeStyles,
+          props = _objectWithoutProperties(_this$props3, _excluded);
 
     const children = Children.toArray(this.props.children);
     return children.map((child, index) => {
@@ -83,9 +88,9 @@ let Grid = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
   }
 
   render() {
-    const _this$props2 = this.props,
-          styles = _this$props2.styles,
-          restProps = _objectWithoutProperties(_this$props2, _excluded2);
+    const _this$props4 = this.props,
+          styles = _this$props4.styles,
+          restProps = _objectWithoutProperties(_this$props4, _excluded2);
 
     const props = omitProps(restProps, Grid.allowedProps);
     return jsx("span", Object.assign({}, props, {

package/es/GridCol/index.js

@@ -37,10 +37,11 @@ import { propTypes, allowedProps } from './props';
 parent: Grid
 id: Grid.Col
 ---
+@tsProps
 **/
 let GridCol = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class GridCol extends Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     this.ref = null;
 
     this.handleRef = el => {
@@ -54,17 +55,21 @@ let GridCol = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cl
   }
 
   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(prevProps, prevState, snapshot) {
-    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);
   }
 
   render() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          styles = _this$props3.styles;
     const props = omitProps(this.props, GridCol.allowedProps);
     return jsx("span", Object.assign({}, props, {
       ref: this.handleRef,

package/es/GridCol/props.js

@@ -47,10 +47,6 @@ const propTypes = {
   })]),
   isLastRow: PropTypes.bool,
   isLastCol: PropTypes.bool,
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func
 };
 const allowedProps = ['children', 'colSpacing', 'rowSpacing', 'textAlign', 'hAlign', 'vAlign', 'startAt', 'visualDebug', 'width', 'offset', 'isLastRow', 'isLastCol', 'elementRef'];

package/es/GridCol/styles.js

@@ -123,7 +123,7 @@ const generateStyle = (componentTheme, props) => {
     if (!width) return;
 
     if (width && typeof width === 'object') {
-      width = width[breakpoint];
+      width = width[breakpoint === 'x-large' ? 'xLarge' : breakpoint];
     }
 
     return width;
@@ -134,13 +134,15 @@ const generateStyle = (componentTheme, props) => {
     if (!offset) return;
 
     if (offset && typeof offset === 'object') {
-      offset = offset[breakpoint];
+      offset = offset[breakpoint === 'x-large' ? 'xLarge' : breakpoint];
     }
 
     return offset;
   };
 
-  const getFlexColumnBySize = (size = '1') => {
+  const getFlexColumnBySize = function () {
+    let size = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : '1';
+
     switch (size) {
       case 'auto':
         return {
@@ -164,7 +166,9 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 
-  const getColumnOffsetBySize = (size = '1') => {
+  const getColumnOffsetBySize = function () {
+    let size = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : '1';
+
     switch (size) {
       case 'auto':
       case 12:

package/es/GridRow/index.js

@@ -42,10 +42,11 @@ import { propTypes, allowedProps } from './props';
 parent: Grid
 id: Grid.Row
 ---
+@tsProps
 **/
 let GridRow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class GridRow extends Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     this.ref = null;
 
     this.handleRef = el => {
@@ -54,18 +55,22 @@ let GridRow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cl
   }
 
   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(prevProps, prevState, snapshot) {
-    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);
   }
 
   renderChildren() {
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          makeStyles = _this$props.makeStyles,
-          props = _objectWithoutProperties(_this$props, _excluded);
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          makeStyles = _this$props3.makeStyles,
+          props = _objectWithoutProperties(_this$props3, _excluded);
 
     return Children.map(this.props.children, (child, index) => {
       if (matchComponentTypes(child, [GridCol])) {
@@ -83,9 +88,9 @@ let GridRow = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_cl
   }
 
   render() {
-    const _this$props2 = this.props,
-          styles = _this$props2.styles,
-          restProps = _objectWithoutProperties(_this$props2, _excluded2);
+    const _this$props4 = this.props,
+          styles = _this$props4.styles,
+          restProps = _objectWithoutProperties(_this$props4, _excluded2);
 
     const props = omitProps(restProps, GridRow.allowedProps);
     return jsx("span", Object.assign({}, props, {

package/lib/Grid/index.js

@@ -5,19 +5,20 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "GridRow", {
+exports.Grid = void 0;
+Object.defineProperty(exports, "GridCol", {
   enumerable: true,
   get: function () {
-    return _GridRow.GridRow;
+    return _GridCol.GridCol;
   }
 });
-Object.defineProperty(exports, "GridCol", {
+Object.defineProperty(exports, "GridRow", {
   enumerable: true,
   get: function () {
-    return _GridCol.GridCol;
+    return _GridRow.GridRow;
   }
 });
-exports.Grid = exports.default = void 0;
+exports.default = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -52,10 +53,11 @@ var _dec, _class, _class2, _temp;
 ---
 category: components
 ---
+@tsProps
 **/
 let Grid = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Grid extends _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     this.ref = null;
 
     this.handleRef = el => {
@@ -64,18 +66,22 @@ let Grid = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
   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(prevProps, prevState, snapshot) {
-    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);
   }
 
   renderChildren() {
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          makeStyles = _this$props.makeStyles,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          makeStyles = _this$props3.makeStyles,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
 
     const children = _react.Children.toArray(this.props.children);
 
@@ -94,9 +100,9 @@ let Grid = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
   render() {
-    const _this$props2 = this.props,
-          styles = _this$props2.styles,
-          restProps = (0, _objectWithoutProperties2.default)(_this$props2, _excluded2);
+    const _this$props4 = this.props,
+          styles = _this$props4.styles,
+          restProps = (0, _objectWithoutProperties2.default)(_this$props4, _excluded2);
     const props = (0, _omitProps.omitProps)(restProps, Grid.allowedProps);
     return (0, _emotion.jsx)("span", Object.assign({}, props, {
       css: styles === null || styles === void 0 ? void 0 : styles.grid,

package/lib/Grid/props.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = exports.propTypes = void 0;
+exports.propTypes = exports.allowedProps = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 

package/lib/GridCol/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridCol = exports.default = void 0;
+exports.default = exports.GridCol = void 0;
 
 var _react = require("react");
 
@@ -26,10 +26,11 @@ var _dec, _class, _class2, _temp;
 parent: Grid
 id: Grid.Col
 ---
+@tsProps
 **/
 let GridCol = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class GridCol extends _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     this.ref = null;
 
     this.handleRef = el => {
@@ -43,17 +44,21 @@ let GridCol = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   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(prevProps, prevState, snapshot) {
-    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);
   }
 
   render() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          styles = _this$props3.styles;
     const props = (0, _omitProps.omitProps)(this.props, GridCol.allowedProps);
     return (0, _emotion.jsx)("span", Object.assign({}, props, {
       ref: this.handleRef,

package/lib/GridCol/props.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = exports.propTypes = void 0;
+exports.propTypes = exports.allowedProps = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -57,10 +57,6 @@ const propTypes = {
   })]),
   isLastRow: _propTypes.default.bool,
   isLastCol: _propTypes.default.bool,
-
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: _propTypes.default.func
 };
 exports.propTypes = propTypes;

package/lib/GridCol/styles.js

@@ -130,7 +130,7 @@ const generateStyle = (componentTheme, props) => {
     if (!width) return;
 
     if (width && typeof width === 'object') {
-      width = width[breakpoint];
+      width = width[breakpoint === 'x-large' ? 'xLarge' : breakpoint];
     }
 
     return width;
@@ -141,13 +141,15 @@ const generateStyle = (componentTheme, props) => {
     if (!offset) return;
 
     if (offset && typeof offset === 'object') {
-      offset = offset[breakpoint];
+      offset = offset[breakpoint === 'x-large' ? 'xLarge' : breakpoint];
     }
 
     return offset;
   };
 
-  const getFlexColumnBySize = (size = '1') => {
+  const getFlexColumnBySize = function () {
+    let size = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : '1';
+
     switch (size) {
       case 'auto':
         return {
@@ -171,7 +173,9 @@ const generateStyle = (componentTheme, props) => {
     }
   };
 
-  const getColumnOffsetBySize = (size = '1') => {
+  const getColumnOffsetBySize = function () {
+    let size = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : '1';
+
     switch (size) {
       case 'auto':
       case 12:

package/lib/GridRow/index.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.GridRow = exports.default = void 0;
+exports.default = exports.GridRow = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -39,10 +39,11 @@ var _dec, _class, _class2, _temp;
 parent: Grid
 id: Grid.Row
 ---
+@tsProps
 **/
 let GridRow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class GridRow extends _react.Component {
-  constructor(...args) {
-    super(...args);
+  constructor() {
+    super(...arguments);
     this.ref = null;
 
     this.handleRef = el => {
@@ -51,18 +52,22 @@ let GridRow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   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(prevProps, prevState, snapshot) {
-    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);
   }
 
   renderChildren() {
-    const _this$props = this.props,
-          styles = _this$props.styles,
-          makeStyles = _this$props.makeStyles,
-          props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+    const _this$props3 = this.props,
+          styles = _this$props3.styles,
+          makeStyles = _this$props3.makeStyles,
+          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
     return _react.Children.map(this.props.children, (child, index) => {
       if ((0, _matchComponentTypes.matchComponentTypes)(child, [_GridCol.GridCol])) {
         return (0, _safeCloneElement.safeCloneElement)(child, { ...(0, _pickProps.pickProps)(props, GridRow.allowedProps),
@@ -79,9 +84,9 @@ let GridRow = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
   }
 
   render() {
-    const _this$props2 = this.props,
-          styles = _this$props2.styles,
-          restProps = (0, _objectWithoutProperties2.default)(_this$props2, _excluded2);
+    const _this$props4 = this.props,
+          styles = _this$props4.styles,
+          restProps = (0, _objectWithoutProperties2.default)(_this$props4, _excluded2);
     const props = (0, _omitProps.omitProps)(restProps, GridRow.allowedProps);
     return (0, _emotion.jsx)("span", Object.assign({}, props, {
       css: styles === null || styles === void 0 ? void 0 : styles.gridRow,

package/lib/GridRow/props.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowedProps = exports.propTypes = void 0;
+exports.propTypes = exports.allowedProps = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 

package/lib/index.js

@@ -9,16 +9,16 @@ Object.defineProperty(exports, "Grid", {
     return _Grid.Grid;
   }
 });
-Object.defineProperty(exports, "GridRow", {
+Object.defineProperty(exports, "GridCol", {
   enumerable: true,
   get: function () {
-    return _Grid.GridRow;
+    return _Grid.GridCol;
   }
 });
-Object.defineProperty(exports, "GridCol", {
+Object.defineProperty(exports, "GridRow", {
   enumerable: true,
   get: function () {
-    return _Grid.GridCol;
+    return _Grid.GridRow;
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-grid",
-  "version": "8.12.1-snapshot.7+1e7ac8219",
+  "version": "8.13.1-snapshot.9+f32ba918e",
   "description": "A Grid component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -25,20 +25,20 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/shared-types": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-a11y-content": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-prop-types": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-react-utils": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-testable": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-utils": "8.12.1-snapshot.7+1e7ac8219",
+    "@instructure/emotion": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/shared-types": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/ui-a11y-content": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/ui-prop-types": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/ui-react-utils": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/ui-testable": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/ui-utils": "8.13.1-snapshot.9+f32ba918e",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-color-utils": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-test-utils": "8.12.1-snapshot.7+1e7ac8219",
-    "@instructure/ui-themes": "8.12.1-snapshot.7+1e7ac8219"
+    "@instructure/ui-babel-preset": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/ui-color-utils": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/ui-test-utils": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/ui-themes": "8.13.1-snapshot.9+f32ba918e"
   },
   "peerDependencies": {
     "react": ">=16.8 <=17"
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "1e7ac821932a91fe9ef761c96f747c7ea1f3925a"
+  "gitHead": "f32ba918e4d3ce76c6ee95c856584d00a9d80958"
 }

package/src/Grid/index.tsx

@@ -47,6 +47,7 @@ import type { GridProps } from './props'
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class Grid extends Component<GridProps> {
@@ -74,14 +75,11 @@ class Grid extends Component<GridProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   renderChildren() {
@@ -92,8 +90,8 @@ class Grid extends Component<GridProps> {
       if (matchComponentTypes(child, [GridRow])) {
         return safeCloneElement(child as ReactElement, {
           ...pickProps(props, Grid.allowedProps),
-          // @ts-expect-error ts-migrate(2339) FIXME: Property 'props' does not exist on type 'string | ... Remove this comment to see the full error message
-          ...child.props /* child props should override parent */,
+          ...(child as ReactElement)
+            .props /* child props should override parent */,
           isLastRow: index + 1 === children.length
         })
       } else {

package/src/Grid/props.ts

@@ -37,6 +37,9 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { GridBreakpoints } from '../GridTypes'
 
 type GridOwnProps = {
+  /**
+   * One of: `Grid.Row`, `ScreenReaderContent`
+   */
   children?: React.ReactNode // TODO: oneOf([GridRow, ScreenReaderContent])
   colSpacing?: 'none' | 'small' | 'medium' | 'large'
   rowSpacing?: 'none' | 'small' | 'medium' | 'large'

package/src/GridCol/index.tsx

@@ -40,6 +40,7 @@ import type { GridColProps } from './props'
 parent: Grid
 id: Grid.Col
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class GridCol extends Component<GridColProps> {
@@ -67,14 +68,11 @@ class GridCol extends Component<GridColProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   render() {

package/src/GridCol/props.ts

@@ -33,7 +33,8 @@ import type {
 import type { GridBreakpoints } from '../GridTypes'
 
 // TODO: get numcols from theme config
-const COL_WIDTHS = ['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+const COL_WIDTHS: ColWidths[] = ['auto', 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+type ColWidths = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
 type GridColOwnProps = {
   children?: React.ReactNode
@@ -45,23 +46,26 @@ type GridColOwnProps = {
   startAt?: GridBreakpoints
   visualDebug?: boolean
   width?:
-    | any
+    | ColWidths
     | {
-        small?: any // TODO: PropTypes.oneOf(COL_WIDTHS)
-        medium?: any // TODO: PropTypes.oneOf(COL_WIDTHS)
-        large?: any // TODO: PropTypes.oneOf(COL_WIDTHS)
-        xLarge?: any // TODO: PropTypes.oneOf(COL_WIDTHS)
+        small?: ColWidths
+        medium?: ColWidths
+        large?: ColWidths
+        xLarge?: ColWidths
       }
   offset?:
-    | any
+    | ColWidths
     | {
-        small?: any // TODO: PropTypes.oneOf(COL_WIDTHS)
-        medium?: any // TODO: PropTypes.oneOf(COL_WIDTHS)
-        large?: any // TODO: PropTypes.oneOf(COL_WIDTHS)
-        xLarge?: any // TODO: PropTypes.oneOf(COL_WIDTHS)
+        small?: ColWidths
+        medium?: ColWidths
+        large?: ColWidths
+        xLarge?: ColWidths
       }
   isLastRow?: boolean
   isLastCol?: boolean
+  /**
+   * provides a reference to the underlying html root element
+   */
   elementRef?: (element: Element | null) => void
 }
 
@@ -110,9 +114,6 @@ const propTypes: PropValidators<PropKeys> = {
   ]),
   isLastRow: PropTypes.bool,
   isLastCol: PropTypes.bool,
-  /**
-   * provides a reference to the underlying html root element
-   */
   elementRef: PropTypes.func
 }
 

package/src/GridCol/styles.ts

@@ -26,6 +26,8 @@ import type { GridTheme } from '@instructure/shared-types'
 import type { GridBreakpoints } from '../GridTypes'
 import type { GridColProps, GridColStyle } from './props'
 
+type BreakPoints = NonNullable<GridBreakpoints>
+
 /**
  * ---
  * private: true
@@ -111,31 +113,29 @@ const generateStyle = (
     return breakpoints.slice(breakpoints.indexOf(startAt!))
   }
 
-  const breakpointIsEnabled = (breakpoint: GridBreakpoints) => {
+  const breakpointIsEnabled = (breakpoint: BreakPoints) => {
     return enabledBreakpoints().includes(breakpoint)
   }
 
-  const getColSize = (breakpoint: GridBreakpoints) => {
+  const getColSize = (breakpoint: BreakPoints) => {
     let { width } = props
 
     if (!width) return
 
     if (width && typeof width === 'object') {
-      // @ts-expect-error TODO: type when typing component
-      width = width[breakpoint]
+      width = width[breakpoint === 'x-large' ? 'xLarge' : breakpoint]
     }
 
     return width
   }
 
-  const getColOffset = (breakpoint: GridBreakpoints) => {
+  const getColOffset = (breakpoint: BreakPoints) => {
     let { offset } = props
 
     if (!offset) return
 
     if (offset && typeof offset === 'object') {
-      // @ts-expect-error TODO: type when typing component
-      offset = offset[breakpoint]
+      offset = offset[breakpoint === 'x-large' ? 'xLarge' : breakpoint]
     }
 
     return offset
@@ -170,10 +170,10 @@ const generateStyle = (
     }
   }
 
-  const getStartAtVariants = (breakpoint: GridBreakpoints) =>
+  const getStartAtVariants = (breakpoint: BreakPoints) =>
     !!startAt && startAt === breakpoint ? { ...getStartGridColumnStyle() } : {}
 
-  const getGridColumnsForBreakpoint = (breakpoint: GridBreakpoints) => {
+  const getGridColumnsForBreakpoint = (breakpoint: BreakPoints) => {
     const size = getColSize(breakpoint)
     const offset = getColOffset(breakpoint)
 
@@ -185,7 +185,7 @@ const generateStyle = (
       : {}
   }
 
-  const getBreakpointStyles = (breakpoint: GridBreakpoints) => ({
+  const getBreakpointStyles = (breakpoint: BreakPoints) => ({
     ...getStartAtVariants(breakpoint),
     ...getGridColumnsForBreakpoint(breakpoint)
   })

package/src/GridRow/index.tsx

@@ -47,6 +47,7 @@ import type { GridRowProps } from './props'
 parent: Grid
 id: Grid.Row
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 class GridRow extends Component<GridRowProps> {
@@ -66,14 +67,11 @@ class GridRow extends Component<GridRowProps> {
   }
 
   componentDidMount() {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+  componentDidUpdate() {
+    this.props.makeStyles?.()
   }
 
   renderChildren() {
@@ -83,8 +81,8 @@ class GridRow extends Component<GridRowProps> {
       if (matchComponentTypes(child, [GridCol])) {
         return safeCloneElement(child as ReactElement, {
           ...pickProps(props, GridRow.allowedProps),
-          // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
-          ...child.props /* child props should override parent */,
+          ...(child as ReactElement)
+            .props /* child props should override parent */,
           isLastRow: props.isLastRow,
           isLastCol: index + 1 === Children.count(this.props.children)
         })

package/src/GridRow/props.ts

@@ -38,6 +38,9 @@ import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
 import type { GridBreakpoints } from '../GridTypes'
 
 type GridRowOwnProps = {
+  /**
+   * One of: `Grid.Col`, `ScreenReaderContent`
+   */
   children?: React.ReactNode // TODO: oneOf([GridCol, ScreenReaderContent])
   rowSpacing?: 'none' | 'small' | 'medium' | 'large'
   colSpacing?: 'none' | 'small' | 'medium' | 'large'

package/types/Grid/index.d.ts

@@ -8,6 +8,7 @@ import type { GridProps } from './props';
 ---
 category: components
 ---
+@tsProps
 **/
 declare class Grid extends Component<GridProps> {
     static readonly componentId = "Grid";
@@ -43,7 +44,7 @@ declare class Grid extends Component<GridProps> {
     ref: Element | null;
     handleRef: (el: Element | null) => void;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
+    componentDidUpdate(): void;
     renderChildren(): {}[];
     render(): jsx.JSX.Element;
 }

package/types/Grid/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Grid/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAA0B,MAAM,OAAO,CAAA;AASzD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC;;;;GAIG;AACH,cACM,IAAK,SAAQ,SAAS,CAAC,SAAS,CAAC;IACrC,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;IAEpC,MAAM,CAAC,SAAS;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;;;MAQlB;IAED,MAAM,CAAC,GAAG,iBAAU;IACpB,MAAM,CAAC,GAAG,iBAAU;IAEpB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;IAED,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,cAAc;IAkBd,MAAM;CAWP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Grid/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAA0B,MAAM,OAAO,CAAA;AASzD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AACpC,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAEpC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AAExC;;;;;GAKG;AACH,cACM,IAAK,SAAQ,SAAS,CAAC,SAAS,CAAC;IACrC,MAAM,CAAC,QAAQ,CAAC,WAAW,UAAS;IAEpC,MAAM,CAAC,SAAS;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;;;;MAQlB;IAED,MAAM,CAAC,GAAG,iBAAU;IACpB,MAAM,CAAC,GAAG,iBAAU;IAEpB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;IAED,iBAAiB;IAIjB,kBAAkB;IAIlB,cAAc;IAkBd,MAAM;CAWP;AAED,eAAe,IAAI,CAAA;AACnB,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/types/Grid/props.d.ts

@@ -3,6 +3,9 @@ import type { PropValidators, GridTheme, OtherHTMLAttributes } from '@instructur
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 import type { GridBreakpoints } from '../GridTypes';
 declare type GridOwnProps = {
+    /**
+     * One of: `Grid.Row`, `ScreenReaderContent`
+     */
     children?: React.ReactNode;
     colSpacing?: 'none' | 'small' | 'medium' | 'large';
     rowSpacing?: 'none' | 'small' | 'medium' | 'large';

package/types/Grid/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Grid/props.ts"],"names":[],"mappings":";AA8BA,OAAO,KAAK,EACV,cAAc,EACd,SAAS,EACT,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,aAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,cAAc,GAAG,eAAe,CAAA;IACtE,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACpC,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,YAAY,CAAA;AAElC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,SAAS,GAAG,YAAY,GAC3B,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,GACpC,mBAAmB,CAAC,YAAY,CAAC,CAAA;AAEnC,aAAK,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAA;AAEvC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAcvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAQnB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Grid/props.ts"],"names":[],"mappings":";AA8BA,OAAO,KAAK,EACV,cAAc,EACd,SAAS,EACT,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,aAAK,YAAY,GAAG;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,cAAc,GAAG,eAAe,CAAA;IACtE,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACpC,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,YAAY,CAAA;AAElC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,SAAS,GAAG,YAAY,GAC3B,cAAc,CAAC,SAAS,EAAE,SAAS,CAAC,GACpC,mBAAmB,CAAC,YAAY,CAAC,CAAA;AAEnC,aAAK,SAAS,GAAG,cAAc,CAAC,MAAM,CAAC,CAAA;AAEvC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAcvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAQnB,CAAA;AAED,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,CAAA;AACpC,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/GridCol/index.d.ts

@@ -7,6 +7,7 @@ import type { GridColProps } from './props';
 parent: Grid
 id: Grid.Col
 ---
+@tsProps
 **/
 declare class GridCol extends Component<GridColProps> {
     static readonly componentId = "Grid.Col";
@@ -19,8 +20,18 @@ declare class GridCol extends Component<GridColProps> {
         vAlign?: "top" | "middle" | "bottom" | undefined;
         startAt?: import("..").GridBreakpoints | undefined;
         visualDebug?: boolean | undefined;
-        width?: any;
-        offset?: any;
+        width?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | {
+            small?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+            medium?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+            large?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+            xLarge?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+        } | undefined;
+        offset?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | {
+            small?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+            medium?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+            large?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+            xLarge?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+        } | undefined;
         isLastRow?: boolean | undefined;
         isLastCol?: boolean | undefined;
         elementRef?: ((element: Element | null) => void) | undefined;
@@ -34,8 +45,18 @@ declare class GridCol extends Component<GridColProps> {
         vAlign?: "top" | "middle" | "bottom" | undefined;
         startAt?: import("..").GridBreakpoints | undefined;
         visualDebug?: boolean | undefined;
-        width?: any;
-        offset?: any;
+        width?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | {
+            small?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+            medium?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+            large?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+            xLarge?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+        } | undefined;
+        offset?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | {
+            small?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+            medium?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+            large?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+            xLarge?: ("auto" | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12) | undefined;
+        } | undefined;
         isLastRow?: boolean | undefined;
         isLastCol?: boolean | undefined;
         elementRef?: ((element: Element | null) => void) | undefined;
@@ -49,7 +70,7 @@ declare class GridCol extends Component<GridColProps> {
     ref: Element | null;
     handleRef: (el: Element | null) => void;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
+    componentDidUpdate(): void;
     render(): jsx.JSX.Element;
 }
 export default GridCol;

package/types/GridCol/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/GridCol/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C;;;;;GAKG;AACH,cACM,OAAQ,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC3C,MAAM,CAAC,QAAQ,CAAC,WAAW,cAAa;IAExC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;MAKlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;IAED,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,MAAM;CAWP;AAED,eAAe,OAAO,CAAA;AACtB,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/GridCol/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C;;;;;;GAMG;AACH,cACM,OAAQ,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC3C,MAAM,CAAC,QAAQ,CAAC,WAAW,cAAa;IAExC,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;MAKlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;IAED,iBAAiB;IAIjB,kBAAkB;IAIlB,MAAM;CAWP;AAED,eAAe,OAAO,CAAA;AACtB,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/types/GridCol/props.d.ts

@@ -2,6 +2,7 @@
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 import type { PropValidators, GridTheme, OtherHTMLAttributes } from '@instructure/shared-types';
 import type { GridBreakpoints } from '../GridTypes';
+declare type ColWidths = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 declare type GridColOwnProps = {
     children?: React.ReactNode;
     colSpacing?: 'none' | 'small' | 'medium' | 'large';
@@ -11,20 +12,23 @@ declare type GridColOwnProps = {
     vAlign?: 'top' | 'middle' | 'bottom';
     startAt?: GridBreakpoints;
     visualDebug?: boolean;
-    width?: any | {
-        small?: any;
-        medium?: any;
-        large?: any;
-        xLarge?: any;
+    width?: ColWidths | {
+        small?: ColWidths;
+        medium?: ColWidths;
+        large?: ColWidths;
+        xLarge?: ColWidths;
     };
-    offset?: any | {
-        small?: any;
-        medium?: any;
-        large?: any;
-        xLarge?: any;
+    offset?: ColWidths | {
+        small?: ColWidths;
+        medium?: ColWidths;
+        large?: ColWidths;
+        xLarge?: ColWidths;
     };
     isLastRow?: boolean;
     isLastCol?: boolean;
+    /**
+     * provides a reference to the underlying html root element
+     */
     elementRef?: (element: Element | null) => void;
 };
 declare type PropKeys = keyof GridColOwnProps;

package/types/GridCol/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/GridCol/props.ts"],"names":[],"mappings":";AA0BA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EACV,cAAc,EACd,SAAS,EACT,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAKnD,aAAK,eAAe,GAAG;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAA;IAClD,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,cAAc,GAAG,eAAe,CAAA;IACtE,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACpC,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EACF,GAAG,GACH;QACE,KAAK,CAAC,EAAE,GAAG,CAAA;QACX,MAAM,CAAC,EAAE,GAAG,CAAA;QACZ,KAAK,CAAC,EAAE,GAAG,CAAA;QACX,MAAM,CAAC,EAAE,GAAG,CAAA;KACb,CAAA;IACL,MAAM,CAAC,EACH,GAAG,GACH;QACE,KAAK,CAAC,EAAE,GAAG,CAAA;QACX,MAAM,CAAC,EAAE,GAAG,CAAA;QACZ,KAAK,CAAC,EAAE,GAAG,CAAA;QACX,MAAM,CAAC,EAAE,GAAG,CAAA;KACb,CAAA;IACL,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,eAAe,CAAA;AAErC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,YAAY,GAAG,eAAe,GACjC,cAAc,CAAC,SAAS,EAAE,YAAY,CAAC,GACvC,mBAAmB,CAAC,eAAe,CAAC,CAAA;AAEtC,aAAK,YAAY,GAAG,cAAc,CAAC,SAAS,CAAC,CAAA;AAE7C,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAuCvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAcnB,CAAA;AAED,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/GridCol/props.ts"],"names":[],"mappings":";AA0BA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EACV,cAAc,EACd,SAAS,EACT,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAInD,aAAK,SAAS,GAAG,MAAM,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAA;AAE1E,aAAK,eAAe,GAAG;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,SAAS,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAA;IAClD,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,cAAc,GAAG,eAAe,CAAA;IACtE,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACpC,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,KAAK,CAAC,EACF,SAAS,GACT;QACE,KAAK,CAAC,EAAE,SAAS,CAAA;QACjB,MAAM,CAAC,EAAE,SAAS,CAAA;QAClB,KAAK,CAAC,EAAE,SAAS,CAAA;QACjB,MAAM,CAAC,EAAE,SAAS,CAAA;KACnB,CAAA;IACL,MAAM,CAAC,EACH,SAAS,GACT;QACE,KAAK,CAAC,EAAE,SAAS,CAAA;QACjB,MAAM,CAAC,EAAE,SAAS,CAAA;QAClB,KAAK,CAAC,EAAE,SAAS,CAAA;QACjB,MAAM,CAAC,EAAE,SAAS,CAAA;KACnB,CAAA;IACL,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,eAAe,CAAA;AAErC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,YAAY,GAAG,eAAe,GACjC,cAAc,CAAC,SAAS,EAAE,YAAY,CAAC,GACvC,mBAAmB,CAAC,eAAe,CAAC,CAAA;AAEtC,aAAK,YAAY,GAAG,cAAc,CAAC,SAAS,CAAC,CAAA;AAE7C,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAoCvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAcnB,CAAA;AAED,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/types/GridCol/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/GridCol/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEzD;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,SAAS,SAClB,YAAY,KAClB,YAgLF,CAAA;AAED,eAAe,aAAa,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/GridCol/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAE1D,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAIzD;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,mBACD,SAAS,SAClB,YAAY,KAClB,YA8KF,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/GridRow/index.d.ts

@@ -7,6 +7,7 @@ import type { GridRowProps } from './props';
 parent: Grid
 id: Grid.Row
 ---
+@tsProps
 **/
 declare class GridRow extends Component<GridRowProps> {
     static readonly componentId = "Grid.Row";
@@ -37,7 +38,7 @@ declare class GridRow extends Component<GridRowProps> {
     ref: Element | null;
     handleRef: (el: Element | null) => void;
     componentDidMount(): void;
-    componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
+    componentDidUpdate(): void;
     renderChildren(): {}[] | null | undefined;
     render(): jsx.JSX.Element;
 }

package/types/GridRow/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/GridRow/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAA0B,MAAM,OAAO,CAAA;AAWzD,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C;;;;;GAKG;AACH,cACM,OAAQ,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC3C,MAAM,CAAC,QAAQ,CAAC,WAAW,cAAa;IAExC,MAAM,CAAC,SAAS;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;MAGlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;IAED,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAKjD,cAAc;IAkBd,MAAM;CAWP;AAED,eAAe,OAAO,CAAA;AACtB,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/GridRow/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAA0B,MAAM,OAAO,CAAA;AAWzD,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C;;;;;;GAMG;AACH,cACM,OAAQ,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC3C,MAAM,CAAC,QAAQ,CAAC,WAAW,cAAa;IAExC,MAAM,CAAC,SAAS;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;MAGlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;IAED,iBAAiB;IAIjB,kBAAkB;IAIlB,cAAc;IAkBd,MAAM;CAWP;AAED,eAAe,OAAO,CAAA;AACtB,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/types/GridRow/props.d.ts

@@ -3,6 +3,9 @@ import type { PropValidators, GridTheme, OtherHTMLAttributes } from '@instructur
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
 import type { GridBreakpoints } from '../GridTypes';
 declare type GridRowOwnProps = {
+    /**
+     * One of: `Grid.Col`, `ScreenReaderContent`
+     */
     children?: React.ReactNode;
     rowSpacing?: 'none' | 'small' | 'medium' | 'large';
     colSpacing?: 'none' | 'small' | 'medium' | 'large';

package/types/GridRow/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/GridRow/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EACV,cAAc,EACd,SAAS,EACT,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,aAAK,eAAe,GAAG;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,cAAc,GAAG,eAAe,CAAA;IACtE,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACpC,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,eAAe,CAAA;AAErC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,YAAY,GAAG,eAAe,GACjC,cAAc,CAAC,SAAS,EAAE,YAAY,CAAC,GACvC,mBAAmB,CAAC,eAAe,CAAC,CAAA;AAEtC,aAAK,YAAY,GAAG,cAAc,CAAC,SAAS,CAAC,CAAA;AAE7C,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAevC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eASnB,CAAA;AAED,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/GridRow/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,KAAK,EACV,cAAc,EACd,SAAS,EACT,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAA;AAEnD,aAAK,eAAe,GAAG;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClD,MAAM,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,GAAG,cAAc,GAAG,eAAe,CAAA;IACtE,MAAM,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAA;IACpC,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,eAAe,CAAA;AAErC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,YAAY,GAAG,eAAe,GACjC,cAAc,CAAC,SAAS,EAAE,YAAY,CAAC,GACvC,mBAAmB,CAAC,eAAe,CAAC,CAAA;AAEtC,aAAK,YAAY,GAAG,cAAc,CAAC,SAAS,CAAC,CAAA;AAE7C,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAevC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eASnB,CAAA;AAED,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}