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

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,150 +33,184 @@ 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'
-}
-
-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'])
 }
 
 const allowedProps: AllowedPropKeys = [
@@ -195,7 +232,8 @@ const allowedProps: AllowedPropKeys = [
   'onDecrement',
   'onIncrement',
   'onKeyDown',
-  'inputMode'
+  'inputMode',
+  'textAlign'
 ]
 
 export type {

package/src/NumberInput/styles.ts

@@ -44,7 +44,7 @@ const generateStyle = (
   props: NumberInputProps,
   state: NumberInputStyleProps
 ): NumberInputStyle => {
-  const { size } = props
+  const { size, textAlign } = props
   const { interaction, hasFocus, invalid } = state
 
   const disabledStyles =
@@ -153,7 +153,7 @@ const generateStyle = (
     input: {
       label: 'numberInput_input',
       all: 'initial',
-      textAlign: 'start',
+      textAlign: textAlign,
       direction: 'inherit',
       WebkitFontSmoothing: 'antialiased',
       MozOsxFontSmoothing: 'grayscale',
@@ -169,6 +169,7 @@ const generateStyle = (
       color: componentTheme.color,
       background: componentTheme.background,
       padding: componentTheme.padding,
+      textyAlign: textAlign,
       '&::placeholder': { color: componentTheme.placeholderColor }
     }
   }

package/tsconfig.build.json

@@ -1,7 +1,23 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "outDir": "./types"
+    "outDir": "./types",
+    "rootDir": "./src",
+    "composite": true
   },
-  "include": ["src/**/*"]
+  "include": ["src"],
+  "references": [
+    { "path": "../ui-babel-preset/tsconfig.build.json" },
+    { "path": "../ui-test-locator/tsconfig.build.json" },
+    { "path": "../ui-test-utils/tsconfig.build.json" },
+    { "path": "../ui-themes/tsconfig.build.json" },
+    { "path": "../emotion/tsconfig.build.json" },
+    { "path": "../shared-types/tsconfig.build.json" },
+    { "path": "../ui-form-field/tsconfig.build.json" },
+    { "path": "../ui-icons/tsconfig.build.json" },
+    { "path": "../ui-react-utils/tsconfig.build.json" },
+    { "path": "../ui-testable/tsconfig.build.json" },
+    { "path": "../ui-utils/tsconfig.build.json" },
+    { "path": "../uid/tsconfig.build.json" }
+  ]
 }