@instructure/ui-text-input 11.7.9-snapshot-0 → 11.7.9-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.
- package/CHANGELOG.md +1 -1
- package/lib/TextInput/v1/index.js +16 -21
- package/lib/TextInput/v2/index.js +11 -16
- package/package.json +13 -13
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
|
-
## [11.7.9-snapshot-
|
|
6
|
+
## [11.7.9-snapshot-1](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-snapshot-1) (2026-10-06)
|
|
7
7
|
|
|
8
8
|
**Note:** Version bump only for package @instructure/ui-text-input
|
|
9
9
|
|
|
@@ -6,16 +6,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.TextInput = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
|
12
|
-
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
|
|
13
|
-
var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
|
|
14
|
-
var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
|
|
15
|
-
var _getCSSStyleDeclaration = require("@instructure/ui-dom-utils/lib/getCSSStyleDeclaration.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
10
|
+
var _uiDomUtils = require("@instructure/ui-dom-utils");
|
|
16
11
|
var _v11_ = require("@instructure/ui-form-field/v11_6");
|
|
17
12
|
var _emotion = require("@instructure/emotion");
|
|
18
|
-
var
|
|
13
|
+
var _uiA11yUtils = require("@instructure/ui-a11y-utils");
|
|
19
14
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
20
15
|
var _theme = _interopRequireDefault(require("./theme.js"));
|
|
21
16
|
var _props = require("./props.js");
|
|
@@ -50,7 +45,7 @@ category: components
|
|
|
50
45
|
tags: form, field
|
|
51
46
|
---
|
|
52
47
|
**/
|
|
53
|
-
let TextInput = exports.TextInput = (_dec = (0,
|
|
48
|
+
let TextInput = exports.TextInput = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class TextInput extends _react.Component {
|
|
54
49
|
static displayName = 'TextInput';
|
|
55
50
|
static componentId = 'TextInput';
|
|
56
51
|
static allowedProps = _props.allowedProps;
|
|
@@ -91,7 +86,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
|
|
|
91
86
|
};
|
|
92
87
|
componentDidMount() {
|
|
93
88
|
if (this._input) {
|
|
94
|
-
this._focusListener = (0,
|
|
89
|
+
this._focusListener = (0, _uiDomUtils.addEventListener)(this._input, 'focus', this.handleFocus);
|
|
95
90
|
this.setState({
|
|
96
91
|
afterElementHasWidth: this.getElementHasWidth(this._afterElement)
|
|
97
92
|
});
|
|
@@ -110,9 +105,9 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
|
|
|
110
105
|
afterElementHasWidth: this.getElementHasWidth(this._afterElement)
|
|
111
106
|
});
|
|
112
107
|
}
|
|
113
|
-
if ((0,
|
|
108
|
+
if ((0, _uiReactUtils.getInteraction)({
|
|
114
109
|
props: prevProps
|
|
115
|
-
}) !== 'disabled' && (0,
|
|
110
|
+
}) !== 'disabled' && (0, _uiReactUtils.getInteraction)({
|
|
116
111
|
props: this.props
|
|
117
112
|
}) === 'disabled') {
|
|
118
113
|
this.setState({
|
|
@@ -146,7 +141,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
|
|
|
146
141
|
hasFocus,
|
|
147
142
|
afterElementHasWidth
|
|
148
143
|
} = this.state;
|
|
149
|
-
const beforeElement = this.props.renderBeforeInput ? (0,
|
|
144
|
+
const beforeElement = this.props.renderBeforeInput ? (0, _uiReactUtils.callRenderProp)(this.props.renderBeforeInput) : null;
|
|
150
145
|
return {
|
|
151
146
|
disabled: interaction === 'disabled',
|
|
152
147
|
invalid: this.invalid,
|
|
@@ -159,7 +154,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
|
|
|
159
154
|
this._input?.focus();
|
|
160
155
|
}
|
|
161
156
|
get interaction() {
|
|
162
|
-
return (0,
|
|
157
|
+
return (0, _uiReactUtils.getInteraction)({
|
|
163
158
|
props: this.props
|
|
164
159
|
});
|
|
165
160
|
}
|
|
@@ -172,7 +167,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
|
|
|
172
167
|
}) >= 0;
|
|
173
168
|
}
|
|
174
169
|
get focused() {
|
|
175
|
-
return (0,
|
|
170
|
+
return (0, _uiDomUtils.isActiveElement)(this._input);
|
|
176
171
|
}
|
|
177
172
|
get value() {
|
|
178
173
|
return this._input?.value;
|
|
@@ -221,7 +216,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
|
|
|
221
216
|
onFocus,
|
|
222
217
|
...rest
|
|
223
218
|
} = this.props;
|
|
224
|
-
const props = (0,
|
|
219
|
+
const props = (0, _uiReactUtils.passthroughProps)(rest);
|
|
225
220
|
const {
|
|
226
221
|
interaction
|
|
227
222
|
} = this;
|
|
@@ -252,7 +247,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
|
|
|
252
247
|
if (!element) {
|
|
253
248
|
return undefined;
|
|
254
249
|
}
|
|
255
|
-
const computedStyle = (0,
|
|
250
|
+
const computedStyle = (0, _uiDomUtils.getCSSStyleDeclaration)(element);
|
|
256
251
|
if (!computedStyle) {
|
|
257
252
|
return undefined;
|
|
258
253
|
}
|
|
@@ -283,11 +278,11 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
|
|
|
283
278
|
isRequired,
|
|
284
279
|
styles
|
|
285
280
|
} = this.props;
|
|
286
|
-
const beforeElement = renderBeforeInput ? (0,
|
|
287
|
-
const afterElement = renderAfterInput ? (0,
|
|
281
|
+
const beforeElement = renderBeforeInput ? (0, _uiReactUtils.callRenderProp)(renderBeforeInput) : null;
|
|
282
|
+
const afterElement = renderAfterInput ? (0, _uiReactUtils.callRenderProp)(renderAfterInput) : null;
|
|
288
283
|
const renderBeforeOrAfter = !!beforeElement || !!afterElement || renderBeforeInput !== undefined || renderAfterInput !== undefined;
|
|
289
|
-
const rawLabel = (0,
|
|
290
|
-
const label = (0,
|
|
284
|
+
const rawLabel = (0, _uiReactUtils.callRenderProp)(renderLabel);
|
|
285
|
+
const label = (0, _uiA11yUtils.hasVisibleChildren)(rawLabel) ? (0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
291
286
|
children: [rawLabel, isRequired && (0, _jsxRuntime.jsxs)("span", {
|
|
292
287
|
css: this.invalid ? styles?.requiredInvalid : {},
|
|
293
288
|
"aria-hidden": true,
|
|
@@ -6,13 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.TextInput = void 0;
|
|
8
8
|
var _react = require("react");
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
|
12
|
-
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
|
|
13
|
-
var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
|
|
14
|
-
var _isActiveElement = require("@instructure/ui-dom-utils/lib/isActiveElement.js");
|
|
15
|
-
var _addEventListener = require("@instructure/ui-dom-utils/lib/addEventListener.js");
|
|
9
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
10
|
+
var _uiDomUtils = require("@instructure/ui-dom-utils");
|
|
16
11
|
var _latest = require("@instructure/ui-form-field/latest");
|
|
17
12
|
var _emotion = require("@instructure/emotion");
|
|
18
13
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
@@ -48,7 +43,7 @@ category: components
|
|
|
48
43
|
tags: form, field, input
|
|
49
44
|
---
|
|
50
45
|
**/
|
|
51
|
-
let TextInput = exports.TextInput = (_dec = (0,
|
|
46
|
+
let TextInput = exports.TextInput = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyleNew)(_styles.default), _dec(_class = _dec2(_class = class TextInput extends _react.Component {
|
|
52
47
|
static displayName = 'TextInput';
|
|
53
48
|
static componentId = 'TextInput';
|
|
54
49
|
static allowedProps = _props.allowedProps;
|
|
@@ -88,7 +83,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
|
|
|
88
83
|
};
|
|
89
84
|
componentDidMount() {
|
|
90
85
|
if (this._input) {
|
|
91
|
-
this._focusListener = (0,
|
|
86
|
+
this._focusListener = (0, _uiDomUtils.addEventListener)(this._input, 'focus', this.handleFocus);
|
|
92
87
|
}
|
|
93
88
|
this.props.makeStyles?.(this.makeStyleProps());
|
|
94
89
|
}
|
|
@@ -104,7 +99,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
|
|
|
104
99
|
if (!elementToRender) {
|
|
105
100
|
return null;
|
|
106
101
|
}
|
|
107
|
-
const rendered = (0,
|
|
102
|
+
const rendered = (0, _uiReactUtils.callRenderProp)(elementToRender);
|
|
108
103
|
// Map sizes to Lucide icon semantic size tokens
|
|
109
104
|
const linkSizeToIconSize = {
|
|
110
105
|
small: 'sm',
|
|
@@ -113,14 +108,14 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
|
|
|
113
108
|
};
|
|
114
109
|
const iconSize = linkSizeToIconSize[this.props.size || 'medium'];
|
|
115
110
|
if (/*#__PURE__*/(0, _react.isValidElement)(elementToRender) && elementToRender.type?.name === 'WrappedIcon') {
|
|
116
|
-
return (0,
|
|
111
|
+
return (0, _uiReactUtils.safeCloneElement)(rendered, {
|
|
117
112
|
size: iconSize
|
|
118
113
|
});
|
|
119
114
|
}
|
|
120
115
|
return rendered;
|
|
121
116
|
}
|
|
122
117
|
makeStyleProps = () => {
|
|
123
|
-
const beforeElement = this.props.renderBeforeInput ? (0,
|
|
118
|
+
const beforeElement = this.props.renderBeforeInput ? (0, _uiReactUtils.callRenderProp)(this.props.renderBeforeInput) : null;
|
|
124
119
|
const success = !!this.props.messages && this.props.messages.some(message => message.type === 'success');
|
|
125
120
|
return {
|
|
126
121
|
interaction: this.interaction,
|
|
@@ -133,7 +128,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
|
|
|
133
128
|
this._input?.focus();
|
|
134
129
|
}
|
|
135
130
|
get interaction() {
|
|
136
|
-
return (0,
|
|
131
|
+
return (0, _uiReactUtils.getInteraction)({
|
|
137
132
|
props: this.props
|
|
138
133
|
});
|
|
139
134
|
}
|
|
@@ -146,7 +141,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
|
|
|
146
141
|
}) >= 0;
|
|
147
142
|
}
|
|
148
143
|
get focused() {
|
|
149
|
-
return (0,
|
|
144
|
+
return (0, _uiDomUtils.isActiveElement)(this._input);
|
|
150
145
|
}
|
|
151
146
|
get value() {
|
|
152
147
|
return this._input?.value;
|
|
@@ -190,7 +185,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
|
|
|
190
185
|
onFocus,
|
|
191
186
|
...rest
|
|
192
187
|
} = this.props;
|
|
193
|
-
const props = (0,
|
|
188
|
+
const props = (0, _uiReactUtils.passthroughProps)(rest);
|
|
194
189
|
const {
|
|
195
190
|
interaction
|
|
196
191
|
} = this;
|
|
@@ -241,7 +236,7 @@ let TextInput = exports.TextInput = (_dec = (0, _withDeterministicId.withDetermi
|
|
|
241
236
|
const beforeElement = this.renderInstUIIcon(renderBeforeInput);
|
|
242
237
|
const afterElement = this.renderInstUIIcon(renderAfterInput);
|
|
243
238
|
const renderBeforeOrAfter = !!beforeElement || !!afterElement || renderBeforeInput !== undefined || renderAfterInput !== undefined;
|
|
244
|
-
const label = (0,
|
|
239
|
+
const label = (0, _uiReactUtils.callRenderProp)(renderLabel);
|
|
245
240
|
return (0, _jsxRuntime.jsx)(_latest.FormField, {
|
|
246
241
|
id: this.id,
|
|
247
242
|
label: label,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-text-input",
|
|
3
|
-
"version": "11.7.9-snapshot-
|
|
3
|
+
"version": "11.7.9-snapshot-1",
|
|
4
4
|
"description": "A styled HTML text input component.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -15,21 +15,21 @@
|
|
|
15
15
|
"license": "MIT",
|
|
16
16
|
"devDependencies": {
|
|
17
17
|
"vitest": "^5.0.0",
|
|
18
|
-
"@instructure/ui-axe-check": "11.7.9-snapshot-
|
|
19
|
-
"@instructure/ui-badge": "11.7.9-snapshot-
|
|
20
|
-
"@instructure/ui-babel-preset": "11.7.9-snapshot-
|
|
21
|
-
"@instructure/ui-color-utils": "11.7.9-snapshot-
|
|
18
|
+
"@instructure/ui-axe-check": "11.7.9-snapshot-1",
|
|
19
|
+
"@instructure/ui-badge": "11.7.9-snapshot-1",
|
|
20
|
+
"@instructure/ui-babel-preset": "11.7.9-snapshot-1",
|
|
21
|
+
"@instructure/ui-color-utils": "11.7.9-snapshot-1"
|
|
22
22
|
},
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@babel/runtime": "^7.29.7",
|
|
25
|
-
"@instructure/emotion": "11.7.9-snapshot-
|
|
26
|
-
"@instructure/shared-types": "11.7.9-snapshot-
|
|
27
|
-
"@instructure/ui-
|
|
28
|
-
"@instructure/ui-
|
|
29
|
-
"@instructure/ui-form-field": "11.7.9-snapshot-
|
|
30
|
-
"@instructure/ui-react-utils": "11.7.9-snapshot-
|
|
31
|
-
"@instructure/ui-tag": "11.7.9-snapshot-
|
|
32
|
-
"@instructure/ui-themes": "11.7.9-snapshot-
|
|
25
|
+
"@instructure/emotion": "11.7.9-snapshot-1",
|
|
26
|
+
"@instructure/shared-types": "11.7.9-snapshot-1",
|
|
27
|
+
"@instructure/ui-a11y-utils": "11.7.9-snapshot-1",
|
|
28
|
+
"@instructure/ui-dom-utils": "11.7.9-snapshot-1",
|
|
29
|
+
"@instructure/ui-form-field": "11.7.9-snapshot-1",
|
|
30
|
+
"@instructure/ui-react-utils": "11.7.9-snapshot-1",
|
|
31
|
+
"@instructure/ui-tag": "11.7.9-snapshot-1",
|
|
32
|
+
"@instructure/ui-themes": "11.7.9-snapshot-1"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": ">=18 <=19"
|