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

package/CHANGELOG.md

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

package/es/NumberInput/index.js

@@ -178,8 +178,7 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
       showArrows = _this$props4.showArrows,
       value = _this$props4.value,
       width = _this$props4.width,
-      styles = _this$props4.styles,
-      allowStringValue = _this$props4.allowStringValue;
+      styles = _this$props4.styles;
     const interaction = this.interaction;
     const rawLabel = callRenderProp(renderLabel);
     const label = hasVisibleChildren(rawLabel) ? jsx(React.Fragment, null, rawLabel, isRequired && jsx("span", {
@@ -201,7 +200,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: allowStringValue ? 'text' : 'number',
+      type: "number",
       inputMode: this.props.inputMode,
       placeholder: placeholder,
       ref: this.handleInputRef,
@@ -224,8 +223,7 @@ let NumberInput = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle
   size: 'medium',
   display: 'block',
   textAlign: 'start',
-  inputMode: 'numeric',
-  allowStringValue: false
+  inputMode: 'numeric'
 }, _NumberInput)) || _class) || _class) || _class);
 export default NumberInput;
 export { NumberInput };

package/es/NumberInput/props.js

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

package/lib/NumberInput/index.js

@@ -190,8 +190,7 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
       showArrows = _this$props4.showArrows,
       value = _this$props4.value,
       width = _this$props4.width,
-      styles = _this$props4.styles,
-      allowStringValue = _this$props4.allowStringValue;
+      styles = _this$props4.styles;
     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", {
@@ -213,7 +212,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: allowStringValue ? 'text' : 'number',
+      type: "number",
       inputMode: this.props.inputMode,
       placeholder: placeholder,
       ref: this.handleInputRef,
@@ -236,7 +235,6 @@ let NumberInput = exports.NumberInput = (_dec = (0, _withDeterministicId.withDet
   size: 'medium',
   display: 'block',
   textAlign: 'start',
-  inputMode: 'numeric',
-  allowStringValue: false
+  inputMode: 'numeric'
 }, _NumberInput)) || _class) || _class) || _class);
 var _default = exports.default = NumberInput;

package/lib/NumberInput/props.js

@@ -51,7 +51,6 @@ 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']),
-  allowStringValue: _propTypes.default.bool
+  textAlign: _propTypes.default.oneOf(['start', 'center'])
 };
-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'];
+const allowedProps = exports.allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-number-input",
-  "version": "10.6.2-snapshot-2",
+  "version": "10.6.2-snapshot-3",
   "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.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",
+    "@instructure/ui-axe-check": "10.6.2-snapshot-3",
+    "@instructure/ui-babel-preset": "10.6.2-snapshot-3",
+    "@instructure/ui-scripts": "10.6.2-snapshot-3",
+    "@instructure/ui-test-utils": "10.6.2-snapshot-3",
+    "@instructure/ui-themes": "10.6.2-snapshot-3",
     "@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.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",
+    "@instructure/emotion": "10.6.2-snapshot-3",
+    "@instructure/shared-types": "10.6.2-snapshot-3",
+    "@instructure/ui-form-field": "10.6.2-snapshot-3",
+    "@instructure/ui-icons": "10.6.2-snapshot-3",
+    "@instructure/ui-react-utils": "10.6.2-snapshot-3",
+    "@instructure/ui-testable": "10.6.2-snapshot-3",
+    "@instructure/ui-utils": "10.6.2-snapshot-3",
+    "@instructure/uid": "10.6.2-snapshot-3",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/NumberInput/README.md

@@ -2,9 +2,7 @@
 describes: NumberInput
 ---
 
-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
+A controlled number input field. Note that this field **does not work
 uncontrolled** - you must pass event handlers if you want it to respond to
 user input.
 
@@ -302,11 +300,12 @@ type: embed
 ---
 <Guidelines>
   <Figure recommendation="yes" title="Do">
-    <Figure.Item>Use when you need increment/decrement functionality</Figure.Item>
+    <Figure.Item>Use when the input is limited to a number (integer, rational, or irrational expressed with decimal points)</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,8 +75,7 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
     size: 'medium',
     display: 'block',
     textAlign: 'start',
-    inputMode: 'numeric',
-    allowStringValue: false
+    inputMode: 'numeric'
   }
 
   state: NumberInputState = { hasFocus: false }
@@ -237,8 +236,7 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
       showArrows,
       value,
       width,
-      styles,
-      allowStringValue
+      styles
     } = this.props
 
     const { interaction } = this
@@ -276,7 +274,7 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
               css={this.props.styles?.input}
               aria-invalid={this.invalid ? 'true' : undefined}
               id={this.id}
-              type={allowStringValue ? 'text' : 'number'}
+              type="number"
               inputMode={this.props.inputMode}
               placeholder={placeholder}
               ref={this.handleInputRef}

package/src/NumberInput/props.ts

@@ -161,11 +161,6 @@ 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 = {
@@ -225,8 +220,7 @@ const propTypes: PropValidators<PropKeys> = {
   onIncrement: PropTypes.func,
   onKeyDown: PropTypes.func,
   inputMode: PropTypes.oneOf(['numeric', 'decimal', 'tel']),
-  textAlign: PropTypes.oneOf(['start', 'center']),
-  allowStringValue: PropTypes.bool
+  textAlign: PropTypes.oneOf(['start', 'center'])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -249,8 +243,7 @@ const allowedProps: AllowedPropKeys = [
   'onIncrement',
   'onKeyDown',
   'inputMode',
-  'textAlign',
-  'allowStringValue'
+  'textAlign'
 ]
 
 export type {