@instructure/ui-options 11.7.3-snapshot-7 → 11.7.3-snapshot-26

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 (25) hide show
  1. package/CHANGELOG.md +5 -2
  2. package/es/Options/v1/Item/index.js +48 -44
  3. package/es/Options/v1/Item/styles.js +8 -6
  4. package/es/Options/v1/Item/theme.js +22 -21
  5. package/es/Options/v1/Separator/index.js +17 -16
  6. package/es/Options/v1/Separator/theme.js +8 -7
  7. package/es/Options/v1/index.js +49 -40
  8. package/es/Options/v1/theme.js +10 -9
  9. package/es/Options/v2/Item/index.js +48 -44
  10. package/es/Options/v2/Item/styles.js +8 -6
  11. package/es/Options/v2/Separator/index.js +17 -16
  12. package/es/Options/v2/index.js +49 -40
  13. package/lib/Options/v1/Item/index.js +48 -44
  14. package/lib/Options/v1/Item/styles.js +8 -6
  15. package/lib/Options/v1/Item/theme.js +22 -21
  16. package/lib/Options/v1/Separator/index.js +17 -16
  17. package/lib/Options/v1/Separator/theme.js +8 -7
  18. package/lib/Options/v1/index.js +49 -40
  19. package/lib/Options/v1/theme.js +10 -9
  20. package/lib/Options/v2/Item/index.js +48 -44
  21. package/lib/Options/v2/Item/styles.js +8 -6
  22. package/lib/Options/v2/Separator/index.js +17 -16
  23. package/lib/Options/v2/index.js +49 -40
  24. package/package.json +12 -12
  25. package/tsconfig.build.tsbuildinfo +1 -1
package/es/Options/v2/Item/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _dec2, _class, _Item;
1
+ var _dec, _dec2, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -35,28 +35,39 @@ id: Options.Item
35
35
  ---
36
36
  **/
37
37
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
38
- let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles), _dec(_class = _dec2(_class = (_Item = class Item extends Component {
38
+ let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles), _dec(_class = _dec2(_class = class Item extends Component {
39
+ static displayName = "Item";
40
+ static componentId = 'Options.Item';
41
+ static allowedProps = allowedProps;
42
+ static defaultProps = {
43
+ as: 'span',
44
+ variant: 'default',
45
+ role: 'listitem',
46
+ voiceoverRoleBugWorkaround: false,
47
+ beforeLabelContentVAlign: 'center',
48
+ afterLabelContentVAlign: 'center',
49
+ isSelected: false
50
+ };
51
+ ref = null;
52
+ _descriptionId;
39
53
  constructor(props) {
40
54
  super(props);
41
- this.ref = null;
42
- this._descriptionId = void 0;
43
55
  this._descriptionId = props.deterministicId('OptionsItem-description');
44
56
  }
45
57
  componentDidMount() {
46
- var _this$props$makeStyle, _this$props;
47
- (_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?.();
48
59
  }
49
60
  componentDidUpdate() {
50
- var _this$props$makeStyle2, _this$props2;
51
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
61
+ this.props.makeStyles?.();
52
62
  }
53
63
  renderContent(renderLabel, contentVariant) {
54
- const _this$props3 = this.props,
55
- styles = _this$props3.styles,
56
- variant = _this$props3.variant,
57
- as = _this$props3.as,
58
- role = _this$props3.role,
59
- children = _this$props3.children;
64
+ const {
65
+ styles,
66
+ variant,
67
+ as,
68
+ role,
69
+ children
70
+ } = this.props;
60
71
  let labelContent;
61
72
  if (typeof renderLabel === 'function') {
62
73
  labelContent = /*#__PURE__*/createElement(renderLabel, {
@@ -68,65 +79,58 @@ let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles), _de
68
79
  labelContent = renderLabel;
69
80
  }
70
81
  return _jsx("span", {
71
- css: [styles === null || styles === void 0 ? void 0 : styles.content, contentVariant],
82
+ css: [styles?.content, contentVariant],
72
83
  role: "presentation",
73
84
  "aria-hidden": "true",
74
85
  children: labelContent
75
86
  });
76
87
  }
77
88
  render() {
78
- const _this$props4 = this.props,
79
- as = _this$props4.as,
80
- href = _this$props4.href,
81
- role = _this$props4.role,
82
- styles = _this$props4.styles,
83
- description = _this$props4.description,
84
- descriptionRole = _this$props4.descriptionRole,
85
- renderBeforeLabel = _this$props4.renderBeforeLabel,
86
- renderAfterLabel = _this$props4.renderAfterLabel,
87
- elementRef = _this$props4.elementRef,
88
- children = _this$props4.children,
89
- voiceoverRoleBugWorkaround = _this$props4.voiceoverRoleBugWorkaround;
89
+ const {
90
+ as,
91
+ href,
92
+ role,
93
+ styles,
94
+ description,
95
+ descriptionRole,
96
+ renderBeforeLabel,
97
+ renderAfterLabel,
98
+ elementRef,
99
+ children,
100
+ voiceoverRoleBugWorkaround
101
+ } = this.props;
90
102
  const ElementType = getElementType(Item, this.props, () => as);
91
103
  const InnerElementType = href ? 'a' : 'span';
92
104
  const passthroughProps = omitProps(this.props, Item.allowedProps);
93
105
  const childrenContent = callRenderProp(children);
94
106
  const descriptionContent = callRenderProp(description);
95
- const ariaDescribedBy = this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : void 0);
107
+ const ariaDescribedBy = this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : undefined);
96
108
  return _jsxs(ElementType, {
97
109
  role: voiceoverRoleBugWorkaround ? role : 'none',
98
110
  "data-cid": "Options.Item",
99
- css: styles === null || styles === void 0 ? void 0 : styles.item,
111
+ css: styles?.item,
100
112
  ref: element => {
101
113
  this.ref = element;
102
114
  if (typeof elementRef === 'function') {
103
115
  elementRef(element);
104
116
  }
105
117
  },
106
- "aria-describedby": voiceoverRoleBugWorkaround ? ariaDescribedBy : void 0,
118
+ "aria-describedby": voiceoverRoleBugWorkaround ? ariaDescribedBy : undefined,
107
119
  children: [_jsxs(InnerElementType, {
108
120
  ...passthroughProps,
109
- css: styles === null || styles === void 0 ? void 0 : styles.container,
110
- role: href || voiceoverRoleBugWorkaround ? void 0 : role,
121
+ css: styles?.container,
122
+ role: href || voiceoverRoleBugWorkaround ? undefined : role,
111
123
  href: href,
112
- "aria-describedby": voiceoverRoleBugWorkaround ? void 0 : ariaDescribedBy,
124
+ "aria-describedby": voiceoverRoleBugWorkaround ? undefined : ariaDescribedBy,
113
125
  children: [childrenContent, descriptionContent && _jsx("span", {
114
- css: styles === null || styles === void 0 ? void 0 : styles.description,
126
+ css: styles?.description,
115
127
  role: descriptionRole,
116
128
  id: this._descriptionId,
117
129
  children: descriptionContent
118
130
  })]
119
- }), 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)]
131
+ }), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles?.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles?.contentAfter)]
120
132
  });
121
133
  }
122
- }, _Item.displayName = "Item", _Item.componentId = 'Options.Item', _Item.allowedProps = allowedProps, _Item.defaultProps = {
123
- as: 'span',
124
- variant: 'default',
125
- role: 'listitem',
126
- voiceoverRoleBugWorkaround: false,
127
- beforeLabelContentVAlign: 'center',
128
- afterLabelContentVAlign: 'center',
129
- isSelected: false
130
- }, _Item)) || _class) || _class);
134
+ }) || _class) || _class);
131
135
  export default Item;
132
136
  export { Item };
package/es/Options/v2/Item/styles.js CHANGED
@@ -34,12 +34,14 @@ import { matchComponentTypes } from '@instructure/ui-react-utils';
34
34
  * @return {Object} The final style object, which will be used in the component
35
35
  */
36
36
  const generateStyle = (componentTheme, props) => {
37
- const variant = props.variant,
38
- children = props.children,
39
- hasContentBeforeLabel = props.renderBeforeLabel,
40
- hasContentAfterLabel = props.renderAfterLabel,
41
- beforeLabelContentVAlign = props.beforeLabelContentVAlign,
42
- afterLabelContentVAlign = props.afterLabelContentVAlign;
37
+ const {
38
+ variant,
39
+ children,
40
+ renderBeforeLabel: hasContentBeforeLabel,
41
+ renderAfterLabel: hasContentAfterLabel,
42
+ beforeLabelContentVAlign,
43
+ afterLabelContentVAlign
44
+ } = props;
43
45
  // TODO if children are () => ReactNode this wont match anything
44
46
  const containsList = matchComponentTypes(children, ['Options']);
45
47
 
package/es/Options/v2/Separator/index.js CHANGED
@@ -1,6 +1,4 @@
1
- import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
- const _excluded = ["as", "styles"];
3
- var _dec, _class, _Separator;
1
+ var _dec, _class;
4
2
  /*
5
3
  * The MIT License (MIT)
6
4
  *
@@ -38,32 +36,35 @@ id: Options.Separator
38
36
  @module Separator
39
37
  **/
40
38
  import { jsx as _jsx } from "@emotion/react/jsx-runtime";
41
- let Separator = (_dec = withStyle(generateStyles), _dec(_class = (_Separator = class Separator extends Component {
39
+ let Separator = (_dec = withStyle(generateStyles), _dec(_class = class Separator extends Component {
40
+ static displayName = "Separator";
41
+ static componentId = 'Options.Separator';
42
+ static allowedProps = allowedProps;
43
+ static defaultProps = {
44
+ as: 'span'
45
+ };
42
46
  componentDidMount() {
43
- var _this$props$makeStyle, _this$props;
44
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
47
+ this.props.makeStyles?.();
45
48
  }
46
49
  componentDidUpdate() {
47
- var _this$props$makeStyle2, _this$props2;
48
- (_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?.();
49
51
  }
50
52
  render() {
51
- const _this$props3 = this.props,
52
- as = _this$props3.as,
53
- styles = _this$props3.styles,
54
- rest = _objectWithoutProperties(_this$props3, _excluded);
53
+ const {
54
+ as,
55
+ styles,
56
+ ...rest
57
+ } = this.props;
55
58
  const ElementType = getElementType(Separator, this.props, () => as);
56
59
  return _jsx(ElementType, {
57
60
  role: "none",
58
61
  children: _jsx("div", {
59
62
  ...omitProps(rest, ['styles', 'makeStyles', 'themeOverride']),
60
- css: styles === null || styles === void 0 ? void 0 : styles.separator,
63
+ css: styles?.separator,
61
64
  role: "presentation"
62
65
  })
63
66
  });
64
67
  }
65
- }, _Separator.displayName = "Separator", _Separator.componentId = 'Options.Separator', _Separator.allowedProps = allowedProps, _Separator.defaultProps = {
66
- as: 'span'
67
- }, _Separator)) || _class);
68
+ }) || _class);
68
69
  export default Separator;
69
70
  export { Separator };
package/es/Options/v2/index.js CHANGED
@@ -1,4 +1,4 @@
1
- var _dec, _dec2, _class, _Options;
1
+ var _dec, _dec2, _class;
2
2
  /*
3
3
  * The MIT License (MIT)
4
4
  *
@@ -38,34 +38,44 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
38
38
  category: components/utilities
39
39
  ---
40
40
  **/
41
- let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles), _dec(_class = _dec2(_class = (_Options = class Options extends Component {
42
- constructor(...args) {
43
- super(...args);
44
- this.ref = null;
45
- this.handleRef = el => {
46
- this.ref = el;
47
- };
48
- this._labelId = this.props.deterministicId('Options-label');
49
- }
41
+ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles), _dec(_class = _dec2(_class = class Options extends Component {
42
+ static displayName = "Options";
43
+ static componentId = 'Options';
44
+ static allowedProps = allowedProps;
45
+ static defaultProps = {
46
+ as: 'span',
47
+ role: 'list',
48
+ elementRef: () => {},
49
+ renderLabel: null,
50
+ children: null
51
+ };
52
+ static Item = Item;
53
+ static Separator = Separator;
54
+ ref = null;
55
+ handleRef = el => {
56
+ this.ref = el;
57
+ };
50
58
  componentDidMount() {
51
- var _this$props$makeStyle, _this$props;
52
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
59
+ this.props.makeStyles?.();
53
60
  }
54
61
  componentDidUpdate() {
55
- var _this$props$makeStyle2, _this$props2;
56
- (_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?.();
57
63
  }
64
+ _labelId = this.props.deterministicId('Options-label');
58
65
  get childAs() {
59
- const as = this.props.as;
66
+ const {
67
+ as
68
+ } = this.props;
60
69
  if (as === 'ul' || as === 'ol') {
61
70
  return 'li';
62
71
  }
63
- return void 0;
72
+ return undefined;
64
73
  }
65
74
  renderLabel() {
66
- const _this$props3 = this.props,
67
- renderLabel = _this$props3.renderLabel,
68
- styles = _this$props3.styles;
75
+ const {
76
+ renderLabel,
77
+ styles
78
+ } = this.props;
69
79
  let labelContent;
70
80
  if (typeof renderLabel === 'function') {
71
81
  labelContent = /*#__PURE__*/createElement(renderLabel, {});
@@ -78,21 +88,25 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles),
78
88
  // because TalkBack and iOS VoiceOver don't announce sub-menu labels, aria-hidden needs to be false to achive that
79
89
  ,
80
90
  "aria-hidden": isAndroidOrIOS() ? 'false' : 'true',
81
- css: styles === null || styles === void 0 ? void 0 : styles.label,
91
+ css: styles?.label,
82
92
  children: labelContent
83
93
  });
84
94
  }
85
95
  renderSubList(subOptions) {
86
- const styles = this.props.styles;
96
+ const {
97
+ styles
98
+ } = this.props;
87
99
  return _jsx(Item, {
88
100
  as: this.childAs,
89
101
  role: "presentation",
90
- css: styles === null || styles === void 0 ? void 0 : styles.label,
102
+ css: styles?.label,
91
103
  children: subOptions
92
104
  });
93
105
  }
94
106
  renderChildren() {
95
- const children = this.props.children;
107
+ const {
108
+ children
109
+ } = this.props;
96
110
  return Children.map(children, child => {
97
111
  if (matchComponentTypes(child, ['Options'])) {
98
112
  return this.renderSubList(child);
@@ -102,7 +116,7 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles),
102
116
  as: this.childAs || child.props.as
103
117
  });
104
118
  }
105
- return void 0;
119
+ return undefined;
106
120
  });
107
121
  }
108
122
  get ariaLabelledby() {
@@ -112,25 +126,26 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles),
112
126
  if (this.props['aria-labelledby']) {
113
127
  return this.props['aria-labelledby'];
114
128
  }
115
- return void 0;
129
+ return undefined;
116
130
  }
117
131
  render() {
118
132
  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;
133
+ const {
134
+ as,
135
+ role,
136
+ renderLabel,
137
+ elementRef,
138
+ styles
139
+ } = this.props;
125
140
  return _jsxs("div", {
126
- css: styles === null || styles === void 0 ? void 0 : styles.options,
141
+ css: styles?.options,
127
142
  role: "presentation",
128
143
  ref: this.handleRef,
129
144
  "data-cid": "Options",
130
145
  children: [renderLabel && this.renderLabel(), _jsx(View, {
131
146
  ...passthroughProps,
132
147
  elementRef: elementRef,
133
- css: styles === null || styles === void 0 ? void 0 : styles.list,
148
+ css: styles?.list,
134
149
  as: as,
135
150
  role: role,
136
151
  display: "block",
@@ -142,12 +157,6 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles),
142
157
  })]
143
158
  });
144
159
  }
145
- }, _Options.displayName = "Options", _Options.componentId = 'Options', _Options.allowedProps = allowedProps, _Options.defaultProps = {
146
- as: 'span',
147
- role: 'list',
148
- elementRef: () => {},
149
- renderLabel: null,
150
- children: null
151
- }, _Options.Item = Item, _Options.Separator = Separator, _Options)) || _class) || _class);
160
+ }) || _class) || _class);
152
161
  export default Options;
153
162
  export { Options };
package/lib/Options/v1/Item/index.js CHANGED
@@ -12,7 +12,7 @@ var _styles = _interopRequireDefault(require("./styles"));
12
12
  var _theme = _interopRequireDefault(require("./theme"));
13
13
  var _props = require("./props");
14
14
  var _jsxRuntime = require("@emotion/react/jsx-runtime");
15
- var _dec, _dec2, _class, _Item;
15
+ var _dec, _dec2, _class;
16
16
  /*
17
17
  * The MIT License (MIT)
18
18
  *
@@ -42,28 +42,39 @@ parent: Options
42
42
  id: Options.Item
43
43
  ---
44
44
  **/
45
- let Item = exports.Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = (_Item = class Item extends _react.Component {
45
+ let Item = exports.Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyleLegacy)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class Item extends _react.Component {
46
+ static displayName = "Item";
47
+ static componentId = 'Options.Item';
48
+ static allowedProps = _props.allowedProps;
49
+ static defaultProps = {
50
+ as: 'span',
51
+ variant: 'default',
52
+ role: 'listitem',
53
+ voiceoverRoleBugWorkaround: false,
54
+ beforeLabelContentVAlign: 'center',
55
+ afterLabelContentVAlign: 'center',
56
+ isSelected: false
57
+ };
58
+ ref = null;
59
+ _descriptionId;
46
60
  constructor(props) {
47
61
  super(props);
48
- this.ref = null;
49
- this._descriptionId = void 0;
50
62
  this._descriptionId = props.deterministicId('OptionsItem-description');
51
63
  }
52
64
  componentDidMount() {
53
- var _this$props$makeStyle, _this$props;
54
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
65
+ this.props.makeStyles?.();
55
66
  }
56
67
  componentDidUpdate() {
57
- var _this$props$makeStyle2, _this$props2;
58
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
68
+ this.props.makeStyles?.();
59
69
  }
60
70
  renderContent(renderLabel, contentVariant) {
61
- const _this$props3 = this.props,
62
- styles = _this$props3.styles,
63
- variant = _this$props3.variant,
64
- as = _this$props3.as,
65
- role = _this$props3.role,
66
- children = _this$props3.children;
71
+ const {
72
+ styles,
73
+ variant,
74
+ as,
75
+ role,
76
+ children
77
+ } = this.props;
67
78
  let labelContent;
68
79
  if (typeof renderLabel === 'function') {
69
80
  labelContent = /*#__PURE__*/(0, _react.createElement)(renderLabel, {
@@ -75,64 +86,57 @@ let Item = exports.Item = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec
75
86
  labelContent = renderLabel;
76
87
  }
77
88
  return (0, _jsxRuntime.jsx)("span", {
78
- css: [styles === null || styles === void 0 ? void 0 : styles.content, contentVariant],
89
+ css: [styles?.content, contentVariant],
79
90
  role: "presentation",
80
91
  "aria-hidden": "true",
81
92
  children: labelContent
82
93
  });
83
94
  }
84
95
  render() {
85
- const _this$props4 = this.props,
86
- as = _this$props4.as,
87
- href = _this$props4.href,
88
- role = _this$props4.role,
89
- styles = _this$props4.styles,
90
- description = _this$props4.description,
91
- descriptionRole = _this$props4.descriptionRole,
92
- renderBeforeLabel = _this$props4.renderBeforeLabel,
93
- renderAfterLabel = _this$props4.renderAfterLabel,
94
- elementRef = _this$props4.elementRef,
95
- children = _this$props4.children,
96
- voiceoverRoleBugWorkaround = _this$props4.voiceoverRoleBugWorkaround;
96
+ const {
97
+ as,
98
+ href,
99
+ role,
100
+ styles,
101
+ description,
102
+ descriptionRole,
103
+ renderBeforeLabel,
104
+ renderAfterLabel,
105
+ elementRef,
106
+ children,
107
+ voiceoverRoleBugWorkaround
108
+ } = this.props;
97
109
  const ElementType = (0, _uiReactUtils.getElementType)(Item, this.props, () => as);
98
110
  const InnerElementType = href ? 'a' : 'span';
99
111
  const passthroughProps = (0, _uiReactUtils.omitProps)(this.props, Item.allowedProps);
100
112
  const childrenContent = (0, _uiReactUtils.callRenderProp)(children);
101
113
  const descriptionContent = (0, _uiReactUtils.callRenderProp)(description);
102
- const ariaDescribedBy = this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : void 0);
114
+ const ariaDescribedBy = this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : undefined);
103
115
  return (0, _jsxRuntime.jsxs)(ElementType, {
104
116
  role: voiceoverRoleBugWorkaround ? role : 'none',
105
117
  "data-cid": "Options.Item",
106
- css: styles === null || styles === void 0 ? void 0 : styles.item,
118
+ css: styles?.item,
107
119
  ref: element => {
108
120
  this.ref = element;
109
121
  if (typeof elementRef === 'function') {
110
122
  elementRef(element);
111
123
  }
112
124
  },
113
- "aria-describedby": voiceoverRoleBugWorkaround ? ariaDescribedBy : void 0,
125
+ "aria-describedby": voiceoverRoleBugWorkaround ? ariaDescribedBy : undefined,
114
126
  children: [(0, _jsxRuntime.jsxs)(InnerElementType, {
115
127
  ...passthroughProps,
116
- css: styles === null || styles === void 0 ? void 0 : styles.container,
117
- role: href || voiceoverRoleBugWorkaround ? void 0 : role,
128
+ css: styles?.container,
129
+ role: href || voiceoverRoleBugWorkaround ? undefined : role,
118
130
  href: href,
119
- "aria-describedby": voiceoverRoleBugWorkaround ? void 0 : ariaDescribedBy,
131
+ "aria-describedby": voiceoverRoleBugWorkaround ? undefined : ariaDescribedBy,
120
132
  children: [childrenContent, descriptionContent && (0, _jsxRuntime.jsx)("span", {
121
- css: styles === null || styles === void 0 ? void 0 : styles.description,
133
+ css: styles?.description,
122
134
  role: descriptionRole,
123
135
  id: this._descriptionId,
124
136
  children: descriptionContent
125
137
  })]
126
- }), 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)]
138
+ }), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles?.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles?.contentAfter)]
127
139
  });
128
140
  }
129
- }, _Item.displayName = "Item", _Item.componentId = 'Options.Item', _Item.allowedProps = _props.allowedProps, _Item.defaultProps = {
130
- as: 'span',
131
- variant: 'default',
132
- role: 'listitem',
133
- voiceoverRoleBugWorkaround: false,
134
- beforeLabelContentVAlign: 'center',
135
- afterLabelContentVAlign: 'center',
136
- isSelected: false
137
- }, _Item)) || _class) || _class);
141
+ }) || _class) || _class);
138
142
  var _default = exports.default = Item;
package/lib/Options/v1/Item/styles.js CHANGED
@@ -40,12 +40,14 @@ var _uiReactUtils = require("@instructure/ui-react-utils");
40
40
  * @return {Object} The final style object, which will be used in the component
41
41
  */
42
42
  const generateStyle = (componentTheme, props) => {
43
- const variant = props.variant,
44
- children = props.children,
45
- hasContentBeforeLabel = props.renderBeforeLabel,
46
- hasContentAfterLabel = props.renderAfterLabel,
47
- beforeLabelContentVAlign = props.beforeLabelContentVAlign,
48
- afterLabelContentVAlign = props.afterLabelContentVAlign;
43
+ const {
44
+ variant,
45
+ children,
46
+ renderBeforeLabel: hasContentBeforeLabel,
47
+ renderAfterLabel: hasContentAfterLabel,
48
+ beforeLabelContentVAlign,
49
+ afterLabelContentVAlign
50
+ } = props;
49
51
  // TODO if children are () => ReactNode this wont match anything
50
52
  const containsList = (0, _uiReactUtils.matchComponentTypes)(children, ['Options']);
51
53
 
package/lib/Options/v1/Item/theme.js CHANGED
@@ -34,11 +34,12 @@ exports.optionsItemThemeGenerator = exports.default = void 0;
34
34
  * @return {Object} The final theme object with the overrides and component variables
35
35
  */
36
36
  const generateComponentTheme = theme => {
37
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8;
38
- const colors = theme.colors,
39
- typography = theme.typography,
40
- spacing = theme.spacing,
41
- themeName = theme.key;
37
+ const {
38
+ colors,
39
+ typography,
40
+ spacing,
41
+ key: themeName
42
+ } = theme;
42
43
  const themeSpecificStyle = {
43
44
  canvas: {
44
45
  color: theme['ic-brand-font-color-dark'],
@@ -46,28 +47,28 @@ const generateComponentTheme = theme => {
46
47
  }
47
48
  };
48
49
  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
- fontWeightSelected: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
54
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
55
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
56
- highlightedLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
57
- highlightedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
58
- selectedLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
59
- selectedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey4570,
60
- selectedHighlightedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue5782,
61
- padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
62
- iconPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
63
- nestedPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
50
+ fontSize: typography?.fontSizeMedium,
51
+ fontFamily: typography?.fontFamily,
52
+ fontWeight: typography?.fontWeightNormal,
53
+ lineHeight: typography?.lineHeightCondensed,
54
+ fontWeightSelected: typography?.fontWeightNormal,
55
+ color: colors?.contrasts?.grey125125,
56
+ background: colors?.contrasts?.white1010,
57
+ highlightedLabelColor: colors?.contrasts?.white1010,
58
+ highlightedBackground: colors?.contrasts?.blue4570,
59
+ selectedLabelColor: colors?.contrasts?.white1010,
60
+ selectedBackground: colors?.contrasts?.grey4570,
61
+ selectedHighlightedBackground: colors?.contrasts?.blue5782,
62
+ padding: `${spacing?.xSmall} ${spacing?.small}`,
63
+ iconPadding: spacing?.small,
64
+ nestedPadding: spacing?.small,
64
65
  beforeLabelContentVOffset: '0.625rem',
65
66
  afterLabelContentVOffset: '0.625rem',
66
67
  descriptionFontSize: typography.fontSizeSmall,
67
68
  descriptionFontWeight: typography.fontWeightNormal,
68
69
  descriptionLineHeight: typography.lineHeight,
69
70
  descriptionPaddingStart: '0.25em',
70
- descriptionColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey5782
71
+ descriptionColor: colors?.contrasts?.grey5782
71
72
  };
72
73
  return {
73
74
  ...componentVariables,