@opentrons/components 0.1.6-alpha.12 → 0.1.6-alpha.16

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

@@ -19,6 +19,7 @@ export declare function Checkbox(props: CheckboxProps): JSX.Element;
 interface CheckProps {
     isChecked: boolean;
     color?: string;
+    disabled?: boolean;
 }
 export declare function Check(props: CheckProps): JSX.Element;
 export {};

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { TYPOGRAPHY } from '../../ui-style-constants';
+import type { ChangeEventHandler, FocusEvent, MouseEvent, ReactNode } from 'react';
 import type { IconName } from '../../icons';
 export declare const INPUT_TYPE_NUMBER: "number";
 export declare const LEGACY_INPUT_TYPE_TEXT: "text";
@@ -8,7 +8,7 @@ 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 */
@@ -16,7 +16,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 */
@@ -30,11 +30,11 @@ export interface InputFieldProps {
     /** optional input type (default "text") */
     type?: typeof LEGACY_INPUT_TYPE_TEXT | 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 */
@@ -44,8 +44,8 @@ export interface InputFieldProps {
     /** if true, clear out value and add '-' placeholder */
     isIndeterminate?: boolean;
     /** if input type is number, these are the min and max values */
-    max?: number;
-    min?: number;
+    max?: number | string;
+    min?: number | string;
     /** horizontal text alignment for title, input, and (sub)captions */
     textAlign?: typeof TYPOGRAPHY.textAlignLeft | typeof TYPOGRAPHY.textAlignCenter;
     /** small or medium input field height, relevant only */
@@ -65,4 +65,4 @@ export interface InputFieldProps {
     /** optional prop to override input field padding */
     padding?: string;
 }
-export declare const InputField: React.ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const InputField: import("react").ForwardRefExoticComponent<Omit<InputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -8,8 +8,8 @@ interface ListItemCustomizeProps {
     label?: string;
     dropdown?: DropdownMenuProps;
     tag?: TagProps;
-    /** temporary prop for dropdown menu  */
-    forceDirection?: boolean;
+    /** optional placement of the menu */
+    menuPlacement?: 'auto' | 'top' | 'bottom';
 }
 export declare function ListItemCustomize(props: ListItemCustomizeProps): JSX.Element;
 export {};

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

@@ -2,6 +2,7 @@ interface ListItemDescriptorProps {
     type: 'default' | 'large';
     description: JSX.Element;
     content: JSX.Element;
+    changeFlexDirection?: boolean;
 }
 export declare const ListItemDescriptor: (props: ListItemDescriptorProps) => JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import type * as React from 'react';
 import type { StyleProps } from '../../primitives';
 export * from './ListItemChildren';
-export type ListItemType = 'error' | 'noActive' | 'success' | 'warning';
+export type ListItemType = 'error' | 'noActive' | 'success' | 'warning' | 'unavailable';
 interface ListItemProps extends StyleProps {
     /** ListItem state type */
     type: ListItemType;

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

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

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

@@ -9,5 +9,6 @@ export interface TagProps {
     iconPosition?: 'left' | 'right';
     /** Tagicon */
     iconName?: IconName;
+    shrinkToContent?: boolean;
 }
 export declare function Tag(props: TagProps): JSX.Element;

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 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 { WellFill, WellGroup } from '../Labware';
@@ -9,7 +9,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;
@@ -20,9 +20,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;
@@ -38,12 +38,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>;
 }
 export declare function BaseDeck(props: BaseDeckProps): JSX.Element;
 export {};

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

@@ -3,6 +3,7 @@ export interface RobotCoordsTextProps extends React.ComponentProps<'text'> {
     x: number;
     y: number;
     children?: React.ReactNode;
+    canHighlight?: boolean;
 }
 /** SVG text reflected to use take robot coordinates as props */
 export declare function RobotCoordsText(props: RobotCoordsTextProps): JSX.Element;

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type { ReactNode } from 'react';
 import type { StyleProps } from '../../primitives';
 import type { DeckDefinition, DeckSlot } from '@opentrons/shared-data';
 export interface RobotWorkSpaceRenderProps {
@@ -13,7 +13,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[];
     showDeckLayers?: boolean;
     id?: string;

package/lib/hardware-sim/Labware/LabwareRender.d.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { CSSProperties } from 'styled-components';
+import type { CSSProperties } from '../../patches';
 import type { LabwareDefinition2 } from '@opentrons/shared-data';
 import type { HighlightedWellLabels, WellMouseEvent, WellFill, WellStroke, WellGroup } from './labwareInternals/types';
 export declare const WELL_LABEL_OPTIONS: {

package/lib/hardware-sim/Labware/labwareInternals/FilledWells.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { LabwareDefinition2 } from '@opentrons/shared-data';
-import type { CSSProperties } from 'styled-components';
+import type { CSSProperties } from '../../../patches';
 export interface FilledWellsProps {
     definition: LabwareDefinition2;
     fillByWell: Record<string, CSSProperties['fill']>;

package/lib/hardware-sim/Labware/labwareInternals/LabwareOutline.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties } from 'styled-components';
+import type { CSSProperties } from '../../../patches';
 import type { LabwareDefinition2 } from '@opentrons/shared-data';
 export interface LabwareOutlineProps {
     /** Labware definition to outline */

package/lib/hardware-sim/Labware/labwareInternals/StaticLabware.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { LabwareDefinition2 } from '@opentrons/shared-data';
 import type { WellMouseEvent, WellStroke } from './types';
-import type { CSSProperties } from 'styled-components';
+import type { CSSProperties } from '../../../patches';
 export interface StaticLabwareProps {
     /** Labware definition to render */
     definition: LabwareDefinition2;

package/lib/hardware-sim/Labware/labwareInternals/StrokedWells.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { LabwareDefinition2 } from '@opentrons/shared-data';
-import type { CSSProperties } from 'styled-components';
+import type { CSSProperties } from '../../../patches';
 export interface StrokedWellProps {
     definition: LabwareDefinition2;
     strokeByWell: Record<string, CSSProperties['stroke']>;

package/lib/hooks/useMenuHandleClickOutside.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
+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 declare function useMenuHandleClickOutside(): MenuHandleClickOutside;
 export {};