@hitachivantara/uikit-react-lab/dist/types/index.d.ts

Contributed React components for the NEXT UI Kit.

import { Align } from 'reactflow';
import { AnimationEventHandler } from 'react';
import { AriaRole } from 'react';
import { BackgroundProps } from 'reactflow';
import { ClipboardEventHandler } from 'react';
import { CompositionEventHandler } from 'react';
import { Context } from 'react';
import { ControlProps } from 'reactflow';
import { CoordinateExtent } from 'reactflow';
import { CSSProperties } from 'react';
import { Dispatch } from 'react';
import { DndContextProps } from '@dnd-kit/core';
import { DragEndEvent } from '@dnd-kit/core';
import { DragEventHandler } from 'react';
import { DragOverlayProps } from '@dnd-kit/core';
import { Edge } from 'reactflow';
import { ExtractNames } from '@hitachivantara/uikit-react-core';
import { FocusEventHandler } from 'react';
import { FormEventHandler } from 'react';
import { GetMiniMapNodeAttribute } from 'reactflow';
import { HTMLAttributes } from 'react';
import { HvActionGeneric } from '@hitachivantara/uikit-react-core';
import { HvActionsGenericProps } from '@hitachivantara/uikit-react-core';
import { HvBaseProps } from '@hitachivantara/uikit-react-core';
import { HvBreakpoints } from '@hitachivantara/uikit-react-core';
import { HvButtonBaseProps } from '@hitachivantara/uikit-react-core';
import { HvButtonProps } from '@hitachivantara/uikit-react-core';
import { HvColorAny } from '@hitachivantara/uikit-styles';
import { HvDialogProps } from '@hitachivantara/uikit-react-core';
import { HvDrawerProps } from '@hitachivantara/uikit-react-core';
import { HvEmptyStateProps } from '@hitachivantara/uikit-react-core';
import { HvFlowContextValue } from '../FlowContext';
import { HvFlowNodeMeta as HvFlowNodeMeta_2 } from '..';
import { HvSize } from '@hitachivantara/uikit-react-core';
import { HvSliderProps } from '@hitachivantara/uikit-react-core';
import { HvTypographyVariants } from '@hitachivantara/uikit-react-core';
import { InputEventHandler } from 'react';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { KeyboardEventHandler } from 'react';
import { MiniMapProps } from 'reactflow';
import { MouseEventHandler } from 'react';
import { Node as Node_2 } from 'reactflow';
import { NodeProps } from 'reactflow';
import { NodeToolbarProps } from 'reactflow';
import { PanelPosition } from 'reactflow';
import { PointerEventHandler } from 'react';
import { Position } from 'reactflow';
import { ReactEventHandler } from 'react';
import { ReactFlowInstance } from 'reactflow';
import { ReactFlowProps } from 'reactflow';
import { ReactGridLayoutProps } from 'react-grid-layout';
import { ReactNode } from 'react';
import { ResponsiveProps } from 'react-grid-layout';
import { SetStateAction } from 'react';
import { SyntheticEvent } from 'react';
import { TouchEventHandler } from 'react';
import { TransitionEventHandler } from 'react';
import { UIEventHandler } from 'react';
import { WheelEventHandler } from 'react';

export declare const bladeClasses: {
    root: string;
    expanded: string;
    fullWidth: string;
    heading: string;
    button: string;
    textOnlyLabel: string;
    container: string;
    disabled: string;
};

export declare const bladesClasses: {
    root: string;
};

export declare const dashboardClasses: {
    root: string;
};

export declare const DEFAULT_LABELS: {
    outputsTitle: string;
    inputsTitle: string;
    deleteActionLabel: string;
    duplicateActionLabel: string;
};

declare const DEFAULT_LABELS_2: {
    fitView: string;
    zoomIn: string;
    zoomOut: string;
    interactive: string;
};

declare const DEFAULT_LABELS_3: {
    itemAriaRoleDescription: string;
    expandGroupButtonAriaLabel: string;
    searchPlaceholder: string;
    searchAriaLabel: string;
};

declare const DEFAULT_LABELS_4: {
    deleteActionLabel: string;
    duplicateActionLabel: string;
};

declare const DEFAULT_LABELS_5: {
    collapseLabel: string;
    expandLabel: string;
};

declare const DEFAULT_LABELS_6: {
    emptyMessage: string;
    dialogTitle: string;
    dialogSubtitle: string;
    dialogApply: string;
    dialogCancel: string;
};

export declare const flowBaseNodeClasses: {
    root: string;
    headerContainer: string;
    titleContainer: string;
    title: string;
    inputsTitleContainer: string;
    outputsTitleContainer: string;
    contentContainer: string;
    inputsContainer: string;
    outputsContainer: string;
    inputGroupContainer: string;
    outputGroupContainer: string;
    inputContainer: string;
    outputContainer: string;
    handle: string;
    handleConnected: string;
    mandatory: string;
    footerContainer: string;
};

export declare const flowClasses: {
    root: string;
};

export declare const flowMinimapClasses: {
    root: string;
};

export declare const flowNodeClasses: {
    mandatory: string;
    root: string;
    title: string;
    footerContainer: string;
    titleContainer: string;
    inputContainer: string;
    handle: string;
    headerContainer: string;
    inputsTitleContainer: string;
    outputsTitleContainer: string;
    contentContainer: string;
    inputsContainer: string;
    outputsContainer: string;
    inputGroupContainer: string;
    outputGroupContainer: string;
    outputContainer: string;
    handleConnected: string;
    subtitleContainer: string;
    subtitle: string;
    inlineEditRoot: string;
    inlineEditButton: string;
    actions: string;
    actionsButton: string;
    paramsContainer: string;
};

export declare const flowSidebarClasses: {
    drawerPaper: string;
    titleContainer: string;
    contentContainer: string;
    description: string;
    searchRoot: string;
    groupsContainer: string;
};

/**
 * A blade is a design element that expands horizontally to reveal information, similar to an accordion.
 *
 * It is usually stacked horizontally with other blades and works best when used within a flex container.
 * The `HvBlades` component is recommended for this purpose, as it also provides better management of the
 * blades' expanded state.
 */
export declare const HvBlade: (props: HvBladeProps) => JSX_2.Element;

export declare type HvBladeClasses = ExtractNames<typeof useClasses>;

export declare interface HvBladeProps extends HvBaseProps<HTMLDivElement, "onChange" | "children"> {
    /**
     * The content that will be rendered within the blade.
     */
    children: React.ReactNode;
    /**
     * The content of the blade's button.
     *
     * If a render function is provided, it will be called with the expanded state as an argument.
     */
    label?: React.ReactNode | ((expanded: boolean) => React.ReactNode);
    /**
     * Typography variant for the blade's button label.
     */
    labelVariant?: HvTypographyVariants;
    /**
     * Heading Level to apply to blade button.
     *
     * If 'undefined', the button will not have a header wrapper.
     */
    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
    /**
     * Indicates whether the blade is expanded or not.
     *
     * When defined the expanded state becomes controlled.
     *
     * @default undefined
     */
    expanded?: boolean;
    /**
     * Specifies the initial expanded state of the blade when it is uncontrolled.
     */
    defaultExpanded?: boolean;
    /**
     * Callback function triggered when the blade's button is pressed.
     * It receives the event and the new expanded state as arguments.
     *
     * If the blade is uncontrolled, this new state will be effective.
     * If the blade is controlled, it is up to the parent component to manage this state.
     *
     * @param {SyntheticEvent} event The event source of the callback.
     * @param {boolean} value The new value.
     */
    onChange?: (event: React.SyntheticEvent, value: boolean) => void;
    /**
     * Specifies whether the blade is disabled. If true, the blade cannot be interacted with.
     */
    disabled?: boolean;
    /**
     * If true, the blade will take up the maximum width of the container when expanded.
     */
    fullWidth?: boolean;
    /**
     * Props to be passed to the button that toggles the blade's expanded state.
     * This can be used to further customize the appearance or behavior of the blade's button,
     * e.g. to set the aria-label attribute.
     */
    buttonProps?: HTMLAttributes<HTMLDivElement>;
    /**
     * Props to be passed to the container div that holds the blade's children.
     * This can be used to further customize the appearance or behavior of the blade's content area.
     */
    containerProps?: HTMLAttributes<HTMLDivElement>;
    /**
     * A Jss Object used to override or extend the styles applied.
     */
    classes?: HvBladeClasses;
}

/**
 * `HvBlades` is a component that groups multiple `HvBlade` components.
 *
 * It allows for better control over the expanded state of blades, suitable for both
 * controlled and uncontrolled scenarios.
 */
export declare const HvBlades: (props: HvBladesProps) => JSX_2.Element;

export declare type HvBladesClasses = ExtractNames<typeof useClasses_2>;

export declare interface HvBladesProps extends HvBaseProps<HTMLDivElement, "onChange" | "children"> {
    /**
     * Array of indices representing the expanded state of each blade.
     *
     * When defined, the expanded state of the blades becomes controlled.
     */
    expanded?: number[];
    /**
     * Initial expanded state of the blades when in an uncontrolled state.
     *
     * It's an array of indices representing the blades that should be initially expanded.
     */
    defaultExpanded?: number[];
    /**
     * If true, ensures that only one blade can be expanded at a time.
     */
    atMostOneExpanded?: boolean;
    /**
     * If true, ensures that at least one blade is always expanded.
     */
    atLeastOneExpanded?: boolean;
    /**
     * If true, the blades will take up the full width of the container by default.
     */
    fullWidthBlades?: boolean;
    /**
     * Callback function triggered when the expanded state of any blade changes.
     * It receives the event and the new array of expanded indices as arguments.
     *
     * If uncontrolled, this new state will be effective.
     * If controlled, it is up to the parent component to manage this state.
     *
     * @param {SyntheticEvent} event The event source of the callback.
     * @param {number[]} value Array of indices of the blades that are expanded.
     */
    onChange?: (event: SyntheticEvent, value: number[]) => void;
    /**
     * The blades to be rendered within the group.
     * Must be instances of `HvBlade`, otherwise the behavior is undefined and will most likely break.
     */
    children: React.ReactNode;
    /**
     * A Jss Object used to override or extend the styles applied.
     */
    classes?: HvBladesClasses;
}

/**
 * A Dashboard grid layout component, based on `react-grid-layout`.
 * The children elements are grid items and must be `key`ed.
 *
 * @see https://github.com/react-grid-layout/react-grid-layout?tab=readme-ov-file#grid-layout-props
 *
 * DISCLAIMER: This component is a work in progress and there might be breaking changes.
 */
export declare const HvDashboard: (props: HvDashboardProps) => JSX_2.Element;

export declare type HvDashboardClasses = ExtractNames<typeof useClasses_3>;

/** @deprecated no longer supported. Instead create a custom node with `HvDialog` + `HvDashboard` */
export declare const HvDashboardNode: (props: HvDashboardNodeProps) => JSX_2.Element;

export declare type HvDashboardNodeClasses = ExtractNames<typeof useClasses_9>;

export declare const hvDashboardNodeClasses: {
    mandatory: string;
    root: string;
    title: string;
    actions: string;
    footerContainer: string;
    titleContainer: string;
    inputContainer: string;
    handle: string;
    headerContainer: string;
    inputsTitleContainer: string;
    outputsTitleContainer: string;
    contentContainer: string;
    inputsContainer: string;
    outputsContainer: string;
    inputGroupContainer: string;
    outputGroupContainer: string;
    outputContainer: string;
    handleConnected: string;
    subtitle: string;
    subtitleContainer: string;
    inlineEditRoot: string;
    inlineEditButton: string;
    actionsButton: string;
    paramsContainer: string;
    empty: string;
};

export declare interface HvDashboardNodeProps extends HvFlowNodeProps, Pick<HvDialogProps, "open" | "onClose">, Pick<HvDashboardProps, "layout"> {
    classes?: HvDashboardNodeClasses;
    labels?: HvFlowNodeProps["labels"] & Partial<typeof DEFAULT_LABELS_6>;
    previewItems?: React.ReactNode;
    onApply?: () => void;
    onCancel?: () => void;
    dashboardProps?: Omit<HvDashboardProps, "children">;
    dialogProps?: HvDialogProps;
}

export declare interface HvDashboardProps extends Omit<ResponsiveProps, "cols"> {
    /** Dashboard items. Each node must be `key`'ed  */
    children: React.ReactNode;
    /** An object used to override or extend the styles applied. */
    classes?: HvDashboardClasses;
    /**
     * Layout is an array of object with the format:
     *
     * `{i: string, x: number, y: number, w: number, h: number}`
     *
     * The `i` must match the key used on each item component.
     */
    layout?: ReactGridLayoutProps["layout"];
    /** Number of grid columns or an object of breakpoint -> #columns */
    cols?: number | ResponsiveProps["cols"];
}

declare interface HvDroppableFlowProps<NodeType extends string | undefined = string | undefined, NodeData = any> extends Omit<ReactFlowProps, "nodes" | "edges" | "nodeTypes"> {
    /** Flow content: background, controls, and minimap. */
    children?: React.ReactNode;
    /** Flow nodes types. */
    nodeTypes?: HvFlowNodeTypes<NodeData>;
    /** Flow nodes. */
    nodes?: Node_2<NodeData, NodeType>[];
    /** Flow edges. */
    edges?: Edge[];
    /** A Jss Object used to override or extend the styles applied to the component. */
    classes?: HvFlowClasses;
    /** Callback called when the flow changes. Returns the updated nodes and edges. */
    onFlowChange?: (nodes: Node_2<NodeData, NodeType>[], edges: Edge[]) => void;
    /**
     * Callback called when a node is dropped in the flow.
     *
     * This callback should be used to override the custom UI Kit drop event.
     * Thus, when defined, the user is responsible for adding nodes to the flow.
     *
     * This callback is called when `HvFlowSidebar` is used or a custom sidebar was created using Dnd Kit.
     * When a custom sidebar was created using the native HTML drag and drop API, refer to the `onDrop` callback.
     *
     * Returns the event and the node to be added to the flow.
     */
    onDndDrop?: (event: DragEndEvent, node: Node_2) => void;
}

/**
 * Flow component to build interactive node-based UIs.
 *
 * This implementation leverages [React Flow](https://reactflow.dev).
 * The drag and drop functionality leverages [Dnd Kit](https://docs.dndkit.com)
 *
 * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/lab-flow-usage--docs) to learn more about this component.
 *
 * DISCLAIMER: This component is a work in progress and there might be breaking changes.
 */
export declare const HvFlow: ({ nodeGroups, sidebar, defaultActions, dndContextProps, ...others }: HvFlowProps) => JSX_2.Element;

export declare const HvFlowBackground: ({ color, ...others }: HvFlowBackgroundProps) => JSX_2.Element;

export declare interface HvFlowBackgroundProps extends Omit<BackgroundProps, "color"> {
    /** Color for the background dots. Defaults to `secondary`. */
    color?: HvColorAny;
}

export declare const HvFlowBaseNode: ({ id, title: titleProp, headerItems, icon: iconProp, color: colorProp, inputs: inputsProp, outputs: outputsProp, nodeActions: nodeActionsProp, footer, classes: classesProp, labels: labelsProp, className, children, }: HvFlowBaseNodeProps<unknown>) => JSX_2.Element | null;

export declare type HvFlowBaseNodeClasses = ExtractNames<typeof useClasses_7>;

export declare interface HvFlowBaseNodeProps<T = any> extends Omit<HvBaseProps, "id" | "color">, Omit<HvUseNodeParams, "id">, NodeProps<T> {
    /** Header items */
    headerItems?: React.ReactNode;
    /** The content of the node footer */
    footer?: React.ReactNode;
    /** Labels used on the node. */
    labels?: Partial<typeof DEFAULT_LABELS>;
    /** A Jss Object used to override or extend the styles applied to the component. */
    classes?: HvFlowBaseNodeClasses;
}

export declare type HvFlowBuiltInAction = "delete" | "duplicate";

export declare type HvFlowBuiltInActions = Omit<HvFlowNodeAction, "id" | "callback"> & {
    id: HvFlowBuiltInAction;
};

export declare type HvFlowClasses = ExtractNames<typeof useClasses_4>;

export declare const HvFlowControls: ({ onZoomIn: onZoomInProp, onZoomOut: onZoomOutProp, onFitView: onFitViewProp, labels: labelsProps, hideInteractive, hideFitView, hideZoom, position, orientation, onInteractiveChange, fitViewOptions, children, ...others }: HvFlowControlsProps) => JSX_2.Element;

export declare type HvFlowControlsPosition = PanelPosition;

export declare interface HvFlowControlsProps extends Omit<ControlProps, "position" | "showFitView" | "showInteractive" | "showZoom"> {
    /** Controls position. Defaults to `bottom-center`. */
    position?: HvFlowControlsPosition;
    /** Controls orientation. Defaults to `horizontal`. */
    orientation?: "vertical" | "horizontal";
    /** Labels used on the controls buttons. */
    labels?: Partial<typeof DEFAULT_LABELS_2>;
    /** Whether to hide the zoom controls. */
    hideZoom?: boolean;
    /** Whether to hide the fit view controls. */
    hideFitView?: boolean;
    /** Whether to hide the interactive controls. */
    hideInteractive?: boolean;
}

export declare const HvFlowEmpty: ({ className, ...others }: HvFlowEmptyProps) => JSX_2.Element | null;

export declare interface HvFlowEmptyProps extends HvEmptyStateProps {
}

export declare interface HvFlowGroupItem<NodeData = any> extends Pick<HvFlowNodeProps, "params" | "subtitle"> {
    /** The node identifier registered in `nodeTypes` */
    nodeType: string;
    label: string;
    data?: NodeData;
}

export declare type HvFlowInstance<NodeData = any, EdgeData = any> = ReactFlowInstance<NodeData, EdgeData>;

export declare const HvFlowMinimap: ({ nodeColor, maskColor, maskStrokeColor, nodeStrokeColor, classes: classesProp, className, ...others }: HvFlowMinimapProps) => JSX_2.Element;

export declare type HvFlowMinimapClasses = ExtractNames<typeof useClasses_5>;

export declare interface HvFlowMinimapProps<NodeData = any> extends Omit<MiniMapProps<NodeData>, "nodeColor" | "nodeStrokeColor" | "maskColor" | "maskStrokeColor"> {
    /** Node color. */
    nodeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;
    /** Node stroke color. */
    nodeStrokeColor?: HvColorAny | GetMiniMapNodeAttribute<NodeData>;
    /** Mask color. */
    maskColor?: HvColorAny;
    /** Mask stroke color. */
    maskStrokeColor?: HvColorAny;
    /** A Jss Object used to override or extend the styles applied to the component. */
    classes?: HvFlowMinimapClasses;
}

export declare const HvFlowNode: ({ id, type, headerItems, actions, actionCallback, onAction, maxVisibleActions, expanded, actionsIconOnly, params, classes: classesProp, labels: labelsProps, children, expandParamsButtonProps, disableInlineEdit, title: titleProp, subtitle: subtitleProp, description, groupId, color: colorProp, icon: iconProp, ...props }: HvFlowNodeProps<unknown>) => JSX_2.Element;

export declare interface HvFlowNodeAction extends HvActionGeneric {
    callback?: (node: Node_2) => void;
}

export declare type HvFlowNodeClasses = ExtractNames<typeof useClasses_8>;

/** HvFlowNode component type. @extends React.FC */
export declare interface HvFlowNodeFC<NodeData = any> extends React.FC<NodeProps<NodeData>> {
}

/** Node groups */
export declare interface HvFlowNodeGroup {
    label: string;
    description?: string;
    color?: HvColorAny;
    icon?: React.ReactNode;
    items?: HvFlowGroupItem[];
}

export declare type HvFlowNodeGroups<GroupId extends keyof any = string> = Record<GroupId, HvFlowNodeGroup>;

export declare interface HvFlowNodeInput {
    id?: string;
    label: React.ReactNode;
    isMandatory?: boolean;
    accepts?: string[];
    maxConnections?: number;
}

export declare interface HvFlowNodeInputGroup {
    label: React.ReactNode;
    inputs: HvFlowNodeInput[];
}

export declare interface HvFlowNodeMeta {
    label: string;
    inputs?: (HvFlowNodeInput | HvFlowNodeInputGroup)[];
    outputs?: (HvFlowNodeOutput | HvFlowNodeOutputGroup)[];
}

export declare type HvFlowNodeMetaRegistry = Record<string, HvFlowNodeMeta>;

export declare interface HvFlowNodeOutput {
    id?: string;
    label: React.ReactNode;
    isMandatory?: boolean;
    provides?: string;
    maxConnections?: number;
}

export declare interface HvFlowNodeOutputGroup {
    label: React.ReactNode;
    outputs: HvFlowNodeOutput[];
}

export declare type HvFlowNodeParam = HvFlowNodeSelectParam | HvFlowNodeTextParam | HvFlowNodeSliderParam;

export declare interface HvFlowNodeProps<T = any> extends HvFlowBaseNodeProps<T> {
    /** Node description. */
    description?: string;
    /** Node actions. */
    actions?: HvActionsGenericProps["actions"];
    /**
     * Node action callback.
     *
     * @deprecated Use `onAction` instead.
     * */
    actionCallback?: HvActionsGenericProps["actionsCallback"];
    /** Node action callback. */
    onAction?: HvActionsGenericProps["onAction"];
    /** Whether the actions should be all icon buttons when visible. @default true */
    actionsIconOnly?: HvActionsGenericProps["iconOnly"];
    /** Node maximum number of actions visible. */
    maxVisibleActions?: HvActionsGenericProps["maxVisibleActions"];
    /** Node subtitle - this is typically the node "name" */
    subtitle?: string;
    /** Node group ID */
    groupId?: string;
    /** Node expanded */
    expanded?: boolean;
    /** Node parameters */
    params?: HvFlowNodeParam[];
    /** Props to be passed to the expand parameters button. */
    expandParamsButtonProps?: HvButtonProps;
    /** Labels used on the node. */
    labels?: HvFlowBaseNodeProps["labels"] & Partial<typeof DEFAULT_LABELS_5>;
    /** A Jss Object used to override or extend the styles applied to the component. */
    classes?: HvFlowNodeClasses;
    /** Remove the ability to customize the label of the Node */
    disableInlineEdit?: boolean;
}

export declare interface HvFlowNodeSelectParam extends HvFlowNodeSharedParam {
    type: "select";
    multiple?: boolean;
    options?: string[] | {
        id: string;
        label: string;
    }[];
}

export declare interface HvFlowNodeSharedParam {
    id: string;
    label: string;
}

export declare interface HvFlowNodeSliderParam extends HvFlowNodeSharedParam, Omit<HvSliderProps, keyof HvFlowNodeSharedParam> {
    type: "slider";
}

export declare interface HvFlowNodeTextParam extends HvFlowNodeSharedParam {
    type: "text";
}

export declare type HvFlowNodeTypes<NodeData = any> = Record<string, HvFlowNodeFC<NodeData>>;

export declare interface HvFlowProps<NodeGroups extends keyof any = string, NodeType extends string | undefined = string | undefined, NodeData = any> extends HvDroppableFlowProps<NodeType, NodeData> {
    /** Flow nodes groups. */
    nodeGroups?: HvFlowNodeGroups<NodeGroups>;
    /** Flow sidebar. */
    sidebar?: React.ReactNode;
    /** Flow default actions. */
    defaultActions?: HvFlowNodeAction[];
    /**
     * Dnd Kit context props. This should be used for accessibility purposes.
     *
     * More information can be found on the [Dnd Kit documentation](https://docs.dndkit.com/guides/accessibility)
     */
    dndContextProps?: Pick<DndContextProps, "accessibility">;
}

export declare const HvFlowSidebar: ({ id, title, description, anchor, buttonTitle, flatten, classes: classesProp, labels: labelsProps, dragOverlayProps, ...others }: HvFlowSidebarProps) => JSX_2.Element;

export declare type HvFlowSidebarClasses = ExtractNames<typeof useClasses_6>;

export declare interface HvFlowSidebarProps extends Omit<HvDrawerProps, "classes" | "title"> {
    /** Sidebar title. */
    title?: string;
    /** Sidebar description. */
    description?: string;
    /** Flatten sidebar items */
    flatten?: boolean;
    /** A Jss Object used to override or extend the styles applied to the component. */
    classes?: HvFlowSidebarClasses;
    /** Labels used on the sidebar. */
    labels?: Partial<typeof DEFAULT_LABELS_3>;
    /**
     * Dnd Kit drag overlay props for customization.
     *
     * More information can be found in the [Dnd Kit documentation](https://docs.dndkit.com/api-documentation/draggable/drag-overlay).
     */
    dragOverlayProps?: DragOverlayProps;
}

declare type HvStepClasses = ExtractNames<typeof useClasses_11>;

/**
 * Navigation page with steps.
 *
 * You need to define the `steps` displayed on the component so that itself can be drawn on the UI.
 * On each step, you need to define a `state` - 'Pending', 'Failed', 'Completed', 'Current', 'Disabled' -
 * and a `title` to be shown as a tooltip or a text above of the step. You can also defined `className`, `separatorClassName`, and `titleClassName` to override the default styles.
 *
 * If the step component has titles, each one will have 215px of width by default.
 */
export declare const HvStepNavigation: ({ className, classes: classesProp, width, steps, stepSize, showTitles, type, "aria-label": ariaLabel, ...others }: HvStepNavigationProps) => JSX_2.Element;

export declare type HvStepNavigationClasses = ExtractNames<typeof useClasses_10>;

export declare interface HvStepNavigationProps extends HvBaseProps {
    /** Type of step navigation. */
    type?: "Simple" | "Default";
    /** Steps to show on the component. */
    steps: Array<Pick<HvStepProps, "state" | "title" | "onClick" | "className" | "disabled"> & {
        /** Class names to override styles on the separator component after the step. */
        separatorClassName?: string;
        /** Class names to override styles on the title component above the step. */
        titleClassName?: string;
    }>;
    /** Sets one of the standard sizes of the steps. @default useWidth()  */
    stepSize?: "xs" | "sm" | "md" | "lg" | "xl";
    /**
     * Width of the component element on each breakpoint screen resolution.
     * If undefined and the step component has no title, the width of the separator element will be 100px.
     * */
    width?: {
        [breakpoint in HvBreakpoints]?: number;
    };
    /** Defines either show a title or only a tooltip on each step component. */
    showTitles?: boolean;
    /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */
    classes?: HvStepNavigationClasses;
}

declare interface HvStepProps extends Pick<HvButtonBaseProps, "onClick">, Omit<HvBaseProps, "onClick"> {
    /** A Jss Object used to override or extend the styles applied to the empty state StepNavigation. */
    classes?: HvStepClasses;
    /** State of the step. Values = {"Pending", "Failed", "Completed", "Current", "Disabled", "Enabled"} */
    state: "Pending" | "Failed" | "Completed" | "Current" | "Disabled" | "Enabled";
    /** Title of the step. */
    title: string;
    /** Sets one of the standard sizes of the step */
    size?: HvSize;
    /** Number of the step. */
    number?: number;
    /**
     * Define if a step is disabled/enabled.
     * If this property is not defined and the step is on state "Disabled", the step component will be disabled
     */
    disabled?: boolean;
}

export declare interface HvUseNodeParams {
    id: string;
    /** Node group ID */
    groupId?: string;
    title?: string;
    subtitle?: string;
    icon?: React.ReactNode;
    color?: HvColorAny;
    /** Node inputs */
    inputs?: (HvFlowNodeInput | HvFlowNodeInputGroup)[];
    /** Node outputs */
    outputs?: (HvFlowNodeOutput | HvFlowNodeOutputGroup)[];
    /** Node actions */
    nodeActions?: HvFlowNodeAction[];
    /** Labels used on the default actions. */
    labels?: Partial<typeof DEFAULT_LABELS_4>;
    /** Props for the NodeToolbar Component */
    nodeToolbarProps?: NodeToolbarProps;
}

export declare const HvWizard: ({ className, children, onClose, handleSubmit, title, open, skippable, loading, hasSummary, summaryContent, labels, fixedHeight, customStep, classes: classesProp, ...others }: HvWizardProps) => JSX_2.Element;

export declare const HvWizardActions: ({ classes: classesProp, handleClose, handleSubmit, loading, skippable, labels, handleBeforeNext, handleBeforePrevious, }: HvWizardActionsProps) => JSX_2.Element;

export declare type HvWizardActionsClasses = ExtractNames<typeof useClasses_13>;

export declare interface HvWizardActionsProps extends HvBaseProps {
    /** Function to handle the cancel button. */
    handleClose: (event: React.MouseEvent<HTMLButtonElement>) => void;
    /** Function to handle the submit button. Also sends the current context state. */
    handleSubmit: (context: any) => void;
    /** An object containing all the labels for the wizard actions component. */
    labels?: {
        /** Cancel button label. */
        cancel?: string | React.ReactNode;
        /** Skip button label. */
        skip?: string | React.ReactNode;
        /** Previous button label. */
        previous?: string | React.ReactNode;
        /** Next button label. */
        next?: string | React.ReactNode;
        /** Submit button label. */
        submit?: string | React.ReactNode;
    };
    /** Whether the submit button is disabled. */
    loading?: boolean;
    /** Enables the skip button. */
    skippable?: boolean;
    /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */
    classes?: HvWizardActionsClasses;
    /** Function executed instead of default go to next page */
    handleBeforeNext?: () => void;
    /** Function executed instead of default go to previous page */
    handleBeforePrevious?: () => void;
}

export declare type HvWizardClasses = ExtractNames<typeof useClasses_12>;

export declare const HvWizardContainer: (props: HvWizardContainerProps) => JSX_2.Element;

export declare type HvWizardContainerClasses = ExtractNames<typeof useClasses_15>;

export declare interface HvWizardContainerProps extends Omit<HvBaseProps, "onClose">, Pick<HvDialogProps, "maxWidth" | "fullWidth"> {
    /** Current state of the Wizard. */
    open: boolean;
    /** Function executed on close. */
    handleClose: HvDialogProps["onClose"];
    /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */
    classes?: HvWizardContainerClasses;
}

export declare const HvWizardContent: ({ classes: classesProp, fixedHeight, loading, children, summaryContent, }: HvWizardContentProps) => JSX_2.Element;

export declare type HvWizardContentClasses = ExtractNames<typeof useClasses_16>;

export declare interface HvWizardContentProps extends HvBaseProps {
    /** Forces minimum height to the component. */
    fixedHeight?: boolean;
    /** Whether the loading animation is shown. */
    loading?: boolean;
    /** The content of the summary. */
    summaryContent?: React.ReactNode;
    /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */
    classes?: HvWizardContentClasses;
}

export declare const HvWizardContext: Context<HvWizardContextProp>;

declare type HvWizardContextProp = {
    context: HvWizardTabs;
    setContext: React.Dispatch<React.SetStateAction<HvWizardTabs>>;
    summary: boolean;
    setSummary: React.Dispatch<React.SetStateAction<boolean>>;
    tab: number;
    setTab: Dispatch<SetStateAction<number>>;
};

export declare interface HvWizardProps extends HvBaseProps, Pick<HvDialogProps, "maxWidth" | "fullWidth"> {
    /** Current state of the Wizard. */
    open: boolean;
    /** Function executed on close. */
    onClose: (event: React.MouseEvent<HTMLButtonElement> | {}, reason?: "escapeKeyDown" | "backdropClick") => void;
    /** Function executed on submit. */
    handleSubmit: (context: HvWizardTabs) => void;
    /** Title for the wizard. */
    title?: string;
    /** An object containing all the labels for the wizard. */
    labels?: HvWizardActionsProps["labels"] & HvWizardTitleProps["labels"];
    /** Shows the summary button. */
    hasSummary?: boolean;
    /** The content of the summary. */
    summaryContent?: React.ReactNode;
    /** Enables the skip button. */
    skippable?: boolean;
    /** Forces minimum height to the component. */
    fixedHeight?: boolean;
    /** Whether the loading animation is shown. */
    loading?: boolean;
    /** Custom object to define type, size and width of the StepNavigation component */
    customStep?: Pick<HvStepNavigationProps, "type" | "stepSize" | "width">;
    /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */
    classes?: HvWizardClasses;
}

export declare type HvWizardTab = {
    name?: string;
    valid?: boolean | null;
    mustValidate?: boolean;
    touched?: boolean;
    form?: any;
    children?: React.ReactNode;
    disabled?: boolean;
    loading?: boolean;
    [other: string]: any;
};

export declare type HvWizardTabs = {
    [tab in number]?: HvWizardTab;
};

export declare const HvWizardTitle: ({ title, hasSummary, labels, classes: classesProp, customStep, }: HvWizardTitleProps) => JSX_2.Element;

export declare type HvWizardTitleClasses = ExtractNames<typeof useClasses_14>;

export declare interface HvWizardTitleProps extends HvBaseProps {
    /** Title for the wizard. */
    title?: string;
    /** Shows the summary button. */
    hasSummary?: boolean;
    /** An object containing all the labels for the wizard header. */
    labels?: {
        /** Summary button label. */
        summary?: string;
    };
    /** Custom object to define type, size and width of the StepNavigation component */
    customStep?: Pick<HvStepNavigationProps, "type" | "stepSize" | "width">;
    /** A Jss Object used to override or extend the styles applied to the empty state Wizard. */
    classes?: HvWizardTitleClasses;
}

export declare const stepNavigationClasses: {
    root: string;
    titles: string;
    ol: string;
    li: string;
    separator: string;
};

declare const useClasses: (classesProp?: Partial<Record<"container" | "button" | "expanded" | "disabled" | "root" | "heading" | "fullWidth" | "textOnlyLabel", string>>, addStatic?: boolean) => {
    readonly classes: {
        root: string;
        expanded: string;
        fullWidth: string;
        heading: string;
        button: string;
        textOnlyLabel: string;
        container: string;
        disabled: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_10: (classesProp?: Partial<Record<"separator" | "root" | "li" | "ol" | "titles", string>>, addStatic?: boolean) => {
    readonly classes: {
        root: string;
        titles: string;
        ol: string;
        li: string;
        separator: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_11: (classesProp?: Partial<Record<"xs" | "sm" | "md" | "lg" | "xl" | "root" | "avatar" | "notCurrent", string>>, addStatic?: boolean) => {
    readonly classes: {
        root: string;
        notCurrent: string;
        xs: string;
        sm: string;
        md: string;
        lg: string;
        xl: string;
        avatar: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_12: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
    readonly classes: {
        root: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_13: (classesProp?: Partial<Record<"actionsContainer" | "buttonWidth" | "buttonsContainer" | "buttonSpacing", string>>, addStatic?: boolean) => {
    readonly classes: {
        actionsContainer: string;
        buttonWidth: string;
        buttonsContainer: string;
        buttonSpacing: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_14: (classesProp?: Partial<Record<"root" | "messageContainer" | "titleContainer" | "headerContainer" | "buttonWidth" | "summaryButton" | "rootSummaryButton" | "stepContainer", string>>, addStatic?: boolean) => {
    readonly classes: {
        root: string;
        headerContainer: string;
        messageContainer: string;
        titleContainer: string;
        summaryButton: string;
        buttonWidth: string;
        rootSummaryButton: string;
        stepContainer: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_15: (classesProp?: Partial<Record<"root" | "paper" | "closeButton", string>>, addStatic?: boolean) => {
    readonly classes: {
        root: string;
        paper: string;
        closeButton: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_16: (classesProp?: Partial<Record<"contentContainer" | "fixedHeight" | "summaryRef" | "summarySticky" | "summaryContainer", string>>, addStatic?: boolean) => {
    readonly classes: {
        contentContainer: string;
        fixedHeight: string;
        summaryRef: string;
        summarySticky: string;
        summaryContainer: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_2: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
    readonly classes: {
        root: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_3: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
    readonly classes: {
        root: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_4: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
    readonly classes: {
        root: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_5: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
    readonly classes: {
        root: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_6: (classesProp?: Partial<Record<"description" | "titleContainer" | "contentContainer" | "drawerPaper" | "searchRoot" | "groupsContainer", string>>, addStatic?: boolean) => {
    readonly classes: {
        drawerPaper: string;
        titleContainer: string;
        contentContainer: string;
        description: string;
        searchRoot: string;
        groupsContainer: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_7: (classesProp?: Partial<Record<"mandatory" | "root" | "title" | "footerContainer" | "titleContainer" | "inputContainer" | "handle" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected", string>>, addStatic?: boolean) => {
    readonly classes: {
        root: string;
        headerContainer: string;
        titleContainer: string;
        title: string;
        inputsTitleContainer: string;
        outputsTitleContainer: string;
        contentContainer: string;
        inputsContainer: string;
        outputsContainer: string;
        inputGroupContainer: string;
        outputGroupContainer: string;
        inputContainer: string;
        outputContainer: string;
        handle: string;
        handleConnected: string;
        mandatory: string;
        footerContainer: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_8: (classesProp?: Partial<Record<"mandatory" | "root" | "title" | "actions" | "footerContainer" | "titleContainer" | "inputContainer" | "handle" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitle" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
    readonly classes: {
        mandatory: string;
        root: string;
        title: string;
        footerContainer: string;
        titleContainer: string;
        inputContainer: string;
        handle: string;
        headerContainer: string;
        inputsTitleContainer: string;
        outputsTitleContainer: string;
        contentContainer: string;
        inputsContainer: string;
        outputsContainer: string;
        inputGroupContainer: string;
        outputGroupContainer: string;
        outputContainer: string;
        handleConnected: string;
        subtitleContainer: string;
        subtitle: string;
        inlineEditRoot: string;
        inlineEditButton: string;
        actions: string;
        actionsButton: string;
        paramsContainer: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_9: (classesProp?: Partial<Record<"mandatory" | "root" | "title" | "actions" | "empty" | "footerContainer" | "titleContainer" | "inputContainer" | "handle" | "headerContainer" | "inputsTitleContainer" | "outputsTitleContainer" | "contentContainer" | "inputsContainer" | "outputsContainer" | "inputGroupContainer" | "outputGroupContainer" | "outputContainer" | "handleConnected" | "subtitle" | "subtitleContainer" | "inlineEditRoot" | "inlineEditButton" | "actionsButton" | "paramsContainer", string>>, addStatic?: boolean) => {
    readonly classes: {
        mandatory: string;
        root: string;
        title: string;
        actions: string;
        footerContainer: string;
        titleContainer: string;
        inputContainer: string;
        handle: string;
        headerContainer: string;
        inputsTitleContainer: string;
        outputsTitleContainer: string;
        contentContainer: string;
        inputsContainer: string;
        outputsContainer: string;
        inputGroupContainer: string;
        outputGroupContainer: string;
        outputContainer: string;
        handleConnected: string;
        subtitle: string;
        subtitleContainer: string;
        inlineEditRoot: string;
        inlineEditButton: string;
        actionsButton: string;
        paramsContainer: string;
        empty: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

export declare const useFlowContext: () => HvFlowContextValue<string>;

/** Retrieves the nodes connected to the inputs of the node */
export declare function useFlowInputNodes<T = any>(id?: string): Node_2<T>[];

/** Retrieves the React Flow instance */
export declare function useFlowInstance<NodeData = any, EdgeData = any>(): HvFlowInstance<NodeData, EdgeData>;

/** Retrieves the node instance */
export declare function useFlowNode<T extends Node_2 = Node_2>(id?: string): T | undefined;

/** Offers both input and output edges of the node */
export declare function useFlowNodeEdges(id?: string): Edge[];

/** Provides the input edges connected to the node */
export declare function useFlowNodeInputEdges(id?: string): Edge[];

export declare function useFlowNodeIntersections<NodeData = any>(id?: string): Node_2<NodeData>[];

export declare function useFlowNodeMeta(id?: string): HvFlowNodeMeta_2;

/** Gives the output edges connected from the node */
export declare function useFlowNodeOutputEdges(id?: string): Edge[];

/** Gets the parent nodes of a specified node (nodes that have an output connected to one of the inputs of the node) */
export declare function useFlowNodeParents(id?: string): Node_2[];

/** Utilities to manipulate a node in the flow */
export declare function useFlowNodeUtils<NodeData = any>(id?: string): {
    setNodeData: (setNewData: (newData?: NodeData) => NodeData) => void;
    setNodeParent: (node?: Node_2<any>, extent?: "parent" | CoordinateExtent) => void;
};

/** Retrieves the nodes connected to the outputs of the node */
export declare function useFlowOutputNodes<T = any>(id?: string): Node_2<T>[];

export declare function useHvNode(props: HvUseNodeParams): {
    id: string;
    title: string | undefined;
    icon: ReactNode;
    color: string | undefined;
    iconColor: string | undefined;
    subtitle: any;
    inputs: (HvFlowNodeInput | HvFlowNodeOutput | {
        inputs: HvFlowNodeInput[];
        label: React.ReactNode;
    } | {
        outputs: HvFlowNodeOutput[];
        label: React.ReactNode;
    })[] | undefined;
    inputEdges: Edge[];
    outputs: (HvFlowNodeInput | HvFlowNodeOutput | {
        inputs: HvFlowNodeInput[];
        label: React.ReactNode;
    } | {
        outputs: HvFlowNodeOutput[];
        label: React.ReactNode;
    })[] | undefined;
    outputEdges: Edge[];
    node: Node_2 | undefined;
    nodeActions: HvFlowNodeAction[];
    showActions: boolean;
    intersections: Node_2<any>[];
    getNodeToolbarProps: () => {
        defaultChecked?: boolean | undefined;
        defaultValue?: string | number | readonly string[] | undefined;
        suppressContentEditableWarning?: boolean | undefined;
        suppressHydrationWarning?: boolean | undefined;
        accessKey?: string | undefined;
        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
        autoFocus?: boolean | undefined;
        className?: string | undefined;
        contentEditable?: (boolean | "false" | "true") | "inherit" | "plaintext-only" | undefined;
        contextMenu?: string | undefined;
        dir?: string | undefined;
        draggable?: (boolean | "false" | "true") | undefined;
        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
        hidden?: boolean | undefined;
        id?: string | undefined;
        lang?: string | undefined;
        nonce?: string | undefined;
        slot?: string | undefined;
        spellCheck?: (boolean | "false" | "true") | undefined;
        style?: CSSProperties | undefined;
        tabIndex?: number | undefined;
        title?: string | undefined;
        translate?: "yes" | "no" | undefined;
        radioGroup?: string | undefined;
        role?: AriaRole | undefined;
        about?: string | undefined;
        content?: string | undefined;
        datatype?: string | undefined;
        inlist?: any;
        prefix?: string | undefined;
        property?: string | undefined;
        rel?: string | undefined;
        resource?: string | undefined;
        rev?: string | undefined;
        typeof?: string | undefined;
        vocab?: string | undefined;
        autoCorrect?: string | undefined;
        autoSave?: string | undefined;
        color?: string | undefined;
        itemProp?: string | undefined;
        itemScope?: boolean | undefined;
        itemType?: string | undefined;
        itemID?: string | undefined;
        itemRef?: string | undefined;
        results?: number | undefined;
        security?: string | undefined;
        unselectable?: "on" | "off" | undefined;
        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
        is?: string | undefined;
        exportparts?: string | undefined;
        part?: string | undefined;
        children?: ReactNode | Iterable<ReactNode>;
        "aria-activedescendant"?: string | undefined;
        "aria-atomic"?: (boolean | "false" | "true") | undefined;
        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
        "aria-braillelabel"?: string | undefined;
        "aria-brailleroledescription"?: string | undefined;
        "aria-busy"?: (boolean | "false" | "true") | undefined;
        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
        "aria-colcount"?: number | undefined;
        "aria-colindex"?: number | undefined;
        "aria-colindextext"?: string | undefined;
        "aria-colspan"?: number | undefined;
        "aria-controls"?: string | undefined;
        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
        "aria-describedby"?: string | undefined;
        "aria-description"?: string | undefined;
        "aria-details"?: string | undefined;
        "aria-disabled"?: (boolean | "false"