@instructure/ui-options 11.7.3-snapshot-25 → 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/CHANGELOG.md CHANGED
@@ -3,9 +3,12 @@
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
- ## [11.7.3-snapshot-25](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-25) (2026-04-30)
6
+ ## [11.7.3-snapshot-26](https://github.com/instructure/instructure-ui/compare/v11.7.2...v11.7.3-snapshot-26) (2026-05-05)
7
7
 
8
- **Note:** Version bump only for package @instructure/ui-options
8
+
9
+ ### Bug Fixes
10
+
11
+ * **many:** update dependencies, remove lots of Babel plugins, remove Webpack 4 support ([f916fca](https://github.com/instructure/instructure-ui/commit/f916fcafdddcb2d7de401f93e8ff92cfdfa47bba))
9
12
 
10
13
 
11
14
 
package/es/Options/v1/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
  *
@@ -36,28 +36,39 @@ id: Options.Item
36
36
  ---
37
37
  **/
38
38
  import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
39
- let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, generateComponentTheme), _dec(_class = _dec2(_class = (_Item = class Item extends Component {
39
+ let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, generateComponentTheme), _dec(_class = _dec2(_class = class Item extends Component {
40
+ static displayName = "Item";
41
+ static componentId = 'Options.Item';
42
+ static allowedProps = allowedProps;
43
+ static defaultProps = {
44
+ as: 'span',
45
+ variant: 'default',
46
+ role: 'listitem',
47
+ voiceoverRoleBugWorkaround: false,
48
+ beforeLabelContentVAlign: 'center',
49
+ afterLabelContentVAlign: 'center',
50
+ isSelected: false
51
+ };
52
+ ref = null;
53
+ _descriptionId;
40
54
  constructor(props) {
41
55
  super(props);
42
- this.ref = null;
43
- this._descriptionId = void 0;
44
56
  this._descriptionId = props.deterministicId('OptionsItem-description');
45
57
  }
46
58
  componentDidMount() {
47
- var _this$props$makeStyle, _this$props;
48
- (_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?.();
49
60
  }
50
61
  componentDidUpdate() {
51
- var _this$props$makeStyle2, _this$props2;
52
- (_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?.();
53
63
  }
54
64
  renderContent(renderLabel, contentVariant) {
55
- const _this$props3 = this.props,
56
- styles = _this$props3.styles,
57
- variant = _this$props3.variant,
58
- as = _this$props3.as,
59
- role = _this$props3.role,
60
- children = _this$props3.children;
65
+ const {
66
+ styles,
67
+ variant,
68
+ as,
69
+ role,
70
+ children
71
+ } = this.props;
61
72
  let labelContent;
62
73
  if (typeof renderLabel === 'function') {
63
74
  labelContent = /*#__PURE__*/createElement(renderLabel, {
@@ -69,65 +80,58 @@ let Item = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, gene
69
80
  labelContent = renderLabel;
70
81
  }
71
82
  return _jsx("span", {
72
- css: [styles === null || styles === void 0 ? void 0 : styles.content, contentVariant],
83
+ css: [styles?.content, contentVariant],
73
84
  role: "presentation",
74
85
  "aria-hidden": "true",
75
86
  children: labelContent
76
87
  });
77
88
  }
78
89
  render() {
79
- const _this$props4 = this.props,
80
- as = _this$props4.as,
81
- href = _this$props4.href,
82
- role = _this$props4.role,
83
- styles = _this$props4.styles,
84
- description = _this$props4.description,
85
- descriptionRole = _this$props4.descriptionRole,
86
- renderBeforeLabel = _this$props4.renderBeforeLabel,
87
- renderAfterLabel = _this$props4.renderAfterLabel,
88
- elementRef = _this$props4.elementRef,
89
- children = _this$props4.children,
90
- voiceoverRoleBugWorkaround = _this$props4.voiceoverRoleBugWorkaround;
90
+ const {
91
+ as,
92
+ href,
93
+ role,
94
+ styles,
95
+ description,
96
+ descriptionRole,
97
+ renderBeforeLabel,
98
+ renderAfterLabel,
99
+ elementRef,
100
+ children,
101
+ voiceoverRoleBugWorkaround
102
+ } = this.props;
91
103
  const ElementType = getElementType(Item, this.props, () => as);
92
104
  const InnerElementType = href ? 'a' : 'span';
93
105
  const passthroughProps = omitProps(this.props, Item.allowedProps);
94
106
  const childrenContent = callRenderProp(children);
95
107
  const descriptionContent = callRenderProp(description);
96
- const ariaDescribedBy = this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : void 0);
108
+ const ariaDescribedBy = this.props['aria-describedby'] || (descriptionContent ? this._descriptionId : undefined);
97
109
  return _jsxs(ElementType, {
98
110
  role: voiceoverRoleBugWorkaround ? role : 'none',
99
111
  "data-cid": "Options.Item",
100
- css: styles === null || styles === void 0 ? void 0 : styles.item,
112
+ css: styles?.item,
101
113
  ref: element => {
102
114
  this.ref = element;
103
115
  if (typeof elementRef === 'function') {
104
116
  elementRef(element);
105
117
  }
106
118
  },
107
- "aria-describedby": voiceoverRoleBugWorkaround ? ariaDescribedBy : void 0,
119
+ "aria-describedby": voiceoverRoleBugWorkaround ? ariaDescribedBy : undefined,
108
120
  children: [_jsxs(InnerElementType, {
109
121
  ...passthroughProps,
110
- css: styles === null || styles === void 0 ? void 0 : styles.container,
111
- role: href || voiceoverRoleBugWorkaround ? void 0 : role,
122
+ css: styles?.container,
123
+ role: href || voiceoverRoleBugWorkaround ? undefined : role,
112
124
  href: href,
113
- "aria-describedby": voiceoverRoleBugWorkaround ? void 0 : ariaDescribedBy,
125
+ "aria-describedby": voiceoverRoleBugWorkaround ? undefined : ariaDescribedBy,
114
126
  children: [childrenContent, descriptionContent && _jsx("span", {
115
- css: styles === null || styles === void 0 ? void 0 : styles.description,
127
+ css: styles?.description,
116
128
  role: descriptionRole,
117
129
  id: this._descriptionId,
118
130
  children: descriptionContent
119
131
  })]
120
- }), 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)]
132
+ }), renderBeforeLabel && this.renderContent(renderBeforeLabel, styles?.contentBefore), renderAfterLabel && this.renderContent(renderAfterLabel, styles?.contentAfter)]
121
133
  });
122
134
  }
123
- }, _Item.displayName = "Item", _Item.componentId = 'Options.Item', _Item.allowedProps = allowedProps, _Item.defaultProps = {
124
- as: 'span',
125
- variant: 'default',
126
- role: 'listitem',
127
- voiceoverRoleBugWorkaround: false,
128
- beforeLabelContentVAlign: 'center',
129
- afterLabelContentVAlign: 'center',
130
- isSelected: false
131
- }, _Item)) || _class) || _class);
135
+ }) || _class) || _class);
132
136
  export default Item;
133
137
  export { Item };
package/es/Options/v1/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/v1/Item/theme.js CHANGED
@@ -28,11 +28,12 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8;
32
- const colors = theme.colors,
33
- typography = theme.typography,
34
- spacing = theme.spacing,
35
- themeName = theme.key;
31
+ const {
32
+ colors,
33
+ typography,
34
+ spacing,
35
+ key: themeName
36
+ } = theme;
36
37
  const themeSpecificStyle = {
37
38
  canvas: {
38
39
  color: theme['ic-brand-font-color-dark'],
@@ -40,28 +41,28 @@ const generateComponentTheme = theme => {
40
41
  }
41
42
  };
42
43
  const componentVariables = {
43
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
44
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
45
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
46
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
47
- fontWeightSelected: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
48
- color: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
49
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
50
- highlightedLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.white1010,
51
- highlightedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
52
- selectedLabelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
53
- selectedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey4570,
54
- selectedHighlightedBackground: colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.blue5782,
55
- padding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`,
56
- iconPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
57
- nestedPadding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
44
+ fontSize: typography?.fontSizeMedium,
45
+ fontFamily: typography?.fontFamily,
46
+ fontWeight: typography?.fontWeightNormal,
47
+ lineHeight: typography?.lineHeightCondensed,
48
+ fontWeightSelected: typography?.fontWeightNormal,
49
+ color: colors?.contrasts?.grey125125,
50
+ background: colors?.contrasts?.white1010,
51
+ highlightedLabelColor: colors?.contrasts?.white1010,
52
+ highlightedBackground: colors?.contrasts?.blue4570,
53
+ selectedLabelColor: colors?.contrasts?.white1010,
54
+ selectedBackground: colors?.contrasts?.grey4570,
55
+ selectedHighlightedBackground: colors?.contrasts?.blue5782,
56
+ padding: `${spacing?.xSmall} ${spacing?.small}`,
57
+ iconPadding: spacing?.small,
58
+ nestedPadding: spacing?.small,
58
59
  beforeLabelContentVOffset: '0.625rem',
59
60
  afterLabelContentVOffset: '0.625rem',
60
61
  descriptionFontSize: typography.fontSizeSmall,
61
62
  descriptionFontWeight: typography.fontWeightNormal,
62
63
  descriptionLineHeight: typography.lineHeight,
63
64
  descriptionPaddingStart: '0.25em',
64
- descriptionColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey5782
65
+ descriptionColor: colors?.contrasts?.grey5782
65
66
  };
66
67
  return {
67
68
  ...componentVariables,
package/es/Options/v1/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
  *
@@ -39,32 +37,35 @@ id: Options.Separator
39
37
  @module Separator
40
38
  **/
41
39
  import { jsx as _jsx } from "@emotion/react/jsx-runtime";
42
- let Separator = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = (_Separator = class Separator extends Component {
40
+ let Separator = (_dec = withStyle(generateStyles, generateComponentTheme), _dec(_class = class Separator extends Component {
41
+ static displayName = "Separator";
42
+ static componentId = 'Options.Separator';
43
+ static allowedProps = allowedProps;
44
+ static defaultProps = {
45
+ as: 'span'
46
+ };
43
47
  componentDidMount() {
44
- var _this$props$makeStyle, _this$props;
45
- (_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?.();
46
49
  }
47
50
  componentDidUpdate() {
48
- var _this$props$makeStyle2, _this$props2;
49
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
51
+ this.props.makeStyles?.();
50
52
  }
51
53
  render() {
52
- const _this$props3 = this.props,
53
- as = _this$props3.as,
54
- styles = _this$props3.styles,
55
- rest = _objectWithoutProperties(_this$props3, _excluded);
54
+ const {
55
+ as,
56
+ styles,
57
+ ...rest
58
+ } = this.props;
56
59
  const ElementType = getElementType(Separator, this.props, () => as);
57
60
  return _jsx(ElementType, {
58
61
  role: "none",
59
62
  children: _jsx("div", {
60
63
  ...omitProps(rest, ['styles', 'makeStyles', 'themeOverride']),
61
- css: styles === null || styles === void 0 ? void 0 : styles.separator,
64
+ css: styles?.separator,
62
65
  role: "presentation"
63
66
  })
64
67
  });
65
68
  }
66
- }, _Separator.displayName = "Separator", _Separator.componentId = 'Options.Separator', _Separator.allowedProps = allowedProps, _Separator.defaultProps = {
67
- as: 'span'
68
- }, _Separator)) || _class);
69
+ }) || _class);
69
70
  export default Separator;
70
71
  export { Separator };
package/es/Options/v1/Separator/theme.js CHANGED
@@ -28,14 +28,15 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts;
32
- const borders = theme.borders,
33
- colors = theme.colors,
34
- spacing = theme.spacing;
31
+ const {
32
+ borders,
33
+ colors,
34
+ spacing
35
+ } = theme;
35
36
  const componentVariables = {
36
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey3045,
37
- height: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
38
- margin: `0 ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
37
+ background: colors?.contrasts?.grey3045,
38
+ height: borders?.widthSmall,
39
+ margin: `0 ${spacing?.small}`
39
40
  };
40
41
  return {
41
42
  ...componentVariables
package/es/Options/v1/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
  *
@@ -39,34 +39,44 @@ import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
39
39
  category: components/utilities
40
40
  ---
41
41
  **/
42
- let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, generateComponentTheme), _dec(_class = _dec2(_class = (_Options = class Options extends Component {
43
- constructor(...args) {
44
- super(...args);
45
- this.ref = null;
46
- this.handleRef = el => {
47
- this.ref = el;
48
- };
49
- this._labelId = this.props.deterministicId('Options-label');
50
- }
42
+ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, generateComponentTheme), _dec(_class = _dec2(_class = class Options extends Component {
43
+ static displayName = "Options";
44
+ static componentId = 'Options';
45
+ static allowedProps = allowedProps;
46
+ static defaultProps = {
47
+ as: 'span',
48
+ role: 'list',
49
+ elementRef: () => {},
50
+ renderLabel: null,
51
+ children: null
52
+ };
53
+ static Item = Item;
54
+ static Separator = Separator;
55
+ ref = null;
56
+ handleRef = el => {
57
+ this.ref = el;
58
+ };
51
59
  componentDidMount() {
52
- var _this$props$makeStyle, _this$props;
53
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
60
+ this.props.makeStyles?.();
54
61
  }
55
62
  componentDidUpdate() {
56
- var _this$props$makeStyle2, _this$props2;
57
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
63
+ this.props.makeStyles?.();
58
64
  }
65
+ _labelId = this.props.deterministicId('Options-label');
59
66
  get childAs() {
60
- const as = this.props.as;
67
+ const {
68
+ as
69
+ } = this.props;
61
70
  if (as === 'ul' || as === 'ol') {
62
71
  return 'li';
63
72
  }
64
- return void 0;
73
+ return undefined;
65
74
  }
66
75
  renderLabel() {
67
- const _this$props3 = this.props,
68
- renderLabel = _this$props3.renderLabel,
69
- styles = _this$props3.styles;
76
+ const {
77
+ renderLabel,
78
+ styles
79
+ } = this.props;
70
80
  let labelContent;
71
81
  if (typeof renderLabel === 'function') {
72
82
  labelContent = /*#__PURE__*/createElement(renderLabel, {});
@@ -79,21 +89,25 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
79
89
  // because TalkBack and iOS VoiceOver don't announce sub-menu labels, aria-hidden needs to be false to achive that
80
90
  ,
81
91
  "aria-hidden": isAndroidOrIOS() ? 'false' : 'true',
82
- css: styles === null || styles === void 0 ? void 0 : styles.label,
92
+ css: styles?.label,
83
93
  children: labelContent
84
94
  });
85
95
  }
86
96
  renderSubList(subOptions) {
87
- const styles = this.props.styles;
97
+ const {
98
+ styles
99
+ } = this.props;
88
100
  return _jsx(Item, {
89
101
  as: this.childAs,
90
102
  role: "presentation",
91
- css: styles === null || styles === void 0 ? void 0 : styles.label,
103
+ css: styles?.label,
92
104
  children: subOptions
93
105
  });
94
106
  }
95
107
  renderChildren() {
96
- const children = this.props.children;
108
+ const {
109
+ children
110
+ } = this.props;
97
111
  return Children.map(children, child => {
98
112
  if (matchComponentTypes(child, ['Options'])) {
99
113
  return this.renderSubList(child);
@@ -103,7 +117,7 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
103
117
  as: this.childAs || child.props.as
104
118
  });
105
119
  }
106
- return void 0;
120
+ return undefined;
107
121
  });
108
122
  }
109
123
  get ariaLabelledby() {
@@ -113,25 +127,26 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
113
127
  if (this.props['aria-labelledby']) {
114
128
  return this.props['aria-labelledby'];
115
129
  }
116
- return void 0;
130
+ return undefined;
117
131
  }
118
132
  render() {
119
133
  const passthroughProps = View.omitViewProps(omitProps(this.props, Options.allowedProps), Options);
120
- const _this$props4 = this.props,
121
- as = _this$props4.as,
122
- role = _this$props4.role,
123
- renderLabel = _this$props4.renderLabel,
124
- elementRef = _this$props4.elementRef,
125
- styles = _this$props4.styles;
134
+ const {
135
+ as,
136
+ role,
137
+ renderLabel,
138
+ elementRef,
139
+ styles
140
+ } = this.props;
126
141
  return _jsxs("div", {
127
- css: styles === null || styles === void 0 ? void 0 : styles.options,
142
+ css: styles?.options,
128
143
  role: "presentation",
129
144
  ref: this.handleRef,
130
145
  "data-cid": "Options",
131
146
  children: [renderLabel && this.renderLabel(), _jsx(View, {
132
147
  ...passthroughProps,
133
148
  elementRef: elementRef,
134
- css: styles === null || styles === void 0 ? void 0 : styles.list,
149
+ css: styles?.list,
135
150
  as: as,
136
151
  role: role,
137
152
  display: "block",
@@ -143,12 +158,6 @@ let Options = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyles, g
143
158
  })]
144
159
  });
145
160
  }
146
- }, _Options.displayName = "Options", _Options.componentId = 'Options', _Options.allowedProps = allowedProps, _Options.defaultProps = {
147
- as: 'span',
148
- role: 'list',
149
- elementRef: () => {},
150
- renderLabel: null,
151
- children: null
152
- }, _Options.Item = Item, _Options.Separator = Separator, _Options)) || _class) || _class);
161
+ }) || _class) || _class);
153
162
  export default Options;
154
163
  export { Options };
package/es/Options/v1/theme.js CHANGED
@@ -28,16 +28,17 @@
28
28
  * @return {Object} The final theme object with the overrides and component variables
29
29
  */
30
30
  const generateComponentTheme = theme => {
31
- var _colors$contrasts, _colors$contrasts2;
32
- const colors = theme.colors,
33
- typography = theme.typography,
34
- spacing = theme.spacing;
31
+ const {
32
+ colors,
33
+ typography,
34
+ spacing
35
+ } = theme;
35
36
  const componentVariables = {
36
- labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
37
- background: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.white1010,
38
- labelColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
39
- labelPadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} 0`,
40
- nestedLabelPadding: `${spacing === null || spacing === void 0 ? void 0 : spacing.xSmall} ${spacing === null || spacing === void 0 ? void 0 : spacing.small}`
37
+ labelFontWeight: typography?.fontWeightBold,
38
+ background: colors?.contrasts?.white1010,
39
+ labelColor: colors?.contrasts?.grey125125,
40
+ labelPadding: `${spacing?.xSmall} 0`,
41
+ nestedLabelPadding: `${spacing?.xSmall} ${spacing?.small}`
41
42
  };
42
43
  return {
43
44
  ...componentVariables