diff --git a/components/src/atoms/InputField/index.tsx b/components/src/atoms/InputField/index.tsx index 06b4ad68533..e9020c07f39 100644 --- a/components/src/atoms/InputField/index.tsx +++ b/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,7 +33,7 @@ export interface InputFieldProps { /** field is disabled if value is true */ disabled?: boolean /** change handler */ - onChange?: React.ChangeEventHandler + onChange?: ChangeEventHandler /** name of field in form */ name?: string /** optional ID of element */ @@ -33,7 +41,7 @@ export interface InputFieldProps { /** 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) => unknown + onClick?: (event: MouseEvent) => unknown /** focus handler */ - onFocus?: (event: React.FocusEvent) => unknown + onFocus?: (event: FocusEvent) => unknown /** blur handler */ - onBlur?: (event: React.FocusEvent) => unknown + onBlur?: (event: FocusEvent) => 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( +export const InputField = forwardRef( (props, ref): JSX.Element => { const { placeholder, diff --git a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx b/components/src/hardware-sim/BaseDeck/BaseDeck.tsx index fcf71c57ea1..c8f22175952 100644 --- a/components/src/hardware-sim/BaseDeck/BaseDeck.tsx +++ b/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['innerProps'] + innerProps?: ComponentProps['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 + svgProps?: ComponentProps } const LABWARE_OFFSET_DISPLAY_THRESHOLD = 2 @@ -195,7 +195,7 @@ export function BaseDeck(props: BaseDeckProps): JSX.Element { /> ))} {trashBinFixtures.map(fixture => ( - + - + ))} {wasteChuteOnlyFixtures.map(fixture => { if (fixture.cutoutId === WASTE_CHUTE_CUTOUT) { diff --git a/components/src/hardware-sim/Deck/RobotWorkSpace.tsx b/components/src/hardware-sim/Deck/RobotWorkSpace.tsx index bf999139659..5c9663a6ca1 100644 --- a/components/src/hardware-sim/Deck/RobotWorkSpace.tsx +++ b/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(null) + const wrapperRef = useRef(null) // NOTE: getScreenCTM in Chrome a DOMMatrix type, // in Firefox the same fn returns a deprecated SVGMatrix. diff --git a/components/src/hooks/useMenuHandleClickOutside.tsx b/components/src/hooks/useMenuHandleClickOutside.tsx index f3e567a25f6..bf93df4a395 100644 --- a/components/src/hooks/useMenuHandleClickOutside.tsx +++ b/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 + handleOverflowClick: MouseEventHandler showOverflowMenu: boolean - setShowOverflowMenu: React.Dispatch> + setShowOverflowMenu: Dispatch> } export function useMenuHandleClickOutside(): MenuHandleClickOutside { - const [showOverflowMenu, setShowOverflowMenu] = React.useState(false) + const [showOverflowMenu, setShowOverflowMenu] = useState(false) - const handleOverflowClick: React.MouseEventHandler = e => { + const handleOverflowClick: MouseEventHandler = e => { e.preventDefault() e.stopPropagation() setShowOverflowMenu(currentShowOverflowMenu => !currentShowOverflowMenu) } - const handleClickOutside: React.MouseEventHandler = e => { + const handleClickOutside: MouseEventHandler = e => { e.preventDefault() e.stopPropagation() setShowOverflowMenu(false) diff --git a/components/src/organisms/Toolbox/index.tsx b/components/src/organisms/Toolbox/index.tsx index 147b8b0eda2..3064469f247 100644 --- a/components/src/organisms/Toolbox/index.tsx +++ b/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(null) - const [isScrolledToBottom, setIsScrolledToBottom] = React.useState( - false - ) + const slideOutRef = useRef(null) + const [isScrolledToBottom, setIsScrolledToBottom] = useState(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])