Merge branch 'edge' into reexport_removal

app/src/App/Navbar.tsx

@@ -25,6 +25,7 @@ import logoSvgThree from '/app/assets/images/logo_nav_three.svg'
 
 import { NAV_BAR_WIDTH } from './constants'
 
+import type { MouseEvent } from 'react'
 import type { RouteProps } from './types'
 
 const SALESFORCE_HELP_LINK = 'https://support.opentrons.com/s/'
@@ -161,7 +162,7 @@ export function Navbar({ routes }: { routes: RouteProps[] }): JSX.Element {
         <NavIconLink
           role="button"
           data-testid="Navbar_settingsLink"
-          onClick={(e: React.MouseEvent<HTMLButtonElement>) => {
+          onClick={(e: MouseEvent<HTMLButtonElement>) => {
             e.preventDefault()
             debouncedNavigate('/app-settings')
           }}

app/src/App/__mocks__/portal.tsx

@@ -1,8 +1,8 @@
 // mock portal for enzyme tests
-import type * as React from 'react'
+import type { ReactNode } from 'react'
 
 interface Props {
-  children: React.ReactNode
+  children: ReactNode
 }
 
 // replace Portal with a pass-through React.Fragment

app/src/App/__tests__/hooks.test.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { vi, describe, beforeEach, afterEach, expect, it } from 'vitest'
 import { renderHook } from '@testing-library/react'
 import { createStore } from 'redux'
@@ -9,11 +8,12 @@ import { i18n } from '/app/i18n'
 import { checkShellUpdate } from '/app/redux/shell'
 import { useSoftwareUpdatePoll } from '../hooks'
 
+import type { FunctionComponent, ReactNode } from 'react'
 import type { Store } from 'redux'
 import type { State } from '/app/redux/types'
 
 describe('useSoftwareUpdatePoll', () => {
-  let wrapper: React.FunctionComponent<{ children: React.ReactNode }>
+  let wrapper: FunctionComponent<{ children: ReactNode }>
   let store: Store<State>
   beforeEach(() => {
     vi.useFakeTimers()

app/src/App/index.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { useSelector } from 'react-redux'
 
 import { Flex, POSITION_FIXED, DIRECTION_ROW } from '@opentrons/components'
@@ -9,7 +8,9 @@ import { DesktopApp } from './DesktopApp'
 import { OnDeviceDisplayApp } from './OnDeviceDisplayApp'
 import { TopPortalRoot } from './portal'
 
-const stopEvent = (event: React.MouseEvent): void => {
+import type { MouseEvent } from 'react'
+
+const stopEvent = (event: MouseEvent): void => {
   event.preventDefault()
 }
 

app/src/App/types.ts

@@ -1,11 +1,11 @@
-import type * as React from 'react'
+import type { FC } from 'react'
 
 export interface RouteProps {
   /**
    * the component rendered by a route match
    * drop developed components into slots held by placeholder div components
    */
-  Component: React.FC
+  Component: FC
   /**
    * a route/page name to render in the nav bar
    */

app/src/LocalizationProvider.tsx

@@ -7,10 +7,10 @@ import { i18n, i18nCb, i18nConfig } from '/app/i18n'
 import { getAppLanguage } from '/app/redux/config'
 import { useIsOEMMode } from '/app/resources/robot-settings/hooks'
 
-import type * as React from 'react'
+import type { ReactNode } from 'react'
 
 export interface LocalizationProviderProps {
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export const BRANDED_RESOURCE = 'branded'

app/src/__testing-utils__/renderWithProviders.tsx

@@ -1,23 +1,28 @@
 // render using targetted component using @testing-library/react
 // with wrapping providers for i18next and redux
-import type * as React from 'react'
 import { QueryClient, QueryClientProvider } from 'react-query'
 import { I18nextProvider } from 'react-i18next'
 import { Provider } from 'react-redux'
 import { vi } from 'vitest'
 import { render } from '@testing-library/react'
 import { createStore } from 'redux'
 
+import type {
+  ComponentProps,
+  ComponentType,
+  PropsWithChildren,
+  ReactElement,
+} from 'react'
 import type { PreloadedState, Store } from 'redux'
 import type { RenderOptions, RenderResult } from '@testing-library/react'
 
 export interface RenderWithProvidersOptions<State> extends RenderOptions {
   initialState?: State
-  i18nInstance: React.ComponentProps<typeof I18nextProvider>['i18n']
+  i18nInstance: ComponentProps<typeof I18nextProvider>['i18n']
 }
 
 export function renderWithProviders<State>(
-  Component: React.ReactElement,
+  Component: ReactElement,
   options?: RenderWithProvidersOptions<State>
 ): [RenderResult, Store<State>] {
   // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -32,7 +37,7 @@ export function renderWithProviders<State>(
 
   const queryClient = new QueryClient()
 
-  const ProviderWrapper: React.ComponentType<React.PropsWithChildren<{}>> = ({
+  const ProviderWrapper: ComponentType<PropsWithChildren<{}>> = ({
     children,
   }) => {
     const BaseWrapper = (

app/src/atoms/InlineNotification/__tests__/InlineNotification.test.tsx

@@ -1,18 +1,19 @@
-import type * as React from 'react'
 import { describe, it, vi, beforeEach, expect } from 'vitest'
 import { screen, fireEvent } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { InlineNotification } from '..'
 
-const render = (props: React.ComponentProps<typeof InlineNotification>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InlineNotification>) => {
   return renderWithProviders(<InlineNotification {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('InlineNotification', () => {
-  let props: React.ComponentProps<typeof InlineNotification>
+  let props: ComponentProps<typeof InlineNotification>
 
   beforeEach(() => {
     props = {

app/src/atoms/InlineNotification/index.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import {
   ALIGN_CENTER,
@@ -19,6 +18,7 @@ import {
   Link,
 } from '@opentrons/components'
 
+import type { MouseEventHandler } from 'react'
 import type { IconProps, StyleProps } from '@opentrons/components'
 
 type InlineNotificationType = 'alert' | 'error' | 'neutral' | 'success'
@@ -32,9 +32,9 @@ export interface InlineNotificationProps extends StyleProps {
   /** Optional dynamic width based on contents */
   hug?: boolean
   /** optional handler to show close button/clear alert  */
-  onCloseClick?: (() => void) | React.MouseEventHandler<HTMLButtonElement>
+  onCloseClick?: (() => void) | MouseEventHandler<HTMLButtonElement>
   linkText?: string
-  onLinkClick?: (() => void) | React.MouseEventHandler<HTMLButtonElement>
+  onLinkClick?: (() => void) | MouseEventHandler<HTMLButtonElement>
 }
 
 const INLINE_NOTIFICATION_PROPS_BY_TYPE: Record<

app/src/atoms/InstrumentContainer/__tests__/InstrumentContainer.test.tsx

@@ -1,15 +1,16 @@
-import type * as React from 'react'
 import { describe, it } from 'vitest'
 import { screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { InstrumentContainer } from '..'
 
-const render = (props: React.ComponentProps<typeof InstrumentContainer>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InstrumentContainer>) => {
   return renderWithProviders(<InstrumentContainer {...props} />)[0]
 }
 
 describe('InstrumentContainer', () => {
-  let props: React.ComponentProps<typeof InstrumentContainer>
+  let props: ComponentProps<typeof InstrumentContainer>
 
   it('renders an instrument display name', () => {
     props = {

app/src/atoms/Link/__tests__/ExternalLink.test.tsx

@@ -1,19 +1,20 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import { screen } from '@testing-library/react'
 import '@testing-library/jest-dom/vitest'
 import { COLORS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ExternalLink } from '../ExternalLink'
 
+import type { ComponentProps } from 'react'
+
 const TEST_URL = 'https://opentrons.com'
 
-const render = (props: React.ComponentProps<typeof ExternalLink>) => {
+const render = (props: ComponentProps<typeof ExternalLink>) => {
   return renderWithProviders(<ExternalLink {...props} />)[0]
 }
 
 describe('ExternalLink', () => {
-  let props: React.ComponentProps<typeof ExternalLink>
+  let props: ComponentProps<typeof ExternalLink>
 
   beforeEach(() => {
     props = {

app/src/atoms/ProgressBar/__tests__/ProgressBar.test.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import { describe, it, expect, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
@@ -7,12 +6,14 @@ import { COLORS } from '@opentrons/components'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { ProgressBar } from '..'
 
-const render = (props: React.ComponentProps<typeof ProgressBar>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof ProgressBar>) => {
   return renderWithProviders(<ProgressBar {...props} />)
 }
 
 describe('ProgressBar', () => {
-  let props: React.ComponentProps<typeof ProgressBar>
+  let props: ComponentProps<typeof ProgressBar>
 
   beforeEach(() => {
     props = {

app/src/atoms/ProgressBar/index.tsx

@@ -1,7 +1,7 @@
-import type * as React from 'react'
 import { css } from 'styled-components'
 import { COLORS, Box } from '@opentrons/components'
 
+import type { ReactNode } from 'react'
 import type { FlattenSimpleInterpolation } from 'styled-components'
 
 interface ProgressBarProps {
@@ -12,7 +12,7 @@ interface ProgressBarProps {
   /** extra styles to be filled progress element */
   innerStyles?: FlattenSimpleInterpolation
   /** extra elements to be rendered within container */
-  children?: React.ReactNode
+  children?: ReactNode
 }
 
 export function ProgressBar({

app/src/atoms/SelectField/index.tsx

@@ -1,4 +1,3 @@
-import type * as React from 'react'
 import find from 'lodash/find'
 import { Select } from './Select'
 import {
@@ -11,6 +10,7 @@ import {
 } from '@opentrons/components'
 import { css } from 'styled-components'
 
+import type { ReactNode } from 'react'
 import type { SelectProps, SelectOption } from './Select'
 import type { ActionMeta, MultiValue, SingleValue } from 'react-select'
 
@@ -32,9 +32,9 @@ export interface SelectFieldProps {
   /** render function for the option label passed to react-select */
   formatOptionLabel?: SelectProps['formatOptionLabel']
   /** optional title */
-  title?: React.ReactNode
+  title?: ReactNode
   /** optional caption. hidden when `error` is given */
-  caption?: React.ReactNode
+  caption?: ReactNode
   /** if included, use error style and display error instead of caption */
   error?: string | null
   /** change handler called with (name, value, actionMeta) */

app/src/atoms/Skeleton/__tests__/Skeleton.test.tsx

@@ -1,12 +1,13 @@
-import type * as React from 'react'
 import { describe, it, expect } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen } from '@testing-library/react'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { i18n } from '/app/i18n'
 import { Skeleton } from '..'
 
-const render = (props: React.ComponentProps<typeof Skeleton>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Skeleton>) => {
   return renderWithProviders(<Skeleton {...props} />, {
     i18nInstance: i18n,
   })[0]

app/src/atoms/Slideout/__tests__/Slideout.test.tsx

@@ -1,19 +1,20 @@
-import type * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
 import { screen, fireEvent } from '@testing-library/react'
 import { i18n } from '/app/i18n'
 import { renderWithProviders } from '/app/__testing-utils__'
 import { Slideout } from '..'
 
-const render = (props: React.ComponentProps<typeof Slideout>) => {
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof Slideout>) => {
   return renderWithProviders(<Slideout {...props} />, {
     i18nInstance: i18n,
   })[0]
 }
 
 describe('Slideout', () => {
-  let props: React.ComponentProps<typeof Slideout>
+  let props: ComponentProps<typeof Slideout>
   const mockOnClick = vi.fn()
   beforeEach(() => {
     props = {

app/src/atoms/Slideout/index.tsx

@@ -22,17 +22,19 @@ import {
 
 import { Divider } from '../structure'
 
+import type { ReactElement, ReactNode } from 'react'
+
 export interface MultiSlideoutSpecs {
   currentStep: number
   maxSteps: number
 }
 export interface SlideoutProps {
-  title: string | React.ReactElement
-  children: React.ReactNode
+  title: string | ReactElement
+  children: ReactNode
   onCloseClick: () => void
   //  isExpanded is for collapse and expand animation
   isExpanded?: boolean
-  footer?: React.ReactNode
+  footer?: ReactNode
   multiSlideoutSpecs?: MultiSlideoutSpecs
 }
 

app/src/atoms/SoftwareKeyboard/AlphanumericKeyboard/index.tsx

@@ -7,6 +7,8 @@ import {
   layoutCandidates,
   customDisplay,
 } from '../constants'
+
+import type { MutableRefObject } from 'react'
 import type { KeyboardReactInterface } from 'react-simple-keyboard'
 
 import '../index.css'
@@ -15,7 +17,7 @@ import './index.css'
 // TODO (kk:04/05/2024) add debug to make debugging easy
 interface AlphanumericKeyboardProps {
   onChange: (input: string) => void
-  keyboardRef: React.MutableRefObject<KeyboardReactInterface | null>
+  keyboardRef: MutableRefObject<KeyboardReactInterface | null>
   debug?: boolean
 }
 

app/src/atoms/SoftwareKeyboard/IndividualKey/index.tsx

@@ -1,6 +1,8 @@
-import type * as React from 'react'
 import { KeyboardReact as Keyboard } from 'react-simple-keyboard'
+
+import type { MutableRefObject } from 'react'
 import type { KeyboardReactInterface } from 'react-simple-keyboard'
+
 import '../index.css'
 import './index.css'
 
@@ -11,7 +13,7 @@ const customDisplay = {
 // TODO (kk:04/05/2024) add debug to make debugging easy
 interface IndividualKeyProps {
   onChange: (input: string) => void
-  keyboardRef: React.MutableRefObject<KeyboardReactInterface | null>
+  keyboardRef: MutableRefObject<KeyboardReactInterface | null>
   keyText: string
   debug?: boolean
 }