@opentrons/components 0.1.6-alpha.7 → 0.1.6-alpha.8

package/lib/instrument/InstrumentDiagram.d.ts

@@ -1,4 +1,4 @@
-import { FlattenSimpleInterpolation } from 'styled-components';
+import type { FlattenSimpleInterpolation } from 'styled-components';
 import type { PipetteV2Specs } from '@opentrons/shared-data';
 import type { Mount } from '../robot-types';
 import type { StyleProps } from '..';

package/lib/instrument/InstrumentInfo.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Mount } from '../robot-types';
 import type { InstrumentDiagramProps } from './InstrumentDiagram';
 export interface InstrumentInfoProps {

package/lib/lists/SidePanelGroup.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { IconName } from '../icons';
 export interface SidePanelGroupProps {
     /** text of title */

package/lib/lists/index.d.ts

@@ -1,3 +1,2 @@
 export * from './SidePanelGroup';
 export * from './TitledList';
-export * from './ListItem';

package/lib/modals/AlertModal.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ButtonProps } from '../buttons';
 import type { IconName } from '../icons';
 export interface AlertModalProps {
@@ -22,6 +22,7 @@ export interface AlertModalProps {
     restrictOuterScroll?: boolean;
 }
 /**
+ * @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;

package/lib/modals/ContinueModal.d.ts

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

package/lib/modals/LegacyModal.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+export interface LegacyModalProps {
+    /** handler to close the modal (attached to `Overlay` onClick) */
+    onCloseClick?: React.MouseEventHandler;
+    /** Optional styled heading **/
+    heading?: string;
+    /** modal contents */
+    children: React.ReactNode;
+    /** classes to apply */
+    className?: string;
+    /** classes to apply to the contents box */
+    contentsClassName?: string;
+    /** lightens overlay (alert modal over existing modal) */
+    alertOverlay?: boolean;
+    /** restricts scroll outside of Modal when open, true by default */
+    restrictOuterScroll?: boolean;
+    innerRef?: React.Ref<HTMLDivElement>;
+}
+/**
+ * @deprecated use Modal instead
+ * 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;

package/lib/modals/Modal.d.ts

@@ -1,23 +1,24 @@
-import * as React from 'react';
-export interface ModalProps {
-    /** handler to close the modal (attached to `Overlay` onClick) */
-    onCloseClick?: React.MouseEventHandler;
-    /** Optional styled heading **/
-    heading?: string;
-    /** modal contents */
-    children: React.ReactNode;
-    /** classes to apply */
-    className?: string;
-    /** classes to apply to the contents box */
-    contentsClassName?: string;
-    /** lightens overlay (alert modal over existing modal) */
-    alertOverlay?: boolean;
-    /** restricts scroll outside of Modal when open, true by default */
-    restrictOuterScroll?: boolean;
-    innerRef?: React.Ref<HTMLDivElement>;
+import type * as React from 'react';
+import type { StyleProps } from '../primitives';
+import type { Position } from './ModalShell';
+type ModalType = 'info' | 'warning' | 'error';
+export interface ModalProps extends StyleProps {
+    type?: ModalType;
+    onClose?: React.MouseEventHandler;
+    closeOnOutsideClick?: boolean;
+    title?: React.ReactNode;
+    titleElement1?: JSX.Element;
+    titleElement2?: JSX.Element;
+    fullPage?: boolean;
+    childrenPadding?: string | number;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    zIndexOverlay?: number;
+    showOverlay?: boolean;
+    position?: Position;
 }
 /**
- * Base modal component that fills its nearest `display:relative` ancestor
- * with a dark overlay and displays `children` as its contents in a white box
+ * For Desktop app and Helix (which includes Protocol Designer) use only.
  */
-export declare function Modal(props: ModalProps): JSX.Element;
+export declare const Modal: (props: ModalProps) => JSX.Element;
+export {};

package/lib/modals/ModalHeader.d.ts

@@ -0,0 +1,13 @@
+import type * as React from 'react';
+import type { IconProps } from '../icons';
+export interface ModalHeaderProps {
+    title: React.ReactNode;
+    onClose?: React.MouseEventHandler;
+    titleElement1?: JSX.Element;
+    titleElement2?: JSX.Element;
+    backgroundColor?: string;
+    color?: string;
+    icon?: IconProps;
+    closeButton?: React.ReactNode;
+}
+export declare const ModalHeader: (props: ModalHeaderProps) => JSX.Element;

package/lib/modals/ModalShell.d.ts

@@ -1,5 +1,6 @@
-import * as React from 'react';
-import { StyleProps } from '../primitives';
+import type * as React from 'react';
+import type { StyleProps } from '../primitives';
+export type Position = 'center' | 'bottomRight';
 export interface ModalShellProps extends StyleProps {
     /** Modal content */
     children: React.ReactNode;
@@ -11,6 +12,14 @@ export interface ModalShellProps extends StyleProps {
     footer?: React.ReactNode;
     /** Optional full page takeover */
     fullPage?: boolean;
+    /** Optional zIndex for the overlay */
+    zIndexOverlay?: number;
+    /** Optional position to make the modal appear at the center or bottom right */
+    position?: Position;
+    /** Optional visible overlay */
+    showOverlay?: boolean;
+    /** Optional remove padding */
+    noPadding?: boolean;
 }
 /**
  * A ModalShell is a layout component for building more specific modals.

package/lib/modals/Overlay.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { Flex } from '..';
 export interface OverlayProps extends React.ComponentProps<typeof Flex> {
     /** optional onClick handler */

package/lib/modals/SpinnerModal.d.ts

@@ -7,6 +7,7 @@ export interface SpinnerModalProps {
     alertOverlay?: boolean;
 }
 /**
+ * @deprecated use Modal instead
  * Spinner Modal with no background and optional message
  */
 export declare function SpinnerModal(props: SpinnerModalProps): JSX.Element;

package/lib/modals/SpinnerModalPage.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { SpinnerModal } from './SpinnerModal';
 import type { TitleBarProps } from '../structure';
 export interface SpinnerModalPageProps extends React.ComponentProps<typeof SpinnerModal> {
@@ -6,6 +6,7 @@ export interface SpinnerModalPageProps extends React.ComponentProps<typeof Spinn
     titleBar: TitleBarProps;
 }
 /**
+ * @deprecated use Modal instead
  * Spinner Modal variant with TitleBar
  */
 export declare function SpinnerModalPage(props: SpinnerModalPageProps): JSX.Element;

package/lib/modals/__tests__/Modal.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/modals/__tests__/ModalHeader.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/modals/__tests__/ModalShell.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/modals/index.d.ts

@@ -1,9 +1,9 @@
-export * from './Modal';
 export * from './AlertModal';
 export * from './ContinueModal';
-export * from './SpinnerModal';
-export * from './ModalPage';
+export * from './LegacyModal';
+export * from './Modal';
+export * from './ModalHeader';
 export * from './ModalShell';
-export * from './SpinnerModalPage';
-export * from './BaseModal';
 export * from './Overlay';
+export * from './SpinnerModal';
+export * from './SpinnerModalPage';

package/lib/molecules/Banner/__tests__/Banner.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+import type { StyleProps } from '../../primitives';
+import type { IconProps } from '../../icons';
+export type BannerType = 'success' | 'warning' | 'error' | 'updating' | 'informing';
+export interface BannerProps extends StyleProps {
+    /** name constant of the icon to display */
+    type: BannerType;
+    /** Banner contents */
+    children?: React.ReactNode;
+    /** optional handler to show close button/clear alert  */
+    onCloseClick?: (() => void) | React.MouseEventHandler<HTMLButtonElement>;
+    /** Override the default Alert Icon */
+    icon?: IconProps;
+    /** some banner onCloseClicks fire events, this allows a spinner after click but before event finishes */
+    isCloseActionLoading?: boolean;
+    /** Override the Exit icon */
+    closeButton?: React.ReactNode;
+    /** Icon margin right for large banners */
+    iconMarginRight?: string;
+    /** Icon margin left for large banners */
+    iconMarginLeft?: string;
+}
+export declare function Banner(props: BannerProps): JSX.Element;

package/lib/molecules/DeckInfoLabel/__tests__/DeckInfoLabel.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,19 @@
+import type { ModuleIconName } from '../../icons';
+import type { StyleProps } from '../../primitives';
+interface DeckLabelProps extends StyleProps {
+    /** deck label to display */
+    deckLabel: string;
+    iconName?: undefined;
+}
+interface HardwareIconProps extends StyleProps {
+    /** hardware icon name */
+    iconName: ModuleIconName | 'stacked';
+    deckLabel?: undefined;
+}
+export type DeckInfoLabelProps = (DeckLabelProps | HardwareIconProps) & {
+    highlight?: boolean;
+    svgSize?: string | number;
+};
+export declare const DeckInfoLabel: import("styled-components").StyledComponent<typeof DeckInfoLabelComponent, any, {}, never>;
+declare function DeckInfoLabelComponent({ deckLabel, iconName, highlight, ...styleProps }: DeckInfoLabelProps): JSX.Element;
+export {};

package/lib/molecules/DeckLabel/__tests__/DeckLabel.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+import type { ModuleModel } from '@opentrons/shared-data';
+export interface DeckLabelProps {
+    text: string;
+    isSelected: boolean;
+    moduleModel?: ModuleModel;
+    maxWidth?: string;
+    labelBorderRadius?: string;
+    isLast?: boolean;
+}
+export declare function DeckLabel({ text, isSelected, labelBorderRadius, moduleModel, maxWidth, isLast, }: DeckLabelProps): JSX.Element;

package/lib/molecules/DropdownMenu/__tests__/DropdownMenu.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+export interface DropdownOption {
+    name: string;
+    value: string;
+    /** optional dropdown option for adding the liquid color icon */
+    liquidColor?: string;
+    disabled?: boolean;
+    tooltipText?: string;
+}
+export type DropdownBorder = 'rounded' | 'neutral';
+export interface DropdownMenuProps {
+    /** dropdown options */
+    filterOptions: DropdownOption[];
+    /** click handler */
+    onClick: (value: string) => void;
+    /** current selected option */
+    currentOption: DropdownOption;
+    /** dropdown */
+    width?: string;
+    /** dropdown style type  */
+    dropdownType?: DropdownBorder;
+    /** dropdown title */
+    title?: string;
+    /** dropdown item caption */
+    caption?: string | null;
+    /** text for tooltip */
+    tooltipText?: string | null;
+    /** html tabindex property */
+    tabIndex?: number;
+    /** optional error */
+    error?: string | null;
+    /** focus handler */
+    onFocus?: React.FocusEventHandler<HTMLButtonElement>;
+    /** blur handler */
+    onBlur?: React.FocusEventHandler<HTMLButtonElement>;
+    /** optional disabled */
+    disabled?: boolean;
+    /** force direction for pd after release this will be fixed and remove */
+    forceDirection?: boolean;
+}
+export declare function DropdownMenu(props: DropdownMenuProps): JSX.Element;

package/lib/molecules/InfoScreen/__tests__/InfoScreen.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,6 @@
+interface InfoScreenProps {
+    content: string;
+    backgroundColor?: string;
+}
+export declare function InfoScreen({ content, backgroundColor, }: InfoScreenProps): JSX.Element;
+export {};

package/lib/molecules/LiquidIcon/__tests__/LiquidIcon.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,9 @@
+type LiquidIconSize = 'small' | 'medium';
+interface LiquidIconProps {
+    color: string;
+    size?: LiquidIconSize;
+    onClick?: () => void;
+    hasError?: boolean;
+}
+export declare function LiquidIcon(props: LiquidIconProps): JSX.Element;
+export {};

package/lib/molecules/Tabs/__tests__/Tabs.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,10 @@
+export interface TabProps {
+    text: string;
+    onClick: () => void;
+    isActive?: boolean;
+    disabled?: boolean;
+}
+export interface TabsProps {
+    tabs: TabProps[];
+}
+export declare function Tabs(props: TabsProps): JSX.Element;

package/lib/molecules/index.d.ts

@@ -1,4 +1,8 @@
-export * from './LocationIcon';
-export * from './RoundTab';
+export * from './Banner';
+export * from './DeckInfoLabel';
+export * from './DeckLabel';
+export * from './DropdownMenu';
+export * from './InfoScreen';
+export * from './LiquidIcon';
 export * from './ParametersTable';
-export * from './ParametersTable/InfoScreen';
+export * from './Tabs';

package/lib/nav/SidePanel.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 export interface SidePanelProps {
     title?: string;
     children?: React.ReactNode;

package/lib/organisms/DeckLabelSet/__tests__/DeckLabelSet.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import type { DeckLabelProps } from '../../molecules/DeckLabel';
+interface DeckLabelSetProps {
+    deckLabels: DeckLabelProps[];
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export declare const DeckLabelSet: React.ForwardRefExoticComponent<DeckLabelSetProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/organisms/EndUserAgreementFooter/__tests__/EndUserAgreementFooter.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export declare function EndUserAgreementFooter(): JSX.Element;

package/lib/organisms/Toolbox/__tests__/Toolbox.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface ToolboxProps {
+    title: JSX.Element;
+    children: React.ReactNode;
+    disableCloseButton?: boolean;
+    width?: string;
+    height?: string;
+    confirmButtonText?: string;
+    onConfirmClick?: () => void;
+    confirmButton?: JSX.Element;
+    onCloseClick?: () => void;
+    closeButton?: JSX.Element;
+    side?: 'left' | 'right';
+    horizontalSide?: 'top' | 'bottom';
+    childrenPadding?: string;
+    subHeader?: JSX.Element | null;
+    secondaryHeaderButton?: JSX.Element;
+    position?: string;
+}
+export declare function Toolbox(props: ToolboxProps): JSX.Element;

package/lib/organisms/index.d.ts

@@ -0,0 +1,3 @@
+export * from './DeckLabelSet';
+export * from './EndUserAgreementFooter';
+export * from './Toolbox';

package/lib/primitives/Btn.d.ts

@@ -1,4 +1,4 @@
-import { StyledComponent } from 'styled-components';
+import type { StyledComponent } from 'styled-components';
 import type { StyleProps } from './types';
 export declare const BUTTON_TYPE_SUBMIT: 'submit';
 export declare const BUTTON_TYPE_RESET: 'reset';

package/lib/structure/Card.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { StyleProps } from '../primitives';
 export interface CardProps extends StyleProps {
     /** Title for card, all cards should receive a title. */

package/lib/structure/LabeledValue.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 export interface LabeledValueProps {
     /** Label */
     label: React.ReactNode;

package/lib/structure/Pill.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { UseHoverTooltipTargetProps } from '../tooltips';
 export interface PillProps {
     /** background color of pill (any CSS color string) */

package/lib/structure/TitleBar.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { ButtonProps } from '../buttons';
 export interface TitleBarProps {
     id?: string;
@@ -12,6 +12,6 @@ export interface TitleBarProps {
     backButtonLabel?: string;
 }
 /**
- * @deprecated Use `InterstitialTitleBar` instead
+ * @deprecated Use 'ModalHeader' instead
  */
 export declare function TitleBar(props: TitleBarProps): JSX.Element;

package/lib/structure/index.d.ts

@@ -1,4 +1,3 @@
-export * from './PageTabs';
 export * from './TitleBar';
 export * from './Card';
 export * from './Splash';