update statements in components

components/src/atoms/InputField/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { forwardRef } from 'react'
 import styled, { css } from 'styled-components'
 
 import { Flex } from '../../primitives'
@@ -15,7 +15,15 @@ import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
 import { Tooltip } from '../Tooltip'
 import { useHoverTooltip } from '../../tooltips'
 import { StyledText } from '../StyledText'
+
+import type {
+  ChangeEventHandler,
+  ReactNode,
+  MouseEvent,
+  FocusEvent,
+} from 'react'
 import type { IconName } from '../../icons'
+
 export const INPUT_TYPE_NUMBER = 'number' as const
 export const LEGACY_INPUT_TYPE_TEXT = 'text' as const
 export const LEGACY_INPUT_TYPE_PASSWORD = 'password' as const
@@ -25,15 +33,15 @@ export interface InputFieldProps {
   /** field is disabled if value is true */
   disabled?: boolean
   /** change handler */
-  onChange?: React.ChangeEventHandler<HTMLInputElement>
+  onChange?: ChangeEventHandler<HTMLInputElement>
   /** name of field in form */
   name?: string
   /** optional ID of <input> element */
   id?: string
   /** placeholder text */
   placeholder?: string
   /** optional suffix component, appears to the right of input text */
-  units?: React.ReactNode
+  units?: ReactNode
   /** current value of text in box, defaults to '' */
   value?: string | number | null
   /** if included, InputField will use error style and display error instead of caption */
@@ -50,11 +58,11 @@ export interface InputFieldProps {
     | typeof LEGACY_INPUT_TYPE_PASSWORD
     | typeof INPUT_TYPE_NUMBER
   /** mouse click handler */
-  onClick?: (event: React.MouseEvent<HTMLInputElement>) => unknown
+  onClick?: (event: MouseEvent<HTMLInputElement>) => unknown
   /** focus handler */
-  onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown
+  onFocus?: (event: FocusEvent<HTMLInputElement>) => unknown
   /** blur handler */
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown
+  onBlur?: (event: FocusEvent<HTMLInputElement>) => unknown
   /** makes input field read-only */
   readOnly?: boolean
   /** html tabindex property */
@@ -88,7 +96,7 @@ export interface InputFieldProps {
   padding?: string
 }
 
-export const InputField = React.forwardRef<HTMLInputElement, InputFieldProps>(
+export const InputField = forwardRef<HTMLInputElement, InputFieldProps>(
   (props, ref): JSX.Element => {
     const {
       placeholder,

components/src/hardware-sim/BaseDeck/BaseDeck.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react'
-
+import { Fragment } from 'react'
 import {
   getDeckDefFromRobotType,
   getModuleDef2,
@@ -34,6 +33,7 @@ import { StagingAreaFixture } from './StagingAreaFixture'
 import { WasteChuteFixture } from './WasteChuteFixture'
 import { WasteChuteStagingAreaFixture } from './WasteChuteStagingAreaFixture'
 
+import type { ComponentProps, ReactNode } from 'react'
 import type { Svg } from '../../primitives'
 import type {
   CutoutFixtureId,
@@ -54,7 +54,7 @@ export interface LabwareOnDeck {
   wellFill?: WellFill
   missingTips?: WellGroup
   /** generic prop to render self-positioned children for each labware */
-  labwareChildren?: React.ReactNode
+  labwareChildren?: ReactNode
   onLabwareClick?: () => void
   highlight?: boolean
   highlightShadow?: boolean
@@ -66,9 +66,9 @@ export interface ModuleOnDeck {
   moduleLocation: ModuleLocation
   nestedLabwareDef?: LabwareDefinition2 | null
   nestedLabwareWellFill?: WellFill
-  innerProps?: React.ComponentProps<typeof Module>['innerProps']
+  innerProps?: ComponentProps<typeof Module>['innerProps']
   /** generic prop to render self-positioned children for each module */
-  moduleChildren?: React.ReactNode
+  moduleChildren?: ReactNode
   onLabwareClick?: () => void
   highlightLabware?: boolean
   highlightShadowLabware?: boolean
@@ -84,12 +84,12 @@ interface BaseDeckProps {
   lightFill?: string
   mediumFill?: string
   darkFill?: string
-  children?: React.ReactNode
+  children?: ReactNode
   showSlotLabels?: boolean
   /** whether to make wrapping svg tag animatable via @react-spring/web, defaults to false */
   animatedSVG?: boolean
   /** extra props to pass to svg tag */
-  svgProps?: React.ComponentProps<typeof Svg>
+  svgProps?: ComponentProps<typeof Svg>
 }
 
 const LABWARE_OFFSET_DISPLAY_THRESHOLD = 2
@@ -195,7 +195,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
             />
           ))}
           {trashBinFixtures.map(fixture => (
-            <React.Fragment key={fixture.cutoutId}>
+            <Fragment key={fixture.cutoutId}>
               <SingleSlotFixture
                 cutoutId={fixture.cutoutId}
                 deckDefinition={deckDef}
@@ -208,7 +208,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element {
                 trashCutoutId={fixture.cutoutId as TrashCutoutId}
                 backgroundColor={mediumFill}
               />
-            </React.Fragment>
+            </Fragment>
           ))}
           {wasteChuteOnlyFixtures.map(fixture => {
             if (fixture.cutoutId === WASTE_CHUTE_CUTOUT) {

components/src/hardware-sim/Deck/RobotWorkSpace.tsx

@@ -1,8 +1,9 @@
-import * as React from 'react'
+import { useRef } from 'react'
 import { OT2_ROBOT_TYPE } from '@opentrons/shared-data'
 import { Svg } from '../../primitives'
 import { DeckFromLayers } from './DeckFromLayers'
 
+import type { ReactNode } from 'react'
 import type { StyleProps } from '../../primitives'
 import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data'
 
@@ -17,7 +18,7 @@ export interface RobotWorkSpaceRenderProps {
 export interface RobotWorkSpaceProps extends StyleProps {
   deckDef?: DeckDefinition
   viewBox?: string | null
-  children?: (props: RobotWorkSpaceRenderProps) => React.ReactNode
+  children?: (props: RobotWorkSpaceRenderProps) => ReactNode
   deckLayerBlocklist?: string[]
   // optional boolean to show the OT-2 deck from deck defintion layers
   showDeckLayers?: boolean
@@ -36,7 +37,7 @@ export function RobotWorkSpace(props: RobotWorkSpaceProps): JSX.Element | null {
     id,
     ...styleProps
   } = props
-  const wrapperRef = React.useRef<SVGSVGElement>(null)
+  const wrapperRef = useRef<SVGSVGElement>(null)
 
   // NOTE: getScreenCTM in Chrome a DOMMatrix type,
   // in Firefox the same fn returns a deprecated SVGMatrix.

components/src/hooks/useMenuHandleClickOutside.tsx

@@ -1,24 +1,26 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { COLORS } from '../helix-design-system'
 import { Overlay } from '../modals'
 
+import type { Dispatch, MouseEventHandler, SetStateAction } from 'react'
+
 interface MenuHandleClickOutside {
   menuOverlay: JSX.Element
-  handleOverflowClick: React.MouseEventHandler<HTMLButtonElement>
+  handleOverflowClick: MouseEventHandler<HTMLButtonElement>
   showOverflowMenu: boolean
-  setShowOverflowMenu: React.Dispatch<React.SetStateAction<boolean>>
+  setShowOverflowMenu: Dispatch<SetStateAction<boolean>>
 }
 
 export function useMenuHandleClickOutside(): MenuHandleClickOutside {
-  const [showOverflowMenu, setShowOverflowMenu] = React.useState<boolean>(false)
+  const [showOverflowMenu, setShowOverflowMenu] = useState<boolean>(false)
 
-  const handleOverflowClick: React.MouseEventHandler<HTMLButtonElement> = e => {
+  const handleOverflowClick: MouseEventHandler<HTMLButtonElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu)
   }
 
-  const handleClickOutside: React.MouseEventHandler<HTMLDivElement> = e => {
+  const handleClickOutside: MouseEventHandler<HTMLDivElement> = e => {
     e.preventDefault()
     e.stopPropagation()
     setShowOverflowMenu(false)

components/src/organisms/Toolbox/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Box, Btn, Flex } from '../../primitives'
 import {
   ALIGN_CENTER,
@@ -53,10 +53,8 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
     position = POSITION_FIXED,
   } = props
 
-  const slideOutRef = React.useRef<HTMLDivElement>(null)
-  const [isScrolledToBottom, setIsScrolledToBottom] = React.useState<boolean>(
-    false
-  )
+  const slideOutRef = useRef<HTMLDivElement>(null)
+  const [isScrolledToBottom, setIsScrolledToBottom] = useState<boolean>(false)
   const handleScroll = (): void => {
     if (slideOutRef.current == null) return
     const { scrollTop, scrollHeight, clientHeight } = slideOutRef.current
@@ -67,7 +65,7 @@ export function Toolbox(props: ToolboxProps): JSX.Element {
     }
   }
 
-  React.useEffect(() => {
+  useEffect(() => {
     handleScroll()
   }, [slideOutRef])