@instructure/ui-number-input 11.7.8 → 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 +8 -0
- package/lib/NumberInput/v1/index.js +11 -16
- package/lib/NumberInput/v2/index.js +8 -12
- package/package.json +12 -12
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,14 @@
|
|
|
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-1](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-snapshot-1) (2026-10-06)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-number-input
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
6
14
|
## [11.7.8](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8) (2026-10-02)
|
|
7
15
|
|
|
8
16
|
**Note:** Version bump only for package @instructure/ui-number-input
|
|
@@ -8,14 +8,9 @@ exports.default = exports.NumberInput = void 0;
|
|
|
8
8
|
var _react = require("react");
|
|
9
9
|
var _keycode = _interopRequireDefault(require("keycode"));
|
|
10
10
|
var _v11_ = require("@instructure/ui-form-field/v11_6");
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
|
|
15
|
-
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
16
|
-
var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
|
|
17
|
-
var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
|
|
18
|
-
var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
|
|
11
|
+
var _uiIcons = require("@instructure/ui-icons");
|
|
12
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
13
|
+
var _uiA11yUtils = require("@instructure/ui-a11y-utils");
|
|
19
14
|
var _emotion = require("@instructure/emotion");
|
|
20
15
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
21
16
|
var _theme = _interopRequireDefault(require("./theme.js"));
|
|
@@ -51,7 +46,7 @@ category: components
|
|
|
51
46
|
id: NumberInput
|
|
52
47
|
---
|
|
53
48
|
**/
|
|
54
|
-
let NumberInput = exports.NumberInput = (_dec = (0,
|
|
49
|
+
let NumberInput = exports.NumberInput = (_dec = (0, _uiReactUtils.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = _dec2(_class = class NumberInput extends _react.Component {
|
|
55
50
|
static displayName = 'NumberInput';
|
|
56
51
|
static componentId = 'NumberInput';
|
|
57
52
|
static allowedProps = _props.allowedProps;
|
|
@@ -89,7 +84,7 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
|
|
|
89
84
|
return !!this.props.messages && this.props.messages.some(message => message.type === 'error' || message.type === 'newError');
|
|
90
85
|
}
|
|
91
86
|
get interaction() {
|
|
92
|
-
return (0,
|
|
87
|
+
return (0, _uiReactUtils.getInteraction)({
|
|
93
88
|
props: this.props
|
|
94
89
|
});
|
|
95
90
|
}
|
|
@@ -181,14 +176,14 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
|
|
|
181
176
|
onMouseDown: this.handleClickUpArrow,
|
|
182
177
|
tabIndex: -1,
|
|
183
178
|
type: "button",
|
|
184
|
-
children: customIcons?.increase ? (0,
|
|
179
|
+
children: customIcons?.increase ? (0, _uiReactUtils.callRenderProp)(customIcons.increase) : (0, _jsxRuntime.jsx)(_uiIcons.IconArrowOpenUpLine, {})
|
|
185
180
|
}), (0, _jsxRuntime.jsx)("button", {
|
|
186
181
|
"aria-hidden": true,
|
|
187
182
|
css: this.props.styles?.arrow,
|
|
188
183
|
onMouseDown: this.handleClickDownArrow,
|
|
189
184
|
tabIndex: -1,
|
|
190
185
|
type: "button",
|
|
191
|
-
children: customIcons?.decrease ? (0,
|
|
186
|
+
children: customIcons?.decrease ? (0, _uiReactUtils.callRenderProp)(customIcons.decrease) : (0, _jsxRuntime.jsx)(_uiIcons.IconArrowOpenDownLine, {})
|
|
192
187
|
})]
|
|
193
188
|
});
|
|
194
189
|
}
|
|
@@ -209,8 +204,8 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
|
|
|
209
204
|
const {
|
|
210
205
|
interaction
|
|
211
206
|
} = this;
|
|
212
|
-
const rawLabel = (0,
|
|
213
|
-
const label = (0,
|
|
207
|
+
const rawLabel = (0, _uiReactUtils.callRenderProp)(renderLabel);
|
|
208
|
+
const label = (0, _uiA11yUtils.hasVisibleChildren)(rawLabel) ? (0, _jsxRuntime.jsxs)(_react.Fragment, {
|
|
214
209
|
children: [rawLabel, isRequired && (0, _jsxRuntime.jsxs)("span", {
|
|
215
210
|
css: this.invalid ? styles?.requiredInvalid : {},
|
|
216
211
|
"aria-hidden": true,
|
|
@@ -218,7 +213,7 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
|
|
|
218
213
|
})]
|
|
219
214
|
}) : rawLabel;
|
|
220
215
|
return (0, _jsxRuntime.jsx)(_v11_.FormField, {
|
|
221
|
-
...(0,
|
|
216
|
+
...(0, _uiReactUtils.pickProps)(this.props, _v11_.FormField.allowedProps),
|
|
222
217
|
label: label,
|
|
223
218
|
inline: display === 'inline-block',
|
|
224
219
|
id: this.id,
|
|
@@ -233,7 +228,7 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
|
|
|
233
228
|
children: (0, _jsxRuntime.jsxs)("span", {
|
|
234
229
|
css: this.props.styles?.inputContainer,
|
|
235
230
|
children: [(0, _jsxRuntime.jsx)("input", {
|
|
236
|
-
...(0,
|
|
231
|
+
...(0, _uiReactUtils.omitProps)(this.props, [..._v11_.FormField.allowedProps, ...NumberInput.allowedProps]),
|
|
237
232
|
css: this.props.styles?.input,
|
|
238
233
|
"aria-invalid": this.invalid ? 'true' : undefined,
|
|
239
234
|
id: this.id,
|
|
@@ -9,11 +9,7 @@ var _react = require("react");
|
|
|
9
9
|
var _keycode = _interopRequireDefault(require("keycode"));
|
|
10
10
|
var _latest = require("@instructure/ui-form-field/latest");
|
|
11
11
|
var _uiIcons = require("@instructure/ui-icons");
|
|
12
|
-
var
|
|
13
|
-
var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
|
|
14
|
-
var _getInteraction = require("@instructure/ui-react-utils/lib/getInteraction.js");
|
|
15
|
-
var _useDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/useDeterministicId.js");
|
|
16
|
-
var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
|
|
12
|
+
var _uiReactUtils = require("@instructure/ui-react-utils");
|
|
17
13
|
var _emotion = require("@instructure/emotion");
|
|
18
14
|
var _styles = _interopRequireDefault(require("./styles.js"));
|
|
19
15
|
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
@@ -83,7 +79,7 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
|
|
|
83
79
|
const inputRef = (0, _react.useRef)(null);
|
|
84
80
|
|
|
85
81
|
// SSR-safe deterministic ID generation (stable across server/client render)
|
|
86
|
-
const deterministicId = (0,
|
|
82
|
+
const deterministicId = (0, _uiReactUtils.useDeterministicId)('NumberInput')();
|
|
87
83
|
const id = idProp || deterministicId;
|
|
88
84
|
|
|
89
85
|
// Computed values
|
|
@@ -92,7 +88,7 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
|
|
|
92
88
|
const hasMessages = !!messages?.some(m => !!m.text);
|
|
93
89
|
const messagesId = id ? `${id}-messages` : undefined;
|
|
94
90
|
const labelId = id ? `${id}-label` : undefined;
|
|
95
|
-
const interaction = (0,
|
|
91
|
+
const interaction = (0, _uiReactUtils.getInteraction)({
|
|
96
92
|
props
|
|
97
93
|
});
|
|
98
94
|
if (interaction === 'disabled' && upButtonState !== 'actionSecondaryDisabledColor') {
|
|
@@ -210,7 +206,7 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
|
|
|
210
206
|
onMouseOut: () => setUpButtonState('actionSecondaryBaseColor'),
|
|
211
207
|
tabIndex: -1,
|
|
212
208
|
type: "button",
|
|
213
|
-
children: customIcons?.increase ? (0,
|
|
209
|
+
children: customIcons?.increase ? (0, _uiReactUtils.callRenderProp)(customIcons.increase) : (0, _jsxRuntime.jsx)(_uiIcons.ChevronUpInstUIIcon, {
|
|
214
210
|
size: "sm",
|
|
215
211
|
color: upButtonState
|
|
216
212
|
})
|
|
@@ -222,22 +218,22 @@ const NumberInput = exports.NumberInput = /*#__PURE__*/(0, _react.forwardRef)((p
|
|
|
222
218
|
onMouseOut: () => setDownButtonState('actionSecondaryBaseColor'),
|
|
223
219
|
tabIndex: -1,
|
|
224
220
|
type: "button",
|
|
225
|
-
children: customIcons?.decrease ? (0,
|
|
221
|
+
children: customIcons?.decrease ? (0, _uiReactUtils.callRenderProp)(customIcons.decrease) : (0, _jsxRuntime.jsx)(_uiIcons.ChevronDownInstUIIcon, {
|
|
226
222
|
size: "sm",
|
|
227
223
|
color: downButtonState
|
|
228
224
|
})
|
|
229
225
|
})]
|
|
230
226
|
});
|
|
231
227
|
};
|
|
232
|
-
const label = (0,
|
|
233
|
-
const passedProps = (0,
|
|
228
|
+
const label = (0, _uiReactUtils.callRenderProp)(renderLabel);
|
|
229
|
+
const passedProps = (0, _uiReactUtils.passthroughProps)(rest);
|
|
234
230
|
|
|
235
231
|
// Don't render until we have an ID
|
|
236
232
|
if (!id) {
|
|
237
233
|
return null;
|
|
238
234
|
}
|
|
239
235
|
return (0, _jsxRuntime.jsx)(_latest.FormField, {
|
|
240
|
-
...(0,
|
|
236
|
+
...(0, _uiReactUtils.pickProps)(props, _latest.FormField.allowedProps),
|
|
241
237
|
label: label,
|
|
242
238
|
messagesId: messagesId,
|
|
243
239
|
labelId: labelId,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-number-input",
|
|
3
|
-
"version": "11.7.
|
|
3
|
+
"version": "11.7.9-snapshot-1",
|
|
4
4
|
"description": "A UI component library made by Instructure Inc.",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"module": "./es/index.js",
|
|
@@ -16,20 +16,20 @@
|
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@babel/runtime": "^7.29.7",
|
|
18
18
|
"keycode": "^2",
|
|
19
|
-
"@instructure/
|
|
20
|
-
"@instructure/shared-types": "11.7.
|
|
21
|
-
"@instructure/ui-a11y-utils": "11.7.
|
|
22
|
-
"@instructure/ui-
|
|
23
|
-
"@instructure/
|
|
24
|
-
"@instructure/ui-react-utils": "11.7.
|
|
25
|
-
"@instructure/ui-themes": "11.7.
|
|
26
|
-
"@instructure/ui-utils": "11.7.
|
|
27
|
-
"@instructure/uid": "11.7.
|
|
19
|
+
"@instructure/emotion": "11.7.9-snapshot-1",
|
|
20
|
+
"@instructure/shared-types": "11.7.9-snapshot-1",
|
|
21
|
+
"@instructure/ui-a11y-utils": "11.7.9-snapshot-1",
|
|
22
|
+
"@instructure/ui-form-field": "11.7.9-snapshot-1",
|
|
23
|
+
"@instructure/ui-icons": "11.7.9-snapshot-1",
|
|
24
|
+
"@instructure/ui-react-utils": "11.7.9-snapshot-1",
|
|
25
|
+
"@instructure/ui-themes": "11.7.9-snapshot-1",
|
|
26
|
+
"@instructure/ui-utils": "11.7.9-snapshot-1",
|
|
27
|
+
"@instructure/uid": "11.7.9-snapshot-1"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
30
|
"vitest": "^5.0.0",
|
|
31
|
-
"@instructure/ui-
|
|
32
|
-
"@instructure/ui-
|
|
31
|
+
"@instructure/ui-scripts": "11.7.9-snapshot-1",
|
|
32
|
+
"@instructure/ui-babel-preset": "11.7.9-snapshot-1"
|
|
33
33
|
},
|
|
34
34
|
"peerDependencies": {
|
|
35
35
|
"react": ">=18 <=19"
|