@instructure/ui-number-input 9.8.0 → 9.8.1-pr-snapshot-1729284977591

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.8.1-pr-snapshot-1729284977591](https://github.com/instructure/instructure-ui/compare/v9.8.0...v9.8.1-pr-snapshot-1729284977591) (2024-10-18)
+
+
+### Bug Fixes
+
+* **ui-number-input:** add back options for string input ([1ddaf59](https://github.com/instructure/instructure-ui/commit/1ddaf59a0cdb000ef5bb60b7fd7d440639f65ef1))
+
+
+
+
+
 # [9.8.0](https://github.com/instructure/instructure-ui/compare/v9.7.2...v9.8.0) (2024-10-16)
 
 **Note:** Version bump only for package @instructure/ui-number-input

package/es/NumberInput/index.js

@@ -176,7 +176,8 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
       isRequired = _this$props4.isRequired,
       showArrows = _this$props4.showArrows,
       value = _this$props4.value,
-      width = _this$props4.width;
+      width = _this$props4.width,
+      allowStringValue = _this$props4.allowStringValue;
     const interaction = this.interaction;
     return jsx(FormField, Object.assign({}, pickProps(this.props, FormField.allowedProps), {
       label: callRenderProp(renderLabel),
@@ -194,7 +195,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,
@@ -217,7 +218,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

@@ -188,7 +188,8 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
       isRequired = _this$props4.isRequired,
       showArrows = _this$props4.showArrows,
       value = _this$props4.value,
-      width = _this$props4.width;
+      width = _this$props4.width,
+      allowStringValue = _this$props4.allowStringValue;
     const interaction = this.interaction;
     return (0, _emotion.jsx)(_FormField.FormField, Object.assign({}, (0, _pickProps.pickProps)(this.props, _FormField.FormField.allowedProps), {
       label: (0, _callRenderProp.callRenderProp)(renderLabel),
@@ -206,7 +207,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,
@@ -229,6 +230,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.8.0",
+  "version": "9.8.1-pr-snapshot-1729284977591",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "homepage": "https://instructure.github.io/instructure-ui/",
@@ -23,25 +23,25 @@
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "9.8.0",
-    "@instructure/ui-babel-preset": "9.8.0",
-    "@instructure/ui-scripts": "9.8.0",
-    "@instructure/ui-test-locator": "9.8.0",
-    "@instructure/ui-test-utils": "9.8.0",
-    "@instructure/ui-themes": "9.8.0",
+    "@instructure/ui-axe-check": "9.8.1-pr-snapshot-1729284977591",
+    "@instructure/ui-babel-preset": "9.8.1-pr-snapshot-1729284977591",
+    "@instructure/ui-scripts": "9.8.1-pr-snapshot-1729284977591",
+    "@instructure/ui-test-locator": "9.8.1-pr-snapshot-1729284977591",
+    "@instructure/ui-test-utils": "9.8.1-pr-snapshot-1729284977591",
+    "@instructure/ui-themes": "9.8.1-pr-snapshot-1729284977591",
     "@testing-library/react": "^15.0.7",
     "vitest": "^2.0.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/emotion": "9.8.0",
-    "@instructure/shared-types": "9.8.0",
-    "@instructure/ui-form-field": "9.8.0",
-    "@instructure/ui-icons": "9.8.0",
-    "@instructure/ui-react-utils": "9.8.0",
-    "@instructure/ui-testable": "9.8.0",
-    "@instructure/ui-utils": "9.8.0",
-    "@instructure/uid": "9.8.0",
+    "@instructure/emotion": "9.8.1-pr-snapshot-1729284977591",
+    "@instructure/shared-types": "9.8.1-pr-snapshot-1729284977591",
+    "@instructure/ui-form-field": "9.8.1-pr-snapshot-1729284977591",
+    "@instructure/ui-icons": "9.8.1-pr-snapshot-1729284977591",
+    "@instructure/ui-react-utils": "9.8.1-pr-snapshot-1729284977591",
+    "@instructure/ui-testable": "9.8.1-pr-snapshot-1729284977591",
+    "@instructure/ui-utils": "9.8.1-pr-snapshot-1729284977591",
+    "@instructure/uid": "9.8.1-pr-snapshot-1729284977591",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/NumberInput/index.tsx

@@ -74,7 +74,8 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
     size: 'medium',
     display: 'block',
     textAlign: 'start',
-    inputMode: 'numeric'
+    inputMode: 'numeric',
+    allowStringValue: false
   }
 
   state: NumberInputState = { hasFocus: false }
@@ -232,7 +233,8 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
       isRequired,
       showArrows,
       value,
-      width
+      width,
+      allowStringValue
     } = this.props
 
     const { interaction } = this
@@ -258,7 +260,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 = {
@@ -219,7 +224,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 = [
@@ -242,7 +248,8 @@ const allowedProps: AllowedPropKeys = [
   'onIncrement',
   'onKeyDown',
   'inputMode',
-  'textAlign'
+  'textAlign',
+  'allowStringValue'
 ]
 
 export type {