@instructure/ui-checkbox 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 (12) hide show
  1. package/LICENSE.md +27 -0
  2. package/es/Checkbox/CheckboxFacade/index.js +12 -8
  3. package/es/Checkbox/CheckboxFacade/theme.js +21 -21
  4. package/es/Checkbox/ToggleFacade/index.js +22 -18
  5. package/es/Checkbox/ToggleFacade/theme.js +25 -25
  6. package/es/Checkbox/index.js +30 -26
  7. package/lib/Checkbox/CheckboxFacade/index.js +12 -8
  8. package/lib/Checkbox/CheckboxFacade/theme.js +21 -21
  9. package/lib/Checkbox/ToggleFacade/index.js +22 -18
  10. package/lib/Checkbox/ToggleFacade/theme.js +25 -25
  11. package/lib/Checkbox/index.js +30 -26
  12. package/package.json +21 -20
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/Checkbox/CheckboxFacade/index.js CHANGED
@@ -50,11 +50,15 @@ let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _
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
  renderIcon() {
@@ -78,17 +82,17 @@ let CheckboxFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _
78
82
  }
79
83
 
80
84
  render() {
81
- const _this$props = this.props,
82
- children = _this$props.children,
83
- styles = _this$props.styles;
85
+ const _this$props3 = this.props,
86
+ children = _this$props3.children,
87
+ styles = _this$props3.styles;
84
88
  return jsx("span", {
85
- css: styles?.checkboxFacade,
89
+ css: styles === null || styles === void 0 ? void 0 : styles.checkboxFacade,
86
90
  ref: this.handleRef
87
91
  }, jsx("span", {
88
- css: styles?.facade,
92
+ css: styles === null || styles === void 0 ? void 0 : styles.facade,
89
93
  "aria-hidden": "true"
90
94
  }, this.renderIcon()), jsx("span", {
91
- css: styles?.label
95
+ css: styles === null || styles === void 0 ? void 0 : styles.label
92
96
  }, children));
93
97
  }
94
98
 
package/es/Checkbox/CheckboxFacade/theme.js CHANGED
@@ -44,30 +44,30 @@ const generateComponentTheme = theme => {
44
44
  }
45
45
  };
46
46
  const componentVariables = {
47
- color: colors?.textLightest,
48
- borderWidth: borders?.widthSmall,
49
- borderColor: colors?.borderMedium,
50
- borderRadius: borders?.radiusMedium,
51
- background: colors?.backgroundLightest,
52
- marginRight: spacing?.xSmall,
53
- padding: spacing?.xxxSmall,
54
- checkedBackground: colors?.backgroundDarkest,
55
- checkedBorderColor: colors?.borderDarkest,
56
- hoverBorderColor: colors?.borderDarkest,
57
- focusBorderColor: colors?.borderBrand,
58
- focusBorderWidth: borders?.widthMedium,
59
- focusBorderStyle: borders?.style,
60
- labelColor: colors?.textDarkest,
61
- checkedLabelColor: colors?.textDarkest,
62
- labelFontFamily: typography?.fontFamily,
63
- labelFontWeight: typography?.fontWeightNormal,
64
- labelLineHeight: typography?.lineHeightCondensed,
47
+ color: colors === null || colors === void 0 ? void 0 : colors.textLightest,
48
+ borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
49
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
50
+ borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
51
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
52
+ marginRight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
53
+ padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
54
+ checkedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
55
+ checkedBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
56
+ hoverBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
57
+ focusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
58
+ focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
59
+ focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
60
+ labelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
61
+ checkedLabelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
62
+ labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
63
+ labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
64
+ labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
65
65
  facadeSizeSmall: '1rem',
66
66
  facadeSizeMedium: '1.25rem',
67
67
  facadeSizeLarge: '1.75rem',
68
- labelFontSizeSmall: typography?.fontSizeSmall,
69
- labelFontSizeMedium: typography?.fontSizeMedium,
70
- labelFontSizeLarge: typography?.fontSizeLarge,
68
+ labelFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
69
+ labelFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
70
+ labelFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
71
71
  iconSizeSmall: '0.625rem',
72
72
  iconSizeMedium: '0.75rem',
73
73
  iconSizeLarge: '1rem'
package/es/Checkbox/ToggleFacade/index.js CHANGED
@@ -49,52 +49,56 @@ let ToggleFacade = (_dec = withStyle(generateStyle, generateComponentTheme), _de
49
49
  }
50
50
 
51
51
  componentDidMount() {
52
- this.props.makeStyles?.();
52
+ var _this$props$makeStyle, _this$props;
53
+
54
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
53
55
  }
54
56
 
55
57
  componentDidUpdate() {
56
- this.props.makeStyles?.();
58
+ var _this$props$makeStyle2, _this$props2;
59
+
60
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
57
61
  }
58
62
 
59
63
  renderIcon() {
60
- const _this$props = this.props,
61
- styles = _this$props.styles,
62
- checked = _this$props.checked;
64
+ const _this$props3 = this.props,
65
+ styles = _this$props3.styles,
66
+ checked = _this$props3.checked;
63
67
 
64
68
  if (checked) {
65
69
  return jsx(IconCheckSolid, {
66
- css: styles?.iconSVG
70
+ css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
67
71
  });
68
72
  } else {
69
73
  return jsx(IconXSolid, {
70
- css: styles?.iconSVG
74
+ css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
71
75
  });
72
76
  }
73
77
  }
74
78
 
75
79
  renderLabel() {
76
- const _this$props2 = this.props,
77
- children = _this$props2.children,
78
- styles = _this$props2.styles;
80
+ const _this$props4 = this.props,
81
+ children = _this$props4.children,
82
+ styles = _this$props4.styles;
79
83
  return jsx("span", {
80
- css: styles?.label
84
+ css: styles === null || styles === void 0 ? void 0 : styles.label
81
85
  }, children);
82
86
  }
83
87
 
84
88
  render() {
85
- const _this$props3 = this.props,
86
- labelPlacement = _this$props3.labelPlacement,
87
- styles = _this$props3.styles;
89
+ const _this$props5 = this.props,
90
+ labelPlacement = _this$props5.labelPlacement,
91
+ styles = _this$props5.styles;
88
92
  return jsx("span", {
89
- css: styles?.toggleFacade,
93
+ css: styles === null || styles === void 0 ? void 0 : styles.toggleFacade,
90
94
  ref: this.handleRef
91
95
  }, (labelPlacement === 'top' || labelPlacement === 'start') && this.renderLabel(), jsx("span", {
92
- css: styles?.facade,
96
+ css: styles === null || styles === void 0 ? void 0 : styles.facade,
93
97
  "aria-hidden": "true"
94
98
  }, jsx("span", {
95
- css: styles?.icon
99
+ css: styles === null || styles === void 0 ? void 0 : styles.icon
96
100
  }, jsx("span", {
97
- css: styles?.iconToggle
101
+ css: styles === null || styles === void 0 ? void 0 : styles.iconToggle
98
102
  }, this.renderIcon()))), labelPlacement === 'end' && this.renderLabel());
99
103
  }
100
104
 
package/es/Checkbox/ToggleFacade/theme.js CHANGED
@@ -41,35 +41,35 @@ const generateComponentTheme = theme => {
41
41
  labelColor: theme['ic-brand-font-color-dark']
42
42
  },
43
43
  'canvas-high-contrast': {
44
- background: colors?.backgroundDarkest,
45
- borderColor: colors?.borderDarkest
44
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
45
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest
46
46
  }
47
47
  };
48
48
  const componentVariables = {
49
- color: colors?.textLightest,
50
- background: colors?.backgroundLight,
51
- borderColor: colors?.borderMedium,
52
- borderWidth: borders?.widthSmall,
49
+ color: colors === null || colors === void 0 ? void 0 : colors.textLightest,
50
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
51
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
52
+ borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
53
53
  borderRadius: '4rem',
54
- marginEnd: spacing?.small,
55
- marginStart: spacing?.small,
56
- marginVertical: spacing?.xSmall,
57
- checkedBackground: colors?.backgroundSuccess,
58
- uncheckedIconColor: colors?.textDarkest,
59
- checkedIconColor: colors?.textSuccess,
60
- focusOutlineColor: colors?.borderBrand,
61
- focusBorderWidth: borders?.widthMedium,
62
- focusBorderStyle: borders?.style,
63
- toggleBackground: colors?.backgroundLightest,
64
- toggleShadow: shadows?.depth1,
65
- toggleSize: forms?.inputHeightSmall,
66
- labelColor: colors?.textDarkest,
67
- labelFontFamily: typography?.fontFamily,
68
- labelFontWeight: typography?.fontWeightNormal,
69
- labelLineHeight: typography?.lineHeightCondensed,
70
- labelFontSizeSmall: typography?.fontSizeSmall,
71
- labelFontSizeMedium: typography?.fontSizeMedium,
72
- labelFontSizeLarge: typography?.fontSizeLarge
54
+ marginEnd: spacing === null || spacing === void 0 ? void 0 : spacing.small,
55
+ marginStart: spacing === null || spacing === void 0 ? void 0 : spacing.small,
56
+ marginVertical: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
57
+ checkedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
58
+ uncheckedIconColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
59
+ checkedIconColor: colors === null || colors === void 0 ? void 0 : colors.textSuccess,
60
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
61
+ focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
62
+ focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
63
+ toggleBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
64
+ toggleShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth1,
65
+ toggleSize: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
66
+ labelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
67
+ labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
68
+ labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
69
+ labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
70
+ labelFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
71
+ labelFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
72
+ labelFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge
73
73
  };
74
74
  return { ...componentVariables,
75
75
  ...themeSpecificStyle[themeName]
package/es/Checkbox/index.js CHANGED
@@ -127,19 +127,23 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
127
127
  }
128
128
 
129
129
  componentDidMount() {
130
+ var _this$props$makeStyle, _this$props2;
131
+
130
132
  if (this._input) {
131
133
  this._input.indeterminate = this.props.indeterminate;
132
134
  }
133
135
 
134
- this.props.makeStyles?.();
136
+ (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
135
137
  }
136
138
 
137
139
  componentDidUpdate(prevProps) {
140
+ var _this$props$makeStyle2, _this$props3;
141
+
138
142
  if (prevProps.indeterminate !== this.props.indeterminate && this._input) {
139
143
  this._input.indeterminate = this.props.indeterminate || false;
140
144
  }
141
145
 
142
- this.props.makeStyles?.();
146
+ (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
143
147
  }
144
148
 
145
149
  get id() {
@@ -159,15 +163,15 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
159
163
  }
160
164
 
161
165
  renderFacade() {
162
- const _this$props2 = this.props,
163
- size = _this$props2.size,
164
- disabled = _this$props2.disabled,
165
- variant = _this$props2.variant,
166
- label = _this$props2.label,
167
- readOnly = _this$props2.readOnly,
168
- indeterminate = _this$props2.indeterminate,
169
- labelPlacement = _this$props2.labelPlacement,
170
- themeOverride = _this$props2.themeOverride;
166
+ const _this$props4 = this.props,
167
+ size = _this$props4.size,
168
+ disabled = _this$props4.disabled,
169
+ variant = _this$props4.variant,
170
+ label = _this$props4.label,
171
+ readOnly = _this$props4.readOnly,
172
+ indeterminate = _this$props4.indeterminate,
173
+ labelPlacement = _this$props4.labelPlacement,
174
+ themeOverride = _this$props4.themeOverride;
171
175
  const _this$state = this.state,
172
176
  hovered = _this$state.hovered,
173
177
  focused = _this$state.focused;
@@ -206,24 +210,24 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
206
210
  }
207
211
 
208
212
  render() {
209
- const _this$props3 = this.props,
210
- disabled = _this$props3.disabled,
211
- readOnly = _this$props3.readOnly,
212
- value = _this$props3.value,
213
- onKeyDown = _this$props3.onKeyDown,
214
- onFocus = _this$props3.onFocus,
215
- onBlur = _this$props3.onBlur,
216
- onMouseOver = _this$props3.onMouseOver,
217
- onMouseOut = _this$props3.onMouseOut,
218
- indeterminate = _this$props3.indeterminate,
219
- variant = _this$props3.variant,
220
- styles = _this$props3.styles;
213
+ const _this$props5 = this.props,
214
+ disabled = _this$props5.disabled,
215
+ readOnly = _this$props5.readOnly,
216
+ value = _this$props5.value,
217
+ onKeyDown = _this$props5.onKeyDown,
218
+ onFocus = _this$props5.onFocus,
219
+ onBlur = _this$props5.onBlur,
220
+ onMouseOver = _this$props5.onMouseOver,
221
+ onMouseOut = _this$props5.onMouseOut,
222
+ indeterminate = _this$props5.indeterminate,
223
+ variant = _this$props5.variant,
224
+ styles = _this$props5.styles;
221
225
  const props = omitProps(this.props, Checkbox.allowedProps);
222
226
  error(!(variant === 'toggle' && indeterminate), `[Checkbox] The \`toggle\` variant does not support the \`indeterminate\` property. Use the \`simple\` variant instead.`);
223
227
  /* eslint-disable jsx-a11y/mouse-events-have-key-events */
224
228
 
225
229
  return jsx("div", {
226
- css: styles?.checkbox,
230
+ css: styles === null || styles === void 0 ? void 0 : styles.checkbox,
227
231
  onMouseOver: createChainedFunction(onMouseOver, this.handleMouseOver),
228
232
  onMouseOut: createChainedFunction(onMouseOut, this.handleMouseOut),
229
233
  ref: this.handleRef
@@ -236,7 +240,7 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
236
240
  },
237
241
  disabled: disabled || readOnly,
238
242
  "aria-checked": indeterminate ? 'mixed' : void 0,
239
- css: styles?.input,
243
+ css: styles === null || styles === void 0 ? void 0 : styles.input,
240
244
  onChange: this.handleChange,
241
245
  onKeyDown: createChainedFunction(onKeyDown, this.handleKeyDown),
242
246
  onFocus: createChainedFunction(onFocus, this.handleFocus),
@@ -244,7 +248,7 @@ let Checkbox = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, n
244
248
  checked: this.checked
245
249
  })), jsx("label", {
246
250
  htmlFor: this.id,
247
- css: styles?.control
251
+ css: styles === null || styles === void 0 ? void 0 : styles.control
248
252
  }, this.renderFacade(), this.renderMessages()));
249
253
  /* eslint-enable jsx-a11y/mouse-events-have-key-events */
250
254
  }
package/lib/Checkbox/CheckboxFacade/index.js CHANGED
@@ -40,11 +40,15 @@ let CheckboxFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
40
40
  }
41
41
 
42
42
  componentDidMount() {
43
- this.props.makeStyles?.();
43
+ var _this$props$makeStyle, _this$props;
44
+
45
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
44
46
  }
45
47
 
46
48
  componentDidUpdate() {
47
- this.props.makeStyles?.();
49
+ var _this$props$makeStyle2, _this$props2;
50
+
51
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
48
52
  }
49
53
 
50
54
  renderIcon() {
@@ -68,17 +72,17 @@ let CheckboxFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
68
72
  }
69
73
 
70
74
  render() {
71
- const _this$props = this.props,
72
- children = _this$props.children,
73
- styles = _this$props.styles;
75
+ const _this$props3 = this.props,
76
+ children = _this$props3.children,
77
+ styles = _this$props3.styles;
74
78
  return (0, _emotion.jsx)("span", {
75
- css: styles?.checkboxFacade,
79
+ css: styles === null || styles === void 0 ? void 0 : styles.checkboxFacade,
76
80
  ref: this.handleRef
77
81
  }, (0, _emotion.jsx)("span", {
78
- css: styles?.facade,
82
+ css: styles === null || styles === void 0 ? void 0 : styles.facade,
79
83
  "aria-hidden": "true"
80
84
  }, this.renderIcon()), (0, _emotion.jsx)("span", {
81
- css: styles?.label
85
+ css: styles === null || styles === void 0 ? void 0 : styles.label
82
86
  }, children));
83
87
  }
84
88
 
package/lib/Checkbox/CheckboxFacade/theme.js CHANGED
@@ -51,30 +51,30 @@ const generateComponentTheme = theme => {
51
51
  }
52
52
  };
53
53
  const componentVariables = {
54
- color: colors?.textLightest,
55
- borderWidth: borders?.widthSmall,
56
- borderColor: colors?.borderMedium,
57
- borderRadius: borders?.radiusMedium,
58
- background: colors?.backgroundLightest,
59
- marginRight: spacing?.xSmall,
60
- padding: spacing?.xxxSmall,
61
- checkedBackground: colors?.backgroundDarkest,
62
- checkedBorderColor: colors?.borderDarkest,
63
- hoverBorderColor: colors?.borderDarkest,
64
- focusBorderColor: colors?.borderBrand,
65
- focusBorderWidth: borders?.widthMedium,
66
- focusBorderStyle: borders?.style,
67
- labelColor: colors?.textDarkest,
68
- checkedLabelColor: colors?.textDarkest,
69
- labelFontFamily: typography?.fontFamily,
70
- labelFontWeight: typography?.fontWeightNormal,
71
- labelLineHeight: typography?.lineHeightCondensed,
54
+ color: colors === null || colors === void 0 ? void 0 : colors.textLightest,
55
+ borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
56
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
57
+ borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
58
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
59
+ marginRight: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
60
+ padding: spacing === null || spacing === void 0 ? void 0 : spacing.xxxSmall,
61
+ checkedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
62
+ checkedBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
63
+ hoverBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest,
64
+ focusBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
65
+ focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
66
+ focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
67
+ labelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
68
+ checkedLabelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
69
+ labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
70
+ labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
71
+ labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
72
72
  facadeSizeSmall: '1rem',
73
73
  facadeSizeMedium: '1.25rem',
74
74
  facadeSizeLarge: '1.75rem',
75
- labelFontSizeSmall: typography?.fontSizeSmall,
76
- labelFontSizeMedium: typography?.fontSizeMedium,
77
- labelFontSizeLarge: typography?.fontSizeLarge,
75
+ labelFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
76
+ labelFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
77
+ labelFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
78
78
  iconSizeSmall: '0.625rem',
79
79
  iconSizeMedium: '0.75rem',
80
80
  iconSizeLarge: '1rem'
package/lib/Checkbox/ToggleFacade/index.js CHANGED
@@ -40,52 +40,56 @@ let ToggleFacade = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
40
40
  }
41
41
 
42
42
  componentDidMount() {
43
- this.props.makeStyles?.();
43
+ var _this$props$makeStyle, _this$props;
44
+
45
+ (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
44
46
  }
45
47
 
46
48
  componentDidUpdate() {
47
- this.props.makeStyles?.();
49
+ var _this$props$makeStyle2, _this$props2;
50
+
51
+ (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
48
52
  }
49
53
 
50
54
  renderIcon() {
51
- const _this$props = this.props,
52
- styles = _this$props.styles,
53
- checked = _this$props.checked;
55
+ const _this$props3 = this.props,
56
+ styles = _this$props3.styles,
57
+ checked = _this$props3.checked;
54
58
 
55
59
  if (checked) {
56
60
  return (0, _emotion.jsx)(_IconCheckSolid.IconCheckSolid, {
57
- css: styles?.iconSVG
61
+ css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
58
62
  });
59
63
  } else {
60
64
  return (0, _emotion.jsx)(_IconXSolid.IconXSolid, {
61
- css: styles?.iconSVG
65
+ css: styles === null || styles === void 0 ? void 0 : styles.iconSVG
62
66
  });
63
67
  }
64
68
  }
65
69
 
66
70
  renderLabel() {
67
- const _this$props2 = this.props,
68
- children = _this$props2.children,
69
- styles = _this$props2.styles;
71
+ const _this$props4 = this.props,
72
+ children = _this$props4.children,
73
+ styles = _this$props4.styles;
70
74
  return (0, _emotion.jsx)("span", {
71
- css: styles?.label
75
+ css: styles === null || styles === void 0 ? void 0 : styles.label
72
76
  }, children);
73
77
  }
74
78
 
75
79
  render() {
76
- const _this$props3 = this.props,
77
- labelPlacement = _this$props3.labelPlacement,
78
- styles = _this$props3.styles;
80
+ const _this$props5 = this.props,
81
+ labelPlacement = _this$props5.labelPlacement,
82
+ styles = _this$props5.styles;
79
83
  return (0, _emotion.jsx)("span", {
80
- css: styles?.toggleFacade,
84
+ css: styles === null || styles === void 0 ? void 0 : styles.toggleFacade,
81
85
  ref: this.handleRef
82
86
  }, (labelPlacement === 'top' || labelPlacement === 'start') && this.renderLabel(), (0, _emotion.jsx)("span", {
83
- css: styles?.facade,
87
+ css: styles === null || styles === void 0 ? void 0 : styles.facade,
84
88
  "aria-hidden": "true"
85
89
  }, (0, _emotion.jsx)("span", {
86
- css: styles?.icon
90
+ css: styles === null || styles === void 0 ? void 0 : styles.icon
87
91
  }, (0, _emotion.jsx)("span", {
88
- css: styles?.iconToggle
92
+ css: styles === null || styles === void 0 ? void 0 : styles.iconToggle
89
93
  }, this.renderIcon()))), labelPlacement === 'end' && this.renderLabel());
90
94
  }
91
95
 
package/lib/Checkbox/ToggleFacade/theme.js CHANGED
@@ -48,35 +48,35 @@ const generateComponentTheme = theme => {
48
48
  labelColor: theme['ic-brand-font-color-dark']
49
49
  },
50
50
  'canvas-high-contrast': {
51
- background: colors?.backgroundDarkest,
52
- borderColor: colors?.borderDarkest
51
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundDarkest,
52
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderDarkest
53
53
  }
54
54
  };
55
55
  const componentVariables = {
56
- color: colors?.textLightest,
57
- background: colors?.backgroundLight,
58
- borderColor: colors?.borderMedium,
59
- borderWidth: borders?.widthSmall,
56
+ color: colors === null || colors === void 0 ? void 0 : colors.textLightest,
57
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLight,
58
+ borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
59
+ borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
60
60
  borderRadius: '4rem',
61
- marginEnd: spacing?.small,
62
- marginStart: spacing?.small,
63
- marginVertical: spacing?.xSmall,
64
- checkedBackground: colors?.backgroundSuccess,
65
- uncheckedIconColor: colors?.textDarkest,
66
- checkedIconColor: colors?.textSuccess,
67
- focusOutlineColor: colors?.borderBrand,
68
- focusBorderWidth: borders?.widthMedium,
69
- focusBorderStyle: borders?.style,
70
- toggleBackground: colors?.backgroundLightest,
71
- toggleShadow: shadows?.depth1,
72
- toggleSize: forms?.inputHeightSmall,
73
- labelColor: colors?.textDarkest,
74
- labelFontFamily: typography?.fontFamily,
75
- labelFontWeight: typography?.fontWeightNormal,
76
- labelLineHeight: typography?.lineHeightCondensed,
77
- labelFontSizeSmall: typography?.fontSizeSmall,
78
- labelFontSizeMedium: typography?.fontSizeMedium,
79
- labelFontSizeLarge: typography?.fontSizeLarge
61
+ marginEnd: spacing === null || spacing === void 0 ? void 0 : spacing.small,
62
+ marginStart: spacing === null || spacing === void 0 ? void 0 : spacing.small,
63
+ marginVertical: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
64
+ checkedBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundSuccess,
65
+ uncheckedIconColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
66
+ checkedIconColor: colors === null || colors === void 0 ? void 0 : colors.textSuccess,
67
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
68
+ focusBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
69
+ focusBorderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
70
+ toggleBackground: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
71
+ toggleShadow: shadows === null || shadows === void 0 ? void 0 : shadows.depth1,
72
+ toggleSize: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
73
+ labelColor: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
74
+ labelFontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
75
+ labelFontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
76
+ labelLineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightCondensed,
77
+ labelFontSizeSmall: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
78
+ labelFontSizeMedium: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
79
+ labelFontSizeLarge: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge
80
80
  };
81
81
  return { ...componentVariables,
82
82
  ...themeSpecificStyle[themeName]
package/lib/Checkbox/index.js CHANGED
@@ -141,19 +141,23 @@ let Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
141
141
  }
142
142
 
143
143
  componentDidMount() {
144
+ var _this$props$makeStyle, _this$props2;
145
+
144
146
  if (this._input) {
145
147
  this._input.indeterminate = this.props.indeterminate;
146
148
  }
147
149
 
148
- this.props.makeStyles?.();
150
+ (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
149
151
  }
150
152
 
151
153
  componentDidUpdate(prevProps) {
154
+ var _this$props$makeStyle2, _this$props3;
155
+
152
156
  if (prevProps.indeterminate !== this.props.indeterminate && this._input) {
153
157
  this._input.indeterminate = this.props.indeterminate || false;
154
158
  }
155
159
 
156
- this.props.makeStyles?.();
160
+ (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
157
161
  }
158
162
 
159
163
  get id() {
@@ -173,15 +177,15 @@ let Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
173
177
  }
174
178
 
175
179
  renderFacade() {
176
- const _this$props2 = this.props,
177
- size = _this$props2.size,
178
- disabled = _this$props2.disabled,
179
- variant = _this$props2.variant,
180
- label = _this$props2.label,
181
- readOnly = _this$props2.readOnly,
182
- indeterminate = _this$props2.indeterminate,
183
- labelPlacement = _this$props2.labelPlacement,
184
- themeOverride = _this$props2.themeOverride;
180
+ const _this$props4 = this.props,
181
+ size = _this$props4.size,
182
+ disabled = _this$props4.disabled,
183
+ variant = _this$props4.variant,
184
+ label = _this$props4.label,
185
+ readOnly = _this$props4.readOnly,
186
+ indeterminate = _this$props4.indeterminate,
187
+ labelPlacement = _this$props4.labelPlacement,
188
+ themeOverride = _this$props4.themeOverride;
185
189
  const _this$state = this.state,
186
190
  hovered = _this$state.hovered,
187
191
  focused = _this$state.focused;
@@ -220,24 +224,24 @@ let Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
220
224
  }
221
225
 
222
226
  render() {
223
- const _this$props3 = this.props,
224
- disabled = _this$props3.disabled,
225
- readOnly = _this$props3.readOnly,
226
- value = _this$props3.value,
227
- onKeyDown = _this$props3.onKeyDown,
228
- onFocus = _this$props3.onFocus,
229
- onBlur = _this$props3.onBlur,
230
- onMouseOver = _this$props3.onMouseOver,
231
- onMouseOut = _this$props3.onMouseOut,
232
- indeterminate = _this$props3.indeterminate,
233
- variant = _this$props3.variant,
234
- styles = _this$props3.styles;
227
+ const _this$props5 = this.props,
228
+ disabled = _this$props5.disabled,
229
+ readOnly = _this$props5.readOnly,
230
+ value = _this$props5.value,
231
+ onKeyDown = _this$props5.onKeyDown,
232
+ onFocus = _this$props5.onFocus,
233
+ onBlur = _this$props5.onBlur,
234
+ onMouseOver = _this$props5.onMouseOver,
235
+ onMouseOut = _this$props5.onMouseOut,
236
+ indeterminate = _this$props5.indeterminate,
237
+ variant = _this$props5.variant,
238
+ styles = _this$props5.styles;
235
239
  const props = (0, _omitProps.omitProps)(this.props, Checkbox.allowedProps);
236
240
  (0, _console.logError)(!(variant === 'toggle' && indeterminate), `[Checkbox] The \`toggle\` variant does not support the \`indeterminate\` property. Use the \`simple\` variant instead.`);
237
241
  /* eslint-disable jsx-a11y/mouse-events-have-key-events */
238
242
 
239
243
  return (0, _emotion.jsx)("div", {
240
- css: styles?.checkbox,
244
+ css: styles === null || styles === void 0 ? void 0 : styles.checkbox,
241
245
  onMouseOver: (0, _createChainedFunction.createChainedFunction)(onMouseOver, this.handleMouseOver),
242
246
  onMouseOut: (0, _createChainedFunction.createChainedFunction)(onMouseOut, this.handleMouseOut),
243
247
  ref: this.handleRef
@@ -250,7 +254,7 @@ let Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
250
254
  },
251
255
  disabled: disabled || readOnly,
252
256
  "aria-checked": indeterminate ? 'mixed' : void 0,
253
- css: styles?.input,
257
+ css: styles === null || styles === void 0 ? void 0 : styles.input,
254
258
  onChange: this.handleChange,
255
259
  onKeyDown: (0, _createChainedFunction.createChainedFunction)(onKeyDown, this.handleKeyDown),
256
260
  onFocus: (0, _createChainedFunction.createChainedFunction)(onFocus, this.handleFocus),
@@ -258,7 +262,7 @@ let Checkbox = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
258
262
  checked: this.checked
259
263
  })), (0, _emotion.jsx)("label", {
260
264
  htmlFor: this.id,
261
- css: styles?.control
265
+ css: styles === null || styles === void 0 ? void 0 : styles.control
262
266
  }, this.renderFacade(), this.renderMessages()));
263
267
  /* eslint-enable jsx-a11y/mouse-events-have-key-events */
264
268
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-checkbox",
3
- "version": "8.18.0",
3
+ "version": "8.18.1-snapshot.2+ca4c1ff9d",
4
4
  "description": " styled HTML input type='checkbox' component.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,28 +24,28 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.13.10",
27
- "@instructure/console": "8.18.0",
28
- "@instructure/emotion": "8.18.0",
29
- "@instructure/shared-types": "8.18.0",
30
- "@instructure/ui-dom-utils": "8.18.0",
31
- "@instructure/ui-form-field": "8.18.0",
32
- "@instructure/ui-icons": "8.18.0",
33
- "@instructure/ui-prop-types": "8.18.0",
34
- "@instructure/ui-react-utils": "8.18.0",
35
- "@instructure/ui-svg-images": "8.18.0",
36
- "@instructure/ui-testable": "8.18.0",
37
- "@instructure/ui-utils": "8.18.0",
38
- "@instructure/ui-view": "8.18.0",
39
- "@instructure/uid": "8.18.0",
27
+ "@instructure/console": "8.18.1-snapshot.2+ca4c1ff9d",
28
+ "@instructure/emotion": "8.18.1-snapshot.2+ca4c1ff9d",
29
+ "@instructure/shared-types": "8.18.1-snapshot.2+ca4c1ff9d",
30
+ "@instructure/ui-dom-utils": "8.18.1-snapshot.2+ca4c1ff9d",
31
+ "@instructure/ui-form-field": "8.18.1-snapshot.2+ca4c1ff9d",
32
+ "@instructure/ui-icons": "8.18.1-snapshot.2+ca4c1ff9d",
33
+ "@instructure/ui-prop-types": "8.18.1-snapshot.2+ca4c1ff9d",
34
+ "@instructure/ui-react-utils": "8.18.1-snapshot.2+ca4c1ff9d",
35
+ "@instructure/ui-svg-images": "8.18.1-snapshot.2+ca4c1ff9d",
36
+ "@instructure/ui-testable": "8.18.1-snapshot.2+ca4c1ff9d",
37
+ "@instructure/ui-utils": "8.18.1-snapshot.2+ca4c1ff9d",
38
+ "@instructure/ui-view": "8.18.1-snapshot.2+ca4c1ff9d",
39
+ "@instructure/uid": "8.18.1-snapshot.2+ca4c1ff9d",
40
40
  "keycode": "^2",
41
41
  "prop-types": "^15"
42
42
  },
43
43
  "devDependencies": {
44
- "@instructure/ui-babel-preset": "8.18.0",
45
- "@instructure/ui-color-utils": "8.18.0",
46
- "@instructure/ui-test-locator": "8.18.0",
47
- "@instructure/ui-test-utils": "8.18.0",
48
- "@instructure/ui-themes": "8.18.0"
44
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.2+ca4c1ff9d",
45
+ "@instructure/ui-color-utils": "8.18.1-snapshot.2+ca4c1ff9d",
46
+ "@instructure/ui-test-locator": "8.18.1-snapshot.2+ca4c1ff9d",
47
+ "@instructure/ui-test-utils": "8.18.1-snapshot.2+ca4c1ff9d",
48
+ "@instructure/ui-themes": "8.18.1-snapshot.2+ca4c1ff9d"
49
49
  },
50
50
  "peerDependencies": {
51
51
  "react": ">=16.8 <=17"
@@ -53,5 +53,6 @@
53
53
  "publishConfig": {
54
54
  "access": "public"
55
55
  },
56
- "sideEffects": false
56
+ "sideEffects": false,
57
+ "gitHead": "ca4c1ff9d3985151ae0758fb596de41652dbb58b"
57
58
  }