@instructure/ui-text-area 8.18.0 → 8.18.1-snapshot.0

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/LICENSE.md +27 -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 +18 -17
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/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.18.0",
3
+ "version": "8.18.1-snapshot.0+435c9ae79",
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.18.0",
28
- "@instructure/emotion": "8.18.0",
29
- "@instructure/shared-types": "8.18.0",
30
- "@instructure/ui-dom-utils": "8.18.0",
31
- "@instructure/ui-form-field": "8.18.0",
32
- "@instructure/ui-prop-types": "8.18.0",
33
- "@instructure/ui-react-utils": "8.18.0",
34
- "@instructure/ui-testable": "8.18.0",
35
- "@instructure/ui-utils": "8.18.0",
36
- "@instructure/uid": "8.18.0",
27
+ "@instructure/debounce": "8.18.1-snapshot.0+435c9ae79",
28
+ "@instructure/emotion": "8.18.1-snapshot.0+435c9ae79",
29
+ "@instructure/shared-types": "8.18.1-snapshot.0+435c9ae79",
30
+ "@instructure/ui-dom-utils": "8.18.1-snapshot.0+435c9ae79",
31
+ "@instructure/ui-form-field": "8.18.1-snapshot.0+435c9ae79",
32
+ "@instructure/ui-prop-types": "8.18.1-snapshot.0+435c9ae79",
33
+ "@instructure/ui-react-utils": "8.18.1-snapshot.0+435c9ae79",
34
+ "@instructure/ui-testable": "8.18.1-snapshot.0+435c9ae79",
35
+ "@instructure/ui-utils": "8.18.1-snapshot.0+435c9ae79",
36
+ "@instructure/uid": "8.18.1-snapshot.0+435c9ae79",
37
37
  "prop-types": "^15"
38
38
  },
39
39
  "devDependencies": {
40
- "@instructure/ui-babel-preset": "8.18.0",
41
- "@instructure/ui-color-utils": "8.18.0",
42
- "@instructure/ui-test-locator": "8.18.0",
43
- "@instructure/ui-test-utils": "8.18.0",
44
- "@instructure/ui-themes": "8.18.0"
40
+ "@instructure/ui-babel-preset": "8.18.1-snapshot.0+435c9ae79",
41
+ "@instructure/ui-color-utils": "8.18.1-snapshot.0+435c9ae79",
42
+ "@instructure/ui-test-locator": "8.18.1-snapshot.0+435c9ae79",
43
+ "@instructure/ui-test-utils": "8.18.1-snapshot.0+435c9ae79",
44
+ "@instructure/ui-themes": "8.18.1-snapshot.0+435c9ae79"
45
45
  },
46
46
  "peerDependencies": {
47
47
  "react": ">=16.8 <=17"
@@ -49,5 +49,6 @@
49
49
  "publishConfig": {
50
50
  "access": "public"
51
51
  },
52
- "sideEffects": false
52
+ "sideEffects": false,
53
+ "gitHead": "435c9ae794c15e2bd103f700f8c4e946d91c1b59"
53
54
  }