@instructure/ui-form-field 8.17.1-snapshot.21 → 8.17.1-snapshot.30

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 (20) hide show
  1. package/es/FormFieldGroup/index.js +7 -11
  2. package/es/FormFieldGroup/theme.js +5 -5
  3. package/es/FormFieldLabel/index.js +6 -10
  4. package/es/FormFieldLabel/theme.js +5 -5
  5. package/es/FormFieldLayout/index.js +7 -11
  6. package/es/FormFieldMessage/index.js +6 -10
  7. package/es/FormFieldMessage/theme.js +7 -7
  8. package/es/FormFieldMessages/index.js +7 -11
  9. package/es/FormFieldMessages/theme.js +1 -1
  10. package/lib/FormFieldGroup/index.js +7 -11
  11. package/lib/FormFieldGroup/theme.js +5 -5
  12. package/lib/FormFieldLabel/index.js +6 -10
  13. package/lib/FormFieldLabel/theme.js +5 -5
  14. package/lib/FormFieldLayout/index.js +7 -11
  15. package/lib/FormFieldMessage/index.js +6 -10
  16. package/lib/FormFieldMessage/theme.js +7 -7
  17. package/lib/FormFieldMessages/index.js +7 -11
  18. package/lib/FormFieldMessages/theme.js +1 -1
  19. package/package.json +15 -15
  20. package/tsconfig.build.tsbuildinfo +1 -1
package/es/FormFieldGroup/index.js CHANGED
@@ -59,15 +59,11 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
59
59
  }
60
60
 
61
61
  componentDidMount() {
62
- var _this$props$makeStyle, _this$props;
63
-
64
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
62
+ this.props.makeStyles?.(this.makeStylesVariables);
65
63
  }
66
64
 
67
65
  componentDidUpdate() {
68
- var _this$props$makeStyle2, _this$props2;
69
-
70
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
66
+ this.props.makeStyles?.(this.makeStylesVariables);
71
67
  }
72
68
 
73
69
  get makeStylesVariables() {
@@ -104,15 +100,15 @@ let FormFieldGroup = (_dec = withStyle(generateStyle, generateComponentTheme), _
104
100
  const styles = this.props.styles;
105
101
  return jsx("span", {
106
102
  key: "fields",
107
- css: styles === null || styles === void 0 ? void 0 : styles.formFieldGroup
103
+ css: styles?.formFieldGroup
108
104
  }, this.renderChildren());
109
105
  }
110
106
 
111
107
  render() {
112
- const _this$props3 = this.props,
113
- styles = _this$props3.styles,
114
- makeStyles = _this$props3.makeStyles,
115
- props = _objectWithoutProperties(_this$props3, _excluded);
108
+ const _this$props = this.props,
109
+ styles = _this$props.styles,
110
+ makeStyles = _this$props.makeStyles,
111
+ props = _objectWithoutProperties(_this$props, _excluded);
116
112
 
117
113
  return jsx(FormFieldLayout, Object.assign({}, omitProps(props, FormFieldGroup.allowedProps), pickProps(props, FormFieldLayout.allowedProps), {
118
114
  vAlign: props.vAlign,
package/es/FormFieldGroup/theme.js CHANGED
@@ -32,12 +32,12 @@ const generateComponentTheme = theme => {
32
32
  colors = theme.colors,
33
33
  spacing = theme.spacing;
34
34
  const componentVariables = {
35
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
36
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
35
+ borderWidth: borders?.widthSmall,
36
+ borderStyle: borders?.style,
37
37
  borderColor: 'transparent',
38
- borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
39
- errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
40
- errorFieldsPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall
38
+ borderRadius: borders?.radiusMedium,
39
+ errorBorderColor: colors?.borderDanger,
40
+ errorFieldsPadding: spacing?.xSmall
41
41
  };
42
42
  return { ...componentVariables
43
43
  };
package/es/FormFieldLabel/index.js CHANGED
@@ -60,25 +60,21 @@ let FormFieldLabel = (_dec = withStyle(generateStyle, generateComponentTheme), _
60
60
  }
61
61
 
62
62
  componentDidMount() {
63
- var _this$props$makeStyle, _this$props;
64
-
65
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
63
+ this.props.makeStyles?.();
66
64
  }
67
65
 
68
66
  componentDidUpdate() {
69
- var _this$props$makeStyle2, _this$props2;
70
-
71
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
67
+ this.props.makeStyles?.();
72
68
  }
73
69
 
74
70
  render() {
75
71
  const ElementType = getElementType(FormFieldLabel, this.props);
76
- const _this$props3 = this.props,
77
- styles = _this$props3.styles,
78
- children = _this$props3.children;
72
+ const _this$props = this.props,
73
+ styles = _this$props.styles,
74
+ children = _this$props.children;
79
75
  return jsx(ElementType //@ts-expect-error too complex union type
80
76
  , Object.assign({}, omitProps(this.props, FormFieldLabel.allowedProps), {
81
- css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
77
+ css: styles?.formFieldLabel,
82
78
  ref: this.handleRef
83
79
  }), children);
84
80
  }
package/es/FormFieldLabel/theme.js CHANGED
@@ -37,11 +37,11 @@ const generateComponentTheme = theme => {
37
37
  }
38
38
  };
39
39
  const componentVariables = {
40
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
41
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
42
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
43
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
44
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightFit
40
+ color: colors?.textDarkest,
41
+ fontFamily: typography?.fontFamily,
42
+ fontWeight: typography?.fontWeightBold,
43
+ fontSize: typography?.fontSizeMedium,
44
+ lineHeight: typography?.lineHeightFit
45
45
  };
46
46
  return { ...componentVariables,
47
47
  ...themeSpecificStyle[themeName]
package/es/FormFieldLayout/index.js CHANGED
@@ -73,15 +73,11 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
73
73
  }
74
74
 
75
75
  componentDidMount() {
76
- var _this$props$makeStyle, _this$props;
77
-
78
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
76
+ this.props.makeStyles?.();
79
77
  }
80
78
 
81
79
  componentDidUpdate() {
82
- var _this$props$makeStyle2, _this$props2;
83
-
84
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
80
+ this.props.makeStyles?.();
85
81
  }
86
82
 
87
83
  get hasVisibleLabel() {
@@ -141,16 +137,16 @@ let FormFieldLayout = (_dec = withDeterministicId(), _dec2 = withStyle(generateS
141
137
  // any cast is needed to prevent Expression produces a union type that is too complex to represent errors
142
138
  const ElementType = this.elementType;
143
139
 
144
- const _this$props3 = this.props,
145
- makeStyles = _this$props3.makeStyles,
146
- styles = _this$props3.styles,
147
- props = _objectWithoutProperties(_this$props3, _excluded);
140
+ const _this$props = this.props,
141
+ makeStyles = _this$props.makeStyles,
142
+ styles = _this$props.styles,
143
+ props = _objectWithoutProperties(_this$props, _excluded);
148
144
 
149
145
  const width = props.width,
150
146
  layout = props.layout,
151
147
  children = props.children;
152
148
  return jsx(ElementType, Object.assign({}, omitProps(props, [...FormFieldLayout.allowedProps, ...Grid.allowedProps]), {
153
- css: styles === null || styles === void 0 ? void 0 : styles.formFieldLayout,
149
+ css: styles?.formFieldLayout,
154
150
  style: {
155
151
  width
156
152
  },
package/es/FormFieldMessage/index.js CHANGED
@@ -59,23 +59,19 @@ let FormFieldMessage = (_dec = withStyle(generateStyle, generateComponentTheme),
59
59
  }
60
60
 
61
61
  componentDidMount() {
62
- var _this$props$makeStyle, _this$props;
63
-
64
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
62
+ this.props.makeStyles?.();
65
63
  }
66
64
 
67
65
  componentDidUpdate() {
68
- var _this$props$makeStyle2, _this$props2;
69
-
70
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
66
+ this.props.makeStyles?.();
71
67
  }
72
68
 
73
69
  render() {
74
- const _this$props3 = this.props,
75
- children = _this$props3.children,
76
- styles = _this$props3.styles;
70
+ const _this$props = this.props,
71
+ children = _this$props.children,
72
+ styles = _this$props.styles;
77
73
  return this.props.variant !== 'screenreader-only' ? jsx("span", {
78
- css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage,
74
+ css: styles?.formFieldMessage,
79
75
  ref: this.handleRef
80
76
  }, children) : jsx(ScreenReaderContent, {
81
77
  elementRef: this.handleRef
package/es/FormFieldMessage/theme.js CHANGED
@@ -37,13 +37,13 @@ const generateComponentTheme = theme => {
37
37
  }
38
38
  };
39
39
  const componentVariables = {
40
- colorHint: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
41
- colorError: colors === null || colors === void 0 ? void 0 : colors.textDanger,
42
- colorSuccess: colors === null || colors === void 0 ? void 0 : colors.textSuccess,
43
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
44
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
45
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
46
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight
40
+ colorHint: colors?.textDarkest,
41
+ colorError: colors?.textDanger,
42
+ colorSuccess: colors?.textSuccess,
43
+ fontFamily: typography?.fontFamily,
44
+ fontWeight: typography?.fontWeightNormal,
45
+ fontSize: typography?.fontSizeSmall,
46
+ lineHeight: typography?.lineHeight
47
47
  };
48
48
  return { ...componentVariables,
49
49
  ...themeSpecificStyle[themeName]
package/es/FormFieldMessages/index.js CHANGED
@@ -63,29 +63,25 @@ let FormFieldMessages = (_dec = withStyle(generateStyle, generateComponentTheme)
63
63
  }
64
64
 
65
65
  componentDidMount() {
66
- var _this$props$makeStyle, _this$props;
67
-
68
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
66
+ this.props.makeStyles?.();
69
67
  }
70
68
 
71
69
  componentDidUpdate() {
72
- var _this$props$makeStyle2, _this$props2;
73
-
74
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
70
+ this.props.makeStyles?.();
75
71
  }
76
72
 
77
73
  render() {
78
- const _this$props3 = this.props,
79
- messages = _this$props3.messages,
80
- styles = _this$props3.styles;
74
+ const _this$props = this.props,
75
+ messages = _this$props.messages,
76
+ styles = _this$props.styles;
81
77
  return messages && messages.length > 0 ? jsx("span", Object.assign({
82
- css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessages
78
+ css: styles?.formFieldMessages
83
79
  }, omitProps(this.props, FormFieldMessages.allowedProps), {
84
80
  ref: this.handleRef
85
81
  }), messages.map((msg, i) => {
86
82
  return jsx("span", {
87
83
  key: `error${i}`,
88
- css: styles === null || styles === void 0 ? void 0 : styles.message
84
+ css: styles?.message
89
85
  }, jsx(FormFieldMessage, {
90
86
  variant: msg.type
91
87
  }, msg.text));
package/es/FormFieldMessages/theme.js CHANGED
@@ -30,7 +30,7 @@
30
30
  const generateComponentTheme = theme => {
31
31
  const spacing = theme.spacing;
32
32
  const componentVariables = {
33
- topMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
33
+ topMargin: spacing?.xxSmall
34
34
  };
35
35
  return { ...componentVariables
36
36
  };
package/lib/FormFieldGroup/index.js CHANGED
@@ -53,15 +53,11 @@ let FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
53
53
  }
54
54
 
55
55
  componentDidMount() {
56
- var _this$props$makeStyle, _this$props;
57
-
58
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStylesVariables);
56
+ this.props.makeStyles?.(this.makeStylesVariables);
59
57
  }
60
58
 
61
59
  componentDidUpdate() {
62
- var _this$props$makeStyle2, _this$props2;
63
-
64
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStylesVariables);
60
+ this.props.makeStyles?.(this.makeStylesVariables);
65
61
  }
66
62
 
67
63
  get makeStylesVariables() {
@@ -98,15 +94,15 @@ let FormFieldGroup = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
98
94
  const styles = this.props.styles;
99
95
  return (0, _emotion.jsx)("span", {
100
96
  key: "fields",
101
- css: styles === null || styles === void 0 ? void 0 : styles.formFieldGroup
97
+ css: styles?.formFieldGroup
102
98
  }, this.renderChildren());
103
99
  }
104
100
 
105
101
  render() {
106
- const _this$props3 = this.props,
107
- styles = _this$props3.styles,
108
- makeStyles = _this$props3.makeStyles,
109
- props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
102
+ const _this$props = this.props,
103
+ styles = _this$props.styles,
104
+ makeStyles = _this$props.makeStyles,
105
+ props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
110
106
  return (0, _emotion.jsx)(_FormFieldLayout.FormFieldLayout, Object.assign({}, (0, _omitProps.omitProps)(props, FormFieldGroup.allowedProps), (0, _pickProps.pickProps)(props, _FormFieldLayout.FormFieldLayout.allowedProps), {
111
107
  vAlign: props.vAlign,
112
108
  layout: props.layout === 'inline' ? 'inline' : 'stacked',
package/lib/FormFieldGroup/theme.js CHANGED
@@ -39,12 +39,12 @@ const generateComponentTheme = theme => {
39
39
  colors = theme.colors,
40
40
  spacing = theme.spacing;
41
41
  const componentVariables = {
42
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
43
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
42
+ borderWidth: borders?.widthSmall,
43
+ borderStyle: borders?.style,
44
44
  borderColor: 'transparent',
45
- borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
46
- errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
47
- errorFieldsPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall
45
+ borderRadius: borders?.radiusMedium,
46
+ errorBorderColor: colors?.borderDanger,
47
+ errorFieldsPadding: spacing?.xSmall
48
48
  };
49
49
  return { ...componentVariables
50
50
  };
package/lib/FormFieldLabel/index.js CHANGED
@@ -51,25 +51,21 @@ let FormFieldLabel = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.def
51
51
  }
52
52
 
53
53
  componentDidMount() {
54
- var _this$props$makeStyle, _this$props;
55
-
56
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
54
+ this.props.makeStyles?.();
57
55
  }
58
56
 
59
57
  componentDidUpdate() {
60
- var _this$props$makeStyle2, _this$props2;
61
-
62
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
58
+ this.props.makeStyles?.();
63
59
  }
64
60
 
65
61
  render() {
66
62
  const ElementType = (0, _getElementType.getElementType)(FormFieldLabel, this.props);
67
- const _this$props3 = this.props,
68
- styles = _this$props3.styles,
69
- children = _this$props3.children;
63
+ const _this$props = this.props,
64
+ styles = _this$props.styles,
65
+ children = _this$props.children;
70
66
  return (0, _emotion.jsx)(ElementType //@ts-expect-error too complex union type
71
67
  , Object.assign({}, (0, _omitProps.omitProps)(this.props, FormFieldLabel.allowedProps), {
72
- css: styles === null || styles === void 0 ? void 0 : styles.formFieldLabel,
68
+ css: styles?.formFieldLabel,
73
69
  ref: this.handleRef
74
70
  }), children);
75
71
  }
package/lib/FormFieldLabel/theme.js CHANGED
@@ -44,11 +44,11 @@ const generateComponentTheme = theme => {
44
44
  }
45
45
  };
46
46
  const componentVariables = {
47
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
48
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
49
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightBold,
50
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
51
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeightFit
47
+ color: colors?.textDarkest,
48
+ fontFamily: typography?.fontFamily,
49
+ fontWeight: typography?.fontWeightBold,
50
+ fontSize: typography?.fontSizeMedium,
51
+ lineHeight: typography?.lineHeightFit
52
52
  };
53
53
  return { ...componentVariables,
54
54
  ...themeSpecificStyle[themeName]
package/lib/FormFieldLayout/index.js CHANGED
@@ -74,15 +74,11 @@ let FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _
74
74
  }
75
75
 
76
76
  componentDidMount() {
77
- var _this$props$makeStyle, _this$props;
78
-
79
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
77
+ this.props.makeStyles?.();
80
78
  }
81
79
 
82
80
  componentDidUpdate() {
83
- var _this$props$makeStyle2, _this$props2;
84
-
85
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
81
+ this.props.makeStyles?.();
86
82
  }
87
83
 
88
84
  get hasVisibleLabel() {
@@ -141,15 +137,15 @@ let FormFieldLayout = (_dec = (0, _withDeterministicId.withDeterministicId)(), _
141
137
  render() {
142
138
  // any cast is needed to prevent Expression produces a union type that is too complex to represent errors
143
139
  const ElementType = this.elementType;
144
- const _this$props3 = this.props,
145
- makeStyles = _this$props3.makeStyles,
146
- styles = _this$props3.styles,
147
- props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
140
+ const _this$props = this.props,
141
+ makeStyles = _this$props.makeStyles,
142
+ styles = _this$props.styles,
143
+ props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
148
144
  const width = props.width,
149
145
  layout = props.layout,
150
146
  children = props.children;
151
147
  return (0, _emotion.jsx)(ElementType, Object.assign({}, (0, _omitProps.omitProps)(props, [...FormFieldLayout.allowedProps, ..._Grid.Grid.allowedProps]), {
152
- css: styles === null || styles === void 0 ? void 0 : styles.formFieldLayout,
148
+ css: styles?.formFieldLayout,
153
149
  style: {
154
150
  width
155
151
  },
package/lib/FormFieldMessage/index.js CHANGED
@@ -48,23 +48,19 @@ let FormFieldMessage = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.d
48
48
  }
49
49
 
50
50
  componentDidMount() {
51
- var _this$props$makeStyle, _this$props;
52
-
53
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
51
+ this.props.makeStyles?.();
54
52
  }
55
53
 
56
54
  componentDidUpdate() {
57
- var _this$props$makeStyle2, _this$props2;
58
-
59
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
55
+ this.props.makeStyles?.();
60
56
  }
61
57
 
62
58
  render() {
63
- const _this$props3 = this.props,
64
- children = _this$props3.children,
65
- styles = _this$props3.styles;
59
+ const _this$props = this.props,
60
+ children = _this$props.children,
61
+ styles = _this$props.styles;
66
62
  return this.props.variant !== 'screenreader-only' ? (0, _emotion.jsx)("span", {
67
- css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessage,
63
+ css: styles?.formFieldMessage,
68
64
  ref: this.handleRef
69
65
  }, children) : (0, _emotion.jsx)(_ScreenReaderContent.ScreenReaderContent, {
70
66
  elementRef: this.handleRef
package/lib/FormFieldMessage/theme.js CHANGED
@@ -44,13 +44,13 @@ const generateComponentTheme = theme => {
44
44
  }
45
45
  };
46
46
  const componentVariables = {
47
- colorHint: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
48
- colorError: colors === null || colors === void 0 ? void 0 : colors.textDanger,
49
- colorSuccess: colors === null || colors === void 0 ? void 0 : colors.textSuccess,
50
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
51
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
52
- fontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
53
- lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight
47
+ colorHint: colors?.textDarkest,
48
+ colorError: colors?.textDanger,
49
+ colorSuccess: colors?.textSuccess,
50
+ fontFamily: typography?.fontFamily,
51
+ fontWeight: typography?.fontWeightNormal,
52
+ fontSize: typography?.fontSizeSmall,
53
+ lineHeight: typography?.lineHeight
54
54
  };
55
55
  return { ...componentVariables,
56
56
  ...themeSpecificStyle[themeName]
package/lib/FormFieldMessages/index.js CHANGED
@@ -53,29 +53,25 @@ let FormFieldMessages = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.
53
53
  }
54
54
 
55
55
  componentDidMount() {
56
- var _this$props$makeStyle, _this$props;
57
-
58
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
56
+ this.props.makeStyles?.();
59
57
  }
60
58
 
61
59
  componentDidUpdate() {
62
- var _this$props$makeStyle2, _this$props2;
63
-
64
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
60
+ this.props.makeStyles?.();
65
61
  }
66
62
 
67
63
  render() {
68
- const _this$props3 = this.props,
69
- messages = _this$props3.messages,
70
- styles = _this$props3.styles;
64
+ const _this$props = this.props,
65
+ messages = _this$props.messages,
66
+ styles = _this$props.styles;
71
67
  return messages && messages.length > 0 ? (0, _emotion.jsx)("span", Object.assign({
72
- css: styles === null || styles === void 0 ? void 0 : styles.formFieldMessages
68
+ css: styles?.formFieldMessages
73
69
  }, (0, _omitProps.omitProps)(this.props, FormFieldMessages.allowedProps), {
74
70
  ref: this.handleRef
75
71
  }), messages.map((msg, i) => {
76
72
  return (0, _emotion.jsx)("span", {
77
73
  key: `error${i}`,
78
- css: styles === null || styles === void 0 ? void 0 : styles.message
74
+ css: styles?.message
79
75
  }, (0, _emotion.jsx)(_FormFieldMessage.FormFieldMessage, {
80
76
  variant: msg.type
81
77
  }, msg.text));
package/lib/FormFieldMessages/theme.js CHANGED
@@ -37,7 +37,7 @@ exports.default = void 0;
37
37
  const generateComponentTheme = theme => {
38
38
  const spacing = theme.spacing;
39
39
  const componentVariables = {
40
- topMargin: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall
40
+ topMargin: spacing?.xxSmall
41
41
  };
42
42
  return { ...componentVariables
43
43
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-form-field",
3
- "version": "8.17.1-snapshot.21+79d490548",
3
+ "version": "8.17.1-snapshot.30+cb1322c25",
4
4
  "description": "Form layout components.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,22 +23,22 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.17.1-snapshot.21+79d490548",
27
- "@instructure/ui-test-utils": "8.17.1-snapshot.21+79d490548",
28
- "@instructure/ui-themes": "8.17.1-snapshot.21+79d490548"
26
+ "@instructure/ui-babel-preset": "8.17.1-snapshot.30+cb1322c25",
27
+ "@instructure/ui-test-utils": "8.17.1-snapshot.30+cb1322c25",
28
+ "@instructure/ui-themes": "8.17.1-snapshot.30+cb1322c25"
29
29
  },
30
30
  "dependencies": {
31
31
  "@babel/runtime": "^7.13.10",
32
- "@instructure/console": "8.17.1-snapshot.21+79d490548",
33
- "@instructure/emotion": "8.17.1-snapshot.21+79d490548",
34
- "@instructure/shared-types": "8.17.1-snapshot.21+79d490548",
35
- "@instructure/ui-a11y-content": "8.17.1-snapshot.21+79d490548",
36
- "@instructure/ui-a11y-utils": "8.17.1-snapshot.21+79d490548",
37
- "@instructure/ui-grid": "8.17.1-snapshot.21+79d490548",
38
- "@instructure/ui-icons": "8.17.1-snapshot.21+79d490548",
39
- "@instructure/ui-react-utils": "8.17.1-snapshot.21+79d490548",
40
- "@instructure/ui-utils": "8.17.1-snapshot.21+79d490548",
41
- "@instructure/uid": "8.17.1-snapshot.21+79d490548",
32
+ "@instructure/console": "8.17.1-snapshot.30+cb1322c25",
33
+ "@instructure/emotion": "8.17.1-snapshot.30+cb1322c25",
34
+ "@instructure/shared-types": "8.17.1-snapshot.30+cb1322c25",
35
+ "@instructure/ui-a11y-content": "8.17.1-snapshot.30+cb1322c25",
36
+ "@instructure/ui-a11y-utils": "8.17.1-snapshot.30+cb1322c25",
37
+ "@instructure/ui-grid": "8.17.1-snapshot.30+cb1322c25",
38
+ "@instructure/ui-icons": "8.17.1-snapshot.30+cb1322c25",
39
+ "@instructure/ui-react-utils": "8.17.1-snapshot.30+cb1322c25",
40
+ "@instructure/ui-utils": "8.17.1-snapshot.30+cb1322c25",
41
+ "@instructure/uid": "8.17.1-snapshot.30+cb1322c25",
42
42
  "prop-types": "^15"
43
43
  },
44
44
  "peerDependencies": {
@@ -47,5 +47,5 @@
47
47
  "publishConfig": {
48
48
  "access": "public"
49
49
  },
50
- "gitHead": "79d490548a0736feb2a7232bf5918857317b178b"
50
+ "gitHead": "cb1322c25257139750149d7a817f1fb32571c1ed"
51
51
  }