@opentrons/components 0.3.14-alpha.0 → 0.3.15-alpha.0

package/lib/instrument/InstrumentDiagram.d.ts

@@ -1,4 +1,5 @@
 import type { FlattenSimpleInterpolation } from 'styled-components';
+import type { ReactNode } from 'react';
 import type { PipetteV2Specs } from '@opentrons/shared-data';
 import type { StyleProps } from '..';
 import type { Mount } from '../robot-types';
@@ -8,4 +9,4 @@ export interface InstrumentDiagramProps extends StyleProps {
     className?: string;
     imageStyle?: FlattenSimpleInterpolation;
 }
-export declare function InstrumentDiagram(props: InstrumentDiagramProps): JSX.Element;
+export declare function InstrumentDiagram(props: InstrumentDiagramProps): ReactNode;

package/lib/legacy-hardware-sim/LabwareNameOverlay.d.ts

@@ -1,7 +1,8 @@
+import type { ReactNode } from 'react';
 export interface LabwareNameOverlayProps {
     title: string;
     subtitle?: string | null;
     className?: string;
 }
 /** @deprecated use LabwareDisplayName or custom RobotCoordsForeignDiv */
-export declare function LabwareNameOverlay(props: LabwareNameOverlayProps): JSX.Element;
+export declare function LabwareNameOverlay(props: LabwareNameOverlayProps): ReactNode;

package/lib/lists/SidePanelGroup.d.ts

@@ -15,4 +15,4 @@ export interface SidePanelGroupProps {
 /**
  * A component for grouping and titling multiple lists
  */
-export declare function SidePanelGroup(props: SidePanelGroupProps): JSX.Element;
+export declare function SidePanelGroup(props: SidePanelGroupProps): ReactNode;

package/lib/modals/AlertModal.d.ts

@@ -25,4 +25,4 @@ export interface AlertModalProps {
  * @deprecated use Modal instead
  * Generic alert modal with a heading and a set of buttons at the bottom
  */
-export declare function AlertModal(props: AlertModalProps): JSX.Element;
+export declare function AlertModal(props: AlertModalProps): ReactNode;

package/lib/modals/ContinueModal.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { AlertModalProps } from './AlertModal';
 export interface ContinueModalProps extends Omit<AlertModalProps, 'buttons'> {
     onCancelClick: () => unknown;
@@ -7,4 +8,4 @@ export interface ContinueModalProps extends Omit<AlertModalProps, 'buttons'> {
  * * @deprecated use Modal instead
  * AlertModal variant to prompt user to "Cancel" or "Continue" a given action
  */
-export declare function ContinueModal(props: ContinueModalProps): JSX.Element;
+export declare function ContinueModal(props: ContinueModalProps): ReactNode;

package/lib/modals/LegacyModal.d.ts

@@ -21,4 +21,4 @@ export interface LegacyModalProps {
  * Base modal component that fills its nearest `display:relative` ancestor
  * with a dark overlay and displays `children` as its contents in a white box
  */
-export declare function LegacyModal(props: LegacyModalProps): JSX.Element;
+export declare function LegacyModal(props: LegacyModalProps): ReactNode;

package/lib/modals/Modal.d.ts

@@ -22,5 +22,5 @@ export interface ModalProps extends StyleProps {
 /**
  * For Desktop app and Helix (which includes Protocol Designer) use only.
  */
-export declare const Modal: (props: ModalProps) => JSX.Element;
+export declare const Modal: (props: ModalProps) => ReactNode;
 export {};

package/lib/modals/ModalHeader.d.ts

@@ -11,4 +11,4 @@ export interface ModalHeaderProps {
     icon?: IconProps;
     closeButton?: ReactNode;
 }
-export declare const ModalHeader: (props: ModalHeaderProps) => JSX.Element;
+export declare const ModalHeader: (props: ModalHeaderProps) => ReactNode;

package/lib/modals/ModalShell.d.ts

@@ -31,4 +31,4 @@ export interface ModalShellProps extends StyleProps {
  * - An optional sticky footer
  * - An optional onOutsideClick function
  */
-export declare function ModalShell(props: ModalShellProps): JSX.Element;
+export declare function ModalShell(props: ModalShellProps): ReactNode;

package/lib/modals/Overlay.d.ts

@@ -1,9 +1,9 @@
 import { Flex } from '..';
-import type { ComponentProps, MouseEventHandler } from 'react';
+import type { ComponentProps, MouseEventHandler, ReactNode } from 'react';
 export interface OverlayProps extends ComponentProps<typeof Flex> {
     /** optional onClick handler */
     onClick?: MouseEventHandler;
     alertOverlay?: boolean | null;
     backgroundColor?: string;
 }
-export declare function Overlay(props: OverlayProps): JSX.Element;
+export declare function Overlay(props: OverlayProps): ReactNode;

package/lib/modals/SpinnerModal.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export interface SpinnerModalProps {
     /** Additional/Override style */
     contentsClassName?: string;
@@ -10,4 +11,4 @@ export interface SpinnerModalProps {
  * @deprecated use Modal instead
  * Spinner Modal with no background and optional message
  */
-export declare function SpinnerModal(props: SpinnerModalProps): JSX.Element;
+export declare function SpinnerModal(props: SpinnerModalProps): ReactNode;

package/lib/modals/SpinnerModalPage.d.ts

@@ -1,5 +1,5 @@
 import { SpinnerModal } from './SpinnerModal';
-import type { ComponentProps } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import type { TitleBarProps } from '../structure';
 export interface SpinnerModalPageProps extends ComponentProps<typeof SpinnerModal> {
     /** Props for title bar at top of modal page */
@@ -9,4 +9,4 @@ export interface SpinnerModalPageProps extends ComponentProps<typeof SpinnerModa
  * @deprecated use Modal instead
  * Spinner Modal variant with TitleBar
  */
-export declare function SpinnerModalPage(props: SpinnerModalPageProps): JSX.Element;
+export declare function SpinnerModalPage(props: SpinnerModalPageProps): ReactNode;

package/lib/molecules/Banner/index.d.ts

@@ -25,4 +25,4 @@ export interface BannerProps extends StyleProps {
     /** Icon margin left for large banners */
     iconMarginLeft?: string;
 }
-export declare function Banner(props: BannerProps): JSX.Element;
+export declare function Banner(props: BannerProps): ReactNode;

package/lib/molecules/CustomizeExpandButton/index.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEvent, ChangeEventHandler, MemoExoticComponent } from 'react';
+import type { ChangeEvent, ChangeEventHandler, MemoExoticComponent, ReactNode } from 'react';
 import type { LabwareDefinition2 } from '@opentrons/shared-data';
 import type { StyleProps } from '../../primitives';
 export interface StackingProps {
@@ -24,6 +24,6 @@ interface CustomizeExpandButtonProps extends StyleProps {
     isSelected?: boolean;
     id?: string;
 }
-export declare function CustomizeExpandButtonComponent(props: CustomizeExpandButtonProps): JSX.Element;
+export declare function CustomizeExpandButtonComponent(props: CustomizeExpandButtonProps): ReactNode;
 export declare const CustomizeExpandButton: MemoExoticComponent<typeof CustomizeExpandButtonComponent>;
 export {};

package/lib/molecules/DeckLabel/index.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { ModuleModel } from '@opentrons/shared-data';
 export interface DeckLabelProps {
     /** Visible label text. */
@@ -15,4 +16,4 @@ export interface DeckLabelProps {
     /** Whether this label is the last item in a grouped sequence. */
     isLast?: boolean;
 }
-export declare function DeckLabel({ text, isSelected, isZoomed, moduleModel, maxWidth, labelBorderRadius, isLast, }: DeckLabelProps): JSX.Element;
+export declare function DeckLabel({ text, isSelected, isZoomed, moduleModel, maxWidth, labelBorderRadius, isLast, }: DeckLabelProps): ReactNode;

package/lib/molecules/DropdownMenu/index.d.ts

@@ -1,5 +1,5 @@
 import type { FlattenSimpleInterpolation } from 'styled-components';
-import type { FocusEventHandler } from 'react';
+import type { FocusEventHandler, ReactNode } from 'react';
 export interface DropdownOption {
     /** dropdown option name */
     name: string;
@@ -54,5 +54,5 @@ export interface DropdownMenuProps {
     /** optional test id */
     testId?: string;
 }
-export declare function DropdownMenu(props: DropdownMenuProps): JSX.Element;
+export declare function DropdownMenu(props: DropdownMenuProps): ReactNode;
 export declare const LINE_CLAMP_TEXT_STYLE: (lineClamp?: number, wordBreak?: boolean) => FlattenSimpleInterpolation;

package/lib/molecules/IconButton/index.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef } from 'react';
+import type { ComponentPropsWithoutRef, ReactNode } from 'react';
 import type { IconName } from '../../icons';
 /**
  * Regarding the following types:
@@ -50,5 +50,5 @@ interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
  * @param {IconButtonProps} props The props for the component.
  * @returns {JSX.Element} The rendered IconButton component.
  */
-export declare function NewIconButton({ variant, iconName, size, 'aria-label': ariaLabel, focusableDisabled, onClick, className, ...restProps }: IconButtonProps): JSX.Element;
+export declare function NewIconButton({ variant, iconName, size, 'aria-label': ariaLabel, focusableDisabled, onClick, className, ...restProps }: IconButtonProps): ReactNode;
 export {};

package/lib/molecules/InfoScreen/index.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { IconName } from '../../icons';
 interface InfoScreenProps {
     content: string;
@@ -6,5 +7,5 @@ interface InfoScreenProps {
     height?: string;
     iconName?: IconName;
 }
-export declare function InfoScreen({ content, subContent, backgroundColor, height, iconName, }: InfoScreenProps): JSX.Element;
+export declare function InfoScreen({ content, subContent, backgroundColor, height, iconName, }: InfoScreenProps): ReactNode;
 export {};

package/lib/molecules/LiquidIcon/index.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEvent } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 type LiquidIconSize = 'xSmall' | 'small' | 'medium';
 export interface LiquidIconProps {
     color: string;
@@ -6,5 +6,5 @@ export interface LiquidIconProps {
     onClick?: (e: MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
     hasError?: boolean;
 }
-export declare function LiquidIcon(props: LiquidIconProps): JSX.Element;
+export declare function LiquidIcon(props: LiquidIconProps): ReactNode;
 export {};

package/lib/molecules/ListAccordion/index.d.ts

@@ -8,4 +8,4 @@ export interface ListAccordionProps {
     children: ListTableProps['children'];
     icon?: JSX.Element;
 }
-export declare function ListAccordion({ headerChild, alertKind, icon, children, tableHeaders, }: ListAccordionProps): JSX.Element;
+export declare function ListAccordion({ headerChild, alertKind, icon, children, tableHeaders, }: ListAccordionProps): ReactNode;

package/lib/molecules/ModelessModal/index.d.ts

@@ -8,5 +8,5 @@ interface ModelessModalProps {
     defaultWidth?: number;
     defaultHeight?: number;
 }
-export declare function ModelessModal({ header, children, 'aria-labelledby': ariaLabelledby, onClose, 'aria-label': ariaLabel, defaultWidth, defaultHeight, }: ModelessModalProps): JSX.Element;
+export declare function ModelessModal({ header, children, 'aria-labelledby': ariaLabelledby, onClose, 'aria-label': ariaLabel, defaultWidth, defaultHeight, }: ModelessModalProps): ReactNode;
 export {};

package/lib/molecules/ParametersTable/index.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { RunTimeParameter } from '@opentrons/shared-data';
 interface ProtocolParameterItemsProps {
     runTimeParameters: RunTimeParameter[];
@@ -6,5 +7,5 @@ interface ProtocolParameterItemsProps {
 /** used in both the desktop app and Protocol Library
  * to display the run time parameters table
  */
-export declare function ParametersTable({ runTimeParameters, t, }: ProtocolParameterItemsProps): JSX.Element;
+export declare function ParametersTable({ runTimeParameters, t, }: ProtocolParameterItemsProps): ReactNode;
 export {};

package/lib/molecules/ReleaseNotes/index.d.ts

@@ -1,5 +1,6 @@
+import type { ReactNode } from 'react';
 export interface ReleaseNotesProps {
     isOEMMode: boolean;
     source?: string | null;
 }
-export declare function ReleaseNotes(props: ReleaseNotesProps): JSX.Element;
+export declare function ReleaseNotes(props: ReleaseNotesProps): ReactNode;

package/lib/molecules/RobotInfoLabel/index.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { IconName } from '../../icons';
 export interface RobotInfoLabelProps {
     deckLabel?: string;
@@ -9,4 +10,4 @@ export interface RobotInfoLabelProps {
     svgSize?: string | number;
     transform?: string;
 }
-export declare function RobotInfoLabel({ deckLabel, iconName, highlight, size, height, width, transform, svgSize, }: RobotInfoLabelProps): JSX.Element;
+export declare function RobotInfoLabel({ deckLabel, iconName, highlight, size, height, width, transform, svgSize, }: RobotInfoLabelProps): ReactNode;

package/lib/molecules/StepGroup/index.d.ts

@@ -14,5 +14,5 @@ interface StepGroupProps {
     /** Title text color (e.g. COLORS.purple50) */
     titleColor?: string;
 }
-export declare function StepGroup(props: StepGroupProps): JSX.Element;
+export declare function StepGroup(props: StepGroupProps): ReactNode;
 export {};

package/lib/molecules/Tabs/index.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export interface TabProps {
     text: string;
     onClick: () => void;
@@ -8,4 +9,4 @@ export interface TabProps {
 export interface TabsProps {
     tabs: TabProps[];
 }
-export declare function Tabs(props: TabsProps): JSX.Element;
+export declare function Tabs(props: TabsProps): ReactNode;

package/lib/molecules/TextListTableContent/index.d.ts

@@ -5,4 +5,4 @@ export interface TextListTableContentProps {
     listTableHeaders?: ListTableProps['headers'];
     children: ReactNode;
 }
-export declare function TextListTableContent({ header, listTableHeaders, children, }: TextListTableContentProps): JSX.Element;
+export declare function TextListTableContent({ header, listTableHeaders, children, }: TextListTableContentProps): ReactNode;

package/lib/molecules/TimelineScrubber/TrackSlider.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export interface TrackData {
     id: string;
     value: number;
@@ -6,5 +7,5 @@ interface TrackSliderProps {
     track: TrackData;
     onChange: (id: string, newValue: number) => void;
 }
-export declare function TrackSlider({ track, onChange, }: TrackSliderProps): JSX.Element;
+export declare function TrackSlider({ track, onChange }: TrackSliderProps): ReactNode;
 export {};

package/lib/molecules/TimelineScrubber/index.d.ts

@@ -1,6 +1,7 @@
+import type { ReactNode } from 'react';
 import type { TrackData } from './TrackSlider';
 export interface TimelineScrubberProps {
     tracks: TrackData[];
     onTrackChange: (updatedTrack: TrackData) => void;
 }
-export declare function TimelineScrubber({ tracks, onTrackChange, }: TimelineScrubberProps): JSX.Element;
+export declare function TimelineScrubber({ tracks, onTrackChange, }: TimelineScrubberProps): ReactNode;

package/lib/molecules/TouchInputField/index.d.ts

@@ -50,5 +50,7 @@ export interface TouchInputFieldProps {
     type?: 'text' | 'password' | 'number';
     /** optional props for data-testid */
     testId?: string;
+    /** optional control rendered beside the input, vertically aligned to the field */
+    accessory?: ReactNode;
 }
 export declare const TouchInputField: import("react").ForwardRefExoticComponent<TouchInputFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib/molecules/WizardHeader/index.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 interface WizardHeaderProps {
     title: string;
     onExit?: (() => void) | null;
@@ -7,5 +8,5 @@ interface WizardHeaderProps {
     exitDisabled?: boolean;
     hideStepText?: boolean;
 }
-export declare const WizardHeader: (props: WizardHeaderProps) => JSX.Element;
+export declare const WizardHeader: (props: WizardHeaderProps) => ReactNode;
 export {};

package/lib/nav/SidePanel.d.ts

@@ -3,4 +3,4 @@ export interface SidePanelProps {
     title?: string;
     children?: ReactNode;
 }
-export declare function SidePanel(props: SidePanelProps): JSX.Element;
+export declare function SidePanel(props: SidePanelProps): ReactNode;

package/lib/organisms/FixtureOption/index.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEventHandler } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 interface FixtureOptionProps {
     onClickHandler: MouseEventHandler;
     secondaryOnClickHandler?: MouseEventHandler;
@@ -6,5 +6,5 @@ interface FixtureOptionProps {
     secondaryButtonText?: string;
     buttonText: string;
 }
-export declare function FixtureOption(props: FixtureOptionProps): JSX.Element;
+export declare function FixtureOption(props: FixtureOptionProps): ReactNode;
 export {};

package/lib/organisms/LabwareDetailsWithCount/index.d.ts

@@ -1,7 +1,8 @@
+import type { ReactNode } from 'react';
 interface LabwareDetailsWithCountProps {
     title: string;
     subTitle?: string;
     quantity?: number;
 }
-export declare function LabwareDetailsWithCount({ title, subTitle, quantity: label, }: LabwareDetailsWithCountProps): JSX.Element;
+export declare function LabwareDetailsWithCount({ title, subTitle, quantity: label, }: LabwareDetailsWithCountProps): ReactNode;
 export {};

package/lib/organisms/LabwareInfoOverlay/index.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { LabwareDefinition } from '@opentrons/shared-data';
 interface LabwareInfoOverlayProps {
     definition: LabwareDefinition;
@@ -8,5 +9,5 @@ interface LabwareInfoOverlayProps {
     xOffset?: number;
     yOffset?: number;
 }
-export declare const LabwareInfoOverlay: (props: LabwareInfoOverlayProps) => JSX.Element;
+export declare const LabwareInfoOverlay: (props: LabwareInfoOverlayProps) => ReactNode;
 export {};

package/lib/organisms/Toolbox/index.d.ts

@@ -16,4 +16,4 @@ export interface ToolboxProps extends StyleProps {
     subHeader?: JSX.Element | null;
     secondaryHeaderButton?: JSX.Element;
 }
-export declare function Toolbox(props: ToolboxProps): JSX.Element;
+export declare function Toolbox(props: ToolboxProps): ReactNode;

package/lib/slotmap/OT2SlotMap.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export interface SlotMapProps {
     /** Slot(s) to highlight */
     occupiedSlots: string[];
@@ -6,4 +7,4 @@ export interface SlotMapProps {
     /** Optional error styling */
     isError?: boolean;
 }
-export declare function OT2SlotMap(props: SlotMapProps): JSX.Element;
+export declare function OT2SlotMap(props: SlotMapProps): ReactNode;

package/lib/structure/LabeledValue.d.ts

@@ -9,4 +9,4 @@ export interface LabeledValueProps {
     /** Additional value className */
     valueClassName?: string;
 }
-export declare function LabeledValue(props: LabeledValueProps): JSX.Element;
+export declare function LabeledValue(props: LabeledValueProps): ReactNode;

package/lib/structure/Pill.d.ts

@@ -15,4 +15,4 @@ export interface PillProps {
 /**
  * Colored Pill containing text or other contents
  */
-export declare function Pill(props: PillProps): JSX.Element;
+export declare function Pill(props: PillProps): ReactNode;

package/lib/structure/Splash.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 import type { IconName } from '../icons';
 export interface SplashProps {
     /** optional alternative icon name. Defaults to 'logo'. */
@@ -5,4 +6,4 @@ export interface SplashProps {
     /** additional className for Splash */
     className?: string;
 }
-export declare function Splash(props: SplashProps): JSX.Element;
+export declare function Splash(props: SplashProps): ReactNode;

package/lib/structure/TitleBar.d.ts

@@ -14,4 +14,4 @@ export interface TitleBarProps {
 /**
  * @deprecated Use 'ModalHeader' instead
  */
-export declare function TitleBar(props: TitleBarProps): JSX.Element;
+export declare function TitleBar(props: TitleBarProps): ReactNode;