@instructure/ui-number-input 10.6.1 → 10.6.2-snapshot-2

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.
 
+## [10.6.2-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.6.1...v10.6.2-snapshot-2) (2024-11-28)
+
+
+### Features
+
+* **ui-number-input:** add back options for string input ([14bbaea](https://github.com/instructure/instructure-ui/commit/14bbaea13b0829887de946363cd21639e5643749))
+
+
+
+
+
 ## [10.6.1](https://github.com/instructure/instructure-ui/compare/v10.6.0...v10.6.1) (2024-11-26)
 
 **Note:** Version bump only for package @instructure/ui-number-input

package/es/NumberInput/index.js

@@ -178,7 +178,8 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
       showArrows = _this$props4.showArrows,
       value = _this$props4.value,
       width = _this$props4.width,
-      styles = _this$props4.styles;
+      styles = _this$props4.styles,
+      allowStringValue = _this$props4.allowStringValue;
     const interaction = this.interaction;
     const rawLabel = callRenderProp(renderLabel);
     const label = hasVisibleChildren(rawLabel) ? jsx(React.Fragment, null, rawLabel, isRequired && jsx("span", {
@@ -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,7 +190,8 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
       showArrows = _this$props4.showArrows,
       value = _this$props4.value,
       width = _this$props4.width,
-      styles = _this$props4.styles;
+      styles = _this$props4.styles,
+      allowStringValue = _this$props4.allowStringValue;
     const interaction = this.interaction;
     const rawLabel = (0, _callRenderProp.callRenderProp)(renderLabel);
     const label = (0, _hasVisibleChildren.hasVisibleChildren)(rawLabel) ? (0, _emotion.jsx)(_react.default.Fragment, null, rawLabel, isRequired && (0, _emotion.jsx)("span", {
@@ -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": "10.6.1",
+  "version": "10.6.2-snapshot-2",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "homepage": "https://instructure.github.io/instructure-ui/",
@@ -23,11 +23,11 @@
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.6.1",
-    "@instructure/ui-babel-preset": "10.6.1",
-    "@instructure/ui-scripts": "10.6.1",
-    "@instructure/ui-test-utils": "10.6.1",
-    "@instructure/ui-themes": "10.6.1",
+    "@instructure/ui-axe-check": "10.6.2-snapshot-2",
+    "@instructure/ui-babel-preset": "10.6.2-snapshot-2",
+    "@instructure/ui-scripts": "10.6.2-snapshot-2",
+    "@instructure/ui-test-utils": "10.6.2-snapshot-2",
+    "@instructure/ui-themes": "10.6.2-snapshot-2",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -35,14 +35,14 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@instructure/emotion": "10.6.1",
-    "@instructure/shared-types": "10.6.1",
-    "@instructure/ui-form-field": "10.6.1",
-    "@instructure/ui-icons": "10.6.1",
-    "@instructure/ui-react-utils": "10.6.1",
-    "@instructure/ui-testable": "10.6.1",
-    "@instructure/ui-utils": "10.6.1",
-    "@instructure/uid": "10.6.1",
+    "@instructure/emotion": "10.6.2-snapshot-2",
+    "@instructure/shared-types": "10.6.2-snapshot-2",
+    "@instructure/ui-form-field": "10.6.2-snapshot-2",
+    "@instructure/ui-icons": "10.6.2-snapshot-2",
+    "@instructure/ui-react-utils": "10.6.2-snapshot-2",
+    "@instructure/ui-testable": "10.6.2-snapshot-2",
+    "@instructure/ui-utils": "10.6.2-snapshot-2",
+    "@instructure/uid": "10.6.2-snapshot-2",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/NumberInput/README.md

@@ -2,7 +2,9 @@
 describes: NumberInput
 ---
 
-A controlled number input field. Note that this field **does not work
+A controlled number input field.
+By deafult, it renders a `<intput type="number">` to the DOM. However, if you need any string value, use the `allowStringValue` flag. Only use this if absolutely necessary, since it could be confusing for screenreader users.
+Note that this field **does not work
 uncontrolled** - you must pass event handlers if you want it to respond to
 user input.
 
@@ -300,12 +302,11 @@ type: embed
 ---
 <Guidelines>
   <Figure recommendation="yes" title="Do">
-    <Figure.Item>Use when the input is limited to a number (integer, rational, or irrational expressed with decimal points)</Figure.Item>
+    <Figure.Item>Use when you need increment/decrement functionality</Figure.Item>
     <Figure.Item>Use labels at the top or to the left of the input field</Figure.Item>
   </Figure>
   <Figure recommendation="no" title="Don't">
     <Figure.Item>Place labels or text strings to the right of the input field</Figure.Item>
-    <Figure.Item>Use for alphanumeric input</Figure.Item>
   </Figure>
 </Guidelines>
 ```

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,7 +237,8 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
       showArrows,
       value,
       width,
-      styles
+      styles,
+      allowStringValue
     } = this.props
 
     const { interaction } = this
@@ -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 {