TS Strict NumberField (#5552)

* TS Strict NumberField

Author: snowystinger

packages/@react-aria/numberfield/src/useNumberField.ts

@@ -153,7 +153,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
   // We choose between numeric and decimal based on whether we allow negative and fractional numbers,
   // and based on testing on various devices to determine what keys are available in each inputMode.
   let hasDecimals = intlOptions.maximumFractionDigits > 0;
-  let hasNegative = isNaN(state.minValue) || state.minValue < 0;
+  let hasNegative = (state.minValue === undefined || isNaN(state.minValue)) || state.minValue < 0;
   let inputMode: TextInputDOMProps['inputMode'] = 'numeric';
   if (isIPhone()) {
     // iPhone doesn't have a minus sign in either numeric or decimal.
@@ -205,8 +205,8 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     value: inputValue,
     defaultValue: undefined, // defaultValue already used to populate state.inputValue, unneeded here
     autoComplete: 'off',
-    'aria-label': props['aria-label'] || null,
-    'aria-labelledby': props['aria-labelledby'] || null,
+    'aria-label': props['aria-label'] || undefined,
+    'aria-labelledby': props['aria-labelledby'] || undefined,
     id: inputId,
     type: 'text', // Can't use type="number" because then we can't have things like $ in the field.
     inputMode,
@@ -222,7 +222,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
 
   useFormReset(inputRef, state.numberValue, state.setNumberValue);
 
-  let inputProps = mergeProps(
+  let inputProps: InputHTMLAttributes<HTMLInputElement> = mergeProps(
     spinButtonProps,
     focusProps,
     textFieldProps,
@@ -255,7 +255,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     // On touch, or with a screen reader, focus the button so that the software
     // keyboard does not appear and the screen reader cursor is not moved off the button.
     if (e.pointerType === 'mouse') {
-      inputRef.current.focus();
+      inputRef.current?.focus();
     } else {
       e.target.focus();
     }
@@ -272,7 +272,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
   // the aria-label string rather than using aria-labelledby gives more flexibility to translators to change
   // the order or add additional words around the label if needed.
   let fieldLabel = props['aria-label'] || (typeof props.label === 'string' ? props.label : '');
-  let ariaLabelledby: string;
+  let ariaLabelledby: string | undefined;
   if (!fieldLabel) {
     ariaLabelledby = props.label != null ? labelProps.id : props['aria-labelledby'];
   }

packages/@react-aria/numberfield/test/useNumberField.test.ts

@@ -64,21 +64,21 @@ describe('useNumberField hook', () => {
         onBeforeInput,
         onInput
       });
-      inputProps.onCopy({} as any);
+      inputProps.onCopy?.({} as any);
       expect(onCopy).toHaveBeenCalled();
-      inputProps.onCut({} as any);
+      inputProps.onCut?.({} as any);
       expect(onCut).toHaveBeenCalled();
-      inputProps.onPaste({} as any);
+      inputProps.onPaste?.({} as any);
       expect(onPaste).toHaveBeenCalled();
-      inputProps.onCompositionStart({} as any);
+      inputProps.onCompositionStart?.({} as any);
       expect(onCompositionStart).toHaveBeenCalled();
-      inputProps.onCompositionEnd({} as any);
+      inputProps.onCompositionEnd?.({} as any);
       expect(onCompositionEnd).toHaveBeenCalled();
-      inputProps.onCompositionUpdate({} as any);
+      inputProps.onCompositionUpdate?.({} as any);
       expect(onCompositionUpdate).toHaveBeenCalled();
-      inputProps.onSelect({} as any);
+      inputProps.onSelect?.({} as any);
       expect(onSelect).toHaveBeenCalled();
-      inputProps.onBeforeInput({
+      inputProps.onBeforeInput?.({
         preventDefault: jest.fn(),
         target: {
           value: '',
@@ -88,7 +88,7 @@ describe('useNumberField hook', () => {
         }
       } as any);
       expect(onBeforeInput).toHaveBeenCalled();
-      inputProps.onInput({} as any);
+      inputProps.onInput?.({} as any);
       expect(onInput).toHaveBeenCalled();
     });
   });

packages/@react-spectrum/numberfield/src/NumberField.tsx

@@ -17,7 +17,7 @@ import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import {NumberFieldState, useNumberFieldState} from '@react-stately/numberfield';
-import React, {HTMLAttributes, InputHTMLAttributes, RefObject, useRef} from 'react';
+import React, {HTMLAttributes, InputHTMLAttributes, Ref, RefObject, useRef} from 'react';
 import {SpectrumNumberFieldProps} from '@react-types/numberfield';
 import {StepButton} from './StepButton';
 import stepperStyle from '@adobe/spectrum-css-temp/components/stepper/vars.css';
@@ -43,7 +43,7 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
 
   let {locale} = useLocale();
   let state = useNumberFieldState({...props, locale});
-  let inputRef = useRef<HTMLInputElement>();
+  let inputRef = useRef<HTMLInputElement>(null);
   let domRef = useFocusableRef<HTMLElement>(ref, inputRef);
   let {
     groupProps,
@@ -62,21 +62,21 @@ function NumberField(props: SpectrumNumberFieldProps, ref: FocusableRef<HTMLElem
 
   let {isHovered, hoverProps} = useHover({isDisabled});
 
-  let validationState = props.validationState || (isInvalid ? 'invalid' : null);
+  let validationState = props.validationState || (isInvalid ? 'invalid' : undefined);
   let className =
     classNames(
       stepperStyle,
       'spectrum-Stepper',
+      // because FocusRing won't pass along the className from Field, we have to handle that ourselves
+      !props.label && style.className ? style.className : '',
       {
         'spectrum-Stepper--isQuiet': isQuiet,
         'is-disabled': isDisabled,
         'spectrum-Stepper--readonly': isReadOnly,
         'is-invalid': validationState === 'invalid' && !isDisabled,
         'spectrum-Stepper--showStepper': showStepper,
         'spectrum-Stepper--isMobile': isMobile,
-        'is-hovered': isHovered,
-        // because FocusRing won't pass along the className from Field, we have to handle that ourselves
-        [style.className]: !props.label && style.className
+        'is-hovered': isHovered
       }
     );
 
@@ -124,7 +124,7 @@ interface NumberFieldInputProps extends SpectrumNumberFieldProps {
   state: NumberFieldState
 }
 
-const NumberFieldInput = React.forwardRef(function NumberFieldInput(props: NumberFieldInputProps, ref: RefObject<HTMLElement>) {
+const NumberFieldInput = React.forwardRef(function NumberFieldInput(props: NumberFieldInputProps, ref: Ref<HTMLDivElement>) {
   let {
     groupProps,
     inputProps,
@@ -152,7 +152,7 @@ const NumberFieldInput = React.forwardRef(function NumberFieldInput(props: Numbe
       autoFocus={autoFocus}>
       <div
         {...groupProps}
-        ref={ref as RefObject<HTMLDivElement>}
+        ref={ref}
         style={style}
         className={className}>
         <TextFieldBase

packages/@react-spectrum/numberfield/src/StepButton.tsx

@@ -14,30 +14,32 @@ import Add from '@spectrum-icons/workflow/Add';
 import {AriaButtonProps} from '@react-types/button';
 import ChevronDownSmall from '@spectrum-icons/ui/ChevronDownSmall';
 import ChevronUpSmall from '@spectrum-icons/ui/ChevronUpSmall';
-import {classNames} from '@react-spectrum/utils';
+import {classNames, useFocusableRef} from '@react-spectrum/utils';
+import {FocusableRef} from '@react-types/shared';
 import {FocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
-import React, {RefObject} from 'react';
+import React, {ReactElement} from 'react';
 import Remove from '@spectrum-icons/workflow/Remove';
 import stepperStyle from '@adobe/spectrum-css-temp/components/stepper/vars.css';
 import {useButton} from '@react-aria/button';
 import {useHover} from '@react-aria/interactions';
 import {useProvider, useProviderProps} from '@react-spectrum/provider';
 
 interface StepButtonProps extends AriaButtonProps {
-  isQuiet: boolean,
+  isQuiet?: boolean,
   direction: 'up' | 'down'
 }
 
-function StepButton(props: StepButtonProps, ref: RefObject<HTMLDivElement>) {
+function StepButton(props: StepButtonProps, ref: FocusableRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let {scale} = useProvider();
   let {direction, isDisabled, isQuiet} = props;
+  let domRef = useFocusableRef(ref);
   /**
    * Must use div for now because Safari pointer event bugs on disabled form elements.
    * Link https://bugs.webkit.org/show_bug.cgi?id=219188.
    */
-  let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, ref);
+  let {buttonProps, isPressed} = useButton({...props, elementType: 'div'}, domRef);
   let {hoverProps, isHovered} = useHover(props);
   return (
     <FocusRing focusRingClass={classNames(stepperStyle, 'focus-ring')}>
@@ -57,7 +59,7 @@ function StepButton(props: StepButtonProps, ref: RefObject<HTMLDivElement>) {
           )
         }
         {...mergeProps(hoverProps, buttonProps)}
-        ref={ref}>
+        ref={domRef}>
         {direction === 'up' && scale === 'large' &&
           <Add UNSAFE_className={classNames(stepperStyle, 'spectrum-Stepper-button-icon', 'spectrum-Stepper-stepUpIcon')} size="S" />
         }
@@ -78,5 +80,5 @@ function StepButton(props: StepButtonProps, ref: RefObject<HTMLDivElement>) {
 /**
  * Buttons for NumberField.
  */
-let _StepButton = React.forwardRef(StepButton);
+let _StepButton = React.forwardRef(StepButton) as (props: StepButtonProps & {ref?: FocusableRef<HTMLDivElement>}) => ReactElement;
 export {_StepButton as StepButton};

packages/@react-spectrum/numberfield/stories/NumberField.stories.tsx

@@ -478,7 +478,7 @@ function NumberFieldControlledStateReset() {
         onChange={(value) => setControlledValue(value)} />
       <Button
         variant={'primary'}
-        onPress={() => setControlledValue(null)}>
+        onPress={() => setControlledValue(NaN)}>
         Reset
       </Button>
     </>

packages/@react-stately/numberfield/src/useNumberFieldState.ts

@@ -28,9 +28,9 @@ export interface NumberFieldState extends FormValidationState {
    */
   numberValue: number,
   /** The minimum value of the number field. */
-  minValue: number,
+  minValue?: number,
   /** The maximum value of the number field. */
-  maxValue: number,
+  maxValue?: number,
   /** Whether the current value can be incremented according to the maximum value and step. */
   canIncrement: boolean,
   /** Whether the current value can be decremented according to the minimum value and step. */
@@ -83,7 +83,7 @@ export function useNumberFieldState(
     step,
     formatOptions,
     value,
-    defaultValue,
+    defaultValue = NaN,
     onChange,
     locale,
     isDisabled,
@@ -94,16 +94,16 @@ export function useNumberFieldState(
     value = NaN;
   }
 
-  if (!isNaN(value)) {
-    if (!isNaN(step)) {
+  if (value !== undefined && !isNaN(value)) {
+    if (step !== undefined && !isNaN(step)) {
       value = snapValueToStep(value, minValue, maxValue, step);
     } else {
       value = clamp(value, minValue, maxValue);
     }
   }
 
   if (!isNaN(defaultValue)) {
-    if (!isNaN(step)) {
+    if (step !== undefined && !isNaN(step)) {
       defaultValue = snapValueToStep(defaultValue, minValue, maxValue, step);
     } else {
       defaultValue = clamp(defaultValue, minValue, maxValue);
@@ -124,8 +124,8 @@ export function useNumberFieldState(
     value: numberValue
   });
 
-  let clampStep = !isNaN(step) ? step : 1;
-  if (intlOptions.style === 'percent' && isNaN(step)) {
+  let clampStep = (step !== undefined && !isNaN(step)) ? step : 1;
+  if (intlOptions.style === 'percent' && (step === undefined || isNaN(step))) {
     clampStep = 0.01;
   }
 
@@ -159,7 +159,7 @@ export function useNumberFieldState(
 
     // Clamp to min and max, round to the nearest step, and round to specified number of digits
     let clampedValue: number;
-    if (isNaN(step)) {
+    if (step === undefined || isNaN(step)) {
       clampedValue = clamp(parsedValue, minValue, maxValue);
     } else {
       clampedValue = snapValueToStep(parsedValue, minValue, maxValue, step);
@@ -172,7 +172,7 @@ export function useNumberFieldState(
     setInputValue(format(value === undefined ? clampedValue : numberValue));
   };
 
-  let safeNextStep = (operation: '+' | '-', minMax: number) => {
+  let safeNextStep = (operation: '+' | '-', minMax: number = 0) => {
     let prev = parsedValue;
 
     if (isNaN(prev)) {
@@ -242,7 +242,7 @@ export function useNumberFieldState(
     !isReadOnly &&
     (
       isNaN(parsedValue) ||
-      isNaN(maxValue) ||
+      (maxValue === undefined || isNaN(maxValue)) ||
       snapValueToStep(parsedValue, minValue, maxValue, clampStep) > parsedValue ||
       handleDecimalOperation('+', parsedValue, clampStep) <= maxValue
     )
@@ -253,7 +253,7 @@ export function useNumberFieldState(
     !isReadOnly &&
     (
       isNaN(parsedValue) ||
-      isNaN(minValue) ||
+      (minValue === undefined || isNaN(minValue)) ||
       snapValueToStep(parsedValue, minValue, maxValue, clampStep) < parsedValue ||
       handleDecimalOperation('-', parsedValue, clampStep) >= minValue
     )

tsconfig.json

@@ -49,6 +49,7 @@
           "./packages/@react-aria/k",
           "./packages/@react-aria/l",
           "./packages/@react-aria/meter",
+          "./packages/@react-aria/numberfield",
           "./packages/@react-aria/progress",
           "./packages/@react-aria/q",
           "./packages/@react-aria/radio",
@@ -79,6 +80,7 @@
           "./packages/@react-spectrum/label",
           "./packages/@react-spectrum/link",
           "./packages/@react-spectrum/meter",
+          "./packages/@react-spectrum/numberfield",
           "./packages/@react-spectrum/progress",
           "./packages/@react-spectrum/radio",
           "./packages/@react-spectrum/searchfield",
@@ -96,6 +98,7 @@
           "./packages/@react-spectrum/view",
           "./packages/@react-spectrum/well",
           "./packages/@react-stately/checkbox",
+          "./packages/@react-stately/numberfield",
           "./packages/@react-stately/overlays",
           "./packages/@react-stately/pagination",
           "./packages/@react-stately/searchfield",
@@ -112,6 +115,7 @@
           "./packages/@react-types/image",
           "./packages/@react-types/l",
           "./packages/@react-types/meter",
+          "./packages/@react-types/numberfield",
           "./packages/@react-types/progress",
           "./packages/@react-types/searchfield",
           "./packages/@react-types/shared",