@instructure/ui-table 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/Table/Body/index.js

@@ -43,23 +43,27 @@ id: Table.Body
 
 let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Body extends Component {
   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,
-          children = _this$props.children,
-          hover = _this$props.hover,
-          isStacked = _this$props.isStacked,
-          headers = _this$props.headers,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          hover = _this$props3.hover,
+          isStacked = _this$props3.isStacked,
+          headers = _this$props3.headers,
+          styles = _this$props3.styles;
     return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Body.allowedProps), Body), {
       as: isStacked ? 'div' : 'tbody',
-      css: styles?.body,
+      css: styles === null || styles === void 0 ? void 0 : styles.body,
       role: isStacked ? 'rowgroup' : void 0
     }), Children.map(children, child => matchComponentTypes(child, [Row]) ? safeCloneElement(child, {
       key: child.props.name,

package/es/Table/Body/theme.js

@@ -31,11 +31,11 @@ const generateComponentTheme = theme => {
   const colors = theme.colors,
         typography = theme.typography;
   const componentVariables = {
-    fontSize: typography?.fontSizeMedium,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    color: colors?.textDarkest,
-    background: colors?.backgroundLightest
+    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,
+    color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
   };
   return { ...componentVariables
   };

package/es/Table/Cell/index.js

@@ -42,22 +42,26 @@ id: Table.Cell
 
 let Cell = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Cell extends Component {
   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,
-          children = _this$props.children,
-          styles = _this$props.styles,
-          isStacked = _this$props.isStacked,
-          header = _this$props.header;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          styles = _this$props3.styles,
+          isStacked = _this$props3.isStacked,
+          header = _this$props3.header;
     return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Cell.allowedProps), Cell), {
       as: isStacked ? 'div' : 'td',
-      css: styles?.cell,
+      css: styles === null || styles === void 0 ? void 0 : styles.cell,
       role: isStacked ? 'cell' : void 0
     }), header && callRenderProp(header), header && ': ', callRenderProp(children));
   }

package/es/Table/Cell/theme.js

@@ -32,14 +32,14 @@ const generateComponentTheme = theme => {
         typography = theme.typography,
         spacing = theme.spacing;
   const componentVariables = {
-    fontSize: typography?.fontSizeMedium,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    color: colors?.textDarkest,
-    background: colors?.backgroundLightest,
-    borderColor: colors?.borderMedium,
-    lineHeight: typography?.lineHeightCondensed,
-    padding: `${spacing?.xSmall} ${spacing?.small}`
+    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,
+    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,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
+    padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
   };
   return { ...componentVariables
   };

package/es/Table/ColHeader/index.js

@@ -55,17 +55,21 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    var _this$props$makeStyle, _this$props2;
+
+    (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    var _this$props$makeStyle2, _this$props3;
+
+    (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
   }
 
   renderSortArrow() {
-    const _this$props2 = this.props,
-          sortDirection = _this$props2.sortDirection,
-          onRequestSort = _this$props2.onRequestSort;
+    const _this$props4 = this.props,
+          sortDirection = _this$props4.sortDirection,
+          onRequestSort = _this$props4.onRequestSort;
 
     if (sortDirection === 'ascending') {
       return _IconMiniArrowUpLine || (_IconMiniArrowUpLine = jsx(IconMiniArrowUpLine, null));
@@ -88,15 +92,15 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
   }
 
   render() {
-    const _this$props3 = this.props,
-          onRequestSort = _this$props3.onRequestSort,
-          width = _this$props3.width,
-          children = _this$props3.children,
-          sortDirection = _this$props3.sortDirection,
-          scope = _this$props3.scope,
-          styles = _this$props3.styles;
+    const _this$props5 = this.props,
+          onRequestSort = _this$props5.onRequestSort,
+          width = _this$props5.width,
+          children = _this$props5.children,
+          sortDirection = _this$props5.sortDirection,
+          scope = _this$props5.scope,
+          styles = _this$props5.styles;
     return jsx("th", Object.assign({}, omitProps(this.props, ColHeader.allowedProps), {
-      css: styles?.colHeader,
+      css: styles === null || styles === void 0 ? void 0 : styles.colHeader,
       style: {
         width
       },
@@ -104,7 +108,7 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
       "aria-sort": sortDirection
     }), onRequestSort && jsx("button", {
       onClick: this.handleClick,
-      css: styles?.button
+      css: styles === null || styles === void 0 ? void 0 : styles.button
     }, jsx("div", null, callRenderProp(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
   }
 

package/es/Table/ColHeader/theme.js

@@ -33,16 +33,16 @@ const generateComponentTheme = theme => {
         borders = theme.borders,
         spacing = theme.spacing;
   const componentVariables = {
-    fontSize: typography?.fontSizeMedium,
-    fontFamily: typography?.fontFamily,
-    color: colors?.textDarkest,
-    background: colors?.backgroundLightest,
-    borderColor: colors?.borderMedium,
-    lineHeight: typography?.lineHeightCondensed,
-    padding: `${spacing?.xSmall} ${spacing?.small}`,
-    focusOutlineColor: colors?.borderBrand,
-    focusOutlineWidth: borders?.widthMedium,
-    focusOutlineStyle: borders?.style
+    fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
+    fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
+    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,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
+    padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
+    focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
+    focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style
   };
   return { ...componentVariables
   };

package/es/Table/Head/index.js

@@ -67,21 +67,25 @@ let Head = (_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() {
+    var _this$props$makeStyle2, _this$props2;
+
     if (this.isSortable && typeof this.props.renderSortLabel === 'undefined') {
       warn(false, '[Table.Head] The `renderSortLabel` prop should be provided when Table is sortable.');
     }
 
-    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);
   }
 
   renderSelect() {
-    const _this$props = this.props,
-          children = _this$props.children,
-          renderSortLabel = _this$props.renderSortLabel;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          renderSortLabel = _this$props3.renderSortLabel;
 
     const _ref3 = Children.toArray(children),
           _ref4 = _slicedToArray(_ref3, 1),
@@ -163,12 +167,12 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
   }
 
   render() {
-    const _this$props2 = this.props,
-          children = _this$props2.children,
-          isStacked = _this$props2.isStacked,
-          styles = _this$props2.styles;
+    const _this$props4 = this.props,
+          children = _this$props4.children,
+          isStacked = _this$props4.isStacked,
+          styles = _this$props4.styles;
     return isStacked ? this.renderSelect() : jsx("thead", Object.assign({}, omitProps(this.props, Head.allowedProps), {
-      css: styles?.head
+      css: styles === null || styles === void 0 ? void 0 : styles.head
     }), Children.map(children, child => matchComponentTypes(child, [Row]) ? child : null));
   }
 

package/es/Table/Head/theme.js

@@ -31,11 +31,11 @@ const generateComponentTheme = theme => {
   const colors = theme.colors,
         typography = theme.typography;
   const componentVariables = {
-    fontSize: typography?.fontSizeMedium,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    color: colors?.textDarkest,
-    background: colors?.backgroundLightest
+    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,
+    color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
   };
   return { ...componentVariables
   };

package/es/Table/Row/index.js

@@ -45,22 +45,26 @@ id: Table.Row
 
 let Row = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Row extends Component {
   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,
-          children = _this$props.children,
-          styles = _this$props.styles,
-          isStacked = _this$props.isStacked,
-          headers = _this$props.headers;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          styles = _this$props3.styles,
+          isStacked = _this$props3.isStacked,
+          headers = _this$props3.headers;
     return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Row.allowedProps), Row), {
       as: isStacked ? 'div' : 'tr',
-      css: styles?.row,
+      css: styles === null || styles === void 0 ? void 0 : styles.row,
       role: isStacked ? 'row' : void 0
     }), Children.toArray(children).filter(Boolean).map((child, index) => {
       if (matchComponentTypes(child, [ColHeader])) {

package/es/Table/Row/theme.js

@@ -38,14 +38,14 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontSize: typography?.fontSizeMedium,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    color: colors?.textDarkest,
-    background: colors?.backgroundLightest,
-    borderColor: colors?.borderMedium,
-    hoverBorderColor: colors?.borderBrand,
-    padding: `${spacing?.xSmall} 0`
+    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,
+    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,
+    hoverBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
+    padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} 0`
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/es/Table/RowHeader/index.js

@@ -42,21 +42,25 @@ id: Table.RowHeader
 
 let RowHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class RowHeader extends Component {
   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,
-          children = _this$props.children,
-          isStacked = _this$props.isStacked,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          isStacked = _this$props3.isStacked,
+          styles = _this$props3.styles;
     return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, RowHeader.allowedProps), RowHeader), {
       as: isStacked ? 'div' : 'th',
-      css: styles?.rowHeader,
+      css: styles === null || styles === void 0 ? void 0 : styles.rowHeader,
       scope: "row",
       role: isStacked ? 'rowheader' : void 0
     }), callRenderProp(children));

package/es/Table/RowHeader/theme.js

@@ -32,14 +32,14 @@ const generateComponentTheme = theme => {
         typography = theme.typography,
         spacing = theme.spacing;
   const componentVariables = {
-    fontSize: typography?.fontSizeMedium,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    color: colors?.textDarkest,
-    background: colors?.backgroundLightest,
-    borderColor: colors?.borderMedium,
-    lineHeight: typography?.lineHeightCondensed,
-    padding: `${spacing?.xSmall} ${spacing?.small}`
+    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,
+    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,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
+    padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
   };
   return { ...componentVariables
   };

package/es/Table/index.js

@@ -64,11 +64,15 @@ let Table = (_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);
   }
 
   getHeaders() {
@@ -94,20 +98,20 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
   }
 
   render() {
-    const _this$props = this.props,
-          margin = _this$props.margin,
-          layout = _this$props.layout,
-          caption = _this$props.caption,
-          children = _this$props.children,
-          hover = _this$props.hover,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          margin = _this$props3.margin,
+          layout = _this$props3.layout,
+          caption = _this$props3.caption,
+          children = _this$props3.children,
+          hover = _this$props3.hover,
+          styles = _this$props3.styles;
     const isStacked = layout === 'stacked';
     const headers = isStacked ? this.getHeaders() : void 0;
     return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Table.allowedProps), Table), {
       as: isStacked ? 'div' : 'table',
       margin: margin,
       elementRef: this.handleRef,
-      css: styles?.table,
+      css: styles === null || styles === void 0 ? void 0 : styles.table,
       role: isStacked ? 'table' : void 0,
       "aria-label": isStacked ? caption : void 0
     }), !isStacked && jsx("caption", null, jsx(ScreenReaderContent, null, caption)), Children.map(children, child => {

package/es/Table/theme.js

@@ -37,11 +37,11 @@ const generateComponentTheme = theme => {
     }
   };
   const componentVariables = {
-    fontSize: typography?.fontSizeMedium,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    color: colors?.textDarkest,
-    background: colors?.backgroundLightest
+    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,
+    color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
   };
   return { ...componentVariables,
     ...themeSpecificStyle[themeName]

package/lib/Table/Body/index.js

@@ -38,23 +38,27 @@ id: Table.Body
 **/
 let Body = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Body extends _react.Component {
   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,
-          children = _this$props.children,
-          hover = _this$props.hover,
-          isStacked = _this$props.isStacked,
-          headers = _this$props.headers,
-          styles = _this$props.styles;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          hover = _this$props3.hover,
+          isStacked = _this$props3.isStacked,
+          headers = _this$props3.headers,
+          styles = _this$props3.styles;
     return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Body.allowedProps), Body), {
       as: isStacked ? 'div' : 'tbody',
-      css: styles?.body,
+      css: styles === null || styles === void 0 ? void 0 : styles.body,
       role: isStacked ? 'rowgroup' : void 0
     }), _react.Children.map(children, child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Row.Row]) ? (0, _safeCloneElement.safeCloneElement)(child, {
       key: child.props.name,

package/lib/Table/Body/theme.js

@@ -38,11 +38,11 @@ const generateComponentTheme = theme => {
   const colors = theme.colors,
         typography = theme.typography;
   const componentVariables = {
-    fontSize: typography?.fontSizeMedium,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    color: colors?.textDarkest,
-    background: colors?.backgroundLightest
+    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,
+    color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
+    background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
   };
   return { ...componentVariables
   };

package/lib/Table/Cell/index.js

@@ -34,22 +34,26 @@ id: Table.Cell
 **/
 let Cell = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Cell extends _react.Component {
   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,
-          children = _this$props.children,
-          styles = _this$props.styles,
-          isStacked = _this$props.isStacked,
-          header = _this$props.header;
+    const _this$props3 = this.props,
+          children = _this$props3.children,
+          styles = _this$props3.styles,
+          isStacked = _this$props3.isStacked,
+          header = _this$props3.header;
     return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Cell.allowedProps), Cell), {
       as: isStacked ? 'div' : 'td',
-      css: styles?.cell,
+      css: styles === null || styles === void 0 ? void 0 : styles.cell,
       role: isStacked ? 'cell' : void 0
     }), header && (0, _callRenderProp.callRenderProp)(header), header && ': ', (0, _callRenderProp.callRenderProp)(children));
   }

package/lib/Table/Cell/theme.js

@@ -39,14 +39,14 @@ const generateComponentTheme = theme => {
         typography = theme.typography,
         spacing = theme.spacing;
   const componentVariables = {
-    fontSize: typography?.fontSizeMedium,
-    fontFamily: typography?.fontFamily,
-    fontWeight: typography?.fontWeightNormal,
-    color: colors?.textDarkest,
-    background: colors?.backgroundLightest,
-    borderColor: colors?.borderMedium,
-    lineHeight: typography?.lineHeightCondensed,
-    padding: `${spacing?.xSmall} ${spacing?.small}`
+    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,
+    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,
+    lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
+    padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
   };
   return { ...componentVariables
   };