@flows/react-components/dist/library-DvbxGTq_.d.ts

Built-in components for Flows React SDK

/**
 * Properties provided by Flows based on block and block template setup.
 */
interface FlowsProperties {
    /**
     * Unique identifier of the block, useful for stable key during rendering. Keep in mind each workflow version will have a different id for each block.
     */
    id: string;
    /**
     * User defined key for identifying the block.
     */
    key?: string;
    /**
     * Id of the workflow this block belongs to.
     */
    workflowId: string;
    /**
     * Total number of visible tour steps (components) in the current tour. Logic steps (e.g. wait) are not counted.
     */
    tourVisibleStepCount?: number;
    /**
     * 0-based index of the currently visible tour step (component) in the current tour. Logic steps (e.g. wait) are not counted.
     */
    tourVisibleStepIndex?: number;
}
type ComponentProps<T extends Record<string, any> = any> = {
    /**
     * Properties provided by Flows based on block and block template setup.
     */
    __flows: FlowsProperties;
} & T;
type TourComponentProps<T extends Record<string, any> = any> = {
    /**
     * Properties provided by Flows based on block and block template setup.
     */
    __flows: FlowsProperties;
    continue: () => void;
    previous?: () => void;
    cancel: () => void;
} & T;
type StateMemoryTriggerType = "transition" | "manual";
interface StateMemoryTrigger {
    /**
     * Type of the trigger.
     */
    type: StateMemoryTriggerType;
    /**
     * Id of the block that will set the state memory to true when it is exited.
     */
    blockId?: string;
    /**
     * User defined key for identifying the tracked block.
     */
    blockKey?: string;
}
/**
 * The object representing state memory property in your component properties.
 */
interface StateMemory {
    /**
     * Boolean value of the state memory property.
     */
    value: boolean;
    /**
     * Update the state memory property.
     * @param value - new boolean value to set
     */
    setValue: (value: boolean) => void;
    /**
     * Triggers you have setup in the workflow for this state memory property.
     */
    triggers: StateMemoryTrigger[];
}
/**
 * The object representing action property in your component properties.
 */
interface Action {
    /**
     * The label of the element used to trigger the action (eg. button text).
     */
    label: string;
    /**
     * Optional URL to navigate to when the action is triggered.
     * When provided no special handling is done, you need to handle the navigation yourself using a link or similar.
     */
    url?: string;
    /**
     * Optional flag to open the URL in a new tab.
     * When provided no special handling is done, you need to pass this to the element that will handle the navigation.
     */
    openInNew?: boolean;
    /**
     * Function to call when the action is triggered.
     * Currently supports only transition to a specified exit node.
     */
    callAction?: () => Promise<void>;
}

type Placement = "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
type ModalPosition = "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
type ModalSize = "small" | "medium" | "auto";
type ChecklistPosition = "bottom-left" | "bottom-right" | "top-left" | "top-right";
interface TooltipProps {
    title: string;
    body: string;
    primaryButton?: Action;
    secondaryButton?: Action;
    targetElement: string;
    placement?: Placement;
    dismissible: boolean;
    hideOverlay: boolean;
    continue: () => void;
    close: () => void;
}
interface TourTooltipProps {
    title: string;
    body: string;
    primaryButton?: Action;
    secondaryButton?: Action;
    targetElement: string;
    placement?: Placement;
    dismissible: boolean;
    hideOverlay: boolean;
    hideProgress: boolean;
}
interface ModalProps {
    title: string;
    body: string;
    primaryButton?: Action;
    secondaryButton?: Action;
    dismissible: boolean;
    hideOverlay: boolean;
    position?: ModalPosition;
    size?: ModalSize;
    continue: () => void;
    close: () => void;
}
interface TourModalProps {
    title: string;
    body: string;
    primaryButton?: Action;
    secondaryButton?: Action;
    dismissible: boolean;
    hideOverlay: boolean;
    position?: ModalPosition;
    size?: ModalSize;
    hideProgress: boolean;
}
interface HintProps {
    title: string;
    body: string;
    primaryButton?: Action;
    secondaryButton?: Action;
    targetElement: string;
    placement?: Placement;
    offsetX?: number;
    offsetY?: number;
    dismissible: boolean;
    continue: () => void;
    close: () => void;
}
interface TourHintProps {
    title: string;
    body: string;
    primaryButton?: Action;
    secondaryButton?: Action;
    targetElement: string;
    placement?: Placement;
    offsetX?: number;
    offsetY?: number;
    dismissible: boolean;
    hideProgress: boolean;
}
interface CardProps {
    title: string;
    body: string;
    primaryButton?: Action;
    secondaryButton?: Action;
    dismissible: boolean;
    width?: string;
    continue: () => void;
    close: () => void;
}
interface TourCardProps {
    title: string;
    body: string;
    primaryButton?: Action;
    secondaryButton?: Action;
    dismissible: boolean;
    width?: string;
    hideProgress: boolean;
}
interface ChecklistItem {
    title: string;
    description: string;
    primaryButton?: Action;
    secondaryButton?: Action;
    completed: StateMemory;
}
interface FloatingChecklistProps {
    widgetTitle: string;
    popupTitle: string;
    popupDescription: string;
    completedTitle: string;
    completedDescription: string;
    completedButton?: Action;
    items: ChecklistItem[];
    position?: ChecklistPosition;
    defaultOpen: boolean;
    hideOnClick: boolean;
    openOnItemCompleted: boolean;
    skipButton?: Action;
    complete: () => void;
    close: () => void;
}

export type { ComponentProps as C, FloatingChecklistProps as F, HintProps as H, ModalProps as M, TooltipProps as T, CardProps as a, TourComponentProps as b, TourCardProps as c, TourHintProps as d, TourModalProps as e, TourTooltipProps as f };