@instructure/ui-table 8.17.1-snapshot.21 → 8.17.1-snapshot.71

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/es/Table/Body/index.js +9 -13
  2. package/es/Table/Body/theme.js +5 -5
  3. package/es/Table/Cell/index.js +8 -12
  4. package/es/Table/Cell/theme.js +8 -8
  5. package/es/Table/ColHeader/index.js +14 -18
  6. package/es/Table/ColHeader/theme.js +10 -10
  7. package/es/Table/Head/index.js +10 -14
  8. package/es/Table/Head/theme.js +5 -5
  9. package/es/Table/Row/index.js +8 -12
  10. package/es/Table/Row/theme.js +8 -8
  11. package/es/Table/RowHeader/index.js +7 -11
  12. package/es/Table/RowHeader/theme.js +8 -8
  13. package/es/Table/index.js +10 -14
  14. package/es/Table/theme.js +5 -5
  15. package/lib/Table/Body/index.js +9 -13
  16. package/lib/Table/Body/theme.js +5 -5
  17. package/lib/Table/Cell/index.js +8 -12
  18. package/lib/Table/Cell/theme.js +8 -8
  19. package/lib/Table/ColHeader/index.js +14 -18
  20. package/lib/Table/ColHeader/theme.js +10 -10
  21. package/lib/Table/Head/index.js +10 -14
  22. package/lib/Table/Head/theme.js +5 -5
  23. package/lib/Table/Row/index.js +8 -12
  24. package/lib/Table/Row/theme.js +8 -8
  25. package/lib/Table/RowHeader/index.js +7 -11
  26. package/lib/Table/RowHeader/theme.js +8 -8
  27. package/lib/Table/index.js +10 -14
  28. package/lib/Table/theme.js +5 -5
  29. package/package.json +17 -17
  30. package/tsconfig.build.tsbuildinfo +1 -1
package/lib/Table/ColHeader/theme.js CHANGED
@@ -40,16 +40,16 @@ const generateComponentTheme = theme => {
40
40
  borders = theme.borders,
41
41
  spacing = theme.spacing;
42
42
  const componentVariables = {
43
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
44
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
45
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
46
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
47
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
48
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
49
- padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
50
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
51
- focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
52
- focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style
43
+ fontSize: typography?.fontSizeMedium,
44
+ fontFamily: typography?.fontFamily,
45
+ color: colors?.textDarkest,
46
+ background: colors?.backgroundLightest,
47
+ borderColor: colors?.borderMedium,
48
+ lineHeight: typography?.lineHeightCondensed,
49
+ padding: `${spacing?.xSmall} ${spacing?.small}`,
50
+ focusOutlineColor: colors?.borderBrand,
51
+ focusOutlineWidth: borders?.widthMedium,
52
+ focusOutlineStyle: borders?.style
53
53
  };
54
54
  return { ...componentVariables
55
55
  };
package/lib/Table/Head/index.js CHANGED
@@ -66,25 +66,21 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
66
66
  }
67
67
 
68
68
  componentDidMount() {
69
- var _this$props$makeStyle, _this$props;
70
-
71
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
69
+ this.props.makeStyles?.();
72
70
  }
73
71
 
74
72
  componentDidUpdate() {
75
- var _this$props$makeStyle2, _this$props2;
76
-
77
73
  if (this.isSortable && typeof this.props.renderSortLabel === 'undefined') {
78
74
  (0, _console.warn)(false, '[Table.Head] The `renderSortLabel` prop should be provided when Table is sortable.');
79
75
  }
80
76
 
81
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
77
+ this.props.makeStyles?.();
82
78
  }
83
79
 
84
80
  renderSelect() {
85
- const _this$props3 = this.props,
86
- children = _this$props3.children,
87
- renderSortLabel = _this$props3.renderSortLabel;
81
+ const _this$props = this.props,
82
+ children = _this$props.children,
83
+ renderSortLabel = _this$props.renderSortLabel;
88
84
 
89
85
  const _ref3 = _react.Children.toArray(children),
90
86
  _ref4 = (0, _slicedToArray2.default)(_ref3, 1),
@@ -167,12 +163,12 @@ let Head = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
167
163
  }
168
164
 
169
165
  render() {
170
- const _this$props4 = this.props,
171
- children = _this$props4.children,
172
- isStacked = _this$props4.isStacked,
173
- styles = _this$props4.styles;
166
+ const _this$props2 = this.props,
167
+ children = _this$props2.children,
168
+ isStacked = _this$props2.isStacked,
169
+ styles = _this$props2.styles;
174
170
  return isStacked ? this.renderSelect() : (0, _emotion.jsx)("thead", Object.assign({}, (0, _omitProps.omitProps)(this.props, Head.allowedProps), {
175
- css: styles === null || styles === void 0 ? void 0 : styles.head
171
+ css: styles?.head
176
172
  }), _react.Children.map(children, child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Row.Row]) ? child : null));
177
173
  }
178
174
 
package/lib/Table/Head/theme.js CHANGED
@@ -38,11 +38,11 @@ const generateComponentTheme = theme => {
38
38
  const colors = theme.colors,
39
39
  typography = theme.typography;
40
40
  const componentVariables = {
41
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
42
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
43
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
44
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
45
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
41
+ fontSize: typography?.fontSizeMedium,
42
+ fontFamily: typography?.fontFamily,
43
+ fontWeight: typography?.fontWeightNormal,
44
+ color: colors?.textDarkest,
45
+ background: colors?.backgroundLightest
46
46
  };
47
47
  return { ...componentVariables
48
48
  };
package/lib/Table/Row/index.js CHANGED
@@ -42,26 +42,22 @@ id: Table.Row
42
42
  **/
43
43
  let Row = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Row extends _react.Component {
44
44
  componentDidMount() {
45
- var _this$props$makeStyle, _this$props;
46
-
47
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
45
+ this.props.makeStyles?.();
48
46
  }
49
47
 
50
48
  componentDidUpdate() {
51
- var _this$props$makeStyle2, _this$props2;
52
-
53
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
49
+ this.props.makeStyles?.();
54
50
  }
55
51
 
56
52
  render() {
57
- const _this$props3 = this.props,
58
- children = _this$props3.children,
59
- styles = _this$props3.styles,
60
- isStacked = _this$props3.isStacked,
61
- headers = _this$props3.headers;
53
+ const _this$props = this.props,
54
+ children = _this$props.children,
55
+ styles = _this$props.styles,
56
+ isStacked = _this$props.isStacked,
57
+ headers = _this$props.headers;
62
58
  return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Row.allowedProps), Row), {
63
59
  as: isStacked ? 'div' : 'tr',
64
- css: styles === null || styles === void 0 ? void 0 : styles.row,
60
+ css: styles?.row,
65
61
  role: isStacked ? 'row' : void 0
66
62
  }), _react.Children.toArray(children).filter(Boolean).map((child, index) => {
67
63
  if ((0, _matchComponentTypes.matchComponentTypes)(child, [_ColHeader.ColHeader])) {
package/lib/Table/Row/theme.js CHANGED
@@ -45,14 +45,14 @@ const generateComponentTheme = theme => {
45
45
  }
46
46
  };
47
47
  const componentVariables = {
48
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
49
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
50
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
51
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
52
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
53
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
54
- hoverBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
55
- padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} 0`
48
+ fontSize: typography?.fontSizeMedium,
49
+ fontFamily: typography?.fontFamily,
50
+ fontWeight: typography?.fontWeightNormal,
51
+ color: colors?.textDarkest,
52
+ background: colors?.backgroundLightest,
53
+ borderColor: colors?.borderMedium,
54
+ hoverBorderColor: colors?.borderBrand,
55
+ padding: `${spacing?.xSmall} 0`
56
56
  };
57
57
  return { ...componentVariables,
58
58
  ...themeSpecificStyle[themeName]
package/lib/Table/RowHeader/index.js CHANGED
@@ -34,25 +34,21 @@ id: Table.RowHeader
34
34
  **/
35
35
  let RowHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class RowHeader extends _react.Component {
36
36
  componentDidMount() {
37
- var _this$props$makeStyle, _this$props;
38
-
39
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
37
+ this.props.makeStyles?.();
40
38
  }
41
39
 
42
40
  componentDidUpdate() {
43
- var _this$props$makeStyle2, _this$props2;
44
-
45
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
41
+ this.props.makeStyles?.();
46
42
  }
47
43
 
48
44
  render() {
49
- const _this$props3 = this.props,
50
- children = _this$props3.children,
51
- isStacked = _this$props3.isStacked,
52
- styles = _this$props3.styles;
45
+ const _this$props = this.props,
46
+ children = _this$props.children,
47
+ isStacked = _this$props.isStacked,
48
+ styles = _this$props.styles;
53
49
  return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, RowHeader.allowedProps), RowHeader), {
54
50
  as: isStacked ? 'div' : 'th',
55
- css: styles === null || styles === void 0 ? void 0 : styles.rowHeader,
51
+ css: styles?.rowHeader,
56
52
  scope: "row",
57
53
  role: isStacked ? 'rowheader' : void 0
58
54
  }), (0, _callRenderProp.callRenderProp)(children));
package/lib/Table/RowHeader/theme.js CHANGED
@@ -39,14 +39,14 @@ const generateComponentTheme = theme => {
39
39
  typography = theme.typography,
40
40
  spacing = theme.spacing;
41
41
  const componentVariables = {
42
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
43
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
44
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
45
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
46
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
47
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
48
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
49
- padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
42
+ fontSize: typography?.fontSizeMedium,
43
+ fontFamily: typography?.fontFamily,
44
+ fontWeight: typography?.fontWeightNormal,
45
+ color: colors?.textDarkest,
46
+ background: colors?.backgroundLightest,
47
+ borderColor: colors?.borderMedium,
48
+ lineHeight: typography?.lineHeightCondensed,
49
+ padding: `${spacing?.xSmall} ${spacing?.small}`
50
50
  };
51
51
  return { ...componentVariables
52
52
  };
package/lib/Table/index.js CHANGED
@@ -65,15 +65,11 @@ let Table = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
65
65
  }
66
66
 
67
67
  componentDidMount() {
68
- var _this$props$makeStyle, _this$props;
69
-
70
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
68
+ this.props.makeStyles?.();
71
69
  }
72
70
 
73
71
  componentDidUpdate() {
74
- var _this$props$makeStyle2, _this$props2;
75
-
76
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
72
+ this.props.makeStyles?.();
77
73
  }
78
74
 
79
75
  getHeaders() {
@@ -99,20 +95,20 @@ let Table = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _d
99
95
  }
100
96
 
101
97
  render() {
102
- const _this$props3 = this.props,
103
- margin = _this$props3.margin,
104
- layout = _this$props3.layout,
105
- caption = _this$props3.caption,
106
- children = _this$props3.children,
107
- hover = _this$props3.hover,
108
- styles = _this$props3.styles;
98
+ const _this$props = this.props,
99
+ margin = _this$props.margin,
100
+ layout = _this$props.layout,
101
+ caption = _this$props.caption,
102
+ children = _this$props.children,
103
+ hover = _this$props.hover,
104
+ styles = _this$props.styles;
109
105
  const isStacked = layout === 'stacked';
110
106
  const headers = isStacked ? this.getHeaders() : void 0;
111
107
  return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Table.allowedProps), Table), {
112
108
  as: isStacked ? 'div' : 'table',
113
109
  margin: margin,
114
110
  elementRef: this.handleRef,
115
- css: styles === null || styles === void 0 ? void 0 : styles.table,
111
+ css: styles?.table,
116
112
  role: isStacked ? 'table' : void 0,
117
113
  "aria-label": isStacked ? caption : void 0
118
114
  }), !isStacked && (0, _emotion.jsx)("caption", null, (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, null, caption)), _react.Children.map(children, child => {
package/lib/Table/theme.js CHANGED
@@ -44,11 +44,11 @@ const generateComponentTheme = theme => {
44
44
  }
45
45
  };
46
46
  const componentVariables = {
47
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
48
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
49
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
50
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
51
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
47
+ fontSize: typography?.fontSizeMedium,
48
+ fontFamily: typography?.fontFamily,
49
+ fontWeight: typography?.fontWeightNormal,
50
+ color: colors?.textDarkest,
51
+ background: colors?.backgroundLightest
52
52
  };
53
53
  return { ...componentVariables,
54
54
  ...themeSpecificStyle[themeName]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-table",
3
- "version": "8.17.1-snapshot.21+79d490548",
3
+ "version": "8.17.1-snapshot.71+34dfb2442",
4
4
  "description": "A styled HTML table component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,24 +23,24 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.17.1-snapshot.21+79d490548",
27
- "@instructure/ui-color-utils": "8.17.1-snapshot.21+79d490548",
28
- "@instructure/ui-test-utils": "8.17.1-snapshot.21+79d490548",
29
- "@instructure/ui-themes": "8.17.1-snapshot.21+79d490548"
26
+ "@instructure/ui-babel-preset": "8.17.1-snapshot.71+34dfb2442",
27
+ "@instructure/ui-color-utils": "8.17.1-snapshot.71+34dfb2442",
28
+ "@instructure/ui-test-utils": "8.17.1-snapshot.71+34dfb2442",
29
+ "@instructure/ui-themes": "8.17.1-snapshot.71+34dfb2442"
30
30
  },
31
31
  "dependencies": {
32
32
  "@babel/runtime": "^7.13.10",
33
- "@instructure/console": "8.17.1-snapshot.21+79d490548",
34
- "@instructure/emotion": "8.17.1-snapshot.21+79d490548",
35
- "@instructure/shared-types": "8.17.1-snapshot.21+79d490548",
36
- "@instructure/ui-a11y-content": "8.17.1-snapshot.21+79d490548",
37
- "@instructure/ui-icons": "8.17.1-snapshot.21+79d490548",
38
- "@instructure/ui-prop-types": "8.17.1-snapshot.21+79d490548",
39
- "@instructure/ui-react-utils": "8.17.1-snapshot.21+79d490548",
40
- "@instructure/ui-simple-select": "8.17.1-snapshot.21+79d490548",
41
- "@instructure/ui-testable": "8.17.1-snapshot.21+79d490548",
42
- "@instructure/ui-utils": "8.17.1-snapshot.21+79d490548",
43
- "@instructure/ui-view": "8.17.1-snapshot.21+79d490548",
33
+ "@instructure/console": "8.17.1-snapshot.71+34dfb2442",
34
+ "@instructure/emotion": "8.17.1-snapshot.71+34dfb2442",
35
+ "@instructure/shared-types": "8.17.1-snapshot.71+34dfb2442",
36
+ "@instructure/ui-a11y-content": "8.17.1-snapshot.71+34dfb2442",
37
+ "@instructure/ui-icons": "8.17.1-snapshot.71+34dfb2442",
38
+ "@instructure/ui-prop-types": "8.17.1-snapshot.71+34dfb2442",
39
+ "@instructure/ui-react-utils": "8.17.1-snapshot.71+34dfb2442",
40
+ "@instructure/ui-simple-select": "8.17.1-snapshot.71+34dfb2442",
41
+ "@instructure/ui-testable": "8.17.1-snapshot.71+34dfb2442",
42
+ "@instructure/ui-utils": "8.17.1-snapshot.71+34dfb2442",
43
+ "@instructure/ui-view": "8.17.1-snapshot.71+34dfb2442",
44
44
  "prop-types": "^15"
45
45
  },
46
46
  "peerDependencies": {
@@ -50,5 +50,5 @@
50
50
  "access": "public"
51
51
  },
52
52
  "sideEffects": false,
53
- "gitHead": "79d490548a0736feb2a7232bf5918857317b178b"
53
+ "gitHead": "34dfb2442c7ddce048d78ab1ecd5f3cbb78ee8d6"
54
54
  }