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

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.
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-7](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-7) (2022-06-13)
6
+ ## [8.25.1-snapshot-10](https://github.com/instructure/instructure-ui/compare/v8.25.0...v8.25.1-snapshot-10) (2022-06-20)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-text-input
9
9
 
@@ -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, _class2;
4
+ var _dec, _dec2, _dec3, _class;
5
5
 
6
6
  /*
7
7
  * The MIT License (MIT)
@@ -45,75 +45,25 @@ 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 = (_class2 = class TextInput extends Component {
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
+
49
65
  constructor(props) {
50
66
  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
-
117
67
  this.state = {
118
68
  hasFocus: false,
119
69
  beforeElementHasWidth: void 0,
@@ -123,6 +73,22 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
123
73
  this._messagesId = props.deterministicId('TextInput-messages');
124
74
  }
125
75
 
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
+
126
92
  componentDidMount() {
127
93
  var _this$props$makeStyle, _this$props;
128
94
 
@@ -161,6 +127,21 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
161
127
  (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
162
128
  }
163
129
 
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
+
164
145
  focus() {
165
146
  var _this$_input;
166
147
 
@@ -197,6 +178,37 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
197
178
  return this.props.id || this._defaultId;
198
179
  }
199
180
 
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
+
200
212
  renderInput() {
201
213
  var _this$props$styles;
202
214
 
@@ -304,16 +316,6 @@ let TextInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle,
304
316
  this.renderInput()));
305
317
  }
306
318
 
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);
319
+ }) || _class) || _class) || _class);
318
320
  export default TextInput;
319
321
  export { TextInput };
@@ -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, _class2;
42
+ var _dec, _dec2, _dec3, _class;
43
43
 
44
44
  /**
45
45
  ---
@@ -48,75 +48,25 @@ 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 = (_class2 = class TextInput extends _react.Component {
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
+
52
68
  constructor(props) {
53
69
  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
-
120
70
  this.state = {
121
71
  hasFocus: false,
122
72
  beforeElementHasWidth: void 0,
@@ -126,6 +76,22 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
126
76
  this._messagesId = props.deterministicId('TextInput-messages');
127
77
  }
128
78
 
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
+
129
95
  componentDidMount() {
130
96
  var _this$props$makeStyle, _this$props;
131
97
 
@@ -164,6 +130,21 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
164
130
  (_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2, this.makeStyleProps());
165
131
  }
166
132
 
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
+
167
148
  focus() {
168
149
  var _this$_input;
169
150
 
@@ -200,6 +181,37 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
200
181
  return this.props.id || this._defaultId;
201
182
  }
202
183
 
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
+
203
215
  renderInput() {
204
216
  var _this$props$styles;
205
217
 
@@ -306,17 +318,7 @@ let TextInput = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 =
306
318
  this.renderInput()));
307
319
  }
308
320
 
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);
321
+ }) || _class) || _class) || _class);
320
322
  exports.TextInput = TextInput;
321
323
  var _default = TextInput;
322
324
  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-7",
3
+ "version": "8.25.1-snapshot-10",
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-7",
27
- "@instructure/ui-badge": "8.25.1-snapshot-7",
28
- "@instructure/ui-color-utils": "8.25.1-snapshot-7",
29
- "@instructure/ui-test-utils": "8.25.1-snapshot-7",
30
- "@instructure/ui-themes": "8.25.1-snapshot-7"
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"
31
31
  },
32
32
  "dependencies": {
33
33
  "@babel/runtime": "^7.13.10",
34
- "@instructure/emotion": "8.25.1-snapshot-7",
35
- "@instructure/shared-types": "8.25.1-snapshot-7",
36
- "@instructure/ui-dom-utils": "8.25.1-snapshot-7",
37
- "@instructure/ui-form-field": "8.25.1-snapshot-7",
38
- "@instructure/ui-icons": "8.25.1-snapshot-7",
39
- "@instructure/ui-prop-types": "8.25.1-snapshot-7",
40
- "@instructure/ui-react-utils": "8.25.1-snapshot-7",
41
- "@instructure/ui-tag": "8.25.1-snapshot-7",
42
- "@instructure/ui-testable": "8.25.1-snapshot-7",
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",
43
43
  "prop-types": "^15"
44
44
  },
45
45
  "peerDependencies": {