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