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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-number-input",
-  "version": "8.13.1-snapshot.48+4961e7204",
+  "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.48+4961e7204",
-    "@instructure/ui-test-locator": "8.13.1-snapshot.48+4961e7204",
-    "@instructure/ui-test-utils": "8.13.1-snapshot.48+4961e7204",
-    "@instructure/ui-themes": "8.13.1-snapshot.48+4961e7204"
+    "@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.48+4961e7204",
-    "@instructure/shared-types": "8.13.1-snapshot.48+4961e7204",
-    "@instructure/ui-form-field": "8.13.1-snapshot.48+4961e7204",
-    "@instructure/ui-icons": "8.13.1-snapshot.48+4961e7204",
-    "@instructure/ui-react-utils": "8.13.1-snapshot.48+4961e7204",
-    "@instructure/ui-testable": "8.13.1-snapshot.48+4961e7204",
-    "@instructure/ui-utils": "8.13.1-snapshot.48+4961e7204",
-    "@instructure/uid": "8.13.1-snapshot.48+4961e7204",
+    "@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": "4961e72046cb5d951afcc2d90f416e34539cbde2"
+  "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,37 +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',
     textAlign: 'start',
-    // @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) => {},
     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
   }
@@ -102,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
   }
 
@@ -138,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)
+      }
     }
   }
 
@@ -210,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 />
@@ -220,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 />

package/src/NumberInput/props.ts

@@ -21,6 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
+import React from 'react'
+import type { InputHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
 import { FormPropTypes } from '@instructure/ui-form-field'
@@ -30,154 +33,183 @@ import type {
   NumberInputTheme,
   OtherHTMLAttributes
 } from '@instructure/shared-types'
-import type { FormMessage } from '@instructure/ui-form-field'
+import type { FormFieldOwnProps, FormMessage } from '@instructure/ui-form-field'
 import type { InteractionType } from '@instructure/ui-react-utils'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import { InputHTMLAttributes } from 'react'
 
 type NumberInputOwnProps = {
-  renderLabel: React.ReactNode | ((...args: any[]) => any)
-  id?: string
-  interaction?: InteractionType
-  messages?: FormMessage[]
-  placeholder?: string
-  isRequired?: boolean
-  showArrows?: boolean
-  size?: 'medium' | 'large'
-  value?: string | number
-  width?: string
-  display?: 'inline-block' | 'block'
-  inputRef?: (...args: any[]) => any
-  onFocus?: (...args: any[]) => any
-  onBlur?: (...args: any[]) => any
-  onChange?: (...args: any[]) => any
-  onDecrement?: (...args: any[]) => any
-  onIncrement?: (...args: any[]) => any
-  onKeyDown?: (...args: any[]) => any
-  inputMode?: 'numeric' | 'decimal' | 'tel'
-  textAlign?: 'start' | 'center'
-}
-
-type NumberInputState = {
-  hasFocus: boolean
-}
-
-type NumberInputStyleProps = NumberInputState & {
-  interaction: InteractionType
-  invalid: boolean
-}
-
-type PropKeys = keyof NumberInputOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type NumberInputProps = NumberInputOwnProps &
-  WithStyleProps<NumberInputTheme, NumberInputStyle> &
-  OtherHTMLAttributes<
-    NumberInputOwnProps,
-    InputHTMLAttributes<NumberInputOwnProps>
-  >
-
-type NumberInputStyle = ComponentStyle<
-  | 'numberInput'
-  | 'arrowContainer'
-  | 'arrow'
-  | 'inputWidth'
-  | 'inputContainer'
-  | 'input'
->
-
-const propTypes: PropValidators<PropKeys> = {
   /**
    * The form field label.
    */
-  renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  renderLabel: React.ReactNode | (() => React.ReactNode)
+
   /**
    * The id of the input. One is generated if not supplied.
    */
-  id: PropTypes.string,
+  id?: 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.oneOf(['enabled', 'disabled', 'readonly']),
+  interaction?: InteractionType
+
   /**
-   * Object with shape: `{
-   *   text: PropTypes.node,
-   *   type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
+   * Array of objects with shape: `{
+   *   text: ReactNode,
+   *   type: One of: ['error', 'hint', 'success', 'screenreader-only']
    * }`
    */
-  messages: PropTypes.arrayOf(FormPropTypes.message),
+  messages?: FormMessage[]
+
   /**
    * Html placeholder text to display when the input has no value. This
    * should be hint text, not a label replacement.
    */
-  placeholder: PropTypes.string,
+  placeholder?: string
+
   /**
    * Whether or not the text input is required.
    */
-  isRequired: PropTypes.bool,
+  isRequired?: boolean
+
   /**
    * Whether or not to display the up/down arrow buttons.
    */
-  showArrows: PropTypes.bool,
+  showArrows?: boolean
+
   /**
    * The size of the input.
    */
-  size: PropTypes.oneOf(['medium', 'large']),
+  size?: 'medium' | 'large'
+
   /**
    * The value of the input (should be accompanied by an `onChange` prop).
    */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  value?: string | number
+
   /**
    * The width of the input.
    */
-  width: PropTypes.string,
+  width?: string
+
   /**
    * The display of the root element.
    */
-  display: PropTypes.oneOf(['inline-block', 'block']),
+  display?: 'inline-block' | 'block'
+
   /**
    * A function that provides a reference to the actual input element.
    */
-  inputRef: PropTypes.func,
+  inputRef?: (element: HTMLInputElement | null) => void
+
   /**
    * Callback fired when input receives focus.
    */
-  onFocus: PropTypes.func,
+  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void
+
   /**
    * Callback fired when the input loses focus.
    */
-  onBlur: PropTypes.func,
+  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void
+
   /**
    * Callback executed when the input fires a change event.
    * @param {Object} event - the event object
-   * @param {Object} value - the string value of the input
+   * @param {string} value - the string value of the input
    */
-  onChange: PropTypes.func,
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void
+
   /**
    * Called when the down arrow button is clicked, or the down arrow key is
    * pressed.
    */
-  onDecrement: PropTypes.func,
+  onDecrement?: (
+    event:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+  ) => void
+
   /**
    * Called when the up arrow button is clicked, or the up arrow key is
    * pressed.
    */
-  onIncrement: PropTypes.func,
+  onIncrement?: (
+    event:
+      | React.KeyboardEvent<HTMLInputElement>
+      | React.MouseEvent<HTMLButtonElement>
+  ) => void
+
   /**
    * Callback fired when a key is pressed.
    */
-  onKeyDown: PropTypes.func,
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void
+
   /**
    * The inputMode attribute of the underlying `input` element can be one of ['numeric', 'decimal', 'tel']
    */
-  inputMode: PropTypes.oneOf(['numeric', 'decimal', 'tel']),
+  inputMode?: 'numeric' | 'decimal' | 'tel'
+
   /**
    * The text alignment of the input.
    */
+  textAlign?: 'start' | 'center'
+}
+
+type NumberInputState = {
+  hasFocus: boolean
+}
+
+type NumberInputStyleProps = NumberInputState & {
+  interaction: InteractionType
+  invalid: boolean
+}
+
+type PropKeys = keyof NumberInputOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type NumberInputProps =
+  // pickProps passes through FormField.allowedProps, except the ones set manually
+  Omit<FormFieldOwnProps, 'label' | 'inline' | 'id' | 'elementRef'> &
+    NumberInputOwnProps &
+    WithStyleProps<NumberInputTheme, NumberInputStyle> &
+    OtherHTMLAttributes<
+      NumberInputOwnProps,
+      InputHTMLAttributes<NumberInputOwnProps>
+    >
+
+type NumberInputStyle = ComponentStyle<
+  | 'numberInput'
+  | 'arrowContainer'
+  | 'arrow'
+  | 'inputWidth'
+  | 'inputContainer'
+  | 'input'
+>
+
+const propTypes: PropValidators<PropKeys> = {
+  renderLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  id: PropTypes.string,
+  interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
+  messages: PropTypes.arrayOf(FormPropTypes.message),
+  placeholder: PropTypes.string,
+  isRequired: PropTypes.bool,
+  showArrows: PropTypes.bool,
+  size: PropTypes.oneOf(['medium', 'large']),
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  width: PropTypes.string,
+  display: PropTypes.oneOf(['inline-block', 'block']),
+  inputRef: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func,
+  onDecrement: PropTypes.func,
+  onIncrement: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  inputMode: PropTypes.oneOf(['numeric', 'decimal', 'tel']),
   textAlign: PropTypes.oneOf(['start', 'center'])
 }