TS Strictmode Textfield and batch of easy components (#3411)

* TS Strictmode for textfield and some easy components

Author: snowystinger

package.json

@@ -51,7 +51,6 @@
   "devDependencies": {
     "@actions/core": "^1.1.0",
     "@actions/github": "^1.1.0",
-    "@adobe/spectrum-css-workflow-icons": "^1.0.0",
     "@babel/cli": "^7.12.10",
     "@babel/core": "^7.12.10",
     "@babel/node": "^7.12.10",

packages/@react-spectrum/checkbox/src/Checkbox.tsx

@@ -51,7 +51,8 @@ function Checkbox(props: SpectrumCheckboxProps, ref: FocusableRef<HTMLLabelEleme
     ? useCheckboxGroupItem({
       ...props,
       // Value is optional for standalone checkboxes, but required for CheckboxGroup items;
-      // it's passed explicitly here to avoid typescript error (requires strictNullChecks disabled).
+      // it's passed explicitly here to avoid typescript error (requires ignore).
+      // @ts-ignore
       value: props.value,
       // Only pass isRequired and validationState to react-aria if they came from
       // the props for this individual checkbox, and not from the group via context.

packages/@react-spectrum/checkbox/src/context.ts

@@ -13,4 +13,4 @@
 import {CheckboxGroupState} from '@react-stately/checkbox';
 import React from 'react';
 
-export const CheckboxGroupContext = React.createContext<CheckboxGroupState>(null);
+export const CheckboxGroupContext = React.createContext<CheckboxGroupState | null>(null);

packages/@react-spectrum/checkbox/stories/CheckboxGroup.stories.tsx

@@ -126,7 +126,7 @@ function render(props: Omit<SpectrumCheckboxGroupProps, 'children'> = {}, checkb
 }
 
 function ControlledCheckboxGroup() {
-  let [checked, setChecked] = useState([]);
+  let [checked, setChecked] = useState<string[]>([]);
   return (
     <CheckboxGroup label="Pets" onChange={setChecked} value={checked}>
       <Checkbox value="dogs">Dogs</Checkbox>

packages/@react-spectrum/icon/docs/IconTable.tsx

@@ -17,7 +17,6 @@ import workflowIconPackageData from '@spectrum-icons/workflow/package.json';
 
 ```jsx import
 // import {Icon} from '@react-spectrum/icon';
-// import IconTable from './IconTable';
 import {Flex} from '@react-spectrum/layout';
 ```
 
@@ -96,7 +95,3 @@ import LockClosed from '@spectrum-icons/workflow/LockClosed';
 
 A [searchable list of workflow icons](https://spectrum.adobe.com/page/icons/) is available on the Spectrum website.
 The name of the icon without any whitespace matches the import in React Spectrum.
-
-{/* ```tsx snippet
-<IconTable iconPackage="workflow" />
-``` */}

packages/@react-spectrum/icon/docs/workflow-icons.mdx

@@ -17,7 +17,7 @@ import {StatusLight} from '../';
 import {storiesOf} from '@storybook/react';
 import {View} from '@react-spectrum/view';
 
-let variants = ['celery', 'yellow', 'fuchsia', 'indigo', 'seafoam', 'chartreuse', 'magenta', 'purple', 'neutral', 'info', 'positive', 'notice', 'negative', 'positive'];
+let variants = ['celery', 'yellow', 'fuchsia', 'indigo', 'seafoam', 'chartreuse', 'magenta', 'purple', 'neutral', 'info', 'positive', 'notice', 'negative', 'positive'] as SpectrumStatusLightProps['variant'][];
 
 storiesOf('StatusLight', module)
   .add(

packages/@react-spectrum/statuslight/chromatic/StatusLight.chromatic.tsx

@@ -11,14 +11,14 @@
  */
 
 import {chain, useLayoutEffect} from '@react-aria/utils';
-import React, {RefObject, useCallback, useRef} from 'react';
+import React, {Ref, useCallback, useRef} from 'react';
 import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';
 import {TextFieldBase} from './TextFieldBase';
 import {useControlledState} from '@react-stately/utils';
 import {useProviderProps} from '@react-spectrum/provider';
 import {useTextField} from '@react-aria/textfield';
 
-function TextArea(props: SpectrumTextFieldProps, ref: RefObject<TextFieldRef>) {
+function TextArea(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
   props = useProviderProps(props);
   let {
     isDisabled = false,
@@ -31,12 +31,12 @@ function TextArea(props: SpectrumTextFieldProps, ref: RefObject<TextFieldRef>) {
 
   // not in stately because this is so we know when to re-measure, which is a spectrum design
   let [inputValue, setInputValue] = useControlledState(props.value, props.defaultValue, () => {});
-  let inputRef = useRef<HTMLTextAreaElement>();
+  let inputRef = useRef<HTMLTextAreaElement>(null);
 
   let onHeightChange = useCallback(() => {
     // Quiet textareas always grow based on their text content.
     // Standard textareas also grow by default, unless an explicit height is set.
-    if (isQuiet || !props.height) {
+    if ((isQuiet || !props.height) && inputRef.current) {
       let input = inputRef.current;
       let prevAlignment = input.style.alignSelf;
       let prevOverflow = input.style.overflow;

packages/@react-spectrum/textfield/src/TextArea.tsx

@@ -10,16 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-import React, {forwardRef, RefObject, useRef} from 'react';
+import React, {forwardRef, Ref, useRef} from 'react';
 import {SpectrumTextFieldProps, TextFieldRef} from '@react-types/textfield';
 import {TextFieldBase} from './TextFieldBase';
 import {useProviderProps} from '@react-spectrum/provider';
 import {useTextField} from '@react-aria/textfield';
 
-function TextField(props: SpectrumTextFieldProps, ref: RefObject<TextFieldRef>) {
+function TextField(props: SpectrumTextFieldProps, ref: Ref<TextFieldRef>) {
   props = useProviderProps(props);
 
-  let inputRef = useRef<HTMLInputElement>();
+  let inputRef = useRef<HTMLInputElement>(null);
   let {labelProps, inputProps, descriptionProps, errorMessageProps} = useTextField(props, inputRef);
 
   if (props.placeholder) {

packages/@react-spectrum/textfield/src/TextField.tsx

@@ -50,15 +50,15 @@ function TextFieldBase(props: TextFieldBaseProps, ref: Ref<TextFieldRef>) {
     inputProps,
     descriptionProps,
     errorMessageProps,
-    inputRef,
+    inputRef: userInputRef,
     isLoading,
     loadingIndicator,
     validationIconClassName
   } = props;
   let {hoverProps, isHovered} = useHover({isDisabled});
   let domRef = useRef<HTMLDivElement>(null);
   let defaultInputRef = useRef<HTMLInputElement | HTMLTextAreaElement>(null);
-  inputRef = inputRef || defaultInputRef;
+  let inputRef = userInputRef || defaultInputRef;
 
   // Expose imperative interface for ref
   useImperativeHandle(ref, () => ({