@opentrons/components 0.1.7-alpha.0 → 0.2.0-alpha.0

package/README.md

@@ -8,7 +8,6 @@ React components for Opentrons' applications. Visit the [Opentrons Components Li
 
 ```javascript
 import { PrimaryButton } from '@opentrons/components'
-
 export default function CowButton(props) {
   return <PrimaryButton onClick={() => console.log('🐄')} />
 }

package/cssModuleSideEffect.ts

@@ -0,0 +1,22 @@
+import type { Plugin } from 'vite'
+
+/**
+ * Plugin to make sure CSS modules do not get tree shaked out of the dist.
+ * see https://github.com/vitejs/vite/pull/16051
+ *
+ * @returns {Plugin} The Vite plugin object.
+ */
+
+export const cssModuleSideEffect = (): Plugin => {
+  return {
+    name: 'css-module-side-effectful',
+    enforce: 'post',
+    transform(_: string, id: string) {
+      if (id.includes('.module.')) {
+        return {
+          moduleSideEffects: 'no-treeshake', // or true, which also works with slightly better treeshake
+        }
+      }
+    },
+  }
+}

package/lib/assets/localization/en/index.d.ts

@@ -33,12 +33,18 @@ export declare const en: {
         drop_tip_in_place: string;
         dropping_tip_in_trash: string;
         engaging_magnetic_module: string;
+        extension_mount: string;
+        extension_z: string;
+        extension_jaw: string;
         fixed_trash: string;
         get_next_tip: string;
         home_gantry: string;
         in_location: string;
         latching_hs_latch: string;
         left: string;
+        left_mount: string;
+        left_plunger: string;
+        left_z: string;
         load_labware_to_display_location: string;
         load_liquid_class: string;
         load_liquids_info_protocol_setup: string;
@@ -70,6 +76,14 @@ export declare const en: {
         reloading_labware: string;
         return_tip: string;
         right: string;
+        right_mount: string;
+        right_plunger: string;
+        right_z: string;
+        robot_close_gripper_jaw: string;
+        robot_move_to: string;
+        robot_move_axes_relative: string;
+        robot_move_axes_to: string;
+        robot_open_gripper_jaw: string;
         row_layout: string;
         save_position: string;
         set_and_await_hs_shake: string;
@@ -101,4 +115,16 @@ export declare const en: {
         waste_chute: string;
         with_reference_of: string;
     };
+    deck_configuration: {
+        flex_stacker_display_name: string;
+        flex_stacker_waste_chute_display_name: string;
+        absorbance: string;
+        heater_Shaker: string;
+        mag_block: string;
+        staging_area: string;
+        temperature: string;
+        thermocycler: string;
+        trash_bin: string;
+        waste: string;
+    };
 };

package/lib/assets/localization/index.d.ts

@@ -34,12 +34,18 @@ export declare const resources: {
             drop_tip_in_place: string;
             dropping_tip_in_trash: string;
             engaging_magnetic_module: string;
+            extension_mount: string;
+            extension_z: string;
+            extension_jaw: string;
             fixed_trash: string;
             get_next_tip: string;
             home_gantry: string;
             in_location: string;
             latching_hs_latch: string;
             left: string;
+            left_mount: string;
+            left_plunger: string;
+            left_z: string;
             load_labware_to_display_location: string;
             load_liquid_class: string;
             load_liquids_info_protocol_setup: string;
@@ -71,6 +77,14 @@ export declare const resources: {
             reloading_labware: string;
             return_tip: string;
             right: string;
+            right_mount: string;
+            right_plunger: string;
+            right_z: string;
+            robot_close_gripper_jaw: string;
+            robot_move_to: string;
+            robot_move_axes_relative: string;
+            robot_move_axes_to: string;
+            robot_open_gripper_jaw: string;
             row_layout: string;
             save_position: string;
             set_and_await_hs_shake: string;
@@ -102,6 +116,18 @@ export declare const resources: {
             waste_chute: string;
             with_reference_of: string;
         };
+        deck_configuration: {
+            flex_stacker_display_name: string;
+            flex_stacker_waste_chute_display_name: string;
+            absorbance: string;
+            heater_Shaker: string;
+            mag_block: string;
+            staging_area: string;
+            temperature: string;
+            thermocycler: string;
+            trash_bin: string;
+            waste: string;
+        };
     };
     zh: {
         protocol_command_text: {

package/lib/atoms/AnimationVideo/index.d.ts

@@ -0,0 +1,13 @@
+import type { ComponentProps } from 'react';
+export type AnimationVideoProps = ComponentProps<'video'>;
+/**
+ * A `<video>` tag with default props for showing a looping animation.
+ *
+ * @example
+ * ```jsx
+ * <AnimationVideo>
+ *   <source src="foo.webm" />
+ * </AnimationVideo>
+ * ```
+ */
+export declare function AnimationVideo(props: AnimationVideoProps): JSX.Element;

package/lib/atoms/Chip/index.d.ts

@@ -15,6 +15,8 @@ interface ChipProps extends StyleProps {
     hasIcon?: boolean;
     /** Chip size medium is the default size */
     chipSize?: ChipSize;
+    /** icon should pulse */
+    pulseIcon?: boolean;
 }
 export declare function Chip(props: ChipProps): JSX.Element;
 export {};

package/lib/atoms/InlineNotification/index.d.ts

@@ -0,0 +1,18 @@
+import type { MouseEventHandler } from 'react';
+import type { StyleProps } from '../../primitives';
+type InlineNotificationType = 'alert' | 'error' | 'neutral' | 'success';
+export interface InlineNotificationProps extends StyleProps {
+    /** name constant of the icon to display */
+    type: InlineNotificationType;
+    /** InlineNotification contents */
+    heading?: string;
+    message?: string;
+    /** Optional dynamic width based on contents */
+    hug?: boolean;
+    /** optional handler to show close button/clear alert  */
+    onCloseClick?: (() => void) | MouseEventHandler<HTMLButtonElement>;
+    linkText?: string;
+    onLinkClick?: (() => void) | MouseEventHandler<HTMLButtonElement>;
+}
+export declare function InlineNotification(props: InlineNotificationProps): JSX.Element;
+export {};

package/lib/atoms/ListButton/ListButtonChildren/index.d.ts

@@ -1,3 +1,2 @@
 export * from './ListButtonAccordion';
 export * from './ListButtonAccordionContainer';
-export * from './ListButtonRadioButton';

package/lib/atoms/ListButton/index.d.ts

@@ -3,10 +3,15 @@ import type { StyleProps } from '../../primitives';
 export * from './ListButtonChildren/index';
 type ListButtonType = 'noActive' | 'connected' | 'notConnected' | 'onColor';
 interface ListButtonProps extends StyleProps {
+    /** ListButton type */
     type: ListButtonType;
+    /** ListButton content */
     children: ReactNode;
+    /** ListButton disabled state */
     disabled?: boolean;
+    /** ListButton onClick event */
     onClick?: () => void;
+    /** optional data-testid value for Cypress testing */
     testId?: string;
 }
 export declare function ListButton(props: ListButtonProps): JSX.Element;

package/lib/atoms/ListItem/ListItemChildren/ListItemDescriptor.d.ts

@@ -1,7 +1,11 @@
 interface ListItemDescriptorProps {
+    /** ListItemDescriptor size type */
     type: 'default' | 'large';
+    /** ListItemDescriptor description */
     description: JSX.Element;
+    /** ListItemDescriptor content */
     content: JSX.Element;
+    /** ListItemDescriptor flex direction */
     changeFlexDirection?: boolean;
 }
 export declare const ListItemDescriptor: (props: ListItemDescriptorProps) => JSX.Element;

package/lib/atoms/StyledText/PlaceholderStyledText.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+interface PlaceholderStyledTextProps {
+    children: ReactNode;
+    color?: string;
+    desktopStyle?: string;
+    oddStyle?: string;
+}
+/**
+ * @deprecated: NOTE: YOU SHOULD NOT BE USING THIS - THIS IS A TEMP COMPONENT
+ * USED FOR PROTOCOL LIBRARY TO NOT USE STYLED-COMPONENTS. USE THIS
+ * UNTIL WE MIGRATE STYLEDTEXT PROPERLY
+ */
+export declare const PlaceholderStyledText: (props: PlaceholderStyledTextProps) => JSX.Element;
+export {};

package/lib/atoms/StyledText/StyledText.d.ts

@@ -1,6 +1,6 @@
 import { Text } from '../../primitives';
-import type { ComponentProps, ReactNode } from 'react';
 import type { FlattenSimpleInterpolation } from 'styled-components';
+import type { ComponentProps, ReactNode } from 'react';
 declare const helixProductStyleMap: {
     readonly displayBold: {
         readonly as: "h1";

package/lib/atoms/StyledText/index.d.ts

@@ -1,2 +1,3 @@
 export * from './StyledText';
 export * from './LegacyStyledText';
+export * from './PlaceholderStyledText';

package/lib/atoms/Tag/index.d.ts

@@ -1,4 +1,5 @@
 import type { IconName } from '../../icons';
+import type { LiquidIconProps } from '../../molecules/LiquidIcon';
 export type TagType = 'default' | 'interactive' | 'branded' | 'onColor';
 export interface TagProps {
     /** Tag content */
@@ -7,8 +8,10 @@ export interface TagProps {
     type: TagType;
     /** iconLocation */
     iconPosition?: 'left' | 'right';
-    /** Tagicon */
+    /** Tag icon */
     iconName?: IconName;
     shrinkToContent?: boolean;
+    /** liquid icon */
+    liquidIcon?: LiquidIconProps;
 }
 export declare function Tag(props: TagProps): JSX.Element;

package/lib/atoms/Toast/index.d.ts

@@ -1,5 +1,5 @@
-import type { StyleProps } from '../../primitives';
 import type { IconProps } from '../../icons';
+import type { StyleProps } from '../../primitives';
 export declare const SUCCESS_TOAST: 'success';
 export declare const WARNING_TOAST: 'warning';
 export declare const ERROR_TOAST: 'error';

package/lib/atoms/Tooltip/index.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
-import type { UseTooltipResultTooltipProps } from '../../tooltips';
 import type { StyleProps } from '../../primitives';
+import type { UseTooltipResultTooltipProps } from '../../tooltips';
 export interface TooltipProps extends StyleProps {
     children: ReactNode;
     tooltipProps: UseTooltipResultTooltipProps & {

package/lib/atoms/buttons/BasicButton.d.ts

@@ -0,0 +1,12 @@
+import type { MouseEvent } from 'react';
+import type { IconName } from '../../icons';
+interface BasicButtonProps {
+    children: string;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    isDisabled?: boolean;
+    underLine?: boolean;
+    tabIndex?: number;
+    iconName?: IconName;
+}
+export declare function BasicButton({ children, onClick, isDisabled, underLine, tabIndex, iconName, ...props }: BasicButtonProps): JSX.Element;
+export {};

package/lib/atoms/buttons/LargeButton.d.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
-import type { StyleProps } from '../../primitives';
 import type { IconName } from '../../icons';
+import type { StyleProps } from '../../primitives';
 type LargeButtonTypes = 'primary' | 'secondary' | 'alert' | 'alertStroke' | 'alertAlt' | 'stroke';
 interface LargeButtonProps extends StyleProps {
     /** used for form submission */

package/lib/atoms/buttons/RadioButton.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEventHandler, ReactNode } from 'react';
+import type { ChangeEventHandler, MouseEventHandler, ReactNode } from 'react';
 import type { IconName } from '../../icons';
 import type { StyleProps } from '../../primitives';
 export interface RadioButtonSubLabel {
@@ -6,21 +6,49 @@ export interface RadioButtonSubLabel {
     align?: 'horizontal' | 'vertical';
 }
 interface RadioButtonProps extends StyleProps {
+    /** Radio button label */
     buttonLabel: string | ReactNode;
+    /** Radio button value */
     buttonValue: string | number;
+    /** Radio button onChange handler */
     onChange: ChangeEventHandler<HTMLInputElement>;
+    /** Radio button disabled state. This will be replaced with aria-disabled in the future. */
     disabled?: boolean;
+    /** Radio button icon name */
     iconName?: IconName;
+    /** Radio button tag text */
     tagText?: string;
+    /** Radio button isSelected state */
     isSelected?: boolean;
+    /** Radio button largeDesktopBorderRadius state */
     largeDesktopBorderRadius?: boolean;
+    /** Radio button radioButtonType state */
     radioButtonType?: 'large' | 'small';
+    /**
+     *  id is used for the special case in ODD where the screen has two radio buttons.
+     *  The screen that uses this prop is CSV runtime parameter CSV file selection screen.
+     *  Basically, this would not be used in desktop app/web app.
+     */
     id?: string;
+    /** Radio button maxLines for label */
     maxLines?: number;
+    /** used for mouseEnter and mouseLeave */
     setNoHover?: () => void;
     setHovered?: () => void;
     error?: string | null;
+    /** Radio button buttonSubLabel */
     buttonSubLabel?: RadioButtonSubLabel;
+    /** testid is used for testing */
+    testid?: string;
+    /**
+     * with the changes in UX and accessibility support, 'disabled' will eventually be replaced with 'aria-disabled' in the future.
+     */
+    ariaDisabled?: boolean;
+    /**
+     *  onClick is needed for RadioButton since onChange requires actual selected value change.
+     *  For this case, selected value change shouldn't be happened.
+     */
+    onClick?: MouseEventHandler;
 }
 export declare function RadioButton(props: RadioButtonProps): JSX.Element;
 export {};

package/lib/atoms/buttons/index.d.ts

@@ -1,4 +1,5 @@
 export * from './AlertPrimaryButton';
+export * from './BasicButton';
 export * from './EmptySelectorButton';
 export * from './LargeButton';
 export * from './PrimaryButton';

package/lib/atoms/index.d.ts

@@ -1,12 +1,15 @@
+export * from './AnimationVideo';
 export * from './buttons';
 export * from './Checkbox';
 export * from './CheckboxField';
 export * from './Chip';
 export * from './Divider';
+export * from './InlineNotification';
 export * from './InputField';
 export * from './ListButton';
 export * from './ListItem';
 export * from './ListItem/ListItemChildren//ListItemDescriptor';
+export * from './ListTable';
 export * from './MenuList';
 export * from './MenuList/MenuItem';
 export * from './MenuList/OverflowBtn';
@@ -14,9 +17,8 @@ export * from './Snackbar';
 export * from './StepMeter';
 export * from './StepMeter';
 export * from './StyledText';
+export * from './SubListTable';
 export * from './Tag';
 export * from './Toast';
 export * from './ToggleGroup';
 export * from './Tooltip';
-export * from './ListTable';
-export * from './SubListTable';

package/lib/buttons/Button.d.ts

@@ -1,7 +1,7 @@
 import { BUTTON_TYPE_BUTTON } from '../primitives';
 import type { ComponentType, MouseEventHandler, ReactNode } from 'react';
-import type { BUTTON_TYPE_SUBMIT, BUTTON_TYPE_RESET } from '../primitives';
 import type { IconName } from '../icons';
+import type { BUTTON_TYPE_RESET, BUTTON_TYPE_SUBMIT } from '../primitives';
 import type { UseHoverTooltipTargetProps } from '../tooltips';
 export interface ButtonProps {
     /** id attribute */

package/lib/controls/ToggleButton.d.ts

@@ -1,5 +1,11 @@
-import type { ButtonProps } from '../buttons';
-export interface ToggleButtonProps extends ButtonProps {
+import type { MouseEvent } from 'react';
+import type { StyleProps } from '../primitives';
+interface ToggleButtonProps extends StyleProps {
     toggledOn: boolean;
+    label?: string | null;
+    disabled?: boolean | null;
+    id?: string;
+    onClick?: (e: MouseEvent) => void;
 }
 export declare function ToggleButton(props: ToggleButtonProps): JSX.Element;
+export {};

package/lib/controls/index.d.ts

@@ -1,5 +1,4 @@
 export * from './ToggleButton';
-export * from './LabeledToggle';
 export * from './LabeledButton';
 export * from './LabeledCheckbox';
 export * from './LabeledRadioGroup';

package/lib/forms/DeprecatedCheckboxField.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps, ChangeEventHandler } from 'react';
+import type { ChangeEventHandler, ComponentProps } from 'react';
 /**
  * Checkbox Field Properties.
  */

package/lib/forms/SelectField.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { ActionMeta } from 'react-select';
-import type { SelectProps } from './Select';
 import type { SelectOption } from '.';
+import type { SelectProps } from './Select';
 export interface SelectFieldProps {
     /** optional HTML id for container */
     id?: SelectProps['id'];

package/lib/hardware-sim/BaseDeck/BaseDeck.d.ts

@@ -1,11 +1,10 @@
 import { Module } from '../Module';
 import type { ComponentProps, ReactNode } from 'react';
-import type { Svg } from '../../primitives';
-import type { DeckConfiguration, LabwareDefinition2, LabwareLocation, ModuleLocation, ModuleModel, RobotType } from '@opentrons/shared-data';
+import type { DeckConfiguration, LabwareDefinition, LabwareLocation, ModuleLocation, ModuleModel, RobotType } from '@opentrons/shared-data';
 import type { WellFill, WellGroup } from '../Labware';
 export interface LabwareOnDeck {
     labwareLocation: LabwareLocation;
-    definition: LabwareDefinition2;
+    definition: LabwareDefinition;
     wellFill?: WellFill;
     missingTips?: WellGroup;
     /** generic prop to render self-positioned children for each labware */
@@ -18,7 +17,7 @@ export interface LabwareOnDeck {
 export interface ModuleOnDeck {
     moduleModel: ModuleModel;
     moduleLocation: ModuleLocation;
-    nestedLabwareDef?: LabwareDefinition2 | null;
+    nestedLabwareDef?: LabwareDefinition | null;
     nestedLabwareWellFill?: WellFill;
     innerProps?: ComponentProps<typeof Module>['innerProps'];
     /** generic prop to render self-positioned children for each module */
@@ -27,7 +26,19 @@ export interface ModuleOnDeck {
     highlightLabware?: boolean;
     highlightShadowLabware?: boolean;
     stacked?: boolean;
+    hopperLabware?: HopperLabwareProps;
 }
+export interface HopperLabwareProps {
+    hopperLabwareDef: LabwareDefinition | null;
+    hopperLabwareWellFill: WellFill;
+    hopperOnLabwareClick: () => void;
+    hopperHighlightLabware: boolean;
+    hopperStacked: boolean;
+}
+export declare const STACKER_MODULE_Y_OFFSET = -6;
+export declare const STACKER_HOPPER_LABWARE_X_OFFSET = 17.5;
+export declare const STACKER_HOPPER_LABWARE_Y_OFFSET = 6;
+export declare const STACKER_DECK_VIEW_BOX_EXPANSION = 220;
 interface BaseDeckProps {
     deckConfig: DeckConfiguration;
     robotType: RobotType;
@@ -43,7 +54,10 @@ interface BaseDeckProps {
     /** whether to make wrapping svg tag animatable via @react-spring/web, defaults to false */
     animatedSVG?: boolean;
     /** extra props to pass to svg tag */
-    svgProps?: ComponentProps<typeof Svg>;
+    /** NOTE: typing as any because running into some TS issues with React-spring,
+     * CSS Modules & Styled-components not playing together nicely
+     */
+    svgProps?: any;
 }
 export declare function BaseDeck(props: BaseDeckProps): JSX.Element;
 export {};

package/lib/hardware-sim/BaseDeck/WasteChuteFixture.d.ts

@@ -1,5 +1,5 @@
-import type { WASTE_CHUTE_CUTOUT, DeckDefinition, ModuleType } from '@opentrons/shared-data';
 import type { SVGProps } from 'react';
+import type { DeckDefinition, ModuleType, WASTE_CHUTE_CUTOUT } from '@opentrons/shared-data';
 import type { DeckLabelProps } from '../../molecules';
 interface WasteChuteFixtureProps extends SVGProps<SVGGElement> {
     cutoutId: typeof WASTE_CHUTE_CUTOUT;

package/lib/hardware-sim/Deck/FlexTrash.d.ts

@@ -10,10 +10,13 @@ interface FlexTrashProps {
     showHighlight?: boolean;
     /** optional tag info to display a tag below the trash */
     tagInfo?: DeckLabelProps[];
+    onClick?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 }
 /**
  * Component to render Opentrons Flex trash
  * For use as a RobotWorkspace child component
  */
-export declare const FlexTrash: ({ robotType, trashIconColor, backgroundColor, trashCutoutId, showHighlight, tagInfo, }: FlexTrashProps) => JSX.Element | null;
+export declare const FlexTrash: ({ robotType, trashIconColor, backgroundColor, trashCutoutId, showHighlight, tagInfo, onClick, onMouseEnter, onMouseLeave, }: FlexTrashProps) => JSX.Element | null;
 export {};

package/lib/hardware-sim/Deck/MoveLabwareOnDeck.d.ts

@@ -1,13 +1,14 @@
-import type { LoadedLabware, LoadedModule, LabwareDefinition2, LabwareLocation, RobotType, DeckConfiguration } from '@opentrons/shared-data';
 import type { ReactNode } from 'react';
+import type { DeckConfiguration, LabwareDefinition, LabwareLocation, LoadedLabware, LoadedModule, RobotType } from '@opentrons/shared-data';
 import type { StyleProps } from '../../primitives';
 interface MoveLabwareOnDeckProps extends StyleProps {
     robotType: RobotType;
-    movedLabwareDef: LabwareDefinition2;
+    movedLabwareDef: LabwareDefinition;
     initialLabwareLocation: LabwareLocation;
     finalLabwareLocation: LabwareLocation;
     loadedModules: LoadedModule[];
     loadedLabware: LoadedLabware[];
+    labwareDefinitions: LabwareDefinition[];
     deckConfig: DeckConfiguration;
     backgroundItems?: ReactNode;
     deckFill?: string;

package/lib/hardware-sim/Deck/RobotCoordsForeignDiv.d.ts

@@ -1,5 +1,6 @@
-import { Box } from '../../primitives';
-import type { ComponentProps, ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { StyleProps } from '../../primitives';
+export type PositionType = 'absolute' | 'relative' | 'fixed';
 export interface RobotCoordsForeignDivProps {
     width?: string | number;
     height?: string | number;
@@ -7,10 +8,10 @@ export interface RobotCoordsForeignDivProps {
     y?: string | number;
     children?: ReactNode;
     outerProps?: any;
-    innerDivProps?: ComponentProps<typeof Box>;
+    innerDivProps?: StyleProps;
+    innerDivEvents?: HTMLAttributes<HTMLDivElement>;
     transformWithSVG?: boolean;
     extraTransform?: string;
-    /** optional data-testid to test foreignObjects in cypress */
     dataTestId?: string;
 }
-export declare const RobotCoordsForeignDiv: (props: RobotCoordsForeignDivProps) => JSX.Element;
+export declare const RobotCoordsForeignDiv: ({ children, x, y, height, width, outerProps, innerDivProps, transformWithSVG, extraTransform, dataTestId, innerDivEvents, }: RobotCoordsForeignDivProps) => JSX.Element;

package/lib/hardware-sim/Deck/RobotCoordsForeignObject.d.ts

@@ -1,12 +1,15 @@
-import { Flex, ForeignObject } from '../../primitives';
-import type { ComponentProps, ReactNode } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+import type { StyleProps } from '../../primitives';
+export type FlexDirection = 'column' | 'row';
 export interface RobotCoordsForeignObjectProps {
     width: string | number;
     height: string | number;
     x: string | number;
     y: string | number;
     children?: ReactNode;
-    foreignObjectProps?: ComponentProps<typeof ForeignObject>;
-    flexProps?: ComponentProps<typeof Flex>;
+    foreignObjectProps?: StyleProps;
+    foreignObjectEvents?: HTMLAttributes<HTMLDivElement>;
+    flexProps?: StyleProps;
+    flexEvents?: HTMLAttributes<HTMLDivElement>;
 }
-export declare const RobotCoordsForeignObject: (props: RobotCoordsForeignObjectProps) => JSX.Element;
+export declare const RobotCoordsForeignObject: ({ children, x, y, height, width, foreignObjectEvents, foreignObjectProps, flexProps, flexEvents, }: RobotCoordsForeignObjectProps) => JSX.Element;

package/lib/hardware-sim/Deck/RobotCoordsText.d.ts

@@ -1,9 +1,19 @@
 import type { ComponentProps, ReactNode } from 'react';
 export interface RobotCoordsTextProps extends ComponentProps<'text'> {
     x: number;
+    /** The y-coordinate of the text baseline, in the Opentrons robot orientation, so +y is towards the top of the screen. */
     y: number;
     children?: ReactNode;
     canHighlight?: boolean;
 }
-/** SVG text reflected to use take robot coordinates as props */
+/**
+ * SVG text positioned with Opentrons robot coordinates.
+ *
+ * This should be used inside a wrapper like RobotWorkSpace that sets up a transformation
+ * to orient the SVG with the Opentrons coordinate convention, with +y towards the
+ * top of the screen.
+ *
+ * This component surgically undoes the wrapper's transformation so the child text is
+ * displayed right-side-up.
+ */
 export declare function RobotCoordsText(props: RobotCoordsTextProps): JSX.Element;