@instructure/ui-text-input 8.17.1-snapshot.21 → 8.17.1-snapshot.71

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/es/TextInput/index.js +32 -42
  2. package/es/TextInput/theme.js +21 -21
  3. package/lib/TextInput/index.js +32 -42
  4. package/lib/TextInput/theme.js +21 -21
  5. package/package.json +16 -16
  6. package/tsconfig.build.tsbuildinfo +1 -1
package/es/TextInput/index.js CHANGED
@@ -113,21 +113,15 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
113
113
  }
114
114
 
115
115
  componentDidMount() {
116
- var _this$props$makeStyle, _this$props;
117
-
118
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
116
+ this.props.makeStyles?.(this.makeStyleProps());
119
117
  }
120
118
 
121
119
  componentDidUpdate() {
122
- var _this$props$makeStyle2, _this$props2;
123
-
124
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
120
+ this.props.makeStyles?.(this.makeStyleProps());
125
121
  }
126
122
 
127
123
  focus() {
128
- var _this$_input;
129
-
130
- (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
124
+ this._input?.focus();
131
125
  }
132
126
 
133
127
  get interaction() {
@@ -151,9 +145,7 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
151
145
  }
152
146
 
153
147
  get value() {
154
- var _this$_input2;
155
-
156
- return (_this$_input2 = this._input) === null || _this$_input2 === void 0 ? void 0 : _this$_input2.value;
148
+ return this._input?.value;
157
149
  }
158
150
 
159
151
  get id() {
@@ -161,19 +153,17 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
161
153
  }
162
154
 
163
155
  renderInput() {
164
- var _this$props$styles;
165
-
166
- const _this$props3 = this.props,
167
- type = _this$props3.type,
168
- size = _this$props3.size,
169
- htmlSize = _this$props3.htmlSize,
170
- display = _this$props3.display,
171
- textAlign = _this$props3.textAlign,
172
- placeholder = _this$props3.placeholder,
173
- value = _this$props3.value,
174
- defaultValue = _this$props3.defaultValue,
175
- isRequired = _this$props3.isRequired,
176
- rest = _objectWithoutProperties(_this$props3, _excluded);
156
+ const _this$props = this.props,
157
+ type = _this$props.type,
158
+ size = _this$props.size,
159
+ htmlSize = _this$props.htmlSize,
160
+ display = _this$props.display,
161
+ textAlign = _this$props.textAlign,
162
+ placeholder = _this$props.placeholder,
163
+ value = _this$props.value,
164
+ defaultValue = _this$props.defaultValue,
165
+ isRequired = _this$props.isRequired,
166
+ rest = _objectWithoutProperties(_this$props, _excluded);
177
167
 
178
168
  const props = passthroughProps(rest);
179
169
  const interaction = this.interaction;
@@ -188,7 +178,7 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
188
178
  }
189
179
 
190
180
  return jsx("input", Object.assign({}, props, {
191
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textInput,
181
+ css: this.props.styles?.textInput,
192
182
  defaultValue: defaultValue,
193
183
  value: value,
194
184
  placeholder: placeholder,
@@ -208,15 +198,15 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
208
198
  }
209
199
 
210
200
  render() {
211
- const _this$props4 = this.props,
212
- width = _this$props4.width,
213
- display = _this$props4.display,
214
- renderLabel = _this$props4.renderLabel,
215
- renderBeforeInput = _this$props4.renderBeforeInput,
216
- renderAfterInput = _this$props4.renderAfterInput,
217
- messages = _this$props4.messages,
218
- inputContainerRef = _this$props4.inputContainerRef,
219
- styles = _this$props4.styles;
201
+ const _this$props2 = this.props,
202
+ width = _this$props2.width,
203
+ display = _this$props2.display,
204
+ renderLabel = _this$props2.renderLabel,
205
+ renderBeforeInput = _this$props2.renderBeforeInput,
206
+ renderAfterInput = _this$props2.renderAfterInput,
207
+ messages = _this$props2.messages,
208
+ inputContainerRef = _this$props2.inputContainerRef,
209
+ styles = _this$props2.styles;
220
210
  const hasBeforeElement = renderBeforeInput && callRenderProp(renderBeforeInput);
221
211
  const hasAfterElement = renderAfterInput && callRenderProp(renderAfterInput);
222
212
  const renderBeforeOrAfter = hasBeforeElement || hasAfterElement;
@@ -231,19 +221,19 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
231
221
  layout: this.props.layout,
232
222
  elementRef: this.handleRef
233
223
  }, jsx("span", {
234
- css: styles === null || styles === void 0 ? void 0 : styles.facade
224
+ css: styles?.facade
235
225
  }, renderBeforeOrAfter ? jsx("div", null, jsx("span", {
236
- css: styles === null || styles === void 0 ? void 0 : styles.layout
226
+ css: styles?.layout
237
227
  }, hasBeforeElement && jsx("span", {
238
- css: styles === null || styles === void 0 ? void 0 : styles.beforeElement
228
+ css: styles?.beforeElement
239
229
  }, callRenderProp(renderBeforeInput)), jsx("span", {
240
- css: styles === null || styles === void 0 ? void 0 : styles.innerWrapper
230
+ css: styles?.innerWrapper
241
231
  }, jsx("span", {
242
- css: styles === null || styles === void 0 ? void 0 : styles.inputLayout
232
+ css: styles?.inputLayout
243
233
  }, jsx("span", {
244
- css: styles === null || styles === void 0 ? void 0 : styles.innerWrapper
234
+ css: styles?.innerWrapper
245
235
  }, this.renderInput()), hasAfterElement && jsx("span", {
246
- css: styles === null || styles === void 0 ? void 0 : styles.afterElement
236
+ css: styles?.afterElement
247
237
  }, callRenderProp(renderAfterInput)))))) :
248
238
  /* If no prepended or appended content, don't render Flex layout */
249
239
  this.renderInput()));
package/es/TextInput/theme.js CHANGED
@@ -41,27 +41,27 @@ const generateComponentTheme = theme => {
41
41
  }
42
42
  };
43
43
  const componentVariables = {
44
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
45
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
46
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
47
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
48
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
49
- borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
50
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
51
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
52
- padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
53
- focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
54
- focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
55
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
56
- errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
57
- errorOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
58
- placeholderColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
59
- smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
60
- smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
61
- mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
62
- mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
63
- largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
64
- largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
44
+ fontFamily: typography?.fontFamily,
45
+ fontWeight: typography?.fontWeightNormal,
46
+ borderWidth: borders?.widthSmall,
47
+ borderStyle: borders?.style,
48
+ borderColor: colors?.borderMedium,
49
+ borderRadius: borders?.radiusMedium,
50
+ color: colors?.textDarkest,
51
+ background: colors?.backgroundLightest,
52
+ padding: spacing?.small,
53
+ focusOutlineWidth: borders?.widthMedium,
54
+ focusOutlineStyle: borders?.style,
55
+ focusOutlineColor: colors?.borderBrand,
56
+ errorBorderColor: colors?.borderDanger,
57
+ errorOutlineColor: colors?.borderDanger,
58
+ placeholderColor: colors?.textDark,
59
+ smallFontSize: typography?.fontSizeSmall,
60
+ smallHeight: forms?.inputHeightSmall,
61
+ mediumFontSize: typography?.fontSizeMedium,
62
+ mediumHeight: forms?.inputHeightMedium,
63
+ largeFontSize: typography?.fontSizeLarge,
64
+ largeHeight: forms?.inputHeightLarge
65
65
  };
66
66
  return { ...componentVariables,
67
67
  ...themeSpecificStyle[themeName]
package/lib/TextInput/index.js CHANGED
@@ -114,21 +114,15 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
114
114
  }
115
115
 
116
116
  componentDidMount() {
117
- var _this$props$makeStyle, _this$props;
118
-
119
- (_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props, this.makeStyleProps());
117
+ this.props.makeStyles?.(this.makeStyleProps());
120
118
  }
121
119
 
122
120
  componentDidUpdate() {
123
- var _this$props$makeStyle2, _this$props2;
124
-
125
- (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
121
+ this.props.makeStyles?.(this.makeStyleProps());
126
122
  }
127
123
 
128
124
  focus() {
129
- var _this$_input;
130
-
131
- (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : _this$_input.focus();
125
+ this._input?.focus();
132
126
  }
133
127
 
134
128
  get interaction() {
@@ -152,9 +146,7 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
152
146
  }
153
147
 
154
148
  get value() {
155
- var _this$_input2;
156
-
157
- return (_this$_input2 = this._input) === null || _this$_input2 === void 0 ? void 0 : _this$_input2.value;
149
+ return this._input?.value;
158
150
  }
159
151
 
160
152
  get id() {
@@ -162,19 +154,17 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
162
154
  }
163
155
 
164
156
  renderInput() {
165
- var _this$props$styles;
166
-
167
- const _this$props3 = this.props,
168
- type = _this$props3.type,
169
- size = _this$props3.size,
170
- htmlSize = _this$props3.htmlSize,
171
- display = _this$props3.display,
172
- textAlign = _this$props3.textAlign,
173
- placeholder = _this$props3.placeholder,
174
- value = _this$props3.value,
175
- defaultValue = _this$props3.defaultValue,
176
- isRequired = _this$props3.isRequired,
177
- rest = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
157
+ const _this$props = this.props,
158
+ type = _this$props.type,
159
+ size = _this$props.size,
160
+ htmlSize = _this$props.htmlSize,
161
+ display = _this$props.display,
162
+ textAlign = _this$props.textAlign,
163
+ placeholder = _this$props.placeholder,
164
+ value = _this$props.value,
165
+ defaultValue = _this$props.defaultValue,
166
+ isRequired = _this$props.isRequired,
167
+ rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
178
168
  const props = (0, _passthroughProps.passthroughProps)(rest);
179
169
  const interaction = this.interaction;
180
170
  let descriptionIds = '';
@@ -188,7 +178,7 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
188
178
  }
189
179
 
190
180
  return (0, _emotion.jsx)("input", Object.assign({}, props, {
191
- css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.textInput,
181
+ css: this.props.styles?.textInput,
192
182
  defaultValue: defaultValue,
193
183
  value: value,
194
184
  placeholder: placeholder,
@@ -208,15 +198,15 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
208
198
  }
209
199
 
210
200
  render() {
211
- const _this$props4 = this.props,
212
- width = _this$props4.width,
213
- display = _this$props4.display,
214
- renderLabel = _this$props4.renderLabel,
215
- renderBeforeInput = _this$props4.renderBeforeInput,
216
- renderAfterInput = _this$props4.renderAfterInput,
217
- messages = _this$props4.messages,
218
- inputContainerRef = _this$props4.inputContainerRef,
219
- styles = _this$props4.styles;
201
+ const _this$props2 = this.props,
202
+ width = _this$props2.width,
203
+ display = _this$props2.display,
204
+ renderLabel = _this$props2.renderLabel,
205
+ renderBeforeInput = _this$props2.renderBeforeInput,
206
+ renderAfterInput = _this$props2.renderAfterInput,
207
+ messages = _this$props2.messages,
208
+ inputContainerRef = _this$props2.inputContainerRef,
209
+ styles = _this$props2.styles;
220
210
  const hasBeforeElement = renderBeforeInput && (0, _callRenderProp.callRenderProp)(renderBeforeInput);
221
211
  const hasAfterElement = renderAfterInput && (0, _callRenderProp.callRenderProp)(renderAfterInput);
222
212
  const renderBeforeOrAfter = hasBeforeElement || hasAfterElement;
@@ -231,19 +221,19 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
231
221
  layout: this.props.layout,
232
222
  elementRef: this.handleRef
233
223
  }, (0, _emotion.jsx)("span", {
234
- css: styles === null || styles === void 0 ? void 0 : styles.facade
224
+ css: styles?.facade
235
225
  }, renderBeforeOrAfter ? (0, _emotion.jsx)("div", null, (0, _emotion.jsx)("span", {
236
- css: styles === null || styles === void 0 ? void 0 : styles.layout
226
+ css: styles?.layout
237
227
  }, hasBeforeElement && (0, _emotion.jsx)("span", {
238
- css: styles === null || styles === void 0 ? void 0 : styles.beforeElement
228
+ css: styles?.beforeElement
239
229
  }, (0, _callRenderProp.callRenderProp)(renderBeforeInput)), (0, _emotion.jsx)("span", {
240
- css: styles === null || styles === void 0 ? void 0 : styles.innerWrapper
230
+ css: styles?.innerWrapper
241
231
  }, (0, _emotion.jsx)("span", {
242
- css: styles === null || styles === void 0 ? void 0 : styles.inputLayout
232
+ css: styles?.inputLayout
243
233
  }, (0, _emotion.jsx)("span", {
244
- css: styles === null || styles === void 0 ? void 0 : styles.innerWrapper
234
+ css: styles?.innerWrapper
245
235
  }, this.renderInput()), hasAfterElement && (0, _emotion.jsx)("span", {
246
- css: styles === null || styles === void 0 ? void 0 : styles.afterElement
236
+ css: styles?.afterElement
247
237
  }, (0, _callRenderProp.callRenderProp)(renderAfterInput)))))) :
248
238
  /* If no prepended or appended content, don't render Flex layout */
249
239
  this.renderInput()));
package/lib/TextInput/theme.js CHANGED
@@ -48,27 +48,27 @@ const generateComponentTheme = theme => {
48
48
  }
49
49
  };
50
50
  const componentVariables = {
51
- fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
52
- fontWeight: typography === null || typography === void 0 ? void 0 : typography.fontWeightNormal,
53
- borderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
54
- borderStyle: borders === null || borders === void 0 ? void 0 : borders.style,
55
- borderColor: colors === null || colors === void 0 ? void 0 : colors.borderMedium,
56
- borderRadius: borders === null || borders === void 0 ? void 0 : borders.radiusMedium,
57
- color: colors === null || colors === void 0 ? void 0 : colors.textDarkest,
58
- background: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
59
- padding: spacing === null || spacing === void 0 ? void 0 : spacing.small,
60
- focusOutlineWidth: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
61
- focusOutlineStyle: borders === null || borders === void 0 ? void 0 : borders.style,
62
- focusOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderBrand,
63
- errorBorderColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
64
- errorOutlineColor: colors === null || colors === void 0 ? void 0 : colors.borderDanger,
65
- placeholderColor: colors === null || colors === void 0 ? void 0 : colors.textDark,
66
- smallFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeSmall,
67
- smallHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightSmall,
68
- mediumFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeMedium,
69
- mediumHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightMedium,
70
- largeFontSize: typography === null || typography === void 0 ? void 0 : typography.fontSizeLarge,
71
- largeHeight: forms === null || forms === void 0 ? void 0 : forms.inputHeightLarge
51
+ fontFamily: typography?.fontFamily,
52
+ fontWeight: typography?.fontWeightNormal,
53
+ borderWidth: borders?.widthSmall,
54
+ borderStyle: borders?.style,
55
+ borderColor: colors?.borderMedium,
56
+ borderRadius: borders?.radiusMedium,
57
+ color: colors?.textDarkest,
58
+ background: colors?.backgroundLightest,
59
+ padding: spacing?.small,
60
+ focusOutlineWidth: borders?.widthMedium,
61
+ focusOutlineStyle: borders?.style,
62
+ focusOutlineColor: colors?.borderBrand,
63
+ errorBorderColor: colors?.borderDanger,
64
+ errorOutlineColor: colors?.borderDanger,
65
+ placeholderColor: colors?.textDark,
66
+ smallFontSize: typography?.fontSizeSmall,
67
+ smallHeight: forms?.inputHeightSmall,
68
+ mediumFontSize: typography?.fontSizeMedium,
69
+ mediumHeight: forms?.inputHeightMedium,
70
+ largeFontSize: typography?.fontSizeLarge,
71
+ largeHeight: forms?.inputHeightLarge
72
72
  };
73
73
  return { ...componentVariables,
74
74
  ...themeSpecificStyle[themeName]
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-text-input",
3
- "version": "8.17.1-snapshot.21+79d490548",
3
+ "version": "8.17.1-snapshot.71+34dfb2442",
4
4
  "description": "A styled HTML text input component.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,23 +23,23 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "8.17.1-snapshot.21+79d490548",
27
- "@instructure/ui-badge": "8.17.1-snapshot.21+79d490548",
28
- "@instructure/ui-color-utils": "8.17.1-snapshot.21+79d490548",
29
- "@instructure/ui-test-utils": "8.17.1-snapshot.21+79d490548",
30
- "@instructure/ui-themes": "8.17.1-snapshot.21+79d490548"
26
+ "@instructure/ui-babel-preset": "8.17.1-snapshot.71+34dfb2442",
27
+ "@instructure/ui-badge": "8.17.1-snapshot.71+34dfb2442",
28
+ "@instructure/ui-color-utils": "8.17.1-snapshot.71+34dfb2442",
29
+ "@instructure/ui-test-utils": "8.17.1-snapshot.71+34dfb2442",
30
+ "@instructure/ui-themes": "8.17.1-snapshot.71+34dfb2442"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.13.10",
34
- "@instructure/emotion": "8.17.1-snapshot.21+79d490548",
35
- "@instructure/shared-types": "8.17.1-snapshot.21+79d490548",
36
- "@instructure/ui-dom-utils": "8.17.1-snapshot.21+79d490548",
37
- "@instructure/ui-form-field": "8.17.1-snapshot.21+79d490548",
38
- "@instructure/ui-icons": "8.17.1-snapshot.21+79d490548",
39
- "@instructure/ui-prop-types": "8.17.1-snapshot.21+79d490548",
40
- "@instructure/ui-react-utils": "8.17.1-snapshot.21+79d490548",
41
- "@instructure/ui-tag": "8.17.1-snapshot.21+79d490548",
42
- "@instructure/ui-testable": "8.17.1-snapshot.21+79d490548",
34
+ "@instructure/emotion": "8.17.1-snapshot.71+34dfb2442",
35
+ "@instructure/shared-types": "8.17.1-snapshot.71+34dfb2442",
36
+ "@instructure/ui-dom-utils": "8.17.1-snapshot.71+34dfb2442",
37
+ "@instructure/ui-form-field": "8.17.1-snapshot.71+34dfb2442",
38
+ "@instructure/ui-icons": "8.17.1-snapshot.71+34dfb2442",
39
+ "@instructure/ui-prop-types": "8.17.1-snapshot.71+34dfb2442",
40
+ "@instructure/ui-react-utils": "8.17.1-snapshot.71+34dfb2442",
41
+ "@instructure/ui-tag": "8.17.1-snapshot.71+34dfb2442",
42
+ "@instructure/ui-testable": "8.17.1-snapshot.71+34dfb2442",
43
43
  "prop-types": "^15"
44
44
  },
45
45
  "peerDependencies": {
@@ -49,5 +49,5 @@
49
49
  "access": "public"
50
50
  },
51
51
  "sideEffects": false,
52
- "gitHead": "79d490548a0736feb2a7232bf5918857317b178b"
52
+ "gitHead": "34dfb2442c7ddce048d78ab1ecd5f3cbb78ee8d6"
53
53
  }