Merge branch 'main' into kma-rangeinput-aria-labels-1542

.browserslistrc

@@ -0,0 +1,5 @@
+# Supported browsers
+> 2%
+last 2 versions
+IE 11
+not dead

.gitignore

@@ -1,74 +1,96 @@
 # Logs
+
 logs
-*.log
-npm-debug.log*
+_.log
+npm-debug.log_
 yarn-debug.log*
 yarn-error.log*
 
 # Runtime data
+
 pids
-*.pid
-*.seed
-*.pid.lock
+_.pid
+_.seed
+\*.pid.lock
 
 # Directory for instrumented libs generated by jscoverage/JSCover
+
 lib-cov
 
 # Coverage directory used by tools like istanbul
+
 coverage
 
 # nyc test coverage
+
 .nyc_output
 
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+
 .grunt
 
 # Bower dependency directory (https://bower.io/)
+
 bower_components
 
 # node-waf configuration
+
 .lock-wscript
 
 # Compiled binary addons (https://nodejs.org/api/addons.html)
+
 build/Release
 
 # Dependency directories
+
 node_modules/
 jspm_packages/
 
 # TypeScript v1 declaration files
+
 typings/
 
 # Build output
+
 lib/
+storybook-static/
 
 .awcache
 .DS_Store
 
 # Optional npm cache directory
+
 .npm
 
 # Optional eslint cache
+
 .eslintcache
 
 # Optional REPL history
+
 .node_repl_history
 
 # Output of 'npm pack'
-*.tgz
+
+\*.tgz
 
 # Yarn Integrity file
+
 .yarn-integrity
 
 # dotenv environment variables file
+
 .env
 
 # next.js build output
+
 .next
 
 # editor config
+
 .vscode
 .idea
 
 # happo output directory
+
 .out

.storybook/main.ts

@@ -1,6 +1,8 @@
 const path = require('path')
 
 const webpackConfig = (config) => {
+  config.resolve.alias.uswds = path.resolve(__dirname, '../node_modules/uswds')
+
   config.module.rules = config.module.rules.filter(
     (rule) => rule.test.toString() !== '/\\.css$/'
   )
@@ -38,6 +40,9 @@ const webpackConfig = (config) => {
 }
 
 module.exports = {
+  core: {
+    builder: 'webpack5',
+  },
   stories: ['../src/**/*.stories.@(ts|tsx)'],
   addons: ['@storybook/addon-essentials'],
   typescript: {

example/package.json

@@ -35,18 +35,18 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/react": "^12.1.0",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
     "@types/node": "^16.7.6",
-    "@types/react": "^17.0.16",
+    "@types/react": "^17.0.21",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.1.8",
     "@types/yup": "^0.29.13",
     "customize-cra": "^1.0.0",
     "react-app-rewired": "^2.1.8",
     "react-scripts": "^4.0.3",
-    "typescript": "~4.3.5"
+    "typescript": "~4.4.3"
   },
   "jest": {
     "moduleNameMapper": {

example/src/pages/Forms.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react'
+import React from 'react'
 import { Field, Formik } from 'formik'
 import * as Yup from 'yup'
 import {
@@ -13,14 +13,9 @@ import {
   ValidationItem,
   DatePicker,
   FileInput,
+  FileInputRef,
 } from '@trussworks/react-uswds'
 
-type FormValues = {
-  email?: string
-  password?: string
-  fruit?: string
-}
-
 const FormSchema = Yup.object().shape({
   email: Yup.string().email().required(),
   password: Yup.string().min(8).max(20).required(),
@@ -45,7 +40,7 @@ const fruitOptions = Object.entries(fruits).map(([value, key]) => ({
 }))
 
 const FormsPage = (): React.ReactElement => {
-  const fileInputRef = useRef<HTMLInputElement>(null)
+  const fileInputRef = React.createRef<FileInputRef>()
 
   return (
     <>
@@ -190,7 +185,7 @@ const FormsPage = (): React.ReactElement => {
                   onDrop={(e: React.DragEvent): void => {
                     console.log('handle drop', e)
                   }}
-                  inputRef={fileInputRef}
+                  ref={fileInputRef}
                 />
               </FormGroup>