@instructure/ui-text-input 8.25.1-snapshot-10 → 8.25.1-snapshot-15

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 (5) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/es/TextInput/index.js +79 -81
  3. package/lib/TextInput/index.js +79 -81
  4. package/package.json +15 -15
  5. package/tsconfig.build.tsbuildinfo +1 -1
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
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.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
6
+ ## [8.25.1-snapshot-15](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-15) (2022-06-23)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-text-input
9
9
 
package/es/TextInput/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
2
2
  const _excluded = ["type", "size", "htmlSize", "display", "textAlign", "placeholder", "value", "defaultValue", "isRequired"];
3
3
 
4
- var _dec, _dec2, _dec3, _class;
4
+ var _dec, _dec2, _dec3, _class, _class2;
5
5
 
6
6
  /*
7
7
  * The MIT License (MIT)
@@ -45,25 +45,75 @@ tags: form, field
45
45
  @tsProps
46
46
  **/
47
47
 
48
- let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = class TextInput extends Component {
49
- static displayName = "TextInput";
50
- static componentId = 'TextInput';
51
- static allowedProps = allowedProps;
52
- static propTypes = propTypes;
53
- static defaultProps = {
54
- type: 'text',
55
- // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
56
- interaction: void 0,
57
- isRequired: false,
58
- display: 'block',
59
- shouldNotWrap: false,
60
- size: 'medium',
61
- textAlign: 'start',
62
- messages: []
63
- };
64
-
48
+ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TextInput extends Component {
65
49
  constructor(props) {
66
50
  super(props);
51
+ this.ref = null;
52
+ this._input = null;
53
+ this._beforeElement = null;
54
+ this._afterElement = null;
55
+ this._defaultId = void 0;
56
+ this._messagesId = void 0;
57
+ this._focusListener = null;
58
+
59
+ this.handleRef = el => {
60
+ const elementRef = this.props.elementRef;
61
+ this.ref = el;
62
+
63
+ if (typeof elementRef === 'function') {
64
+ elementRef(el);
65
+ }
66
+ };
67
+
68
+ this.makeStyleProps = () => {
69
+ const interaction = this.interaction;
70
+ const _this$state = this.state,
71
+ hasFocus = _this$state.hasFocus,
72
+ beforeElementHasWidth = _this$state.beforeElementHasWidth,
73
+ afterElementHasWidth = _this$state.afterElementHasWidth;
74
+ return {
75
+ disabled: interaction === 'disabled',
76
+ invalid: this.invalid,
77
+ focused: hasFocus,
78
+ beforeElementHasWidth,
79
+ afterElementHasWidth
80
+ };
81
+ };
82
+
83
+ this.handleInputRef = node => {
84
+ this._input = node;
85
+
86
+ if (typeof this.props.inputRef === 'function') {
87
+ this.props.inputRef(node);
88
+ }
89
+ };
90
+
91
+ this.handleChange = event => {
92
+ if (typeof this.props.onChange === 'function') {
93
+ this.props.onChange(event, event.target.value);
94
+ }
95
+ };
96
+
97
+ this.handleBlur = event => {
98
+ if (typeof this.props.onBlur === 'function') {
99
+ this.props.onBlur(event);
100
+ }
101
+
102
+ this.setState({
103
+ hasFocus: false
104
+ });
105
+ };
106
+
107
+ this.handleFocus = event => {
108
+ if (typeof this.props.onFocus === 'function') {
109
+ this.props.onFocus(event);
110
+ }
111
+
112
+ this.setState({
113
+ hasFocus: true
114
+ });
115
+ };
116
+
67
117
  this.state = {
68
118
  hasFocus: false,
69
119
  beforeElementHasWidth: void 0,
@@ -73,22 +123,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
73
123
  this._messagesId = props.deterministicId('TextInput-messages');
74
124
  }
75
125
 
76
- ref = null;
77
- _input = null;
78
- _beforeElement = null;
79
- _afterElement = null;
80
- _defaultId;
81
- _messagesId;
82
- _focusListener = null;
83
- handleRef = el => {
84
- const elementRef = this.props.elementRef;
85
- this.ref = el;
86
-
87
- if (typeof elementRef === 'function') {
88
- elementRef(el);
89
- }
90
- };
91
-
92
126
  componentDidMount() {
93
127
  var _this$props$makeStyle, _this$props;
94
128
 
@@ -127,21 +161,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
127
161
  (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
128
162
  }
129
163
 
130
- makeStyleProps = () => {
131
- const interaction = this.interaction;
132
- const _this$state = this.state,
133
- hasFocus = _this$state.hasFocus,
134
- beforeElementHasWidth = _this$state.beforeElementHasWidth,
135
- afterElementHasWidth = _this$state.afterElementHasWidth;
136
- return {
137
- disabled: interaction === 'disabled',
138
- invalid: this.invalid,
139
- focused: hasFocus,
140
- beforeElementHasWidth,
141
- afterElementHasWidth
142
- };
143
- };
144
-
145
164
  focus() {
146
165
  var _this$_input;
147
166
 
@@ -178,37 +197,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
178
197
  return this.props.id || this._defaultId;
179
198
  }
180
199
 
181
- handleInputRef = node => {
182
- this._input = node;
183
-
184
- if (typeof this.props.inputRef === 'function') {
185
- this.props.inputRef(node);
186
- }
187
- };
188
- handleChange = event => {
189
- if (typeof this.props.onChange === 'function') {
190
- this.props.onChange(event, event.target.value);
191
- }
192
- };
193
- handleBlur = event => {
194
- if (typeof this.props.onBlur === 'function') {
195
- this.props.onBlur(event);
196
- }
197
-
198
- this.setState({
199
- hasFocus: false
200
- });
201
- };
202
- handleFocus = event => {
203
- if (typeof this.props.onFocus === 'function') {
204
- this.props.onFocus(event);
205
- }
206
-
207
- this.setState({
208
- hasFocus: true
209
- });
210
- };
211
-
212
200
  renderInput() {
213
201
  var _this$props$styles;
214
202
 
@@ -316,6 +304,16 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
316
304
  this.renderInput()));
317
305
  }
318
306
 
319
- }) || _class) || _class) || _class);
307
+ }, _class2.displayName = "TextInput", _class2.componentId = 'TextInput', _class2.allowedProps = allowedProps, _class2.propTypes = propTypes, _class2.defaultProps = {
308
+ type: 'text',
309
+ // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
310
+ interaction: void 0,
311
+ isRequired: false,
312
+ display: 'block',
313
+ shouldNotWrap: false,
314
+ size: 'medium',
315
+ textAlign: 'start',
316
+ messages: []
317
+ }, _class2)) || _class) || _class) || _class);
320
318
  export default TextInput;
321
319
  export { TextInput };
package/lib/TextInput/index.js CHANGED
@@ -39,7 +39,7 @@ var _props = require("./props");
39
39
 
40
40
  const _excluded = ["type", "size", "htmlSize", "display", "textAlign", "placeholder", "value", "defaultValue", "isRequired"];
41
41
 
42
- var _dec, _dec2, _dec3, _class;
42
+ var _dec, _dec2, _dec3, _class, _class2;
43
43
 
44
44
  /**
45
45
  ---
@@ -48,25 +48,75 @@ tags: form, field
48
48
  ---
49
49
  @tsProps
50
50
  **/
51
- let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = class TextInput extends _react.Component {
52
- static displayName = "TextInput";
53
- static componentId = 'TextInput';
54
- static allowedProps = _props.allowedProps;
55
- static propTypes = _props.propTypes;
56
- static defaultProps = {
57
- type: 'text',
58
- // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
59
- interaction: void 0,
60
- isRequired: false,
61
- display: 'block',
62
- shouldNotWrap: false,
63
- size: 'medium',
64
- textAlign: 'start',
65
- messages: []
66
- };
67
-
51
+ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_class2 = class TextInput extends _react.Component {
68
52
  constructor(props) {
69
53
  super(props);
54
+ this.ref = null;
55
+ this._input = null;
56
+ this._beforeElement = null;
57
+ this._afterElement = null;
58
+ this._defaultId = void 0;
59
+ this._messagesId = void 0;
60
+ this._focusListener = null;
61
+
62
+ this.handleRef = el => {
63
+ const elementRef = this.props.elementRef;
64
+ this.ref = el;
65
+
66
+ if (typeof elementRef === 'function') {
67
+ elementRef(el);
68
+ }
69
+ };
70
+
71
+ this.makeStyleProps = () => {
72
+ const interaction = this.interaction;
73
+ const _this$state = this.state,
74
+ hasFocus = _this$state.hasFocus,
75
+ beforeElementHasWidth = _this$state.beforeElementHasWidth,
76
+ afterElementHasWidth = _this$state.afterElementHasWidth;
77
+ return {
78
+ disabled: interaction === 'disabled',
79
+ invalid: this.invalid,
80
+ focused: hasFocus,
81
+ beforeElementHasWidth,
82
+ afterElementHasWidth
83
+ };
84
+ };
85
+
86
+ this.handleInputRef = node => {
87
+ this._input = node;
88
+
89
+ if (typeof this.props.inputRef === 'function') {
90
+ this.props.inputRef(node);
91
+ }
92
+ };
93
+
94
+ this.handleChange = event => {
95
+ if (typeof this.props.onChange === 'function') {
96
+ this.props.onChange(event, event.target.value);
97
+ }
98
+ };
99
+
100
+ this.handleBlur = event => {
101
+ if (typeof this.props.onBlur === 'function') {
102
+ this.props.onBlur(event);
103
+ }
104
+
105
+ this.setState({
106
+ hasFocus: false
107
+ });
108
+ };
109
+
110
+ this.handleFocus = event => {
111
+ if (typeof this.props.onFocus === 'function') {
112
+ this.props.onFocus(event);
113
+ }
114
+
115
+ this.setState({
116
+ hasFocus: true
117
+ });
118
+ };
119
+
70
120
  this.state = {
71
121
  hasFocus: false,
72
122
  beforeElementHasWidth: void 0,
@@ -76,22 +126,6 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
76
126
  this._messagesId = props.deterministicId('TextInput-messages');
77
127
  }
78
128
 
79
- ref = null;
80
- _input = null;
81
- _beforeElement = null;
82
- _afterElement = null;
83
- _defaultId;
84
- _messagesId;
85
- _focusListener = null;
86
- handleRef = el => {
87
- const elementRef = this.props.elementRef;
88
- this.ref = el;
89
-
90
- if (typeof elementRef === 'function') {
91
- elementRef(el);
92
- }
93
- };
94
-
95
129
  componentDidMount() {
96
130
  var _this$props$makeStyle, _this$props;
97
131
 
@@ -130,21 +164,6 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
130
164
  (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
131
165
  }
132
166
 
133
- makeStyleProps = () => {
134
- const interaction = this.interaction;
135
- const _this$state = this.state,
136
- hasFocus = _this$state.hasFocus,
137
- beforeElementHasWidth = _this$state.beforeElementHasWidth,
138
- afterElementHasWidth = _this$state.afterElementHasWidth;
139
- return {
140
- disabled: interaction === 'disabled',
141
- invalid: this.invalid,
142
- focused: hasFocus,
143
- beforeElementHasWidth,
144
- afterElementHasWidth
145
- };
146
- };
147
-
148
167
  focus() {
149
168
  var _this$_input;
150
169
 
@@ -181,37 +200,6 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
181
200
  return this.props.id || this._defaultId;
182
201
  }
183
202
 
184
- handleInputRef = node => {
185
- this._input = node;
186
-
187
- if (typeof this.props.inputRef === 'function') {
188
- this.props.inputRef(node);
189
- }
190
- };
191
- handleChange = event => {
192
- if (typeof this.props.onChange === 'function') {
193
- this.props.onChange(event, event.target.value);
194
- }
195
- };
196
- handleBlur = event => {
197
- if (typeof this.props.onBlur === 'function') {
198
- this.props.onBlur(event);
199
- }
200
-
201
- this.setState({
202
- hasFocus: false
203
- });
204
- };
205
- handleFocus = event => {
206
- if (typeof this.props.onFocus === 'function') {
207
- this.props.onFocus(event);
208
- }
209
-
210
- this.setState({
211
- hasFocus: true
212
- });
213
- };
214
-
215
203
  renderInput() {
216
204
  var _this$props$styles;
217
205
 
@@ -318,7 +306,17 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
318
306
  this.renderInput()));
319
307
  }
320
308
 
321
- }) || _class) || _class) || _class);
309
+ }, _class2.displayName = "TextInput", _class2.componentId = 'TextInput', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
310
+ type: 'text',
311
+ // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
312
+ interaction: void 0,
313
+ isRequired: false,
314
+ display: 'block',
315
+ shouldNotWrap: false,
316
+ size: 'medium',
317
+ textAlign: 'start',
318
+ messages: []
319
+ }, _class2)) || _class) || _class) || _class);
322
320
  exports.TextInput = TextInput;
323
321
  var _default = TextInput;
324
322
  exports.default = _default;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-text-input",
3
- "version": "8.25.1-snapshot-10",
3
+ "version": "8.25.1-snapshot-15",
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.25.1-snapshot-10",
27
- "@instructure/ui-badge": "8.25.1-snapshot-10",
28
- "@instructure/ui-color-utils": "8.25.1-snapshot-10",
29
- "@instructure/ui-test-utils": "8.25.1-snapshot-10",
30
- "@instructure/ui-themes": "8.25.1-snapshot-10"
26
+ "@instructure/ui-babel-preset": "8.25.1-snapshot-15",
27
+ "@instructure/ui-badge": "8.25.1-snapshot-15",
28
+ "@instructure/ui-color-utils": "8.25.1-snapshot-15",
29
+ "@instructure/ui-test-utils": "8.25.1-snapshot-15",
30
+ "@instructure/ui-themes": "8.25.1-snapshot-15"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.13.10",
34
- "@instructure/emotion": "8.25.1-snapshot-10",
35
- "@instructure/shared-types": "8.25.1-snapshot-10",
36
- "@instructure/ui-dom-utils": "8.25.1-snapshot-10",
37
- "@instructure/ui-form-field": "8.25.1-snapshot-10",
38
- "@instructure/ui-icons": "8.25.1-snapshot-10",
39
- "@instructure/ui-prop-types": "8.25.1-snapshot-10",
40
- "@instructure/ui-react-utils": "8.25.1-snapshot-10",
41
- "@instructure/ui-tag": "8.25.1-snapshot-10",
42
- "@instructure/ui-testable": "8.25.1-snapshot-10",
34
+ "@instructure/emotion": "8.25.1-snapshot-15",
35
+ "@instructure/shared-types": "8.25.1-snapshot-15",
36
+ "@instructure/ui-dom-utils": "8.25.1-snapshot-15",
37
+ "@instructure/ui-form-field": "8.25.1-snapshot-15",
38
+ "@instructure/ui-icons": "8.25.1-snapshot-15",
39
+ "@instructure/ui-prop-types": "8.25.1-snapshot-15",
40
+ "@instructure/ui-react-utils": "8.25.1-snapshot-15",
41
+ "@instructure/ui-tag": "8.25.1-snapshot-15",
42
+ "@instructure/ui-testable": "8.25.1-snapshot-15",
43
43
  "prop-types": "^15"
44
44
  },
45
45
  "peerDependencies": {