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

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/primitives/style-props.d.ts

@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react';
 import type * as Types from './types';
 type Text = string | number;
-export declare const STYLE_PROPS: ("top" | "bottom" | "left" | "right" | "height" | "filter" | "width" | "position" | "overflow" | "overflowX" | "overflowY" | "cursor" | "transformOrigin" | "color" | "backgroundColor" | "opacity" | "fontSize" | "fontWeight" | "fontStyle" | "lineHeight" | "textAlign" | "textTransform" | "textDecoration" | "textOverflow" | "margin" | "marginX" | "marginY" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "padding" | "paddingX" | "paddingY" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderRadius" | "borderWidth" | "borderColor" | "boxShadow" | "flex" | "alignItems" | "alignSelf" | "alignContent" | "justifyContent" | "justifyItems" | "justifySelf" | "flexDirection" | "flexWrap" | "flexGrow" | "whiteSpace" | "columnGap" | "gridGap" | "gap" | "gridTemplateAreas" | "gridTemplateRows" | "gridTemplateColumns" | "gridArea" | "gridRow" | "gridColumn" | "display" | "visibility" | "size" | "minWidth" | "maxWidth" | "minHeight" | "maxHeight" | "wordSpacing" | "overflowWrap" | "zIndex" | "transform" | "rowGap" | "transition")[];
+export declare const STYLE_PROPS: ("top" | "bottom" | "left" | "right" | "height" | "filter" | "position" | "width" | "overflow" | "overflowX" | "overflowY" | "cursor" | "transformOrigin" | "color" | "backgroundColor" | "opacity" | "fontSize" | "fontWeight" | "fontStyle" | "lineHeight" | "textAlign" | "textTransform" | "textDecoration" | "textOverflow" | "margin" | "marginX" | "marginY" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "padding" | "paddingX" | "paddingY" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderRadius" | "borderWidth" | "borderColor" | "boxShadow" | "flex" | "alignItems" | "alignSelf" | "alignContent" | "justifyContent" | "justifyItems" | "justifySelf" | "flexDirection" | "flexWrap" | "flexGrow" | "whiteSpace" | "columnGap" | "gridGap" | "gap" | "gridTemplateAreas" | "gridTemplateRows" | "gridTemplateColumns" | "gridArea" | "gridRow" | "gridColumn" | "display" | "visibility" | "size" | "minWidth" | "maxWidth" | "minHeight" | "maxHeight" | "wordSpacing" | "overflowWrap" | "zIndex" | "transform" | "rowGap" | "transition")[];
 export declare const styleProps: (props: Types.StyleProps) => CSSProperties;
 export declare const isntStyleProp: (prop: string | Text) => boolean;
 export {};

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;