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

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/es/Table/Body/index.js CHANGED
@@ -43,27 +43,23 @@ id: Table.Body
43
43
 
44
44
  let Body = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Body extends Component {
45
45
  componentDidMount() {
46
- var _this$props$makeStyle, _this$props;
47
-
48
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
46
+ this.props.makeStyles?.();
49
47
  }
50
48
 
51
49
  componentDidUpdate() {
52
- var _this$props$makeStyle2, _this$props2;
53
-
54
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
50
+ this.props.makeStyles?.();
55
51
  }
56
52
 
57
53
  render() {
58
- const _this$props3 = this.props,
59
- children = _this$props3.children,
60
- hover = _this$props3.hover,
61
- isStacked = _this$props3.isStacked,
62
- headers = _this$props3.headers,
63
- styles = _this$props3.styles;
54
+ const _this$props = this.props,
55
+ children = _this$props.children,
56
+ hover = _this$props.hover,
57
+ isStacked = _this$props.isStacked,
58
+ headers = _this$props.headers,
59
+ styles = _this$props.styles;
64
60
  return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Body.allowedProps), Body), {
65
61
  as: isStacked ? 'div' : 'tbody',
66
- css: styles === null || styles === void 0 ? void 0 : styles.body,
62
+ css: styles?.body,
67
63
  role: isStacked ? 'rowgroup' : void 0
68
64
  }), Children.map(children, child => matchComponentTypes(child, [Row]) ? safeCloneElement(child, {
69
65
  key: child.props.name,
package/es/Table/Body/theme.js CHANGED
@@ -31,11 +31,11 @@ const generateComponentTheme = theme => {
31
31
  const colors = theme.colors,
32
32
  typography = theme.typography;
33
33
  const componentVariables = {
34
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
35
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
36
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
37
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
38
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
34
+ fontSize: typography?.fontSizeMedium,
35
+ fontFamily: typography?.fontFamily,
36
+ fontWeight: typography?.fontWeightNormal,
37
+ color: colors?.textDarkest,
38
+ background: colors?.backgroundLightest
39
39
  };
40
40
  return { ...componentVariables
41
41
  };
package/es/Table/Cell/index.js CHANGED
@@ -42,26 +42,22 @@ id: Table.Cell
42
42
 
43
43
  let Cell = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Cell extends 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
- header = _this$props3.header;
53
+ const _this$props = this.props,
54
+ children = _this$props.children,
55
+ styles = _this$props.styles,
56
+ isStacked = _this$props.isStacked,
57
+ header = _this$props.header;
62
58
  return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Cell.allowedProps), Cell), {
63
59
  as: isStacked ? 'div' : 'td',
64
- css: styles === null || styles === void 0 ? void 0 : styles.cell,
60
+ css: styles?.cell,
65
61
  role: isStacked ? 'cell' : void 0
66
62
  }), header && callRenderProp(header), header && ': ', callRenderProp(children));
67
63
  }
package/es/Table/Cell/theme.js CHANGED
@@ -32,14 +32,14 @@ const generateComponentTheme = theme => {
32
32
  typography = theme.typography,
33
33
  spacing = theme.spacing;
34
34
  const componentVariables = {
35
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
36
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
37
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
38
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
39
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
40
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
41
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
42
- padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
35
+ fontSize: typography?.fontSizeMedium,
36
+ fontFamily: typography?.fontFamily,
37
+ fontWeight: typography?.fontWeightNormal,
38
+ color: colors?.textDarkest,
39
+ background: colors?.backgroundLightest,
40
+ borderColor: colors?.borderMedium,
41
+ lineHeight: typography?.lineHeightCondensed,
42
+ padding: `${spacing?.xSmall} ${spacing?.small}`
43
43
  };
44
44
  return { ...componentVariables
45
45
  };
package/es/Table/ColHeader/index.js CHANGED
@@ -55,21 +55,17 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
55
55
  }
56
56
 
57
57
  componentDidMount() {
58
- var _this$props$makeStyle, _this$props2;
59
-
60
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
58
+ this.props.makeStyles?.();
61
59
  }
62
60
 
63
61
  componentDidUpdate() {
64
- var _this$props$makeStyle2, _this$props3;
65
-
66
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
62
+ this.props.makeStyles?.();
67
63
  }
68
64
 
69
65
  renderSortArrow() {
70
- const _this$props4 = this.props,
71
- sortDirection = _this$props4.sortDirection,
72
- onRequestSort = _this$props4.onRequestSort;
66
+ const _this$props2 = this.props,
67
+ sortDirection = _this$props2.sortDirection,
68
+ onRequestSort = _this$props2.onRequestSort;
73
69
 
74
70
  if (sortDirection === 'ascending') {
75
71
  return _IconMiniArrowUpLine || (_IconMiniArrowUpLine = jsx(IconMiniArrowUpLine, null));
@@ -92,15 +88,15 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
92
88
  }
93
89
 
94
90
  render() {
95
- const _this$props5 = this.props,
96
- onRequestSort = _this$props5.onRequestSort,
97
- width = _this$props5.width,
98
- children = _this$props5.children,
99
- sortDirection = _this$props5.sortDirection,
100
- scope = _this$props5.scope,
101
- styles = _this$props5.styles;
91
+ const _this$props3 = this.props,
92
+ onRequestSort = _this$props3.onRequestSort,
93
+ width = _this$props3.width,
94
+ children = _this$props3.children,
95
+ sortDirection = _this$props3.sortDirection,
96
+ scope = _this$props3.scope,
97
+ styles = _this$props3.styles;
102
98
  return jsx("th", Object.assign({}, omitProps(this.props, ColHeader.allowedProps), {
103
- css: styles === null || styles === void 0 ? void 0 : styles.colHeader,
99
+ css: styles?.colHeader,
104
100
  style: {
105
101
  width
106
102
  },
@@ -108,7 +104,7 @@ let ColHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_
108
104
  "aria-sort": sortDirection
109
105
  }), onRequestSort && jsx("button", {
110
106
  onClick: this.handleClick,
111
- css: styles === null || styles === void 0 ? void 0 : styles.button
107
+ css: styles?.button
112
108
  }, jsx("div", null, callRenderProp(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
113
109
  }
114
110
 
package/es/Table/ColHeader/theme.js CHANGED
@@ -33,16 +33,16 @@ const generateComponentTheme = theme => {
33
33
  borders = theme.borders,
34
34
  spacing = theme.spacing;
35
35
  const componentVariables = {
36
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
37
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
38
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
39
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
40
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
41
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
42
- padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
43
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
44
- focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
45
- focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style
36
+ fontSize: typography?.fontSizeMedium,
37
+ fontFamily: typography?.fontFamily,
38
+ color: colors?.textDarkest,
39
+ background: colors?.backgroundLightest,
40
+ borderColor: colors?.borderMedium,
41
+ lineHeight: typography?.lineHeightCondensed,
42
+ padding: `${spacing?.xSmall} ${spacing?.small}`,
43
+ focusOutlineColor: colors?.borderBrand,
44
+ focusOutlineWidth: borders?.widthMedium,
45
+ focusOutlineStyle: borders?.style
46
46
  };
47
47
  return { ...componentVariables
48
48
  };
package/es/Table/Head/index.js CHANGED
@@ -67,25 +67,21 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
67
67
  }
68
68
 
69
69
  componentDidMount() {
70
- var _this$props$makeStyle, _this$props;
71
-
72
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
70
+ this.props.makeStyles?.();
73
71
  }
74
72
 
75
73
  componentDidUpdate() {
76
- var _this$props$makeStyle2, _this$props2;
77
-
78
74
  if (this.isSortable && typeof this.props.renderSortLabel === 'undefined') {
79
75
  warn(false, '[Table.Head] The `renderSortLabel` prop should be provided when Table is sortable.');
80
76
  }
81
77
 
82
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
78
+ this.props.makeStyles?.();
83
79
  }
84
80
 
85
81
  renderSelect() {
86
- const _this$props3 = this.props,
87
- children = _this$props3.children,
88
- renderSortLabel = _this$props3.renderSortLabel;
82
+ const _this$props = this.props,
83
+ children = _this$props.children,
84
+ renderSortLabel = _this$props.renderSortLabel;
89
85
 
90
86
  const _ref3 = Children.toArray(children),
91
87
  _ref4 = _slicedToArray(_ref3, 1),
@@ -167,12 +163,12 @@ let Head = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class
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() : jsx("thead", Object.assign({}, omitProps(this.props, Head.allowedProps), {
175
- css: styles === null || styles === void 0 ? void 0 : styles.head
171
+ css: styles?.head
176
172
  }), Children.map(children, child => matchComponentTypes(child, [Row]) ? child : null));
177
173
  }
178
174
 
package/es/Table/Head/theme.js CHANGED
@@ -31,11 +31,11 @@ const generateComponentTheme = theme => {
31
31
  const colors = theme.colors,
32
32
  typography = theme.typography;
33
33
  const componentVariables = {
34
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
35
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
36
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
37
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
38
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
34
+ fontSize: typography?.fontSizeMedium,
35
+ fontFamily: typography?.fontFamily,
36
+ fontWeight: typography?.fontWeightNormal,
37
+ color: colors?.textDarkest,
38
+ background: colors?.backgroundLightest
39
39
  };
40
40
  return { ...componentVariables
41
41
  };
package/es/Table/Row/index.js CHANGED
@@ -45,26 +45,22 @@ id: Table.Row
45
45
 
46
46
  let Row = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class Row extends Component {
47
47
  componentDidMount() {
48
- var _this$props$makeStyle, _this$props;
49
-
50
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
48
+ this.props.makeStyles?.();
51
49
  }
52
50
 
53
51
  componentDidUpdate() {
54
- var _this$props$makeStyle2, _this$props2;
55
-
56
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
52
+ this.props.makeStyles?.();
57
53
  }
58
54
 
59
55
  render() {
60
- const _this$props3 = this.props,
61
- children = _this$props3.children,
62
- styles = _this$props3.styles,
63
- isStacked = _this$props3.isStacked,
64
- headers = _this$props3.headers;
56
+ const _this$props = this.props,
57
+ children = _this$props.children,
58
+ styles = _this$props.styles,
59
+ isStacked = _this$props.isStacked,
60
+ headers = _this$props.headers;
65
61
  return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Row.allowedProps), Row), {
66
62
  as: isStacked ? 'div' : 'tr',
67
- css: styles === null || styles === void 0 ? void 0 : styles.row,
63
+ css: styles?.row,
68
64
  role: isStacked ? 'row' : void 0
69
65
  }), Children.toArray(children).filter(Boolean).map((child, index) => {
70
66
  if (matchComponentTypes(child, [ColHeader])) {
package/es/Table/Row/theme.js CHANGED
@@ -38,14 +38,14 @@ const generateComponentTheme = theme => {
38
38
  }
39
39
  };
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,
46
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
47
- hoverBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
48
- padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} 0`
41
+ fontSize: typography?.fontSizeMedium,
42
+ fontFamily: typography?.fontFamily,
43
+ fontWeight: typography?.fontWeightNormal,
44
+ color: colors?.textDarkest,
45
+ background: colors?.backgroundLightest,
46
+ borderColor: colors?.borderMedium,
47
+ hoverBorderColor: colors?.borderBrand,
48
+ padding: `${spacing?.xSmall} 0`
49
49
  };
50
50
  return { ...componentVariables,
51
51
  ...themeSpecificStyle[themeName]
package/es/Table/RowHeader/index.js CHANGED
@@ -42,25 +42,21 @@ id: Table.RowHeader
42
42
 
43
43
  let RowHeader = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = class RowHeader extends 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
- isStacked = _this$props3.isStacked,
60
- styles = _this$props3.styles;
53
+ const _this$props = this.props,
54
+ children = _this$props.children,
55
+ isStacked = _this$props.isStacked,
56
+ styles = _this$props.styles;
61
57
  return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, RowHeader.allowedProps), RowHeader), {
62
58
  as: isStacked ? 'div' : 'th',
63
- css: styles === null || styles === void 0 ? void 0 : styles.rowHeader,
59
+ css: styles?.rowHeader,
64
60
  scope: "row",
65
61
  role: isStacked ? 'rowheader' : void 0
66
62
  }), callRenderProp(children));
package/es/Table/RowHeader/theme.js CHANGED
@@ -32,14 +32,14 @@ const generateComponentTheme = theme => {
32
32
  typography = theme.typography,
33
33
  spacing = theme.spacing;
34
34
  const componentVariables = {
35
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
36
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
37
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
38
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
39
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
40
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
41
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
42
- padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
35
+ fontSize: typography?.fontSizeMedium,
36
+ fontFamily: typography?.fontFamily,
37
+ fontWeight: typography?.fontWeightNormal,
38
+ color: colors?.textDarkest,
39
+ background: colors?.backgroundLightest,
40
+ borderColor: colors?.borderMedium,
41
+ lineHeight: typography?.lineHeightCondensed,
42
+ padding: `${spacing?.xSmall} ${spacing?.small}`
43
43
  };
44
44
  return { ...componentVariables
45
45
  };
package/es/Table/index.js CHANGED
@@ -64,15 +64,11 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
64
64
  }
65
65
 
66
66
  componentDidMount() {
67
- var _this$props$makeStyle, _this$props;
68
-
69
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
67
+ this.props.makeStyles?.();
70
68
  }
71
69
 
72
70
  componentDidUpdate() {
73
- var _this$props$makeStyle2, _this$props2;
74
-
75
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
71
+ this.props.makeStyles?.();
76
72
  }
77
73
 
78
74
  getHeaders() {
@@ -98,20 +94,20 @@ let Table = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_clas
98
94
  }
99
95
 
100
96
  render() {
101
- const _this$props3 = this.props,
102
- margin = _this$props3.margin,
103
- layout = _this$props3.layout,
104
- caption = _this$props3.caption,
105
- children = _this$props3.children,
106
- hover = _this$props3.hover,
107
- styles = _this$props3.styles;
97
+ const _this$props = this.props,
98
+ margin = _this$props.margin,
99
+ layout = _this$props.layout,
100
+ caption = _this$props.caption,
101
+ children = _this$props.children,
102
+ hover = _this$props.hover,
103
+ styles = _this$props.styles;
108
104
  const isStacked = layout === 'stacked';
109
105
  const headers = isStacked ? this.getHeaders() : void 0;
110
106
  return jsx(View, Object.assign({}, View.omitViewProps(omitProps(this.props, Table.allowedProps), Table), {
111
107
  as: isStacked ? 'div' : 'table',
112
108
  margin: margin,
113
109
  elementRef: this.handleRef,
114
- css: styles === null || styles === void 0 ? void 0 : styles.table,
110
+ css: styles?.table,
115
111
  role: isStacked ? 'table' : void 0,
116
112
  "aria-label": isStacked ? caption : void 0
117
113
  }), !isStacked && jsx("caption", null, jsx(ScreenReaderContent, null, caption)), Children.map(children, child => {
package/es/Table/theme.js CHANGED
@@ -37,11 +37,11 @@ const generateComponentTheme = theme => {
37
37
  }
38
38
  };
39
39
  const componentVariables = {
40
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
41
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
42
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
43
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
44
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest
40
+ fontSize: typography?.fontSizeMedium,
41
+ fontFamily: typography?.fontFamily,
42
+ fontWeight: typography?.fontWeightNormal,
43
+ color: colors?.textDarkest,
44
+ background: colors?.backgroundLightest
45
45
  };
46
46
  return { ...componentVariables,
47
47
  ...themeSpecificStyle[themeName]
package/lib/Table/Body/index.js CHANGED
@@ -38,27 +38,23 @@ id: Table.Body
38
38
  **/
39
39
  let Body = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Body extends _react.Component {
40
40
  componentDidMount() {
41
- var _this$props$makeStyle, _this$props;
42
-
43
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
41
+ this.props.makeStyles?.();
44
42
  }
45
43
 
46
44
  componentDidUpdate() {
47
- var _this$props$makeStyle2, _this$props2;
48
-
49
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
45
+ this.props.makeStyles?.();
50
46
  }
51
47
 
52
48
  render() {
53
- const _this$props3 = this.props,
54
- children = _this$props3.children,
55
- hover = _this$props3.hover,
56
- isStacked = _this$props3.isStacked,
57
- headers = _this$props3.headers,
58
- styles = _this$props3.styles;
49
+ const _this$props = this.props,
50
+ children = _this$props.children,
51
+ hover = _this$props.hover,
52
+ isStacked = _this$props.isStacked,
53
+ headers = _this$props.headers,
54
+ styles = _this$props.styles;
59
55
  return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Body.allowedProps), Body), {
60
56
  as: isStacked ? 'div' : 'tbody',
61
- css: styles === null || styles === void 0 ? void 0 : styles.body,
57
+ css: styles?.body,
62
58
  role: isStacked ? 'rowgroup' : void 0
63
59
  }), _react.Children.map(children, child => (0, _matchComponentTypes.matchComponentTypes)(child, [_Row.Row]) ? (0, _safeCloneElement.safeCloneElement)(child, {
64
60
  key: child.props.name,
package/lib/Table/Body/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/Cell/index.js CHANGED
@@ -34,26 +34,22 @@ id: Table.Cell
34
34
  **/
35
35
  let Cell = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Cell 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
- styles = _this$props3.styles,
52
- isStacked = _this$props3.isStacked,
53
- header = _this$props3.header;
45
+ const _this$props = this.props,
46
+ children = _this$props.children,
47
+ styles = _this$props.styles,
48
+ isStacked = _this$props.isStacked,
49
+ header = _this$props.header;
54
50
  return (0, _emotion.jsx)(_View.View, Object.assign({}, _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Cell.allowedProps), Cell), {
55
51
  as: isStacked ? 'div' : 'td',
56
- css: styles === null || styles === void 0 ? void 0 : styles.cell,
52
+ css: styles?.cell,
57
53
  role: isStacked ? 'cell' : void 0
58
54
  }), header && (0, _callRenderProp.callRenderProp)(header), header && ': ', (0, _callRenderProp.callRenderProp)(children));
59
55
  }
package/lib/Table/Cell/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/ColHeader/index.js CHANGED
@@ -51,21 +51,17 @@ let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
51
51
  }
52
52
 
53
53
  componentDidMount() {
54
- var _this$props$makeStyle, _this$props2;
55
-
56
- (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
54
+ this.props.makeStyles?.();
57
55
  }
58
56
 
59
57
  componentDidUpdate() {
60
- var _this$props$makeStyle2, _this$props3;
61
-
62
- (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
58
+ this.props.makeStyles?.();
63
59
  }
64
60
 
65
61
  renderSortArrow() {
66
- const _this$props4 = this.props,
67
- sortDirection = _this$props4.sortDirection,
68
- onRequestSort = _this$props4.onRequestSort;
62
+ const _this$props2 = this.props,
63
+ sortDirection = _this$props2.sortDirection,
64
+ onRequestSort = _this$props2.onRequestSort;
69
65
 
70
66
  if (sortDirection === 'ascending') {
71
67
  return _IconMiniArrowUpLine || (_IconMiniArrowUpLine = (0, _emotion.jsx)(_IconMiniArrowUpLine2.IconMiniArrowUpLine, null));
@@ -88,15 +84,15 @@ let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
88
84
  }
89
85
 
90
86
  render() {
91
- const _this$props5 = this.props,
92
- onRequestSort = _this$props5.onRequestSort,
93
- width = _this$props5.width,
94
- children = _this$props5.children,
95
- sortDirection = _this$props5.sortDirection,
96
- scope = _this$props5.scope,
97
- styles = _this$props5.styles;
87
+ const _this$props3 = this.props,
88
+ onRequestSort = _this$props3.onRequestSort,
89
+ width = _this$props3.width,
90
+ children = _this$props3.children,
91
+ sortDirection = _this$props3.sortDirection,
92
+ scope = _this$props3.scope,
93
+ styles = _this$props3.styles;
98
94
  return (0, _emotion.jsx)("th", Object.assign({}, (0, _omitProps.omitProps)(this.props, ColHeader.allowedProps), {
99
- css: styles === null || styles === void 0 ? void 0 : styles.colHeader,
95
+ css: styles?.colHeader,
100
96
  style: {
101
97
  width
102
98
  },
@@ -104,7 +100,7 @@ let ColHeader = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default)
104
100
  "aria-sort": sortDirection
105
101
  }), onRequestSort && (0, _emotion.jsx)("button", {
106
102
  onClick: this.handleClick,
107
- css: styles === null || styles === void 0 ? void 0 : styles.button
103
+ css: styles?.button
108
104
  }, (0, _emotion.jsx)("div", null, (0, _callRenderProp.callRenderProp)(children), this.renderSortArrow())), !onRequestSort && children, !onRequestSort && this.renderSortArrow());
109
105
  }
110
106