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

package/lib/Table/ColHeader/index.js

@@ -51,17 +51,21 @@ let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   }
 
   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 = (0, _emotion.jsx)(_IconMiniArrowUpLine2.IconMiniArrowUpLine, null));
@@ -84,15 +88,15 @@ let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
   }
 
   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 (0, _emotion.jsx)("th", Object.assign({}, (0, _omitProps.omitProps)(this.props, ColHeader.allowedProps), {
-      css: styles?.colHeader,
+      css: styles === null || styles === void 0 ? void 0 : styles.colHeader,
       style: {
         width
       },
@@ -100,7 +104,7 @@ let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
       "aria-sort": sortDirection
     }), onRequestSort && (0, _emotion.jsx)("button", {
       onClick: this.handleClick,
-      css: styles?.button
+      css: styles === null || styles === void 0 ? void 0 : styles.button
     }, (0, _emotion.jsx)("div", null, (0, _callRenderProp.callRenderProp)(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
   }
 

package/lib/Table/ColHeader/theme.js

@@ -40,16 +40,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/lib/Table/Head/index.js

@@ -66,21 +66,25 @@ let Head = (_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() {
+    var _this$props$makeStyle2, _this$props2;
+
     if (this.isSortable && typeof this.props.renderSortLabel === 'undefined') {
       (0, _console.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 = _react.Children.toArray(children),
           _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
@@ -163,12 +167,12 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
   }
 
   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() : (0, _emotion.jsx)("thead", Object.assign({}, (0, _omitProps.omitProps)(this.props, Head.allowedProps), {
-      css: styles?.head
+      css: styles === null || styles === void 0 ? void 0 : styles.head
     }), _react.Children.map(children, child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Row.Row]) ? child : null));
   }
 

package/lib/Table/Head/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/Row/index.js

@@ -42,22 +42,26 @@ id: Table.Row
 **/
 let Row = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Row 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,
-          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 (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.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
     }), _react.Children.toArray(children).filter(Boolean).map((child, index) => {
       if ((0, _matchComponentTypes.matchComponentTypes)(child, [_ColHeader.ColHeader])) {

package/lib/Table/Row/theme.js

@@ -45,14 +45,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/lib/Table/RowHeader/index.js

@@ -34,21 +34,25 @@ id: Table.RowHeader
 **/
 let RowHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class RowHeader 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,
-          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 (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.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
     }), (0, _callRenderProp.callRenderProp)(children));

package/lib/Table/RowHeader/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
   };

package/lib/Table/index.js

@@ -65,11 +65,15 @@ let Table = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   }
 
   componentDidMount() {
-    this.props.makeStyles?.();
+    var _this$props$makeStyle, _this$props;
+
+    (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
   }
 
   componentDidUpdate() {
-    this.props.makeStyles?.();
+    var _this$props$makeStyle2, _this$props2;
+
+    (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
   }
 
   getHeaders() {
@@ -95,20 +99,20 @@ let Table = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
   }
 
   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 (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.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 && (0, _emotion.jsx)("caption", null, (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, caption)), _react.Children.map(children, child => {

package/lib/Table/theme.js

@@ -44,11 +44,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-table",
-  "version": "8.18.0",
+  "version": "8.18.1-snapshot.12+ca14b3dc8",
   "description": "A styled HTML table component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,24 +23,24 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.18.0",
-    "@instructure/ui-color-utils": "8.18.0",
-    "@instructure/ui-test-utils": "8.18.0",
-    "@instructure/ui-themes": "8.18.0"
+    "@instructure/ui-babel-preset": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-color-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-test-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-themes": "8.18.1-snapshot.12+ca14b3dc8"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/console": "8.18.0",
-    "@instructure/emotion": "8.18.0",
-    "@instructure/shared-types": "8.18.0",
-    "@instructure/ui-a11y-content": "8.18.0",
-    "@instructure/ui-icons": "8.18.0",
-    "@instructure/ui-prop-types": "8.18.0",
-    "@instructure/ui-react-utils": "8.18.0",
-    "@instructure/ui-simple-select": "8.18.0",
-    "@instructure/ui-testable": "8.18.0",
-    "@instructure/ui-utils": "8.18.0",
-    "@instructure/ui-view": "8.18.0",
+    "@instructure/console": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/emotion": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/shared-types": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-a11y-content": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-icons": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-prop-types": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-react-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-simple-select": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-testable": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-utils": "8.18.1-snapshot.12+ca14b3dc8",
+    "@instructure/ui-view": "8.18.1-snapshot.12+ca14b3dc8",
     "prop-types": "^15"
   },
   "peerDependencies": {
@@ -49,5 +49,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false
+  "sideEffects": false,
+  "gitHead": "ca14b3dc8f0315daef7b86aa05f711e6d6684c58"
 }