@instructure/ui-options 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 (14) hide show
  1. package/es/Options/Item/index.js +22 -26
  2. package/es/Options/Item/theme.js +13 -13
  3. package/es/Options/Separator/index.js +8 -12
  4. package/es/Options/Separator/theme.js +3 -3
  5. package/es/Options/index.js +15 -19
  6. package/es/Options/theme.js +5 -5
  7. package/lib/Options/Item/index.js +22 -26
  8. package/lib/Options/Item/theme.js +13 -13
  9. package/lib/Options/Separator/index.js +8 -12
  10. package/lib/Options/Separator/theme.js +3 -3
  11. package/lib/Options/index.js +15 -19
  12. package/lib/Options/theme.js +5 -5
  13. package/package.json +14 -14
  14. package/tsconfig.build.tsbuildinfo +1 -1
package/es/Options/Item/index.js CHANGED
@@ -47,26 +47,22 @@ let Item = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = te
47
47
  }
48
48
 
49
49
  componentDidMount() {
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);
50
+ this.props.makeStyles?.();
53
51
  }
54
52
 
55
53
  componentDidUpdate() {
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);
54
+ this.props.makeStyles?.();
59
55
  }
60
56
 
61
57
  renderContent(renderLabel, contentVariant) {
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;
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;
68
64
  return jsx("span", {
69
- css: [styles === null || styles === void 0 ? void 0 : styles.content, contentVariant],
65
+ css: [styles?.content, contentVariant],
70
66
  role: "presentation",
71
67
  "aria-hidden": "true"
72
68
  }, callRenderProp(renderLabel, {
@@ -78,32 +74,32 @@ let Item = (_dec = withStyle(generateStyles, generateComponentTheme), _dec2 = te
78
74
  }
79
75
 
80
76
  render() {
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;
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;
90
86
  const ElementType = getElementType(Item, this.props, () => as);
91
87
  const passthroughProps = omitProps(this.props, Item.allowedProps);
92
88
  const childrenContent = callRenderProp(children);
93
89
  const descriptionContent = callRenderProp(description);
94
90
  return jsx(ElementType, {
95
91
  role: "none",
96
- css: styles === null || styles === void 0 ? void 0 : styles.item,
92
+ css: styles?.item,
97
93
  ref: element => {
98
94
  this.ref = element;
99
95
  }
100
96
  }, jsx("span", Object.assign({}, passthroughProps, {
101
- css: styles === null || styles === void 0 ? void 0 : styles.container,
97
+ css: styles?.container,
102
98
  role: role
103
99
  }), childrenContent, descriptionContent && jsx("span", {
104
- css: styles === null || styles === void 0 ? void 0 : styles.description,
100
+ css: styles?.description,
105
101
  role: descriptionRole
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));
102
+ }, descriptionContent)), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles?.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles?.contentAfter));
107
103
  }
108
104
 
109
105
  }, _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 === 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,
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,
55
55
  beforeLabelContentVOffset: '0.625rem',
56
56
  afterLabelContentVOffset: '0.625rem',
57
57
  descriptionFontSize: typography.fontSizeSmall,
package/es/Options/Separator/index.js CHANGED
@@ -45,29 +45,25 @@ 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
- 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
- as = _this$props3.as,
62
- styles = _this$props3.styles,
63
- makeStyles = _this$props3.makeStyles,
64
- rest = _objectWithoutProperties(_this$props3, _excluded);
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);
65
61
 
66
62
  const ElementType = getElementType(Separator, this.props, () => as);
67
63
  return jsx(ElementType, {
68
64
  role: "none"
69
65
  }, jsx("div", Object.assign({}, rest, {
70
- css: styles === null || styles === void 0 ? void 0 : styles.separator,
66
+ css: styles?.separator,
71
67
  role: "presentation"
72
68
  })));
73
69
  }
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 === 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}`
35
+ background: colors?.backgroundMedium,
36
+ height: borders?.widthSmall,
37
+ margin: `0 ${spacing?.small}`
38
38
  };
39
39
  return { ...componentVariables
40
40
  };
package/es/Options/index.js CHANGED
@@ -55,15 +55,11 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
55
55
  }
56
56
 
57
57
  componentDidMount() {
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);
58
+ this.props.makeStyles?.();
61
59
  }
62
60
 
63
61
  componentDidUpdate() {
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);
62
+ this.props.makeStyles?.();
67
63
  }
68
64
 
69
65
  get childAs() {
@@ -77,14 +73,14 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
77
73
  }
78
74
 
79
75
  renderLabel() {
80
- const _this$props3 = this.props,
81
- renderLabel = _this$props3.renderLabel,
82
- styles = _this$props3.styles;
76
+ const _this$props = this.props,
77
+ renderLabel = _this$props.renderLabel,
78
+ styles = _this$props.styles;
83
79
  return jsx("span", {
84
80
  id: this._labelId,
85
81
  role: "presentation",
86
82
  "aria-hidden": "true",
87
- css: styles === null || styles === void 0 ? void 0 : styles.label
83
+ css: styles?.label
88
84
  }, callRenderProp(renderLabel));
89
85
  }
90
86
 
@@ -93,7 +89,7 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
93
89
  return jsx(Item, {
94
90
  as: this.childAs,
95
91
  role: "presentation",
96
- css: styles === null || styles === void 0 ? void 0 : styles.label
92
+ css: styles?.label
97
93
  }, subOptions);
98
94
  }
99
95
 
@@ -116,19 +112,19 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
116
112
 
117
113
  render() {
118
114
  const passthroughProps = View.omitViewProps(omitProps(this.props, Options.allowedProps), Options);
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;
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;
125
121
  return jsx("div", {
126
- css: styles === null || styles === void 0 ? void 0 : styles.options,
122
+ css: styles?.options,
127
123
  role: "presentation",
128
124
  ref: this.handleRef
129
125
  }, renderLabel && this.renderLabel(), jsx(View, Object.assign({}, passthroughProps, {
130
126
  elementRef: elementRef,
131
- css: styles === null || styles === void 0 ? void 0 : styles.list,
127
+ css: styles?.list,
132
128
  as: as,
133
129
  role: role,
134
130
  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 === 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}`
35
+ labelFontWeight: typography?.fontWeightBold,
36
+ background: colors?.backgroundLightest,
37
+ labelColor: colors?.textDarkest,
38
+ labelPadding: `${spacing?.xSmall} 0`,
39
+ nestedLabelPadding: `${spacing?.xSmall} ${spacing?.small}`
40
40
  };
41
41
  return { ...componentVariables
42
42
  };
package/lib/Options/Item/index.js CHANGED
@@ -37,26 +37,22 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
37
37
  }
38
38
 
39
39
  componentDidMount() {
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);
40
+ this.props.makeStyles?.();
43
41
  }
44
42
 
45
43
  componentDidUpdate() {
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);
44
+ this.props.makeStyles?.();
49
45
  }
50
46
 
51
47
  renderContent(renderLabel, contentVariant) {
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;
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;
58
54
  return (0, _emotion.jsx)("span", {
59
- css: [styles === null || styles === void 0 ? void 0 : styles.content, contentVariant],
55
+ css: [styles?.content, contentVariant],
60
56
  role: "presentation",
61
57
  "aria-hidden": "true"
62
58
  }, (0, _uiReactUtils.callRenderProp)(renderLabel, {
@@ -68,32 +64,32 @@ let Item = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _de
68
64
  }
69
65
 
70
66
  render() {
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;
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;
80
76
  const ElementType = (0, _uiReactUtils.getElementType)(Item, this.props, () => as);
81
77
  const passthroughProps = (0, _uiReactUtils.omitProps)(this.props, Item.allowedProps);
82
78
  const childrenContent = (0, _uiReactUtils.callRenderProp)(children);
83
79
  const descriptionContent = (0, _uiReactUtils.callRenderProp)(description);
84
80
  return (0, _emotion.jsx)(ElementType, {
85
81
  role: "none",
86
- css: styles === null || styles === void 0 ? void 0 : styles.item,
82
+ css: styles?.item,
87
83
  ref: element => {
88
84
  this.ref = element;
89
85
  }
90
86
  }, (0, _emotion.jsx)("span", Object.assign({}, passthroughProps, {
91
- css: styles === null || styles === void 0 ? void 0 : styles.container,
87
+ css: styles?.container,
92
88
  role: role
93
89
  }), childrenContent, descriptionContent && (0, _emotion.jsx)("span", {
94
- css: styles === null || styles === void 0 ? void 0 : styles.description,
90
+ css: styles?.description,
95
91
  role: descriptionRole
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));
92
+ }, descriptionContent)), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles?.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles?.contentAfter));
97
93
  }
98
94
 
99
95
  }, _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 === 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,
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,
62
62
  beforeLabelContentVOffset: '0.625rem',
63
63
  afterLabelContentVOffset: '0.625rem',
64
64
  descriptionFontSize: typography.fontSizeSmall,
package/lib/Options/Separator/index.js CHANGED
@@ -35,28 +35,24 @@ 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
- 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);
38
+ this.props.makeStyles?.();
41
39
  }
42
40
 
43
41
  componentDidUpdate() {
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);
42
+ this.props.makeStyles?.();
47
43
  }
48
44
 
49
45
  render() {
50
- const _this$props3 = this.props,
51
- as = _this$props3.as,
52
- styles = _this$props3.styles,
53
- makeStyles = _this$props3.makeStyles,
54
- rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
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);
55
51
  const ElementType = (0, _uiReactUtils.getElementType)(Separator, this.props, () => as);
56
52
  return (0, _emotion.jsx)(ElementType, {
57
53
  role: "none"
58
54
  }, (0, _emotion.jsx)("div", Object.assign({}, rest, {
59
- css: styles === null || styles === void 0 ? void 0 : styles.separator,
55
+ css: styles?.separator,
60
56
  role: "presentation"
61
57
  })));
62
58
  }
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 === 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}`
42
+ background: colors?.backgroundMedium,
43
+ height: borders?.widthSmall,
44
+ margin: `0 ${spacing?.small}`
45
45
  };
46
46
  return { ...componentVariables
47
47
  };
package/lib/Options/index.js CHANGED
@@ -50,15 +50,11 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
50
50
  }
51
51
 
52
52
  componentDidMount() {
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);
53
+ this.props.makeStyles?.();
56
54
  }
57
55
 
58
56
  componentDidUpdate() {
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);
57
+ this.props.makeStyles?.();
62
58
  }
63
59
 
64
60
  get childAs() {
@@ -72,14 +68,14 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
72
68
  }
73
69
 
74
70
  renderLabel() {
75
- const _this$props3 = this.props,
76
- renderLabel = _this$props3.renderLabel,
77
- styles = _this$props3.styles;
71
+ const _this$props = this.props,
72
+ renderLabel = _this$props.renderLabel,
73
+ styles = _this$props.styles;
78
74
  return (0, _emotion.jsx)("span", {
79
75
  id: this._labelId,
80
76
  role: "presentation",
81
77
  "aria-hidden": "true",
82
- css: styles === null || styles === void 0 ? void 0 : styles.label
78
+ css: styles?.label
83
79
  }, (0, _uiReactUtils.callRenderProp)(renderLabel));
84
80
  }
85
81
 
@@ -88,7 +84,7 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
88
84
  return (0, _emotion.jsx)(_Item.Item, {
89
85
  as: this.childAs,
90
86
  role: "presentation",
91
- css: styles === null || styles === void 0 ? void 0 : styles.label
87
+ css: styles?.label
92
88
  }, subOptions);
93
89
  }
94
90
 
@@ -112,19 +108,19 @@ let Options = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emo
112
108
  render() {
113
109
  const passthroughProps = _uiView.View.omitViewProps((0, _uiReactUtils.omitProps)(this.props, Options.allowedProps), Options);
114
110
 
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;
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;
121
117
  return (0, _emotion.jsx)("div", {
122
- css: styles === null || styles === void 0 ? void 0 : styles.options,
118
+ css: styles?.options,
123
119
  role: "presentation",
124
120
  ref: this.handleRef
125
121
  }, renderLabel && this.renderLabel(), (0, _emotion.jsx)(_uiView.View, Object.assign({}, passthroughProps, {
126
122
  elementRef: elementRef,
127
- css: styles === null || styles === void 0 ? void 0 : styles.list,
123
+ css: styles?.list,
128
124
  as: as,
129
125
  role: role,
130
126
  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 === 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}`
42
+ labelFontWeight: typography?.fontWeightBold,
43
+ background: colors?.backgroundLightest,
44
+ labelColor: colors?.textDarkest,
45
+ labelPadding: `${spacing?.xSmall} 0`,
46
+ nestedLabelPadding: `${spacing?.xSmall} ${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.21+79d490548",
3
+ "version": "8.17.1-snapshot.71+34dfb2442",
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.21+79d490548",
27
- "@instructure/ui-color-utils": "8.17.1-snapshot.21+79d490548",
28
- "@instructure/ui-test-locator": "8.17.1-snapshot.21+79d490548",
29
- "@instructure/ui-test-utils": "8.17.1-snapshot.21+79d490548",
30
- "@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-locator": "8.17.1-snapshot.71+34dfb2442",
29
+ "@instructure/ui-test-utils": "8.17.1-snapshot.71+34dfb2442",
30
+ "@instructure/ui-themes": "8.17.1-snapshot.71+34dfb2442"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.13.10",
34
- "@instructure/emotion": "8.17.1-snapshot.21+79d490548",
35
- "@instructure/shared-types": "8.17.1-snapshot.21+79d490548",
36
- "@instructure/ui-icons": "8.17.1-snapshot.21+79d490548",
37
- "@instructure/ui-prop-types": "8.17.1-snapshot.21+79d490548",
38
- "@instructure/ui-react-utils": "8.17.1-snapshot.21+79d490548",
39
- "@instructure/ui-testable": "8.17.1-snapshot.21+79d490548",
40
- "@instructure/ui-view": "8.17.1-snapshot.21+79d490548",
34
+ "@instructure/emotion": "8.17.1-snapshot.71+34dfb2442",
35
+ "@instructure/shared-types": "8.17.1-snapshot.71+34dfb2442",
36
+ "@instructure/ui-icons": "8.17.1-snapshot.71+34dfb2442",
37
+ "@instructure/ui-prop-types": "8.17.1-snapshot.71+34dfb2442",
38
+ "@instructure/ui-react-utils": "8.17.1-snapshot.71+34dfb2442",
39
+ "@instructure/ui-testable": "8.17.1-snapshot.71+34dfb2442",
40
+ "@instructure/ui-view": "8.17.1-snapshot.71+34dfb2442",
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": "79d490548a0736feb2a7232bf5918857317b178b"
50
+ "gitHead": "34dfb2442c7ddce048d78ab1ecd5f3cbb78ee8d6"
51
51
  }