@instructure/ui-checkbox 8.17.1-snapshot.82 → 8.18.1-snapshot.1

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/CHANGELOG.md +4 -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 +20 -20
package/CHANGELOG.md CHANGED
@@ -3,6 +3,10 @@
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
+ # [8.18.0](https://github.com/instructure/instructure-ui/compare/v8.17.0...v8.18.0) (2022-02-23)
7
+
8
+ **Note:** Version bump only for package @instructure/ui-checkbox
9
+
6
10
  # [8.17.0](https://github.com/instructure/instructure-ui/compare/v8.16.0...v8.17.0) (2022-02-07)
7
11
 
8
12
  ### Bug Fixes
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.17.1-snapshot.82+96244a097",
3
+ "version": "8.18.1-snapshot.1+669aa5892",
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.17.1-snapshot.82+96244a097",
28
- "@instructure/emotion": "8.17.1-snapshot.82+96244a097",
29
- "@instructure/shared-types": "8.17.1-snapshot.82+96244a097",
30
- "@instructure/ui-dom-utils": "8.17.1-snapshot.82+96244a097",
31
- "@instructure/ui-form-field": "8.17.1-snapshot.82+96244a097",
32
- "@instructure/ui-icons": "8.17.1-snapshot.82+96244a097",
33
- "@instructure/ui-prop-types": "8.17.1-snapshot.82+96244a097",
34
- "@instructure/ui-react-utils": "8.17.1-snapshot.82+96244a097",
35
- "@instructure/ui-svg-images": "8.17.1-snapshot.82+96244a097",
36
- "@instructure/ui-testable": "8.17.1-snapshot.82+96244a097",
37
- "@instructure/ui-utils": "8.17.1-snapshot.82+96244a097",
38
- "@instructure/ui-view": "8.17.1-snapshot.82+96244a097",
39
- "@instructure/uid": "8.17.1-snapshot.82+96244a097",
27
+ "@instructure/console": "8.18.1-snapshot.1+669aa5892",
28
+ "@instructure/emotion": "8.18.1-snapshot.1+669aa5892",
29
+ "@instructure/shared-types": "8.18.1-snapshot.1+669aa5892",
30
+ "@instructure/ui-dom-utils": "8.18.1-snapshot.1+669aa5892",
31
+ "@instructure/ui-form-field": "8.18.1-snapshot.1+669aa5892",
32
+ "@instructure/ui-icons": "8.18.1-snapshot.1+669aa5892",
33
+ "@instructure/ui-prop-types": "8.18.1-snapshot.1+669aa5892",
34
+ "@instructure/ui-react-utils": "8.18.1-snapshot.1+669aa5892",
35
+ "@instructure/ui-svg-images": "8.18.1-snapshot.1+669aa5892",
36
+ "@instructure/ui-testable": "8.18.1-snapshot.1+669aa5892",
37
+ "@instructure/ui-utils": "8.18.1-snapshot.1+669aa5892",
38
+ "@instructure/ui-view": "8.18.1-snapshot.1+669aa5892",
39
+ "@instructure/uid": "8.18.1-snapshot.1+669aa5892",
40
40
  "keycode": "^2",
41
41
  "prop-types": "^15"
42
42
  },
43
43
  "devDependencies": {
44
- "@instructure/ui-babel-preset": "8.17.1-snapshot.82+96244a097",
45
- "@instructure/ui-color-utils": "8.17.1-snapshot.82+96244a097",
46
- "@instructure/ui-test-locator": "8.17.1-snapshot.82+96244a097",
47
- "@instructure/ui-test-utils": "8.17.1-snapshot.82+96244a097",
48
- "@instructure/ui-themes": "8.17.1-snapshot.82+96244a097"
44
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.1+669aa5892",
45
+ "@instructure/ui-color-utils": "8.18.1-snapshot.1+669aa5892",
46
+ "@instructure/ui-test-locator": "8.18.1-snapshot.1+669aa5892",
47
+ "@instructure/ui-test-utils": "8.18.1-snapshot.1+669aa5892",
48
+ "@instructure/ui-themes": "8.18.1-snapshot.1+669aa5892"
49
49
  },
50
50
  "peerDependencies": {
51
51
  "react": ">=16.8 <=17"
@@ -54,5 +54,5 @@
54
54
  "access": "public"
55
55
  },
56
56
  "sideEffects": false,
57
- "gitHead": "96244a097dffef5f10bbe7979c580581c787083e"
57
+ "gitHead": "669aa58926b123028bcb9e39427d36910b78b0d1"
58
58
  }