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

package/lib/hooks/__tests__/usePrevious.test.d.ts

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

package/lib/hooks/__tests__/useScrolling.test.d.ts

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

package/lib/hooks/__tests__/useSwipe.test.d.ts

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

package/lib/hooks/__tests__/useTimeout.test.d.ts

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

package/lib/hooks/__tests__/useToggle.test.d.ts

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

package/lib/hooks/index.d.ts

@@ -0,0 +1,13 @@
+export * from './useConditionalConfirm';
+export * from './useDrag';
+export * from './useIdle';
+export * from './useInterval';
+export * from './useLongPress';
+export * from './useMountEffect';
+export * from './usePrevious';
+export * from './useScrolling';
+export * from './useSelectDeckLocation';
+export * from './useSwipe';
+export * from './useTimeout';
+export * from './useToggle';
+export * from './useMenuHandleClickOutside';

package/lib/hooks/useConditionalConfirm.d.ts

@@ -0,0 +1,41 @@
+/**
+ * useConditionalConfirm is intended for cases where we want to block and defer
+ * a particular user action until the user clicks "ok" in any kind of "are you sure?"
+ * confirmation UI. The arguments passed to the confirm function will be preserved and
+ * used to call handleContinue. Ex. a click event is being deferred by a modal. When the
+ * user confirms, the initial click event passed as an argument will be used as the argument in
+ * the callback.
+ * @param {() => unknown)} handleContinue (the action we may want to require confirmation for)
+ * @param {boolean} shouldBlock (if no confirmation is needed, we will avoid the modal and immediately call handleContinue)
+ * @example
+ * ```js
+ * import { useConditionalConfirm } from '@opentrons/components'
+ *
+ * const ExampleDangerForm = props => {
+ * const {
+ *   confirm,
+ *   showConfirmation,
+ *   cancel,
+ *  } = useConditionalConfirm(props.goAhead, props.dangerIsPresent)
+ *
+ *  return (
+ *   <>
+ *     {showConfirmation && (
+ *       <AreYouSureModal
+ *         handleCancel={cancel}
+ *         handleContinue={confirm}
+ *       />
+ *     )}
+ *     <DangerFormFields />
+ *     <DangerousSubmit onClick={confirm} />
+ *   </>
+ *  )
+ * }
+ * ```
+ */
+export interface UseConditionalConfirmResult<T extends any[]> {
+    confirm: (...args: T) => void;
+    showConfirmation: boolean;
+    cancel: () => unknown;
+}
+export declare const useConditionalConfirm: <T extends any[]>(handleContinue: (...args: T) => any, shouldBlock: boolean) => UseConditionalConfirmResult<T>;

package/lib/hooks/useDrag.d.ts

@@ -0,0 +1,22 @@
+import type { CSSProperties, MutableRefObject } from 'react';
+export interface ElementPosition {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+}
+export interface UseDragResult {
+    ref: MutableRefObject<null>;
+    style: CSSProperties;
+    position: ElementPosition;
+    isEnabled: boolean;
+    enable: () => void;
+    disable: () => void;
+}
+/**
+ * useDrag makes HTMLElement draggable for on-device app
+ * This hook should be used when isOnDevice is true
+ * @param {ElementPosition} (width, height, x, and y, they are HTMLElement's size and the initial position)
+ * @returns {UseDragResult}
+ */
+export declare const useDrag: (position: ElementPosition) => UseDragResult;

package/lib/hooks/useIdle.d.ts

@@ -0,0 +1,11 @@
+/**
+ * React hook to check user events
+ *
+ * @param {number} idleTime (idle time)
+ * @param {object} options (events that the app need to check, initialState: initial state true => idle)
+ * @returns {boolean}
+ */
+export declare function useIdle(idleTime: number, options?: Partial<{
+    events: Array<keyof DocumentEventMap>;
+    initialState: boolean;
+}>): boolean;

package/lib/hooks/useInterval.d.ts

@@ -0,0 +1,11 @@
+/**
+ * React hook to call a function on an interval; copied from:
+ * https://overreacted.io/making-setinterval-declarative-with-react-hooks/
+ *
+ * @template T (type of the input value)
+ * @param {() => unknown} callback (function to call on an interval)
+ * @param {number | null} delay (interval delay, or null to stop interval)
+ * @param {boolean} [immediate=false] (trigger the callback immediately before starting the interval)
+ * @returns {void}
+ */
+export declare function useInterval(callback: () => unknown, delay: number | null, immediate?: boolean): void;

package/lib/hooks/useLongPress.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties, MutableRefObject } from 'react';
+export interface UseLongPressResult {
+    ref: MutableRefObject<null>;
+    style: CSSProperties;
+    isEnabled: boolean;
+    isLongPressed: boolean;
+    isTapped: boolean;
+    setIsLongPressed: (value: boolean) => void;
+    setIsTapped: (value: boolean) => void;
+    enable: () => void;
+    disable: () => void;
+}
+/**
+ * useLongPress provide two actions (tap and long press)
+ * useLongPress recognize 1 sec hold as long press: hold Duration
+ * interactjs recognize "hold" when an element is held down around 600ms(default)
+ * @returns {UseLongPressResult}
+ */
+export declare const useLongPress: () => UseLongPressResult;

package/lib/hooks/useMenuHandleClickOutside.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface MenuHandleClickOutside {
+    menuOverlay: JSX.Element;
+    handleOverflowClick: React.MouseEventHandler<HTMLButtonElement>;
+    showOverflowMenu: boolean;
+    setShowOverflowMenu: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare function useMenuHandleClickOutside(): MenuHandleClickOutside;
+export {};

package/lib/hooks/useMountEffect.d.ts

@@ -0,0 +1,8 @@
+import type { EffectCallback } from 'react';
+/**
+ * React hook to call a function on component mount and unmount
+ *
+ * @param {EffectCallback} callback (function to call on mount that optionally returns a cleanup function to call on unmount)
+ * @returns {void}
+ */
+export declare function useMountEffect(callback: EffectCallback): void;

package/lib/hooks/usePrevious.d.ts

@@ -0,0 +1,9 @@
+/**
+ * React hook to keep track of the previous value of a parameter
+ * https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state
+ *
+ * @template T (type of the input value)
+ * @param {T} value (value to keep track of)
+ * @returns {(T | void)} (previous value or undefined if first render)
+ */
+export declare function usePrevious<T>(value: T): T | undefined;

package/lib/hooks/useScrolling.d.ts

@@ -0,0 +1 @@
+export declare const useScrolling: (node: HTMLElement | null) => boolean;

package/lib/hooks/useSelectDeckLocation/index.d.ts

@@ -0,0 +1,18 @@
+import type { CutoutConfig, DeckDefinition, ModuleLocation, RobotType } from '@opentrons/shared-data';
+export type DeckLocationSelectThemes = 'default' | 'grey';
+export declare function useDeckLocationSelect(robotType: RobotType, theme?: DeckLocationSelectThemes): {
+    DeckLocationSelect: JSX.Element;
+    selectedLocation: ModuleLocation;
+};
+interface DeckLocationSelectProps {
+    deckDef: DeckDefinition;
+    selectedLocation: ModuleLocation;
+    theme?: DeckLocationSelectThemes;
+    setSelectedLocation?: (loc: ModuleLocation) => void;
+    availableSlotNames?: string[];
+    occupiedCutouts?: CutoutConfig[];
+    isThermocycler?: boolean;
+    showTooltipOnDisabled?: boolean;
+}
+export declare function DeckLocationSelect({ deckDef, selectedLocation, setSelectedLocation, availableSlotNames, occupiedCutouts, theme, isThermocycler, showTooltipOnDisabled, }: DeckLocationSelectProps): JSX.Element;
+export {};

package/lib/hooks/useSwipe.d.ts

@@ -0,0 +1,12 @@
+import type { MutableRefObject, CSSProperties } from 'react';
+interface UseSwipeResult {
+    ref: MutableRefObject<null>;
+    style: CSSProperties;
+    isEnabled: boolean;
+    setSwipeType: (value: string) => void;
+    swipeType: string;
+    enable: () => void;
+    disable: () => void;
+}
+export declare const useSwipe: () => UseSwipeResult;
+export {};

package/lib/hooks/useTimeout.d.ts

@@ -0,0 +1,9 @@
+/**
+ * React hook to call a function after a delay; adapted from: useInterval
+ *
+ * @template T (type of the input value)
+ * @param {() => unknown} callback (function to call after timeout)
+ * @param {number | null} delay (timeout delay, or null to disable the timeout)
+ * @returns {void}
+ */
+export declare function useTimeout(callback: () => unknown, delay: number | null): void;

package/lib/hooks/useToggle.d.ts

@@ -0,0 +1,22 @@
+export type UseToggleResult = [boolean, () => void];
+/**
+ * React hook to toggle a boolean value
+ *
+ * @param {boolean} [intialValue=false] (initial toggle value)
+ * @returns {[boolean, () => void]} (value and setValue tuple)
+ *
+ * @example
+ * import * as React from 'react'
+ * import { useToggle } from '@opentrons/components'
+ *
+ * export function ToggleButton() {
+ *   const [enabled, toggleEnabled] = useToggle(true)
+ *
+ *   return (
+ *     <button onClick={toggleEnabled}>
+ *       Setting is {enabled ? 'enabled' : 'disabled'}
+ *     </button>
+ *   )
+ * }
+ */
+export declare function useToggle(initialValue?: boolean): UseToggleResult;

package/lib/icons/Icon.d.ts

@@ -0,0 +1,34 @@
+import type * as React from 'react';
+import { ICON_DATA_BY_NAME } from './icon-data';
+import type { SvgProps } from '../primitives';
+export type IconName = keyof typeof ICON_DATA_BY_NAME;
+export interface IconProps extends SvgProps {
+    /** name constant of the icon to display */
+    name: IconName;
+    /** classes to apply */
+    className?: string;
+    /** spin the icon with a CSS animation */
+    spin?: boolean;
+    /** x attribute as a number or string (for nesting inside another SVG) */
+    x?: number | string;
+    /** y attribute as a number or string (for nesting inside another SVG) */
+    y?: number | string;
+    /** width as a number or string (for nesting inside another SVG) */
+    svgHeight?: number | string;
+    /** height as a number or string (for nesting inside another SVG) */
+    svgWidth?: number | string;
+    /** inline style passed into the icon svg */
+    style?: Record<string, string | number>;
+    /** optional children */
+    children?: React.ReactNode;
+    id?: string;
+}
+/**
+ * Inline SVG icon component
+ *
+ * If you need access to the IconName type, you can:
+ * ```js
+ * import type { IconName } from '@opentrons/components'
+ * ```
+ */
+export declare function Icon(props: IconProps): JSX.Element | null;

package/lib/icons/ModuleIcon.d.ts

@@ -0,0 +1,11 @@
+import type { ModuleType } from '@opentrons/shared-data';
+import type { StyleProps } from '../primitives/types';
+export type ModuleIconName = 'ot-magnet-v2' | 'ot-heater-shaker' | 'ot-temperature-v2' | 'ot-magnet-v2' | 'ot-thermocycler' | 'ot-absorbance';
+export declare const MODULE_ICON_NAME_BY_TYPE: {
+    [type in ModuleType]: ModuleIconName;
+};
+interface ModuleIconProps extends StyleProps {
+    moduleType: ModuleType;
+}
+export declare function ModuleIcon(props: ModuleIconProps): JSX.Element;
+export {};

package/lib/icons/NotificationIcon.d.ts

@@ -0,0 +1,12 @@
+import type { IconProps, IconName } from './Icon';
+export interface NotificationIconProps extends IconProps {
+    /** name constant of the optional notifcation icon to display */
+    childName: IconName | null;
+    /** color to apply to notification icon (defaults to COLOR_WARNING) */
+    childColor?: string;
+}
+/**
+ * Inline SVG icon component with additional nested notification icon. Takes
+ * all the same props as Icon in addition to the ones listed above.
+ */
+export declare function NotificationIcon(props: NotificationIconProps): JSX.Element;

package/lib/icons/icon-data.d.ts

@@ -0,0 +1,4 @@
+export declare const ICON_DATA_BY_NAME: Record<string, {
+    path: string;
+    viewBox: string;
+}>;

package/lib/icons/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Icon';
+export * from './NotificationIcon';
+export * from './ModuleIcon';
+export * from './icon-data';

package/lib/images/index.d.ts

@@ -0,0 +1 @@
+export * from './labware';

package/lib/images/labware/index.d.ts

@@ -0,0 +1 @@
+export * from './measurement-guide';

package/lib/images/labware/measurement-guide/index.d.ts

@@ -0,0 +1,13 @@
+export interface DiagramProps {
+    guideType?: string;
+    category?: string;
+    insertCategory?: string;
+    shape?: string;
+    wellBottomShape?: string;
+    guideVisible?: boolean;
+    irregular?: boolean;
+    isMultiRow?: boolean;
+}
+export declare function getFootprintDiagram(props: DiagramProps): string[];
+export declare function getSpacingDiagram(props: DiagramProps): string[];
+export declare function getMeasurementDiagram(props: DiagramProps): string[];

package/lib/index.d.ts

@@ -0,0 +1,26 @@
+export * from './hooks';
+export * from './utils';
+export * from './alerts';
+export * from './buttons';
+export * from './controls';
+export * from './hardware-sim';
+export * from './legacy-hardware-sim';
+export * from './forms';
+export * from './icons';
+export * from './images';
+export * from './instrument';
+export * from './interaction-enhancers';
+export * from './lists';
+export * from './modals';
+export * from './nav';
+export * from './primitives';
+export * from './slotmap';
+export * from './structure';
+export * from './tooltips';
+export * from './organisms';
+export * from './styles';
+export * from './ui-style-constants';
+export * from './helix-design-system';
+export * from './robot-types';
+export * from './molecules';
+export * from './atoms';