@instructure/ui-number-input 9.9.0 → 9.10.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.10.0](https://github.com/instructure/instructure-ui/compare/v9.9.0...v9.10.0) (2024-11-19)
+
+
+### Bug Fixes
+
+* **ui-number-input:** fix regression and allow string type for NumberInput again ([17685f8](https://github.com/instructure/instructure-ui/commit/17685f85ef022c9f29aedec844b0c43369f014d5))
+
+
+
+
+
 # [9.9.0](https://github.com/instructure/instructure-ui/compare/v9.8.1...v9.9.0) (2024-11-12)
 
 

package/es/NumberInput/index.js

@@ -178,6 +178,7 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
       showArrows = _this$props4.showArrows,
       value = _this$props4.value,
       width = _this$props4.width,
+      allowStringValue = _this$props4.allowStringValue,
       styles = _this$props4.styles;
     const interaction = this.interaction;
     const rawLabel = callRenderProp(renderLabel);
@@ -200,7 +201,7 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
       css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.input,
       "aria-invalid": this.invalid ? 'true' : void 0,
       id: this.id,
-      type: "number",
+      type: allowStringValue ? 'text' : 'number',
       inputMode: this.props.inputMode,
       placeholder: placeholder,
       ref: this.handleInputRef,
@@ -223,7 +224,8 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
   size: 'medium',
   display: 'block',
   textAlign: 'start',
-  inputMode: 'numeric'
+  inputMode: 'numeric',
+  allowStringValue: false
 }, _NumberInput)) || _class) || _class) || _class);
 export default NumberInput;
 export { NumberInput };

package/es/NumberInput/props.js

@@ -44,7 +44,8 @@ const propTypes = {
   onIncrement: PropTypes.func,
   onKeyDown: PropTypes.func,
   inputMode: PropTypes.oneOf(['numeric', 'decimal', 'tel']),
-  textAlign: PropTypes.oneOf(['start', 'center'])
+  textAlign: PropTypes.oneOf(['start', 'center']),
+  allowStringValue: PropTypes.bool
 };
-const allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign'];
+const allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign', 'allowStringValue'];
 export { propTypes, allowedProps };

package/lib/NumberInput/index.js

@@ -190,6 +190,7 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
       showArrows = _this$props4.showArrows,
       value = _this$props4.value,
       width = _this$props4.width,
+      allowStringValue = _this$props4.allowStringValue,
       styles = _this$props4.styles;
     const interaction = this.interaction;
     const rawLabel = (0, _callRenderProp.callRenderProp)(renderLabel);
@@ -212,7 +213,7 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
       css: (_this$props$styles6 = this.props.styles) === null || _this$props$styles6 === void 0 ? void 0 : _this$props$styles6.input,
       "aria-invalid": this.invalid ? 'true' : void 0,
       id: this.id,
-      type: "number",
+      type: allowStringValue ? 'text' : 'number',
       inputMode: this.props.inputMode,
       placeholder: placeholder,
       ref: this.handleInputRef,
@@ -235,6 +236,7 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
   size: 'medium',
   display: 'block',
   textAlign: 'start',
-  inputMode: 'numeric'
+  inputMode: 'numeric',
+  allowStringValue: false
 }, _NumberInput)) || _class) || _class) || _class);
 var _default = exports.default = NumberInput;

package/lib/NumberInput/props.js

@@ -51,6 +51,7 @@ const propTypes = exports.propTypes = {
   onIncrement: _propTypes.default.func,
   onKeyDown: _propTypes.default.func,
   inputMode: _propTypes.default.oneOf(['numeric', 'decimal', 'tel']),
-  textAlign: _propTypes.default.oneOf(['start', 'center'])
+  textAlign: _propTypes.default.oneOf(['start', 'center']),
+  allowStringValue: _propTypes.default.bool
 };
-const allowedProps = exports.allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign'];
+const allowedProps = exports.allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign', 'allowStringValue'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-number-input",
-  "version": "9.9.0",
+  "version": "9.10.0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "homepage": "https://instructure.github.io/instructure-ui/",
@@ -23,26 +23,26 @@
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "9.9.0",
-    "@instructure/ui-babel-preset": "9.9.0",
-    "@instructure/ui-scripts": "9.9.0",
-    "@instructure/ui-test-locator": "9.9.0",
-    "@instructure/ui-test-utils": "9.9.0",
-    "@instructure/ui-themes": "9.9.0",
+    "@instructure/ui-axe-check": "9.10.0",
+    "@instructure/ui-babel-preset": "9.10.0",
+    "@instructure/ui-scripts": "9.10.0",
+    "@instructure/ui-test-locator": "9.10.0",
+    "@instructure/ui-test-utils": "9.10.0",
+    "@instructure/ui-themes": "9.10.0",
     "@testing-library/react": "^15.0.7",
     "vitest": "^2.0.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "9.9.0",
-    "@instructure/shared-types": "9.9.0",
-    "@instructure/ui-a11y-utils": "9.9.0",
-    "@instructure/ui-form-field": "9.9.0",
-    "@instructure/ui-icons": "9.9.0",
-    "@instructure/ui-react-utils": "9.9.0",
-    "@instructure/ui-testable": "9.9.0",
-    "@instructure/ui-utils": "9.9.0",
-    "@instructure/uid": "9.9.0",
+    "@instructure/emotion": "9.10.0",
+    "@instructure/shared-types": "9.10.0",
+    "@instructure/ui-a11y-utils": "9.10.0",
+    "@instructure/ui-form-field": "9.10.0",
+    "@instructure/ui-icons": "9.10.0",
+    "@instructure/ui-react-utils": "9.10.0",
+    "@instructure/ui-testable": "9.10.0",
+    "@instructure/ui-utils": "9.10.0",
+    "@instructure/uid": "9.10.0",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/NumberInput/index.tsx

@@ -75,7 +75,8 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
     size: 'medium',
     display: 'block',
     textAlign: 'start',
-    inputMode: 'numeric'
+    inputMode: 'numeric',
+    allowStringValue: false
   }
 
   state: NumberInputState = { hasFocus: false }
@@ -236,6 +237,7 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
       showArrows,
       value,
       width,
+      allowStringValue,
       styles
     } = this.props
 
@@ -274,7 +276,7 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
               css={this.props.styles?.input}
               aria-invalid={this.invalid ? 'true' : undefined}
               id={this.id}
-              type="number"
+              type={allowStringValue ? 'text' : 'number'}
               inputMode={this.props.inputMode}
               placeholder={placeholder}
               ref={this.handleInputRef}

package/src/NumberInput/props.ts

@@ -161,6 +161,11 @@ type NumberInputOwnProps = {
    * The text alignment of the input.
    */
   textAlign?: 'start' | 'center'
+
+  /**
+   * sets the input type to string and allows string as value
+   */
+  allowStringValue?: boolean
 }
 
 type NumberInputState = {
@@ -220,7 +225,8 @@ const propTypes: PropValidators<PropKeys> = {
   onIncrement: PropTypes.func,
   onKeyDown: PropTypes.func,
   inputMode: PropTypes.oneOf(['numeric', 'decimal', 'tel']),
-  textAlign: PropTypes.oneOf(['start', 'center'])
+  textAlign: PropTypes.oneOf(['start', 'center']),
+  allowStringValue: PropTypes.bool
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -243,7 +249,8 @@ const allowedProps: AllowedPropKeys = [
   'onIncrement',
   'onKeyDown',
   'inputMode',
-  'textAlign'
+  'textAlign',
+  'allowStringValue'
 ]
 
 export type {