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

UI Kit Pentaho React components.

import { Context } from 'react';
import { ExtractNames } from '@hitachivantara/uikit-react-core';
import { ForwardRefExoticComponent } from 'react';
import { HvActionGeneric } from '@hitachivantara/uikit-react-core';
import { HvActionsGenericProps } from '@hitachivantara/uikit-react-core';
import { HvBaseProps } from '@hitachivantara/uikit-react-core';
import { HvIconButtonProps } from '@hitachivantara/uikit-react-core';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import { RefAttributes } from 'react';
import { TabProps } from '@mui/base/Tab';
import { TabsProps } from '@mui/base/Tabs';

export declare const canvasBottomPanelClasses: {
    root: string;
    closed: string;
    minimized: string;
    multipleTabs: string;
    overflowing: string;
    tab: string;
    tabTitle: string;
    tabsRoot: string;
    leftActions: string;
    rightActions: string;
    actionsDisabled: string;
    content: string;
};

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

export declare const canvasPanelTabsClasses: {
    root: string;
    list: string;
};

export declare const canvasSidePanelClasses: {
    root: string;
    tabs: string;
    content: string;
    handle: string;
    open: string;
    close: string;
    handleOpen: string;
    handleClose: string;
};

export declare const canvasToolbarClasses: {
    root: string;
    back: string;
    title: string;
    actions: string;
};

export declare const canvasToolbarTabsClasses: {
    root: string;
    tabsContainer: string;
    tabsList: string;
    tab: string;
    tabLabel: string;
    tabLabelEditor: string;
    tabContent: string;
    tabIconContainer: string;
    closeIconContainer: string;
    tabDivider: string;
    actionsContainer: string;
    dropdownMenuContainer: string;
    dropdownMenuListRoot: string;
};

declare const DEFAULT_LABELS: {
    open: string;
    close: string;
};

declare const DEFAULT_LABELS_2: {
    back: string;
};

declare const DEFAULT_LABELS_3: {
    create: string;
    undefined: string;
    dropdownMenu: string;
};

/**
 * A bottom panel component to use in a canvas context.
 */
export declare const HvCanvasBottomPanel: ForwardRefExoticComponent<HvCanvasBottomPanelProps & RefAttributes<HTMLDivElement>>;

export declare type HvCanvasBottomPanelClasses = ExtractNames<typeof useClasses>;

export declare interface HvCanvasBottomPanelProps extends HvBaseProps {
    /** Open state of the bottom panel. */
    open?: boolean;
    /** Minimize state of the bottom panel tabs'. */
    minimize?: boolean;
    /** List of tabs visible on the panel. */
    tabs: {
        id: string | number;
        title: React.ReactNode | ((overflowing: boolean) => React.ReactNode);
    }[];
    /** Id of the selected tab if it needs to be controlled. */
    selectedTabId?: string | number;
    /** Callback triggered when a tab changes/is clicked. */
    onTabChange?: (event: React.SyntheticEvent | null, tabId: string | number | null) => void;
    /**
     * Actions to be rendered in the left side of a tab.
     * If more than one action is provided, a dropdown menu will be used.
     * These actions are not shown when the tab content is overflowing.
     */
    leftActions?: HvActionsGenericProps["actions"];
    /**
     * Actions to be rendered in the right side of a tab.
     * If more than two actions are provided, a dropdown menu will be used to display the remaining actions.
     * These actions are not shown when the tab content is overflowing.
     */
    rightActions?: HvActionsGenericProps["actions"];
    /**
     * Actions to be rendered in the right side of a tab when the tab content is overflowing.
     * These actions will replace both `leftActions` and `rightActions`.
     */
    overflowActions?: HvActionsGenericProps["actions"];
    /** Callback triggered when an action is clicked. */
    onAction?: (event: React.SyntheticEvent, action: HvActionGeneric, tabId: string | number) => void;
    /** A Jss Object used to override or extend the styles applied. */
    classes?: HvCanvasBottomPanelClasses;
}

export declare const HvCanvasContext: Context<HvCanvasContextValue | null>;

declare type HvCanvasContextValue = {
    sidePanelOpen: boolean;
    handleSidePanelOpen: (open: boolean) => void;
    sidePanelWidth: number;
    handleSidePanelWidth: (width: number) => void;
    sidePanelDragging: boolean;
    handleSidePanelDragging: (dragging: boolean) => void;
};

/**
 * The tab component to use inside `HvCanvasPanelTabs`.
 */
export declare const HvCanvasPanelTab: ForwardRefExoticComponent<Omit<HvCanvasPanelTabProps, "ref"> & RefAttributes<HTMLButtonElement>>;

export declare type HvCanvasPanelTabClasses = ExtractNames<typeof useClasses_2>;

export declare interface HvCanvasPanelTabProps extends TabProps {
    /** A Jss Object used to override or extend the styles applied. */
    classes?: HvCanvasPanelTabClasses;
}

/**
 * A tabs component to use in a canvas context.
 */
export declare const HvCanvasPanelTabs: ForwardRefExoticComponent<Omit<HvCanvasPanelTabsProps, "ref"> & RefAttributes<HTMLDivElement>>;

export declare type HvCanvasPanelTabsClasses = ExtractNames<typeof useClasses_3>;

export declare interface HvCanvasPanelTabsProps extends TabsProps {
    /** A Jss Object used to override or extend the styles applied. */
    classes?: HvCanvasPanelTabsClasses;
}

export declare const HvCanvasProvider: ({ children, }: {
    children: React.ReactNode;
    onSidePanelResize?: (width: number) => void;
}) => JSX_2.Element;

/**
 * A side panel component to use in a canvas context.
 */
export declare const HvCanvasSidePanel: ForwardRefExoticComponent<HvCanvasSidePanelProps & RefAttributes<HTMLDivElement>>;

export declare type HvCanvasSidePanelClasses = ExtractNames<typeof useClasses_4>;

export declare interface HvCanvasSidePanelProps extends HvBaseProps<HTMLDivElement, "onToggle"> {
    /** When controlled, defines id the panel is open or not. */
    open?: boolean;
    /** When uncontrolled, defines the initial state of the panel. */
    defaultOpen?: boolean;
    /** List of tabs visible on the panel. */
    tabs?: {
        id: string | number;
        content: React.ReactNode;
    }[];
    /** Id of the selected tab if it needs to be controlled. */
    tab?: string | number;
    /** Callback triggered whenever the panel toggles. */
    onToggle?: (event: React.MouseEvent | React.KeyboardEvent, open: boolean) => void;
    /** Callback triggered when a tab changes/is clicked. */
    onTabChange?: (event: React.SyntheticEvent | null, tabId: string | number | null) => void;
    /** An object containing all the labels. */
    labels?: Partial<typeof DEFAULT_LABELS>;
    /** The minimum width of the side panel. */
    minWidth?: number;
    /** The maximum width of the side panel. */
    maxWidth?: number;
    /** The initial width of the side panel. */
    initialWidth?: number;
    /** Callback triggered when the panel width changes. */
    onResize?: (width: number) => void;
    /** The content that will be rendered within the canvas panel. */
    children?: React.ReactNode;
    /** A Jss Object used to override or extend the styles applied. */
    classes?: HvCanvasSidePanelClasses;
}

/**
 * A toolbar component to use in a canvas context.
 */
export declare const HvCanvasToolbar: ForwardRefExoticComponent<HvCanvasToolbarProps & RefAttributes<HTMLDivElement>>;

export declare type HvCanvasToolbarClasses = ExtractNames<typeof useClasses_5>;

export declare interface HvCanvasToolbarProps extends HvBaseProps<HTMLDivElement, "title"> {
    /** Text to display in the component. */
    title: React.ReactNode;
    /** Fully customized button or false for when the back button should not be rendered. */
    backButton?: React.ReactNode;
    /** An object containing all the labels. */
    labels?: Partial<typeof DEFAULT_LABELS_2>;
    children?: React.ReactNode;
    /** Props for the default back button. */
    backButtonProps?: Partial<HvIconButtonProps>;
    /** A Jss Object used to override or extend the styles applied. */
    classes?: HvCanvasToolbarClasses;
}

/**
 * A toolbar tabs component to use in a canvas context.
 */
export declare const HvCanvasToolbarTabs: ForwardRefExoticComponent<HvCanvasToolbarTabsProps & RefAttributes<HTMLDivElement>>;

export declare type HvCanvasToolbarTabsClasses = ExtractNames<typeof useClasses_6>;

export declare interface HvCanvasToolbarTabsProps extends HvBaseProps<HTMLDivElement, "onChange"> {
    /** When controlled, defines the tabs. */
    tabs?: ToolbarTabsTab[];
    /** When uncontrolled, defines the initial tabs. */
    defaultTabs?: ToolbarTabsTab[];
    /** Id of the selected tab if it needs to be controlled. */
    selectedTabId?: string;
    /** Defines the icon to be placed before the label when a new tab is created through the "Create new" button. If not defined, no icon is used. */
    icon?: React.ReactNode;
    /** Whether the tabs are editable or not. Default to `false`. */
    disableTabEdit?: boolean;
    /** Callback triggered when a tab changes/is clicked. */
    onTabChange?: (event: React.SyntheticEvent | null, tabId: string | null) => void;
    /** Callback triggered when the tabs change: new tab added, tab removed, tab reorder, and label updated. */
    onChange?: (event: React.MouseEvent<HTMLButtonElement> | React.SyntheticEvent, tabs: ToolbarTabsTab[]) => void;
    /** An object containing all the labels. */
    labels?: Partial<typeof DEFAULT_LABELS_3>;
    /** A Jss Object used to override or extend the styles applied. */
    classes?: HvCanvasToolbarTabsClasses;
    /** Whether the "Create new" button, which enables to create new tabs, is hidden. Defaults to `false`. */
    hideCreateNew?: boolean;
}

declare interface ToolbarTabsTab {
    id: string;
    label: string;
    icon?: React.ReactNode;
    /** Whether the tab is fixed and can't be removed. Defaults to `false`, i.e., all tabs are removable by default. */
    fixed?: boolean;
}

export declare const useCanvasContext: () => HvCanvasContextValue | null;

declare const useClasses: (classesProp?: Partial<Record<"content" | "tab" | "root" | "closed" | "actionsDisabled" | "minimized" | "multipleTabs" | "overflowing" | "tabTitle" | "tabsRoot" | "leftActions" | "rightActions", string>>, addStatic?: boolean) => {
    readonly classes: {
        root: string;
        closed: string;
        minimized: string;
        multipleTabs: string;
        overflowing: string;
        tab: string;
        tabTitle: string;
        tabsRoot: string;
        leftActions: string;
        rightActions: string;
        actionsDisabled: string;
        content: 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" | "list", string>>, addStatic?: boolean) => {
    readonly classes: {
        root: string;
        list: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

declare const useClasses_4: (classesProp?: Partial<Record<"content" | "open" | "root" | "close" | "handle" | "tabs" | "handleOpen" | "handleClose", string>>, addStatic?: boolean) => {
    readonly classes: {
        root: string;
        tabs: string;
        content: string;
        handle: string;
        open: string;
        close: string;
        handleOpen: string;
        handleClose: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

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

declare const useClasses_6: (classesProp?: Partial<Record<"tab" | "root" | "actionsContainer" | "tabsContainer" | "tabsList" | "tabLabel" | "tabLabelEditor" | "tabContent" | "tabIconContainer" | "closeIconContainer" | "tabDivider" | "dropdownMenuContainer" | "dropdownMenuListRoot", string>>, addStatic?: boolean) => {
    readonly classes: {
        root: string;
        tabsContainer: string;
        tabsList: string;
        tab: string;
        tabLabel: string;
        tabLabelEditor: string;
        tabContent: string;
        tabIconContainer: string;
        closeIconContainer: string;
        tabDivider: string;
        actionsContainer: string;
        dropdownMenuContainer: string;
        dropdownMenuListRoot: string;
    };
    readonly css: any;
    readonly cx: (...args: any) => string;
};

export { }