@instructure/ui-options 8.18.0 → 8.18.1-snapshot.2

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/LICENSE.md +27 -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 +15 -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/LICENSE.md ADDED
@@ -0,0 +1,27 @@
1
+ ---
2
+ title: The MIT License (MIT)
3
+ category: Getting Started
4
+ order: 9
5
+ ---
6
+
7
+ # The MIT License (MIT)
8
+
9
+ Copyright (c) 2015 Instructure, Inc.
10
+
11
+ **Permission is hereby granted, free of charge, to any person obtaining a copy
12
+ of this software and associated documentation files (the "Software"), to deal
13
+ in the Software without restriction, including without limitation the rights
14
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
15
+ copies of the Software, and to permit persons to whom the Software is
16
+ furnished to do so, subject to the following conditions.**
17
+
18
+ The above copyright notice and this permission notice shall be included in all
19
+ copies or substantial portions of the Software.
20
+
21
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
22
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
23
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
24
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
25
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
26
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
27
+ SOFTWARE.
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.18.0",
3
+ "version": "8.18.1-snapshot.2+ca4c1ff9d",
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.18.0",
27
- "@instructure/ui-color-utils": "8.18.0",
28
- "@instructure/ui-test-locator": "8.18.0",
29
- "@instructure/ui-test-utils": "8.18.0",
30
- "@instructure/ui-themes": "8.18.0"
26
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.2+ca4c1ff9d",
27
+ "@instructure/ui-color-utils": "8.18.1-snapshot.2+ca4c1ff9d",
28
+ "@instructure/ui-test-locator": "8.18.1-snapshot.2+ca4c1ff9d",
29
+ "@instructure/ui-test-utils": "8.18.1-snapshot.2+ca4c1ff9d",
30
+ "@instructure/ui-themes": "8.18.1-snapshot.2+ca4c1ff9d"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.13.10",
34
- "@instructure/emotion": "8.18.0",
35
- "@instructure/shared-types": "8.18.0",
36
- "@instructure/ui-icons": "8.18.0",
37
- "@instructure/ui-prop-types": "8.18.0",
38
- "@instructure/ui-react-utils": "8.18.0",
39
- "@instructure/ui-testable": "8.18.0",
40
- "@instructure/ui-view": "8.18.0",
34
+ "@instructure/emotion": "8.18.1-snapshot.2+ca4c1ff9d",
35
+ "@instructure/shared-types": "8.18.1-snapshot.2+ca4c1ff9d",
36
+ "@instructure/ui-icons": "8.18.1-snapshot.2+ca4c1ff9d",
37
+ "@instructure/ui-prop-types": "8.18.1-snapshot.2+ca4c1ff9d",
38
+ "@instructure/ui-react-utils": "8.18.1-snapshot.2+ca4c1ff9d",
39
+ "@instructure/ui-testable": "8.18.1-snapshot.2+ca4c1ff9d",
40
+ "@instructure/ui-view": "8.18.1-snapshot.2+ca4c1ff9d",
41
41
  "prop-types": "^15"
42
42
  },
43
43
  "peerDependencies": {
@@ -46,5 +46,6 @@
46
46
  "publishConfig": {
47
47
  "access": "public"
48
48
  },
49
- "sideEffects": false
49
+ "sideEffects": false,
50
+ "gitHead": "ca4c1ff9d3985151ae0758fb596de41652dbb58b"
50
51
  }