@instructure/ui-text-area 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 (6) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/es/TextArea/index.js +24 -18
  3. package/es/TextArea/theme.js +24 -24
  4. package/lib/TextArea/index.js +24 -18
  5. package/lib/TextArea/theme.js +24 -24
  6. package/package.json +17 -17
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-text-area
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/TextArea/index.js CHANGED
@@ -137,13 +137,17 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
137
137
  }
138
138
 
139
139
  componentDidMount() {
140
+ var _this$props$makeStyle, _this$props2;
141
+
140
142
  this.autoGrow();
141
- this.props.makeStyles?.();
143
+ (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
142
144
  }
143
145
 
144
146
  componentDidUpdate() {
147
+ var _this$props$makeStyle2, _this$props3;
148
+
145
149
  this.autoGrow();
146
- this.props.makeStyles?.();
150
+ (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
147
151
  }
148
152
 
149
153
  componentWillUnmount() {
@@ -225,19 +229,21 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
225
229
  }
226
230
 
227
231
  render() {
228
- const _this$props2 = this.props,
229
- autoGrow = _this$props2.autoGrow,
230
- placeholder = _this$props2.placeholder,
231
- value = _this$props2.value,
232
- defaultValue = _this$props2.defaultValue,
233
- disabled = _this$props2.disabled,
234
- readOnly = _this$props2.readOnly,
235
- required = _this$props2.required,
236
- width = _this$props2.width,
237
- height = _this$props2.height,
238
- maxHeight = _this$props2.maxHeight,
239
- textareaRef = _this$props2.textareaRef,
240
- resize = _this$props2.resize;
232
+ var _this$props$styles, _this$props$styles2, _this$props$styles3;
233
+
234
+ const _this$props4 = this.props,
235
+ autoGrow = _this$props4.autoGrow,
236
+ placeholder = _this$props4.placeholder,
237
+ value = _this$props4.value,
238
+ defaultValue = _this$props4.defaultValue,
239
+ disabled = _this$props4.disabled,
240
+ readOnly = _this$props4.readOnly,
241
+ required = _this$props4.required,
242
+ width = _this$props4.width,
243
+ height = _this$props4.height,
244
+ maxHeight = _this$props4.maxHeight,
245
+ textareaRef = _this$props4.textareaRef,
246
+ resize = _this$props4.resize;
241
247
  const props = omitProps(this.props, TextArea.allowedProps);
242
248
  const style = {
243
249
  width,
@@ -262,7 +268,7 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
262
268
  "aria-required": required,
263
269
  "aria-invalid": this.invalid ? 'true' : void 0,
264
270
  disabled: disabled || readOnly,
265
- css: this.props.styles?.textArea,
271
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textArea,
266
272
  onChange: this.handleChange
267
273
  }));
268
274
  return jsx(FormField, Object.assign({}, pickProps(this.props, FormField.allowedProps), {
@@ -270,14 +276,14 @@ let TextArea = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
270
276
  vAlign: "top",
271
277
  id: this.id
272
278
  }), jsx("div", {
273
- css: this.props.styles?.textAreaLayout,
279
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.textAreaLayout,
274
280
  style: {
275
281
  width,
276
282
  maxHeight
277
283
  },
278
284
  ref: this.handleContainerRef
279
285
  }, textarea, !disabled && !readOnly ? jsx("span", {
280
- css: this.props.styles?.textAreaOutline,
286
+ css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.textAreaOutline,
281
287
  "aria-hidden": "true"
282
288
  }) : null));
283
289
  }
package/es/TextArea/theme.js CHANGED
@@ -41,30 +41,30 @@ const generateComponentTheme = theme => {
41
41
  }
42
42
  };
43
43
  const componentVariables = {
44
- fontFamily: typography?.fontFamily,
45
- fontWeight: typography?.fontWeightNormal,
46
- color: colors?.textDarkest,
47
- background: colors?.backgroundLightest,
48
- borderWidth: borders?.widthSmall,
49
- borderStyle: borders?.style,
50
- borderTopColor: colors?.borderMedium,
51
- borderRightColor: colors?.borderMedium,
52
- borderBottomColor: colors?.borderMedium,
53
- borderLeftColor: colors?.borderMedium,
54
- borderRadius: borders?.radiusMedium,
55
- padding: spacing?.small,
56
- focusOutlineColor: colors?.borderBrand,
57
- focusOutlineWidth: borders?.widthMedium,
58
- focusOutlineStyle: borders?.style,
59
- errorBorderColor: colors?.borderDanger,
60
- errorOutlineColor: colors?.borderDanger,
61
- placeholderColor: colors?.textDark,
62
- smallFontSize: typography?.fontSizeSmall,
63
- smallHeight: forms?.inputHeightSmall,
64
- mediumFontSize: typography?.fontSizeMedium,
65
- mediumHeight: forms?.inputHeightMedium,
66
- largeFontSize: typography?.fontSizeLarge,
67
- largeHeight: forms?.inputHeightLarge
44
+ fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
45
+ fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
46
+ color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
47
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
48
+ borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
49
+ borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
50
+ borderTopColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
51
+ borderRightColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
52
+ borderBottomColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
53
+ borderLeftColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
54
+ borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
55
+ padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
56
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
57
+ focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
58
+ focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
59
+ errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
60
+ errorOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
61
+ placeholderColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
62
+ smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
63
+ smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
64
+ mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
65
+ mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
66
+ largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
67
+ largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
68
68
  };
69
69
  return { ...componentVariables,
70
70
  ...themeSpecificStyle[themeName]
package/lib/TextArea/index.js CHANGED
@@ -141,13 +141,17 @@ let TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
141
141
  }
142
142
 
143
143
  componentDidMount() {
144
+ var _this$props$makeStyle, _this$props2;
145
+
144
146
  this.autoGrow();
145
- this.props.makeStyles?.();
147
+ (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
146
148
  }
147
149
 
148
150
  componentDidUpdate() {
151
+ var _this$props$makeStyle2, _this$props3;
152
+
149
153
  this.autoGrow();
150
- this.props.makeStyles?.();
154
+ (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
151
155
  }
152
156
 
153
157
  componentWillUnmount() {
@@ -229,19 +233,21 @@ let TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
229
233
  }
230
234
 
231
235
  render() {
232
- const _this$props2 = this.props,
233
- autoGrow = _this$props2.autoGrow,
234
- placeholder = _this$props2.placeholder,
235
- value = _this$props2.value,
236
- defaultValue = _this$props2.defaultValue,
237
- disabled = _this$props2.disabled,
238
- readOnly = _this$props2.readOnly,
239
- required = _this$props2.required,
240
- width = _this$props2.width,
241
- height = _this$props2.height,
242
- maxHeight = _this$props2.maxHeight,
243
- textareaRef = _this$props2.textareaRef,
244
- resize = _this$props2.resize;
236
+ var _this$props$styles, _this$props$styles2, _this$props$styles3;
237
+
238
+ const _this$props4 = this.props,
239
+ autoGrow = _this$props4.autoGrow,
240
+ placeholder = _this$props4.placeholder,
241
+ value = _this$props4.value,
242
+ defaultValue = _this$props4.defaultValue,
243
+ disabled = _this$props4.disabled,
244
+ readOnly = _this$props4.readOnly,
245
+ required = _this$props4.required,
246
+ width = _this$props4.width,
247
+ height = _this$props4.height,
248
+ maxHeight = _this$props4.maxHeight,
249
+ textareaRef = _this$props4.textareaRef,
250
+ resize = _this$props4.resize;
245
251
  const props = (0, _omitProps.omitProps)(this.props, TextArea.allowedProps);
246
252
  const style = {
247
253
  width,
@@ -266,7 +272,7 @@ let TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
266
272
  "aria-required": required,
267
273
  "aria-invalid": this.invalid ? 'true' : void 0,
268
274
  disabled: disabled || readOnly,
269
- css: this.props.styles?.textArea,
275
+ css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textArea,
270
276
  onChange: this.handleChange
271
277
  }));
272
278
  return (0, _emotion.jsx)(_FormField.FormField, Object.assign({}, (0, _pickProps.pickProps)(this.props, _FormField.FormField.allowedProps), {
@@ -274,14 +280,14 @@ let TextArea = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
274
280
  vAlign: "top",
275
281
  id: this.id
276
282
  }), (0, _emotion.jsx)("div", {
277
- css: this.props.styles?.textAreaLayout,
283
+ css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.textAreaLayout,
278
284
  style: {
279
285
  width,
280
286
  maxHeight
281
287
  },
282
288
  ref: this.handleContainerRef
283
289
  }, textarea, !disabled && !readOnly ? (0, _emotion.jsx)("span", {
284
- css: this.props.styles?.textAreaOutline,
290
+ css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.textAreaOutline,
285
291
  "aria-hidden": "true"
286
292
  }) : null));
287
293
  }
package/lib/TextArea/theme.js CHANGED
@@ -48,30 +48,30 @@ const generateComponentTheme = theme => {
48
48
  }
49
49
  };
50
50
  const componentVariables = {
51
- fontFamily: typography?.fontFamily,
52
- fontWeight: typography?.fontWeightNormal,
53
- color: colors?.textDarkest,
54
- background: colors?.backgroundLightest,
55
- borderWidth: borders?.widthSmall,
56
- borderStyle: borders?.style,
57
- borderTopColor: colors?.borderMedium,
58
- borderRightColor: colors?.borderMedium,
59
- borderBottomColor: colors?.borderMedium,
60
- borderLeftColor: colors?.borderMedium,
61
- borderRadius: borders?.radiusMedium,
62
- padding: spacing?.small,
63
- focusOutlineColor: colors?.borderBrand,
64
- focusOutlineWidth: borders?.widthMedium,
65
- focusOutlineStyle: borders?.style,
66
- errorBorderColor: colors?.borderDanger,
67
- errorOutlineColor: colors?.borderDanger,
68
- placeholderColor: colors?.textDark,
69
- smallFontSize: typography?.fontSizeSmall,
70
- smallHeight: forms?.inputHeightSmall,
71
- mediumFontSize: typography?.fontSizeMedium,
72
- mediumHeight: forms?.inputHeightMedium,
73
- largeFontSize: typography?.fontSizeLarge,
74
- largeHeight: forms?.inputHeightLarge
51
+ fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
52
+ fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
53
+ color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
54
+ background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
55
+ borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
56
+ borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
57
+ borderTopColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
58
+ borderRightColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
59
+ borderBottomColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
60
+ borderLeftColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
61
+ borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
62
+ padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
63
+ focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
64
+ focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
65
+ focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
66
+ errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
67
+ errorOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
68
+ placeholderColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
69
+ smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
70
+ smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
71
+ mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
72
+ mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
73
+ largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
74
+ largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
75
75
  };
76
76
  return { ...componentVariables,
77
77
  ...themeSpecificStyle[themeName]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-text-area",
3
- "version": "8.17.1-snapshot.82+96244a097",
3
+ "version": "8.18.1-snapshot.1+669aa5892",
4
4
  "description": "A styled HTML text area component",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,24 +24,24 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.13.10",
27
- "@instructure/debounce": "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-prop-types": "8.17.1-snapshot.82+96244a097",
33
- "@instructure/ui-react-utils": "8.17.1-snapshot.82+96244a097",
34
- "@instructure/ui-testable": "8.17.1-snapshot.82+96244a097",
35
- "@instructure/ui-utils": "8.17.1-snapshot.82+96244a097",
36
- "@instructure/uid": "8.17.1-snapshot.82+96244a097",
27
+ "@instructure/debounce": "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-prop-types": "8.18.1-snapshot.1+669aa5892",
33
+ "@instructure/ui-react-utils": "8.18.1-snapshot.1+669aa5892",
34
+ "@instructure/ui-testable": "8.18.1-snapshot.1+669aa5892",
35
+ "@instructure/ui-utils": "8.18.1-snapshot.1+669aa5892",
36
+ "@instructure/uid": "8.18.1-snapshot.1+669aa5892",
37
37
  "prop-types": "^15"
38
38
  },
39
39
  "devDependencies": {
40
- "@instructure/ui-babel-preset": "8.17.1-snapshot.82+96244a097",
41
- "@instructure/ui-color-utils": "8.17.1-snapshot.82+96244a097",
42
- "@instructure/ui-test-locator": "8.17.1-snapshot.82+96244a097",
43
- "@instructure/ui-test-utils": "8.17.1-snapshot.82+96244a097",
44
- "@instructure/ui-themes": "8.17.1-snapshot.82+96244a097"
40
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.1+669aa5892",
41
+ "@instructure/ui-color-utils": "8.18.1-snapshot.1+669aa5892",
42
+ "@instructure/ui-test-locator": "8.18.1-snapshot.1+669aa5892",
43
+ "@instructure/ui-test-utils": "8.18.1-snapshot.1+669aa5892",
44
+ "@instructure/ui-themes": "8.18.1-snapshot.1+669aa5892"
45
45
  },
46
46
  "peerDependencies": {
47
47
  "react": ">=16.8 <=17"
@@ -50,5 +50,5 @@
50
50
  "access": "public"
51
51
  },
52
52
  "sideEffects": false,
53
- "gitHead": "96244a097dffef5f10bbe7979c580581c787083e"
53
+ "gitHead": "669aa58926b123028bcb9e39427d36910b78b0d1"
54
54
  }