@instructure/ui-number-input 8.13.1-snapshot.9 → 8.14.0

package/lib/NumberInput/props.js

@@ -35,112 +35,27 @@ var _FormPropTypes = require("@instructure/ui-form-field/lib/FormPropTypes.js");
  * SOFTWARE.
  */
 const propTypes = {
-  /**
-   * The form field label.
-   */
   renderLabel: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]).isRequired,
-
-  /**
-   * The id of the input. One is generated if not supplied.
-   */
   id: _propTypes.default.string,
-
-  /**
-   * Specifies if interaction with the input is enabled, disabled, or readonly.
-   * When "disabled", the input changes visibly to indicate that it cannot
-   * receive user interactions. When "readonly" the input still cannot receive
-   * user interactions but it keeps the same styles as if it were enabled.
-   */
   interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
-
-  /**
-   * Object with shape: `{
-   *   text: PropTypes.node,
-   *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   * }`
-   */
   messages: _propTypes.default.arrayOf(_FormPropTypes.FormPropTypes.message),
-
-  /**
-   * Html placeholder text to display when the input has no value. This
-   * should be hint text, not a label replacement.
-   */
   placeholder: _propTypes.default.string,
-
-  /**
-   * Whether or not the text input is required.
-   */
   isRequired: _propTypes.default.bool,
-
-  /**
-   * Whether or not to display the up/down arrow buttons.
-   */
   showArrows: _propTypes.default.bool,
-
-  /**
-   * The size of the input.
-   */
   size: _propTypes.default.oneOf(['medium', 'large']),
-
-  /**
-   * The value of the input (should be accompanied by an `onChange` prop).
-   */
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-
-  /**
-   * The width of the input.
-   */
   width: _propTypes.default.string,
-
-  /**
-   * The display of the root element.
-   */
   display: _propTypes.default.oneOf(['inline-block', 'block']),
-
-  /**
-   * A function that provides a reference to the actual input element.
-   */
   inputRef: _propTypes.default.func,
-
-  /**
-   * Callback fired when input receives focus.
-   */
   onFocus: _propTypes.default.func,
-
-  /**
-   * Callback fired when the input loses focus.
-   */
   onBlur: _propTypes.default.func,
-
-  /**
-   * Callback executed when the input fires a change event.
-   * @param {Object} event - the event object
-   * @param {Object} value - the string value of the input
-   */
   onChange: _propTypes.default.func,
-
-  /**
-   * Called when the down arrow button is clicked, or the down arrow key is
-   * pressed.
-   */
   onDecrement: _propTypes.default.func,
-
-  /**
-   * Called when the up arrow button is clicked, or the up arrow key is
-   * pressed.
-   */
   onIncrement: _propTypes.default.func,
-
-  /**
-   * Callback fired when a key is pressed.
-   */
   onKeyDown: _propTypes.default.func,
-
-  /**
-   * The inputMode attribute of the underlying `input` element can be one of ['numeric', 'decimal', 'tel']
-   */
-  inputMode: _propTypes.default.oneOf(['numeric', 'decimal', 'tel'])
+  inputMode: _propTypes.default.oneOf(['numeric', 'decimal', 'tel']),
+  textAlign: _propTypes.default.oneOf(['start', 'center'])
 };
 exports.propTypes = propTypes;
-const allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode'];
+const allowedProps = ['renderLabel', 'id', 'interaction', 'messages', 'placeholder', 'isRequired', 'showArrows', 'size', 'value', 'width', 'display', 'inputRef', 'onFocus', 'onBlur', 'onChange', 'onDecrement', 'onIncrement', 'onKeyDown', 'inputMode', 'textAlign'];
 exports.allowedProps = allowedProps;

package/lib/NumberInput/styles.js

@@ -40,7 +40,8 @@ exports.default = void 0;
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (componentTheme, props, state) => {
-  const size = props.size;
+  const size = props.size,
+        textAlign = props.textAlign;
   const interaction = state.interaction,
         hasFocus = state.hasFocus,
         invalid = state.invalid;
@@ -141,7 +142,7 @@ const generateStyle = (componentTheme, props, state) => {
     input: {
       label: 'numberInput_input',
       all: 'initial',
-      textAlign: 'start',
+      textAlign: textAlign,
       direction: 'inherit',
       WebkitFontSmoothing: 'antialiased',
       MozOsxFontSmoothing: 'grayscale',
@@ -157,6 +158,7 @@ const generateStyle = (componentTheme, props, state) => {
       color: componentTheme.color,
       background: componentTheme.background,
       padding: componentTheme.padding,
+      textyAlign: textAlign,
       '&::placeholder': {
         color: componentTheme.placeholderColor
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-number-input",
-  "version": "8.13.1-snapshot.9+f32ba918e",
+  "version": "8.14.0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "homepage": "https://instructure.github.io/instructure-ui/",
@@ -24,21 +24,21 @@
     "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-test-locator": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-test-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-themes": "8.13.1-snapshot.9+f32ba918e"
+    "@instructure/ui-babel-preset": "8.14.0",
+    "@instructure/ui-test-locator": "8.14.0",
+    "@instructure/ui-test-utils": "8.14.0",
+    "@instructure/ui-themes": "8.14.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/shared-types": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-form-field": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-icons": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-react-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-testable": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/ui-utils": "8.13.1-snapshot.9+f32ba918e",
-    "@instructure/uid": "8.13.1-snapshot.9+f32ba918e",
+    "@instructure/emotion": "8.14.0",
+    "@instructure/shared-types": "8.14.0",
+    "@instructure/ui-form-field": "8.14.0",
+    "@instructure/ui-icons": "8.14.0",
+    "@instructure/ui-react-utils": "8.14.0",
+    "@instructure/ui-testable": "8.14.0",
+    "@instructure/ui-utils": "8.14.0",
+    "@instructure/uid": "8.14.0",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -48,6 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
-  "gitHead": "f32ba918e4d3ce76c6ee95c856584d00a9d80958"
+  "sideEffects": false
 }

package/src/NumberInput/index.tsx

@@ -21,8 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 /** @jsx jsx */
-import { Component } from 'react'
+import React, { Component } from 'react'
 import keycode from 'keycode'
 
 import { FormField } from '@instructure/ui-form-field'
@@ -43,18 +44,20 @@ import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
+
+import { allowedProps, propTypes } from './props'
 import type {
   NumberInputProps,
   NumberInputState,
   NumberInputStyleProps
 } from './props'
-import { allowedProps, propTypes } from './props'
 
 /**
 ---
 category: components
 id: NumberInput
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
@@ -63,36 +66,24 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
   static allowedProps = allowedProps
   static propTypes = propTypes
   static defaultProps = {
-    id: null,
     // Leave interaction default undefined so that `disabled` and `readOnly` can also be supplied
     interaction: undefined,
     messages: [],
-    placeholder: null,
     isRequired: false,
     showArrows: true,
     size: 'medium',
     display: 'block',
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    inputRef: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onFocus: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onBlur: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onChange: (event, value) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onDecrement: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onIncrement: (event) => {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onKeyDown: (event) => {},
+    textAlign: 'start',
     inputMode: 'numeric'
   }
 
   state: NumberInputState = { hasFocus: false }
-  _input = null
+
   ref: Element | null = null
 
+  private _input: HTMLInputElement | null = null
+  private _id?: string
+
   handleRef = (el: Element | null) => {
     this.ref = el
   }
@@ -101,12 +92,9 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
     if (this.props.id) {
       return this.props.id
     }
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_id' does not exist on type 'NumberInput... Remove this comment to see the full error message
     if (!this._id) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_id' does not exist on type 'NumberInput... Remove this comment to see the full error message
       this._id = uid('NumberInput')
     }
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_id' does not exist on type 'NumberInput... Remove this comment to see the full error message
     return this._id
   }
 
@@ -137,68 +125,77 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'element' implicitly has an 'any' type.
-  handleInputRef = (element) => {
+  handleInputRef = (element: HTMLInputElement | null) => {
     this._input = element
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.inputRef(element)
+
+    if (typeof this.props.inputRef === 'function') {
+      this.props.inputRef(element)
+    }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleFocus = (event) => {
+  handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
     this.setState({ hasFocus: true })
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.onFocus(event)
+
+    if (typeof this.props.onFocus === 'function') {
+      this.props.onFocus(event)
+    }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleBlur = (event) => {
+  handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
     this.setState({ hasFocus: false })
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.onBlur(event)
+
+    if (typeof this.props.onBlur === 'function') {
+      this.props.onBlur(event)
+    }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleChange = (event) => {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.onChange(event, event.target.value)
+  handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    if (typeof this.props.onChange === 'function') {
+      this.props.onChange(event, event.target.value)
+    }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleKeyDown = (event) => {
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.onKeyDown(event)
+  handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    const { onKeyDown, onDecrement, onIncrement } = this.props
+
+    if (typeof onKeyDown === 'function') {
+      onKeyDown(event)
+    }
 
     if (event.keyCode === keycode.codes.down) {
       event.preventDefault()
-      // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-      this.props.onDecrement(event)
+      if (typeof onDecrement === 'function') {
+        onDecrement(event)
+      }
     } else if (event.keyCode === keycode.codes.up) {
       event.preventDefault()
-      // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-      this.props.onIncrement(event)
+      if (typeof onIncrement === 'function') {
+        onIncrement(event)
+      }
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleClickUpArrow = (event) => {
+  handleClickUpArrow = (event: React.MouseEvent<HTMLButtonElement>) => {
     this.arrowClicked(event, this.props.onIncrement)
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleClickDownArrow = (event) => {
+  handleClickDownArrow = (event: React.MouseEvent<HTMLButtonElement>) => {
     this.arrowClicked(event, this.props.onDecrement)
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  arrowClicked(event, callback) {
+  arrowClicked(
+    event: React.MouseEvent<HTMLButtonElement>,
+    callback: NumberInputProps['onIncrement'] | NumberInputProps['onDecrement']
+  ) {
     const { interaction } = this
 
     event.preventDefault()
     if (interaction === 'enabled') {
-      // @ts-expect-error ts-migrate(2531) FIXME: Object is possibly 'null'.
-      this._input.focus()
-      callback(event)
+      this._input?.focus()
+
+      if (typeof callback === 'function') {
+        callback(event)
+      }
     }
   }
 
@@ -209,8 +206,7 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
           aria-hidden
           css={this.props.styles?.arrow}
           onMouseDown={this.handleClickUpArrow}
-          // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to see the full error message
-          tabIndex="-1"
+          tabIndex={-1}
           type="button"
         >
           <IconArrowOpenUpLine />
@@ -219,8 +215,7 @@ class NumberInput extends Component<NumberInputProps, NumberInputState> {
           aria-hidden
           css={this.props.styles?.arrow}
           onMouseDown={this.handleClickDownArrow}
-          // @ts-expect-error ts-migrate(2322) FIXME: Type 'string' is not assignable to type 'number | ... Remove this comment to see the full error message
-          tabIndex="-1"
+          tabIndex={-1}
           type="button"
         >
           <IconArrowOpenDownLine />