@instructure/ui-options 8.17.1-snapshot.82 → 8.18.1-snapshot.1

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 (17) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/es/Options/Item/index.js +26 -22
  3. package/es/Options/Item/theme.js +13 -13
  4. package/es/Options/Separator/index.js +14 -11
  5. package/es/Options/Separator/theme.js +3 -3
  6. package/es/Options/index.js +19 -15
  7. package/es/Options/theme.js +5 -5
  8. package/lib/Options/Item/index.js +26 -22
  9. package/lib/Options/Item/theme.js +13 -13
  10. package/lib/Options/Separator/index.js +13 -10
  11. package/lib/Options/Separator/theme.js +3 -3
  12. package/lib/Options/index.js +19 -15
  13. package/lib/Options/theme.js +5 -5
  14. package/package.json +14 -14
  15. package/src/Options/Separator/index.tsx +9 -3
  16. package/tsconfig.build.tsbuildinfo +1 -1
  17. package/types/Options/Separator/index.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [8.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-options
9
+
6
10
  # [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
7
11
 
8
12
  ### Bug Fixes
package/es/Options/Item/index.js CHANGED
@@ -47,22 +47,26 @@ let Item = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = te
47
47
  }
48
48
 
49
49
  componentDidMount() {
50
- this.props.makeStyles?.();
50
+ var _this$props$makeStyle, _this$props;
51
+
52
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
51
53
  }
52
54
 
53
55
  componentDidUpdate() {
54
- this.props.makeStyles?.();
56
+ var _this$props$makeStyle2, _this$props2;
57
+
58
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
55
59
  }
56
60
 
57
61
  renderContent(renderLabel, contentVariant) {
58
- const _this$props = this.props,
59
- styles = _this$props.styles,
60
- variant = _this$props.variant,
61
- as = _this$props.as,
62
- role = _this$props.role,
63
- children = _this$props.children;
62
+ const _this$props3 = this.props,
63
+ styles = _this$props3.styles,
64
+ variant = _this$props3.variant,
65
+ as = _this$props3.as,
66
+ role = _this$props3.role,
67
+ children = _this$props3.children;
64
68
  return jsx("span", {
65
- css: [styles?.content, contentVariant],
69
+ css: [styles === null || styles === void 0 ? void 0 : styles.content, contentVariant],
66
70
  role: "presentation",
67
71
  "aria-hidden": "true"
68
72
  }, callRenderProp(renderLabel, {
@@ -74,32 +78,32 @@ let Item = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = te
74
78
  }
75
79
 
76
80
  render() {
77
- const _this$props2 = this.props,
78
- as = _this$props2.as,
79
- role = _this$props2.role,
80
- styles = _this$props2.styles,
81
- description = _this$props2.description,
82
- descriptionRole = _this$props2.descriptionRole,
83
- renderBeforeLabel = _this$props2.renderBeforeLabel,
84
- renderAfterLabel = _this$props2.renderAfterLabel,
85
- children = _this$props2.children;
81
+ const _this$props4 = this.props,
82
+ as = _this$props4.as,
83
+ role = _this$props4.role,
84
+ styles = _this$props4.styles,
85
+ description = _this$props4.description,
86
+ descriptionRole = _this$props4.descriptionRole,
87
+ renderBeforeLabel = _this$props4.renderBeforeLabel,
88
+ renderAfterLabel = _this$props4.renderAfterLabel,
89
+ children = _this$props4.children;
86
90
  const ElementType = getElementType(Item, this.props, () => as);
87
91
  const passthroughProps = omitProps(this.props, Item.allowedProps);
88
92
  const childrenContent = callRenderProp(children);
89
93
  const descriptionContent = callRenderProp(description);
90
94
  return jsx(ElementType, {
91
95
  role: "none",
92
- css: styles?.item,
96
+ css: styles === null || styles === void 0 ? void 0 : styles.item,
93
97
  ref: element => {
94
98
  this.ref = element;
95
99
  }
96
100
  }, jsx("span", Object.assign({}, passthroughProps, {
97
- css: styles?.container,
101
+ css: styles === null || styles === void 0 ? void 0 : styles.container,
98
102
  role: role
99
103
  }), childrenContent, descriptionContent && jsx("span", {
100
- css: styles?.description,
104
+ css: styles === null || styles === void 0 ? void 0 : styles.description,
101
105
  role: descriptionRole
102
- }, descriptionContent)), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles?.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles?.contentAfter));
106
+ }, descriptionContent)), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles === null || styles === void 0 ? void 0 : styles.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles === null || styles === void 0 ? void 0 : styles.contentAfter));
103
107
  }
104
108
 
105
109
  }, _class2.displayName = "Item", _class2.componentId = 'Options.Item', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
package/es/Options/Item/theme.js CHANGED
@@ -39,19 +39,19 @@ const generateComponentTheme = theme => {
39
39
  }
40
40
  };
41
41
  const componentVariables = {
42
- fontSize: typography?.fontSizeMedium,
43
- fontFamily: typography?.fontFamily,
44
- fontWeight: typography?.fontWeightNormal,
45
- lineHeight: typography?.lineHeightCondensed,
46
- color: colors?.textDarkest,
47
- background: colors?.backgroundLightest,
48
- highlightedLabelColor: colors?.textLightest,
49
- highlightedBackground: colors?.backgroundBrand,
50
- selectedLabelColor: colors?.textLightest,
51
- selectedBackground: colors?.backgroundDark,
52
- padding: `${spacing?.xSmall} ${spacing?.small}`,
53
- iconPadding: spacing?.small,
54
- nestedPadding: spacing?.medium,
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
+ lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
46
+ color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
47
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
48
+ highlightedLabelColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
49
+ highlightedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
50
+ selectedLabelColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
51
+ selectedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,
52
+ padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
53
+ iconPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
54
+ nestedPadding: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
55
55
  beforeLabelContentVOffset: '0.625rem',
56
56
  afterLabelContentVOffset: '0.625rem',
57
57
  descriptionFontSize: typography.fontSizeSmall,
package/es/Options/Separator/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["as", "styles", "makeStyles"];
2
+ const _excluded = ["as", "styles"];
3
3
 
4
4
  var _dec, _class, _class2, _temp;
5
5
 
@@ -29,7 +29,7 @@ var _dec, _class, _class2, _temp;
29
29
 
30
30
  /** @jsx jsx */
31
31
  import { Component } from 'react';
32
- import { getElementType } from '@instructure/ui-react-utils';
32
+ import { getElementType, omitProps } from '@instructure/ui-react-utils';
33
33
  import { withStyle, jsx } from '@instructure/emotion';
34
34
  import generateStyles from './styles';
35
35
  import generateComponentTheme from './theme';
@@ -45,25 +45,28 @@ id: Options.Separator
45
45
 
46
46
  let Separator = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = (_temp = _class2 = class Separator extends Component {
47
47
  componentDidMount() {
48
- this.props.makeStyles?.();
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);
49
51
  }
50
52
 
51
53
  componentDidUpdate() {
52
- this.props.makeStyles?.();
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);
53
57
  }
54
58
 
55
59
  render() {
56
- const _this$props = this.props,
57
- as = _this$props.as,
58
- styles = _this$props.styles,
59
- makeStyles = _this$props.makeStyles,
60
- rest = _objectWithoutProperties(_this$props, _excluded);
60
+ const _this$props3 = this.props,
61
+ as = _this$props3.as,
62
+ styles = _this$props3.styles,
63
+ rest = _objectWithoutProperties(_this$props3, _excluded);
61
64
 
62
65
  const ElementType = getElementType(Separator, this.props, () => as);
63
66
  return jsx(ElementType, {
64
67
  role: "none"
65
- }, jsx("div", Object.assign({}, rest, {
66
- css: styles?.separator,
68
+ }, jsx("div", Object.assign({}, omitProps(rest, ['styles', 'makeStyles', 'themeOverride']), {
69
+ css: styles === null || styles === void 0 ? void 0 : styles.separator,
67
70
  role: "presentation"
68
71
  })));
69
72
  }
package/es/Options/Separator/theme.js CHANGED
@@ -32,9 +32,9 @@ const generateComponentTheme = theme => {
32
32
  colors = theme.colors,
33
33
  spacing = theme.spacing;
34
34
  const componentVariables = {
35
- background: colors?.backgroundMedium,
36
- height: borders?.widthSmall,
37
- margin: `0 ${spacing?.small}`
35
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundMedium,
36
+ height: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
37
+ margin: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
38
38
  };
39
39
  return { ...componentVariables
40
40
  };
package/es/Options/index.js CHANGED
@@ -55,11 +55,15 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
55
55
  }
56
56
 
57
57
  componentDidMount() {
58
- this.props.makeStyles?.();
58
+ var _this$props$makeStyle, _this$props;
59
+
60
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
59
61
  }
60
62
 
61
63
  componentDidUpdate() {
62
- this.props.makeStyles?.();
64
+ var _this$props$makeStyle2, _this$props2;
65
+
66
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
63
67
  }
64
68
 
65
69
  get childAs() {
@@ -73,14 +77,14 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
73
77
  }
74
78
 
75
79
  renderLabel() {
76
- const _this$props = this.props,
77
- renderLabel = _this$props.renderLabel,
78
- styles = _this$props.styles;
80
+ const _this$props3 = this.props,
81
+ renderLabel = _this$props3.renderLabel,
82
+ styles = _this$props3.styles;
79
83
  return jsx("span", {
80
84
  id: this._labelId,
81
85
  role: "presentation",
82
86
  "aria-hidden": "true",
83
- css: styles?.label
87
+ css: styles === null || styles === void 0 ? void 0 : styles.label
84
88
  }, callRenderProp(renderLabel));
85
89
  }
86
90
 
@@ -89,7 +93,7 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
89
93
  return jsx(Item, {
90
94
  as: this.childAs,
91
95
  role: "presentation",
92
- css: styles?.label
96
+ css: styles === null || styles === void 0 ? void 0 : styles.label
93
97
  }, subOptions);
94
98
  }
95
99
 
@@ -112,19 +116,19 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
112
116
 
113
117
  render() {
114
118
  const passthroughProps = View.omitViewProps(omitProps(this.props, Options.allowedProps), Options);
115
- const _this$props2 = this.props,
116
- as = _this$props2.as,
117
- role = _this$props2.role,
118
- renderLabel = _this$props2.renderLabel,
119
- elementRef = _this$props2.elementRef,
120
- styles = _this$props2.styles;
119
+ const _this$props4 = this.props,
120
+ as = _this$props4.as,
121
+ role = _this$props4.role,
122
+ renderLabel = _this$props4.renderLabel,
123
+ elementRef = _this$props4.elementRef,
124
+ styles = _this$props4.styles;
121
125
  return jsx("div", {
122
- css: styles?.options,
126
+ css: styles === null || styles === void 0 ? void 0 : styles.options,
123
127
  role: "presentation",
124
128
  ref: this.handleRef
125
129
  }, renderLabel && this.renderLabel(), jsx(View, Object.assign({}, passthroughProps, {
126
130
  elementRef: elementRef,
127
- css: styles?.list,
131
+ css: styles === null || styles === void 0 ? void 0 : styles.list,
128
132
  as: as,
129
133
  role: role,
130
134
  display: "block",
package/es/Options/theme.js CHANGED
@@ -32,11 +32,11 @@ const generateComponentTheme = theme => {
32
32
  typography = theme.typography,
33
33
  spacing = theme.spacing;
34
34
  const componentVariables = {
35
- labelFontWeight: typography?.fontWeightBold,
36
- background: colors?.backgroundLightest,
37
- labelColor: colors?.textDarkest,
38
- labelPadding: `${spacing?.xSmall} 0`,
39
- nestedLabelPadding: `${spacing?.xSmall} ${spacing?.small}`
35
+ labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
36
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
37
+ labelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
38
+ labelPadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} 0`,
39
+ nestedLabelPadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
40
40
  };
41
41
  return { ...componentVariables
42
42
  };
package/lib/Options/Item/index.js CHANGED
@@ -37,22 +37,26 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
37
37
  }
38
38
 
39
39
  componentDidMount() {
40
- this.props.makeStyles?.();
40
+ var _this$props$makeStyle, _this$props;
41
+
42
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
41
43
  }
42
44
 
43
45
  componentDidUpdate() {
44
- this.props.makeStyles?.();
46
+ var _this$props$makeStyle2, _this$props2;
47
+
48
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
45
49
  }
46
50
 
47
51
  renderContent(renderLabel, contentVariant) {
48
- const _this$props = this.props,
49
- styles = _this$props.styles,
50
- variant = _this$props.variant,
51
- as = _this$props.as,
52
- role = _this$props.role,
53
- children = _this$props.children;
52
+ const _this$props3 = this.props,
53
+ styles = _this$props3.styles,
54
+ variant = _this$props3.variant,
55
+ as = _this$props3.as,
56
+ role = _this$props3.role,
57
+ children = _this$props3.children;
54
58
  return (0, _emotion.jsx)("span", {
55
- css: [styles?.content, contentVariant],
59
+ css: [styles === null || styles === void 0 ? void 0 : styles.content, contentVariant],
56
60
  role: "presentation",
57
61
  "aria-hidden": "true"
58
62
  }, (0, _uiReactUtils.callRenderProp)(renderLabel, {
@@ -64,32 +68,32 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
64
68
  }
65
69
 
66
70
  render() {
67
- const _this$props2 = this.props,
68
- as = _this$props2.as,
69
- role = _this$props2.role,
70
- styles = _this$props2.styles,
71
- description = _this$props2.description,
72
- descriptionRole = _this$props2.descriptionRole,
73
- renderBeforeLabel = _this$props2.renderBeforeLabel,
74
- renderAfterLabel = _this$props2.renderAfterLabel,
75
- children = _this$props2.children;
71
+ const _this$props4 = this.props,
72
+ as = _this$props4.as,
73
+ role = _this$props4.role,
74
+ styles = _this$props4.styles,
75
+ description = _this$props4.description,
76
+ descriptionRole = _this$props4.descriptionRole,
77
+ renderBeforeLabel = _this$props4.renderBeforeLabel,
78
+ renderAfterLabel = _this$props4.renderAfterLabel,
79
+ children = _this$props4.children;
76
80
  const ElementType = (0, _uiReactUtils.getElementType)(Item, this.props, () => as);
77
81
  const passthroughProps = (0, _uiReactUtils.omitProps)(this.props, Item.allowedProps);
78
82
  const childrenContent = (0, _uiReactUtils.callRenderProp)(children);
79
83
  const descriptionContent = (0, _uiReactUtils.callRenderProp)(description);
80
84
  return (0, _emotion.jsx)(ElementType, {
81
85
  role: "none",
82
- css: styles?.item,
86
+ css: styles === null || styles === void 0 ? void 0 : styles.item,
83
87
  ref: element => {
84
88
  this.ref = element;
85
89
  }
86
90
  }, (0, _emotion.jsx)("span", Object.assign({}, passthroughProps, {
87
- css: styles?.container,
91
+ css: styles === null || styles === void 0 ? void 0 : styles.container,
88
92
  role: role
89
93
  }), childrenContent, descriptionContent && (0, _emotion.jsx)("span", {
90
- css: styles?.description,
94
+ css: styles === null || styles === void 0 ? void 0 : styles.description,
91
95
  role: descriptionRole
92
- }, descriptionContent)), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles?.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles?.contentAfter));
96
+ }, descriptionContent)), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles === null || styles === void 0 ? void 0 : styles.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles === null || styles === void 0 ? void 0 : styles.contentAfter));
93
97
  }
94
98
 
95
99
  }, _class2.displayName = "Item", _class2.componentId = 'Options.Item', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
package/lib/Options/Item/theme.js CHANGED
@@ -46,19 +46,19 @@ const generateComponentTheme = theme => {
46
46
  }
47
47
  };
48
48
  const componentVariables = {
49
- fontSize: typography?.fontSizeMedium,
50
- fontFamily: typography?.fontFamily,
51
- fontWeight: typography?.fontWeightNormal,
52
- lineHeight: typography?.lineHeightCondensed,
53
- color: colors?.textDarkest,
54
- background: colors?.backgroundLightest,
55
- highlightedLabelColor: colors?.textLightest,
56
- highlightedBackground: colors?.backgroundBrand,
57
- selectedLabelColor: colors?.textLightest,
58
- selectedBackground: colors?.backgroundDark,
59
- padding: `${spacing?.xSmall} ${spacing?.small}`,
60
- iconPadding: spacing?.small,
61
- nestedPadding: spacing?.medium,
49
+ fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
50
+ fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
51
+ fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
52
+ lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
53
+ color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
54
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
55
+ highlightedLabelColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
56
+ highlightedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundBrand,
57
+ selectedLabelColor: colors === null || colors === void 0 ? void 0 : colors.textLightest,
58
+ selectedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDark,
59
+ padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
60
+ iconPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
61
+ nestedPadding: spacing === null || spacing === void 0 ? void 0 : spacing.medium,
62
62
  beforeLabelContentVOffset: '0.625rem',
63
63
  afterLabelContentVOffset: '0.625rem',
64
64
  descriptionFontSize: typography.fontSizeSmall,
package/lib/Options/Separator/index.js CHANGED
@@ -21,7 +21,7 @@ var _theme = _interopRequireDefault(require("./theme"));
21
21
 
22
22
  var _props = require("./props");
23
23
 
24
- const _excluded = ["as", "styles", "makeStyles"];
24
+ const _excluded = ["as", "styles"];
25
25
 
26
26
  var _dec, _class, _class2, _temp;
27
27
 
@@ -35,24 +35,27 @@ id: Options.Separator
35
35
  **/
36
36
  let Separator = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = class Separator extends _react.Component {
37
37
  componentDidMount() {
38
- this.props.makeStyles?.();
38
+ var _this$props$makeStyle, _this$props;
39
+
40
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
39
41
  }
40
42
 
41
43
  componentDidUpdate() {
42
- this.props.makeStyles?.();
44
+ var _this$props$makeStyle2, _this$props2;
45
+
46
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
43
47
  }
44
48
 
45
49
  render() {
46
- const _this$props = this.props,
47
- as = _this$props.as,
48
- styles = _this$props.styles,
49
- makeStyles = _this$props.makeStyles,
50
- rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
50
+ const _this$props3 = this.props,
51
+ as = _this$props3.as,
52
+ styles = _this$props3.styles,
53
+ rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
51
54
  const ElementType = (0, _uiReactUtils.getElementType)(Separator, this.props, () => as);
52
55
  return (0, _emotion.jsx)(ElementType, {
53
56
  role: "none"
54
- }, (0, _emotion.jsx)("div", Object.assign({}, rest, {
55
- css: styles?.separator,
57
+ }, (0, _emotion.jsx)("div", Object.assign({}, (0, _uiReactUtils.omitProps)(rest, ['styles', 'makeStyles', 'themeOverride']), {
58
+ css: styles === null || styles === void 0 ? void 0 : styles.separator,
56
59
  role: "presentation"
57
60
  })));
58
61
  }
package/lib/Options/Separator/theme.js CHANGED
@@ -39,9 +39,9 @@ const generateComponentTheme = theme => {
39
39
  colors = theme.colors,
40
40
  spacing = theme.spacing;
41
41
  const componentVariables = {
42
- background: colors?.backgroundMedium,
43
- height: borders?.widthSmall,
44
- margin: `0 ${spacing?.small}`
42
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundMedium,
43
+ height: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
44
+ margin: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
45
45
  };
46
46
  return { ...componentVariables
47
47
  };
package/lib/Options/index.js CHANGED
@@ -50,11 +50,15 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
50
50
  }
51
51
 
52
52
  componentDidMount() {
53
- this.props.makeStyles?.();
53
+ var _this$props$makeStyle, _this$props;
54
+
55
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
54
56
  }
55
57
 
56
58
  componentDidUpdate() {
57
- this.props.makeStyles?.();
59
+ var _this$props$makeStyle2, _this$props2;
60
+
61
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
58
62
  }
59
63
 
60
64
  get childAs() {
@@ -68,14 +72,14 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
68
72
  }
69
73
 
70
74
  renderLabel() {
71
- const _this$props = this.props,
72
- renderLabel = _this$props.renderLabel,
73
- styles = _this$props.styles;
75
+ const _this$props3 = this.props,
76
+ renderLabel = _this$props3.renderLabel,
77
+ styles = _this$props3.styles;
74
78
  return (0, _emotion.jsx)("span", {
75
79
  id: this._labelId,
76
80
  role: "presentation",
77
81
  "aria-hidden": "true",
78
- css: styles?.label
82
+ css: styles === null || styles === void 0 ? void 0 : styles.label
79
83
  }, (0, _uiReactUtils.callRenderProp)(renderLabel));
80
84
  }
81
85
 
@@ -84,7 +88,7 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
84
88
  return (0, _emotion.jsx)(_Item.Item, {
85
89
  as: this.childAs,
86
90
  role: "presentation",
87
- css: styles?.label
91
+ css: styles === null || styles === void 0 ? void 0 : styles.label
88
92
  }, subOptions);
89
93
  }
90
94
 
@@ -108,19 +112,19 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
108
112
  render() {
109
113
  const passthroughProps = _uiView.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Options.allowedProps), Options);
110
114
 
111
- const _this$props2 = this.props,
112
- as = _this$props2.as,
113
- role = _this$props2.role,
114
- renderLabel = _this$props2.renderLabel,
115
- elementRef = _this$props2.elementRef,
116
- styles = _this$props2.styles;
115
+ const _this$props4 = this.props,
116
+ as = _this$props4.as,
117
+ role = _this$props4.role,
118
+ renderLabel = _this$props4.renderLabel,
119
+ elementRef = _this$props4.elementRef,
120
+ styles = _this$props4.styles;
117
121
  return (0, _emotion.jsx)("div", {
118
- css: styles?.options,
122
+ css: styles === null || styles === void 0 ? void 0 : styles.options,
119
123
  role: "presentation",
120
124
  ref: this.handleRef
121
125
  }, renderLabel && this.renderLabel(), (0, _emotion.jsx)(_uiView.View, Object.assign({}, passthroughProps, {
122
126
  elementRef: elementRef,
123
- css: styles?.list,
127
+ css: styles === null || styles === void 0 ? void 0 : styles.list,
124
128
  as: as,
125
129
  role: role,
126
130
  display: "block",
package/lib/Options/theme.js CHANGED
@@ -39,11 +39,11 @@ const generateComponentTheme = theme => {
39
39
  typography = theme.typography,
40
40
  spacing = theme.spacing;
41
41
  const componentVariables = {
42
- labelFontWeight: typography?.fontWeightBold,
43
- background: colors?.backgroundLightest,
44
- labelColor: colors?.textDarkest,
45
- labelPadding: `${spacing?.xSmall} 0`,
46
- nestedLabelPadding: `${spacing?.xSmall} ${spacing?.small}`
42
+ labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
43
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
44
+ labelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
45
+ labelPadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} 0`,
46
+ nestedLabelPadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
47
47
  };
48
48
  return { ...componentVariables
49
49
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-options",
3
- "version": "8.17.1-snapshot.82+96244a097",
3
+ "version": "8.18.1-snapshot.1+669aa5892",
4
4
  "description": "A view-only component for composing interactive lists and menus.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,21 +23,21 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.17.1-snapshot.82+96244a097",
27
- "@instructure/ui-color-utils": "8.17.1-snapshot.82+96244a097",
28
- "@instructure/ui-test-locator": "8.17.1-snapshot.82+96244a097",
29
- "@instructure/ui-test-utils": "8.17.1-snapshot.82+96244a097",
30
- "@instructure/ui-themes": "8.17.1-snapshot.82+96244a097"
26
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.1+669aa5892",
27
+ "@instructure/ui-color-utils": "8.18.1-snapshot.1+669aa5892",
28
+ "@instructure/ui-test-locator": "8.18.1-snapshot.1+669aa5892",
29
+ "@instructure/ui-test-utils": "8.18.1-snapshot.1+669aa5892",
30
+ "@instructure/ui-themes": "8.18.1-snapshot.1+669aa5892"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.13.10",
34
- "@instructure/emotion": "8.17.1-snapshot.82+96244a097",
35
- "@instructure/shared-types": "8.17.1-snapshot.82+96244a097",
36
- "@instructure/ui-icons": "8.17.1-snapshot.82+96244a097",
37
- "@instructure/ui-prop-types": "8.17.1-snapshot.82+96244a097",
38
- "@instructure/ui-react-utils": "8.17.1-snapshot.82+96244a097",
39
- "@instructure/ui-testable": "8.17.1-snapshot.82+96244a097",
40
- "@instructure/ui-view": "8.17.1-snapshot.82+96244a097",
34
+ "@instructure/emotion": "8.18.1-snapshot.1+669aa5892",
35
+ "@instructure/shared-types": "8.18.1-snapshot.1+669aa5892",
36
+ "@instructure/ui-icons": "8.18.1-snapshot.1+669aa5892",
37
+ "@instructure/ui-prop-types": "8.18.1-snapshot.1+669aa5892",
38
+ "@instructure/ui-react-utils": "8.18.1-snapshot.1+669aa5892",
39
+ "@instructure/ui-testable": "8.18.1-snapshot.1+669aa5892",
40
+ "@instructure/ui-view": "8.18.1-snapshot.1+669aa5892",
41
41
  "prop-types": "^15"
42
42
  },
43
43
  "peerDependencies": {
@@ -47,5 +47,5 @@
47
47
  "access": "public"
48
48
  },
49
49
  "sideEffects": false,
50
- "gitHead": "96244a097dffef5f10bbe7979c580581c787083e"
50
+ "gitHead": "669aa58926b123028bcb9e39427d36910b78b0d1"
51
51
  }
package/src/Options/Separator/index.tsx CHANGED
@@ -25,7 +25,7 @@
25
25
  /** @jsx jsx */
26
26
  import { Component } from 'react'
27
27
 
28
- import { getElementType } from '@instructure/ui-react-utils'
28
+ import { getElementType, omitProps } from '@instructure/ui-react-utils'
29
29
 
30
30
  import { withStyle, jsx } from '@instructure/emotion'
31
31
 
@@ -62,12 +62,18 @@ class Separator extends Component<OptionsSeparatorProps> {
62
62
  }
63
63
 
64
64
  render() {
65
- const { as, styles, makeStyles, ...rest } = this.props
65
+ const { as, styles, ...rest } = this.props
66
+
66
67
  const ElementType = getElementType(Separator, this.props, () => as!)
67
68
 
68
69
  return (
69
70
  <ElementType role="none">
70
- <div {...rest} css={styles?.separator} role="presentation" />
71
+ <div
72
+ // we need to omit the withStyle props
73
+ {...omitProps(rest, ['styles', 'makeStyles', 'themeOverride'])}
74
+ css={styles?.separator}
75
+ role="presentation"
76
+ />
71
77
  </ElementType>
72
78
  )
73
79
  }