@hitachivantara/uikit-react-core 5.0.0-next.16 → 5.0.0-next.18

package/dist/types/index.d.ts

@@ -15,6 +15,7 @@ import { Column } from 'react-table';
 import { ColumnInstance } from 'react-table';
 import { ColumnInterface } from 'react-table';
 import { ContainerProps } from '@mui/material/Container';
+import type { Context } from 'react';
 import { CSSProperties } from 'react';
 import { DialogActionsProps } from '@mui/material/DialogActions';
 import { DialogContentProps } from '@mui/material/DialogContent';
@@ -47,7 +48,6 @@ import type { HvExtraDeepProps } from '@hitachivantara/uikit-react-shared';
 import type { HvExtraProps } from '@hitachivantara/uikit-react-shared';
 import { HvFormStatus as HvFormStatus_2 } from 'components';
 import { HvHeaderNavigationItemProp as HvHeaderNavigationItemProp_2 } from 'components';
-import { HvInputLabels as HvInputLabels_2 } from 'types/forms';
 import { HvInputProps as HvInputProps_2 } from 'components';
 import { HvLabelProps as HvLabelProps_2 } from 'components';
 import { HvListValue as HvListValue_2 } from 'components';
@@ -113,6 +113,7 @@ import { TooltipProps } from '@mui/material';
 import { TransitionProps } from '@mui/material/transitions';
 import { UseColumnOrderInstanceProps } from 'react-table';
 import { UseColumnOrderState } from 'react-table';
+import { useEffect } from 'react';
 import { UseExpandedHooks } from 'react-table';
 import { UseExpandedInstanceProps } from 'react-table';
 import { UseExpandedOptions } from 'react-table';
@@ -158,6 +159,10 @@ export declare const accordionClasses: HvAccordionClasses;
 
 export declare const actionBarClasses: HvActionBarClasses;
 
+export declare const actionClasses: HvVerticalNavigationActionClasses;
+
+export declare const actionsClasses: HvVerticalNavigationActionsClasses;
+
 export declare const actionsGenericClasses: HvActionsGenericClasses;
 
 export declare const adornmentClasses: HvAdornmentClasses;
@@ -309,8 +314,6 @@ export { ds5 }
 
 export declare const emptyStateClasses: HvEmptyStateClasses;
 
-declare type Event_2 = MouseEvent | KeyboardEvent | TouchEvent;
-
 export declare const fileClasses: HvFileClasses;
 
 export declare const fileUploaderPreviewClasses: HvFileUploaderPreviewClasses;
@@ -350,6 +353,24 @@ export declare const getClasses: <T>(keys: string[], name: string) => T;
 
 export declare const getComponentName: (Component: any) => any;
 
+/**
+ * Get the first and last focusable element from a node.
+ *
+ * @param nodeId
+ * @returns {{last: *, first: *}}
+ */
+export declare const getFirstAndLastFocus: (node: any) => {
+    first: any;
+    last: any;
+};
+
+/**
+ * Gets the list of focusable elements.
+ * @param node
+ * @returns {*|NodeListOf<HTMLElementTagNameMap[string]>|NodeListOf<*>|NodeListOf<SVGElementTagNameMap[string]>|*[]}
+ */
+export declare const getFocusableList: (node: any) => any;
+
 export declare const getHeaderFooterPropsHook: (props: any, { column }: {
     column: any;
 }) => any[];
@@ -370,6 +391,17 @@ export declare const getIdReferenceListFor: (formElementType: any, descriptors:
  */
 export declare const getKeyCodeFromEvent: (event: any) => any;
 
+/**
+ * Auxiliary function to find adjacent nodes to focus.
+ *
+ * @param nodeId
+ * @returns {{prevFocus: *, nextFocus: *}}
+ */
+export declare const getPrevNextFocus: (nodeId: any) => {
+    nextFocus: any;
+    prevFocus: any;
+};
+
 export declare const getSelectorIcons: (options: {
     disabled: boolean;
     semantic: boolean;
@@ -483,11 +515,11 @@ declare type HvActionContainerClasses = {
 
 declare type HvActionContainerProps = HvBaseProps & {
     /** onClose function. */
-    onClose?: Function;
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /** Actions to display. */
-    action?: React.ReactNode | HvActionGeneric_2[];
+    action?: React.ReactNode | HvActionGeneric[];
     /**  The callback function ran when an action is triggered, receiving `action` as param */
-    actionCallback?: (event: React.SyntheticEvent, id: string, action: HvActionGeneric_2) => void;
+    actionCallback?: (event: React.SyntheticEvent, id: string, action: HvActionGeneric) => void;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvActionContainerClasses;
 };
@@ -585,7 +617,11 @@ export declare type HvAdornmentProps = HvBaseProps<HTMLDivElement | HTMLButtonEl
     classes?: HvAdornmentClasses;
 };
 
-export declare type HvApplication = {
+export declare const HvAppSwitcher: ({ id, className, classes, layout, title, applications, onActionClickedCallback, isActionSelectedCallback, header, footer, isOpen, }: HvAppSwitcherProps) => JSX_2.Element;
+
+export declare const HvAppSwitcherAction: ({ id, className, classes, application, onClickCallback, isSelectedCallback, }: HvAppSwitcherActionProps) => JSX_2.Element;
+
+export declare type HvAppSwitcherActionApplication = {
     /** Id of the application. */
     id?: string;
     /** Name of the application, this is the value that will be displayed on the component. */
@@ -608,10 +644,6 @@ export declare type HvApplication = {
     color?: string;
 };
 
-export declare const HvAppSwitcher: ({ id, className, classes, layout, title, applications, onActionClickedCallback, isActionSelectedCallback, header, footer, isOpen, }: HvAppSwitcherProps) => JSX_2.Element;
-
-export declare const HvAppSwitcherAction: ({ id, className, classes, application, onClickCallback, isSelectedCallback, }: HvAppSwitcherActionProps) => JSX_2.Element;
-
 export declare type HvAppSwitcherActionClasses = {
     root?: string;
     icon?: string;
@@ -625,11 +657,11 @@ export declare type HvAppSwitcherActionClasses = {
 
 export declare type HvAppSwitcherActionProps = HvBaseProps & {
     /** The application data to be used to render the Action object. */
-    application: HvApplication;
+    application: HvAppSwitcherActionApplication;
     /** Callback triggered when the action is clicked. */
-    onClickCallback?: Function;
+    onClickCallback?: (event: React.MouseEvent, application: HvAppSwitcherActionApplication) => void;
     /** Must return a boolean stating if the action element is selected or not. */
-    isSelectedCallback?: Function;
+    isSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvAppSwitcherActionClasses;
 };
@@ -659,11 +691,11 @@ export declare type HvAppSwitcherProps = HvBaseProps & {
     /** Title to be displayed on the header of the component. */
     title?: string;
     /** The list of applications to be used to render the actions on the component. */
-    applications?: HvApplication[];
+    applications?: HvAppSwitcherActionApplication[];
     /** Triggered when an action is clicked. */
-    onActionClickedCallback?: Function;
+    onActionClickedCallback?: (event: React.MouseEvent, application: HvAppSwitcherActionApplication) => void;
     /** Must return a boolean stating if the action element is selected or not. */
-    isActionSelectedCallback?: Function;
+    isActionSelectedCallback?: (application: HvAppSwitcherActionApplication) => boolean;
     /** Element to be added to the header container, if none is provided a label with the title will be added. */
     header?: React.ReactNode;
     /** Element to be added to the footer container. */
@@ -828,7 +860,7 @@ declare type HvBannerContentClasses = {
     default?: string;
 };
 
-declare type HvBannerContentProps = Omit<SnackbarContentProps, "variant" | "classes"> & HvBaseProps & {
+declare type HvBannerContentProps = Omit<SnackbarContentProps, "variant" | "classes" | "onClose"> & HvBaseProps & {
     /** The message to display. */
     content?: React.ReactNode;
     /** Variant of the snackbar. */
@@ -838,7 +870,7 @@ declare type HvBannerContentProps = Omit<SnackbarContentProps, "variant" | "clas
     /** Custom icon to replace the variant default. */
     customIcon?: React.ReactNode;
     /** onClose function. */
-    onClose?: Function;
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /** Actions to display on the right side. */
     actions?: React.ReactNode | HvActionGeneric_2[];
     /**  The callback function ran when an action is triggered, receiving `action` as param */
@@ -851,11 +883,11 @@ declare type HvBannerContentProps = Omit<SnackbarContentProps, "variant" | "clas
     classes?: HvBannerContentClasses;
 };
 
-export declare type HvBannerProps = Omit<SnackbarProps, "anchorOrigin" | "classes"> & HvBaseProps & {
+export declare type HvBannerProps = Omit<SnackbarProps, "anchorOrigin" | "classes" | "onClose"> & HvBaseProps & {
     /** If true | Snackbar is open. */
     open: boolean;
     /** Callback fired when the component requests to be closed. Typically onClose is used to set state in the parent component, which is used to control the Snackbar open prop. The reason parameter can optionally be used to control the response to onClose, for example ignoring clickaway. */
-    onClose?: Function;
+    onClose?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     /** The message to display. */
     label?: React.ReactNode;
     /** The anchor of the Snackbar. */
@@ -867,9 +899,9 @@ export declare type HvBannerProps = Omit<SnackbarProps, "anchorOrigin" | "classe
     /** Controls if the associated icon to the variant should be shown. */
     showIcon?: boolean;
     /** Actions to display on the right side. */
-    actions?: React.ReactNode | HvActionGeneric_2[];
+    actions?: React.ReactNode | HvActionGeneric[];
     /** The callback function ran when an action is triggered, receiving `action` as param */
-    actionsCallback?: (event: React.SyntheticEvent, id: string, action: HvActionGeneric_2) => void;
+    actionsCallback?: (event: React.SyntheticEvent, id: string, action: HvActionGeneric) => void;
     /** The position property of the header. */
     actionsPosition?: HvBannerActionPosition;
     /** How much the transition animation last in milliseconds, if 0 no animation is played. */
@@ -1896,6 +1928,8 @@ export declare type HvCheckBoxProps = Omit<HvBaseCheckBoxProps, "classes"> & {
     classes?: HvCheckBoxClasses;
 };
 
+export declare type HvClickOutsideEvent = MouseEvent | KeyboardEvent | TouchEvent;
+
 export declare type HvColumn<D extends object = Record<string, unknown>> = Column<D>;
 
 declare type HvColumnGroup<D extends object = Record<string, unknown>> = HvTableColumnOptions<D> & HvColumnGroupInterface<D> & ({
@@ -2925,7 +2959,9 @@ export declare const HvFormElementDescriptorsContextProvider: React_2.Provider<{
     label?: any;
 }>;
 
-export declare type HvFormElementProps = HvBaseProps & {
+export declare type HvFormElementProps = HvBaseProps<HTMLDivElement, {
+    onChange: any;
+}> & {
     /**
      * Name of the form element.
      *
@@ -2965,7 +3001,7 @@ export declare type HvFormElementProps = HvBaseProps & {
     /** The error message to show when `status` is "invalid". */
     statusMessage?: string;
     /** The callback fired when the value changes. */
-    onChange?: Function;
+    onChange?: (event: React.FormEvent<HTMLDivElement>) => void;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvFormElementClasses;
 };
@@ -3347,48 +3383,48 @@ export declare type HvInputProps = HvBaseProps<HTMLElement, {
      * The function that will be executed onChange, allows modification of the input,
      * it receives the value. If a new value should be presented it must returned it.
      */
-    onChange?: Function;
+    onChange?: (event: React_2.ChangeEvent<HTMLInputElement>, value: string) => void;
     /**
      * Callback called when the user submits the value by pressing Enter/Return.
      *
      * Also called when the search button is clicked (when type is "search").
      */
-    onEnter?: Function;
+    onEnter?: (event: React_2.KeyboardEvent<HTMLInputElement> | React_2.MouseEvent, value: string) => void;
     /**
      * The function that will be executed onBlur, allows checking the validation state,
-     * it receives the value and the validation state (`invalid`, `valid`).
+     * it receives the value and the validation state.
      */
-    onBlur?: Function;
+    onBlur?: (event: React_2.FocusEvent<HTMLInputElement>, value: string, validationState: HvInputValidity) => void;
     /**
      * The function that will be executed onBlur, allows checking the value state,
      * it receives the value.
      */
-    onFocus?: Function;
+    onFocus?: (event: React_2.FocusEventHandler<HTMLInputElement>, value: string) => void;
     /**
      * The function that will be executed onKeyDown, allows checking the value state,
      * it receives the event and value.
      */
-    onKeyDown?: Function;
+    onKeyDown?: (event: React_2.KeyboardEvent<HTMLInputElement> | React_2.MouseEvent, value: string) => void;
     /** The input type. */
     type?: HTMLInputTypeAttribute;
     /** The placeholder value of the input. */
     placeholder?: string;
     /** Internal labels?. */
-    labels?: HvInputLabels_2 & HvExtraProps;
+    labels?: HvInputLabels & HvExtraProps;
     /** An Object containing the various texts associated with the input. */
-    validationMessages?: HvValidationMessages_2;
+    validationMessages?: HvValidationMessages;
     /** Attributes applied to the input element. */
     inputProps?: InputBaseComponentProps;
     /** Allows passing a ref to the underlying input */
     inputRef?: any;
     /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */
-    suggestionListCallback?: Function;
+    suggestionListCallback?: (value: string) => HvInputSuggestion[] | null;
     /**
      * The custom validation function, it receives the value and must return
      * either `true` for valid or `false` for invalid, default validations would only
      * occur if this function is null or undefined
      */
-    validation?: Function;
+    validation?: (value: string) => boolean;
     /** If `true` it should autofocus. */
     autoFocus?: boolean;
     /** If `true` the clear button is disabled. */
@@ -3414,6 +3450,12 @@ export declare type HvInputProps = HvBaseProps<HTMLElement, {
     classes?: HvInputClasses;
 };
 
+export declare type HvInputSuggestion = {
+    id: string;
+    label: string;
+    value?: string;
+};
+
 declare type HvInputValidity = {
     valid?: boolean;
     badInput?: boolean;
@@ -4436,7 +4478,7 @@ export declare type HvSelectionListProps = HvBaseProps<HTMLUListElement, {
      * When uncontrolled and unspecified it will default to "standBy" and change to either "valid"
      * or "invalid" after any change to the state.
      */
-    status?: HvFormStatus_2;
+    status?: HvFormStatus;
     /**
      * The error message to show when the validation status is "invalid".
      *
@@ -4450,7 +4492,7 @@ export declare type HvSelectionListProps = HvBaseProps<HTMLUListElement, {
     /** Indicates whether the list orientation is horizontal or vertical. Defaults to vertical. */
     orientation?: "vertical" | "horizontal";
     /** The callback fired when the value changes. */
-    onChange?: Function;
+    onChange?: (event: React_2.MouseEvent, value: any) => void;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvSelectionListClasses;
 };
@@ -4646,11 +4688,10 @@ export declare type HvSuggestionsProps = HvBaseProps & {
     anchorEl?: HTMLElement | null;
     /** Array of { id, label, ...others } values to display in the suggestion list */
     suggestionValues?: HvSuggestion[] | null;
-    /** Function called when suggestion list is closed */
     /** Function called when a suggestion is selected */
-    onSuggestionSelected?: Function;
+    onSuggestionSelected?: (event: React_2.MouseEvent, value: HvSuggestion) => void;
     /** Function called when suggestion list is closed */
-    onClose?: Function;
+    onClose?: (event: HvClickOutsideEvent) => void;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvSuggestionsClasses;
 };
@@ -5575,9 +5616,9 @@ export declare type HvTagsInputProps = HvBaseProps<HTMLElement, {
     /** The form element name. */
     name?: string;
     /** The value of the form element. */
-    value?: string[] | HvTagProps_2[];
+    value?: string[] | HvTagProps[];
     /** When uncontrolled, defines the initial input value. */
-    defaultValue?: string[] | HvTagProps_2[];
+    defaultValue?: string[] | HvTagProps[];
     /**
      * The label of the form element.
      * The form element must be labeled for accessibility reasons.
@@ -5593,15 +5634,15 @@ export declare type HvTagsInputProps = HvBaseProps<HTMLElement, {
     /** Indicates that the form element is required. */
     required?: boolean;
     /** The function that will be executed onChange. */
-    onChange?: (event: React_2.ChangeEvent<HTMLInputElement> | React_2.KeyboardEvent<HTMLInputElement> | React_2.MouseEvent<HTMLButtonElement> | React_2.MouseEvent<HTMLElement, MouseEvent> | React_2.KeyboardEventHandler<HTMLElement>, value: HvTagProps_2[]) => void;
+    onChange?: (event: React_2.ChangeEvent<HTMLInputElement> | React_2.KeyboardEvent<HTMLInputElement> | React_2.MouseEvent<HTMLButtonElement> | React_2.MouseEvent<HTMLElement, MouseEvent> | React_2.KeyboardEventHandler<HTMLElement>, value: HvTagProps[]) => void;
     /** The function that will be executed when the element is focused. */
     onFocus?: (event: React_2.FocusEvent<HTMLInputElement>, value: string) => void;
     /** The function that will be executed when the element is blurred. */
     onBlur?: (event: React_2.FocusEvent<HTMLInputElement>, value: string) => void;
     /** The function that will be executed when a tag is deleted. */
-    onDelete?: (event: React_2.ChangeEvent<HTMLInputElement> | React_2.KeyboardEvent<HTMLInputElement> | React_2.MouseEvent<HTMLButtonElement> | React_2.MouseEvent<HTMLElement, MouseEvent> | React_2.KeyboardEventHandler<HTMLElement>, value: HvTagProps_2, index: number) => void;
+    onDelete?: (event: React_2.ChangeEvent<HTMLInputElement> | React_2.KeyboardEvent<HTMLInputElement> | React_2.MouseEvent<HTMLButtonElement> | React_2.MouseEvent<HTMLElement, MouseEvent> | React_2.KeyboardEventHandler<HTMLElement>, value: HvTagProps, index: number) => void;
     /** The function that will be executed when a tag is added. */
-    onAdd?: (event: React_2.ChangeEvent<HTMLInputElement> | React_2.KeyboardEvent<HTMLInputElement> | React_2.MouseEvent<HTMLButtonElement> | React_2.MouseEvent<HTMLElement, MouseEvent> | React_2.KeyboardEventHandler<HTMLElement>, value: HvTagProps_2, index: number) => void;
+    onAdd?: (event: React_2.ChangeEvent<HTMLInputElement> | React_2.KeyboardEvent<HTMLInputElement> | React_2.MouseEvent<HTMLButtonElement> | React_2.MouseEvent<HTMLElement, MouseEvent> | React_2.KeyboardEventHandler<HTMLElement>, value: HvTagProps, index: number) => void;
     /** The placeholder value of the input. */
     placeholder?: string;
     /** If `true` the character counter isn't shown even if maxTagsQuantity is set. */
@@ -5625,17 +5666,19 @@ export declare type HvTagsInputProps = HvBaseProps<HTMLElement, {
     /** The error message to show when `status` is "invalid". */
     statusMessage?: React_2.ReactNode;
     /** An Object containing the various texts associated with the input. */
-    validationMessages?: HvValidationMessages_2;
+    validationMessages?: HvValidationMessages;
     /** An array of strings that represent the character used to input a tag. This character is the string representation of the event.code from the input event. */
     commitTagOn?: string[];
     /** If `true` the tag will be committed when the blur event occurs. */
     commitOnBlur?: boolean;
     /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */
-    suggestionListCallback?: Function;
+    suggestionListCallback?: (value: string) => HvTagSuggestion[] | null;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvTagsInputClasses;
 };
 
+export declare type HvTagSuggestion = HvInputSuggestion;
+
 /**
  * A text area is a multiline text input box, with an optional character counter when there is a length limit.
  */
@@ -5807,7 +5850,7 @@ export declare const HvToggleButton: ForwardRefExoticComponent<HvBaseProps<HTMLB
     /** Icon for when selected. Ignored if the component has children. */
     selectedIcon?: React.ReactNode;
     /** Function called when icon is clicked. */
-    onClick?: Function | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLButtonElement>, selected: boolean) => void) | undefined;
 } & RefAttributes<HTMLButtonElement>>;
 
 export declare type HvToggleButtonProps = HvBaseProps<HTMLButtonElement, {
@@ -5824,7 +5867,7 @@ export declare type HvToggleButtonProps = HvBaseProps<HTMLButtonElement, {
     /** Icon for when selected. Ignored if the component has children. */
     selectedIcon?: React.ReactNode;
     /** Function called when icon is clicked. */
-    onClick?: Function;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, selected: boolean) => void;
 };
 
 /**
@@ -6022,6 +6065,411 @@ export declare type HvValidationMessages = {
     typeMismatchError?: string;
 };
 
+/**
+ * Navigation enables users to move through an app to complete tasks.
+ *
+ * It is recommended to use vertical navigation when your application requires global navigation that is displayed on the left.
+ * While vertical navigation menus generally consume more space than their horizontal counterparts, they have become more popular as desktop monitors move to wide-screen formats.
+ *
+ * Even thou both the hierarchically organized data and the visual style ressemble a treeview-like structure, the [Treeview Design Pattern](https://w3c.github.io/aria-practices/#TreeView)
+ * isn't necessarily the most appropriate.
+ *
+ * The tree role provides complex functionality that is not needed for typical site navigation, and changes the most common keyboard navigation using TAB.
+ *
+ * The [Disclosure Design Pattern](https://w3c.github.io/aria-practices/#disclosure) is more suited for typical site navigation, with expandable groups of links.
+ * However it can be tedious to TAB through all navigation items to reach the actions panel.
+ *
+ * Both modes are available via the `mode` property and each app should choose the most appropriate.
+ */
+export declare const HvVerticalNavigation: ({ id, className, classes, children, open, collapsedMode, ...others }: HvVerticalNavigationProps) => JSX_2.Element;
+
+export declare const HvVerticalNavigationAction: ({ className, classes, id, label, icon, onClick, ...others }: HvVerticalNavigationActionProps) => JSX_2.Element;
+
+export declare type HvVerticalNavigationActionClasses = {
+    action?: string;
+    noIcon?: string;
+    minimized?: string;
+};
+
+export declare type HvVerticalNavigationActionProps = {
+    /**
+     * Class names to be applied.
+     */
+    className?: string;
+    /**
+     * A Jss Object used to override or extend the styles applied to the component.
+     */
+    classes?: HvVerticalNavigationActionClasses;
+    /**
+     * Id to be applied to the action.
+     */
+    id?: string;
+    /**
+     * Visual label.
+     */
+    label?: string;
+    /**
+     * Icon.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Callback called when clicked.
+     */
+    onClick?: MouseEventHandler<HTMLElement>;
+};
+
+export declare const HvVerticalNavigationActions: ({ className, classes, id, children, ...others }: HvVerticalNavigationActionsProps) => JSX_2.Element;
+
+export declare type HvVerticalNavigationActionsClasses = {
+    root?: string;
+    hide?: string;
+};
+
+export declare type HvVerticalNavigationActionsProps = {
+    /**
+     * Class names to be applied.
+     */
+    className?: string;
+    /**
+     * A Jss Object used to override or extend the styles applied to the component.
+     */
+    classes?: HvVerticalNavigationActionsClasses;
+    /**
+     * Id to be applied to the actions container.
+     */
+    id?: string;
+    /**
+     * Node to be rendered
+     */
+    children?: React.ReactNode;
+};
+
+export declare type HvVerticalNavigationClasses = {
+    /** Style applied to the root of the component. */
+    root?: string;
+    /** Style applied to the root of the component when its collapsed. */
+    collapsed?: string;
+};
+
+export declare const HvVerticalNavigationHeader: ({ title, openIcon, closeIcon, buttonProps, className, classes, onClick, ...others }: HvVerticalNavigationHeaderProps) => JSX_2.Element;
+
+export declare type HvVerticalNavigationHeaderClasses = {
+    root?: string;
+    minimized?: string;
+};
+
+export declare type HvVerticalNavigationHeaderProps = {
+    id?: any;
+    title?: any;
+    openIcon?: React.ReactNode;
+    closeIcon?: React.ReactNode;
+    buttonProps?: HvButtonProps_2;
+    className?: string;
+    classes?: HvVerticalNavigationHeaderClasses;
+    onClick?: MouseEventHandler<HTMLElement>;
+};
+
+export declare type HvVerticalNavigationMode = "icon" | "simple";
+
+export declare type HvVerticalNavigationPosition = "static" | "relative" | "fixed" | "absolute";
+
+export declare type HvVerticalNavigationProps = {
+    /**
+     * Id to be applied to the root node.
+     */
+    id?: string;
+    /**
+     * Class names to be applied.
+     */
+    className?: string;
+    /**
+     * A Jss Object used to override or extend the styles applied to the component.
+     */
+    classes?: HvVerticalNavigationClasses;
+    /**
+     * Current State of the Vertical Navigation Collapse
+     */
+    open?: boolean;
+    /**
+     *  Collpased Mode for the Vertical Navigation, the default value is "simple".
+     */
+    collapsedMode?: HvVerticalNavigationMode;
+    /**
+     * The content inside the actions container.
+     */
+    children?: React.ReactNode;
+};
+
+export declare const HvVerticalNavigationTree: ({ id, className, classes, data, mode, collapsible, expanded: expandedProp, defaultExpanded, onToggle, selected: selectedProp, defaultSelected, onChange, ...others }: HvVerticalNavigationTreeProps) => JSX_2.Element;
+
+export declare type HvVerticalNavigationTreeClasses = {
+    root?: string;
+    list?: string;
+    listItem?: string;
+    collapsed?: string;
+};
+
+export declare type HvVerticalNavigationTreeProps = {
+    /**
+     * Id to be applied to the root node.
+     */
+    id?: string;
+    /**
+     * Class names to be applied.
+     */
+    className?: string;
+    /**
+     * A Jss Object used to override or extend the styles applied.
+     */
+    classes?: HvVerticalNavigationTreeClasses;
+    /**
+     * Modus operandi (role) of the widget instance.
+     */
+    mode?: NavigationMode;
+    /**
+     * Can non-leaf nodes be collapsed / expanded.
+     */
+    collapsible?: boolean;
+    /**
+     * The ID of the selected page.
+     */
+    selected?: string;
+    /**
+     * When uncontrolled, defines the initial selected page ID.
+     */
+    defaultSelected?: string;
+    /**
+     * Callback fired when a navigation item is selected.
+     *
+     * @param {object} event The event source of the callback.
+     * @param {object} page The data of the selected page.
+     */
+    onChange?: (event: any, page: any) => void;
+    /**
+     * Expanded nodes' ids.
+     */
+    expanded?: string[];
+    /**
+     * When uncontrolled, defines the initial expanded nodes' ids.
+     *
+     * It also supports `true` for starting with all nodes expanded.
+     * With `false` all nodes will be collapsed.
+     *
+     * By default it expands the needed nodes to display the current selection, if any.
+     */
+    defaultExpanded?: string[] | boolean;
+    /**
+     * Callback fired when tree items are expanded/collapsed.
+     *
+     * @param {object} event The event source of the callback.
+     * @param {array} nodeIds The ids of the expanded nodes (old and new).
+     */
+    onToggle?: (event: any, nodeIds: any) => void;
+    /**
+     * An array containing the data for each menu item.
+     *
+     * id - the id to be applied to the root element.
+     * label - the label to be rendered on the menu item.
+     * data - sub-menu items
+     * href - the url used for navigation.
+     * target - the behavior when opening an url.
+     */
+    data?: NavigationData[];
+};
+
+export declare const HvVerticalNavigationTreeView: ForwardRefExoticComponent<HvVerticalNavigationTreeViewProps & RefAttributes<unknown>>;
+
+export declare type HvVerticalNavigationTreeViewClasses = {
+    root?: string;
+};
+
+export declare const HvVerticalNavigationTreeViewItem: ForwardRefExoticComponent<HvVerticalNavigationTreeViewItemProps & RefAttributes<unknown>>;
+
+export declare type HvVerticalNavigationTreeViewItemClasses = {
+    /** Style applied to the root of the component. */
+    node?: string;
+    /** Style applied to the content. */
+    content?: string;
+    /** Style applied to the content when it is a link. */
+    link?: string;
+    /** Style applied to the group. */
+    group?: string;
+    /** Style applied when item is disabled. */
+    disabled?: string;
+    /** Style applied when item is expandable. */
+    expandable?: string;
+    /** Style applied when item is collapsed. */
+    collapsed?: string;
+    /** Style applied when item is expanded */
+    expanded?: string;
+    /** Style applied when item is selectable. */
+    selectable?: string;
+    /** Style applied when item is unselectable. */
+    unselectable?: string;
+    /** Style applied when item is selectable. */
+    selected?: string;
+    /** Style applied when item is unselectable. */
+    unselected?: string;
+    /** Style applied when item is focused. */
+    focused?: string;
+    /** Styled applied when navigation open is false */
+    minimized?: string;
+    hide?: string;
+};
+
+export declare type HvVerticalNavigationTreeViewItemProps = {
+    /**
+     * Id to be applied to the root node.
+     */
+    id?: string;
+    /**
+     * Class names to be applied.
+     */
+    className?: string;
+    /**
+     * A Jss Object used to override or extend the styles applied to the Radio button.
+     */
+    classes?: HvVerticalNavigationTreeViewItemClasses;
+    /**
+     * Is the node disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Can the node be selected.
+     */
+    selectable?: boolean;
+    /**
+     * The id of the node.
+     */
+    nodeId?: string;
+    /**
+     * The icon to display next to the node's label.
+     */
+    icon?: React.ReactNode;
+    /**
+     * The item label.
+     */
+    label?: React.ReactNode;
+    /**
+     * The url for the link.
+     */
+    href?: string;
+    /**
+     * The behavior when opening a link.
+     */
+    target?: string;
+    /**
+     * The node payload.
+     */
+    payload?: any;
+    /**
+     * @ignore
+     */
+    onClick?: any;
+    /**
+     * @ignore
+     */
+    onMouseDown?: any;
+    /**
+     * @ignore
+     */
+    onFocus?: any;
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+};
+
+export declare type HvVerticalNavigationTreeViewProps = {
+    /**
+     * Id to be applied to the root node.
+     */
+    id?: string;
+    /**
+     * Class names to be applied.
+     */
+    className?: string;
+    /**
+     * A Jss Object used to override or extend the styles applied to the Radio button.
+     */
+    classes?: HvVerticalNavigationTreeClasses;
+    /**
+     * Modus operandi (role) of the widget instance.
+     */
+    mode?: NavigationMode;
+    /**
+     * Enables selection.
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Enables the simultaneous selection of multiple items.
+     * @default false
+     */
+    multiSelect?: boolean;
+    /**
+     * The selected nodes' ids.
+     *
+     * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+     */
+    selected?: string[] | string;
+    /**
+     * When uncontrolled, defines the initial selected nodes' ids.
+     *
+     * When `multiSelect` is true this takes an array of strings; when false (default) a string.
+     * @default []
+     */
+    defaultSelected?: string[] | string;
+    /**
+     * Can non-leaf nodes be collapsed / expanded.
+     */
+    collapsible?: boolean;
+    /**
+     * Callback fired when a tree item is selected.
+     *
+     * @param {object} event The event source of the callback.
+     * @param {string} nodeId The id of the selected node.
+     */
+    onChange?: any;
+    /**
+     * Expanded nodes' ids.
+     */
+    expanded?: string[];
+    /**
+     * When uncontrolled, defines the initial expanded nodes' ids.
+     * @default []
+     */
+    defaultExpanded?: string[];
+    /**
+     * Callback fired when tree items are expanded/collapsed.
+     *
+     * @param {object} event The event source of the callback.
+     * @param {array} nodeIds The ids of the expanded nodes (old and new).
+     */
+    onToggle?: (event: any, nodeIds: any) => void;
+    /**
+     * If `true`, will allow focus on disabled items.
+     * @default false
+     */
+    disabledItemsFocusable?: boolean;
+    /**
+     * @ignore
+     */
+    onFocus?: (event: React.FocusEvent<any>) => void;
+    /**
+     * @ignore
+     */
+    onBlur?: (event: any) => void;
+    /**
+     * @ignore
+     */
+    onKeyDown?: (event: KeyboardEvent) => void;
+    /**
+     * The content of the component.
+     */
+    children?: React.ReactNode;
+};
+
 /**
  * Provides the user with a descriptive text, signaling an error, for when the form element is in an invalid state.
  */
@@ -6222,6 +6670,47 @@ export declare const multiButtonClasses: HvMultiButtonClasses;
 
 export declare const multiSelectionEventHandler: (evt: any, index: any, selectionAnchor: any, allValues: any, selectedState: any, selectionCheck: any) => any[];
 
+export declare interface NavigationData {
+    /**
+     * the id to be applied to the root element.
+     */
+    id: string;
+    /**
+     * the label to be rendered on the menu item.
+     */
+    label: string;
+    /**
+     * The url for the link.
+     */
+    href?: string;
+    /**
+     * The behavior when opening a link.
+     */
+    target?: string;
+    /**
+     * Icon to be render.
+     */
+    icon?: React.ReactNode;
+    /**
+     * Data subset.
+     */
+    data?: NavigationData[];
+    /**
+     * if `true` the item is disabled and is not interactive.
+     */
+    disabled?: boolean;
+    /**
+     * if `true` the item doesn't have a selected state.
+     */
+    selectable?: boolean;
+    /**
+     * Any other properties.
+     */
+    [otherProperty: string]: any;
+}
+
+export declare type NavigationMode = "treeview" | "navigation";
+
 export declare const normalizeProgressBar: (value: number, max: number) => number;
 
 export declare const outlineStyles: {
@@ -6336,18 +6825,24 @@ export { themes }
 
 export declare const tooltipClasses: HvTooltipClasses;
 
+export declare const treeViewClasses: HvVerticalNavigationTreeViewClasses;
+
+export declare const treeViewItemClasses: HvVerticalNavigationTreeViewItemClasses;
+
 export declare const typographyClasses: HvTypographyClasses;
 
 export declare type UseBulkActionsProps = (<D extends object = Record<string, unknown>>(hooks: Hooks<D>) => void) & {
     pluginName: string;
 };
 
-export declare const useClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: Event_2) => void) => void;
+export declare const useClickOutside: <T extends HTMLElement = HTMLElement>(ref: RefObject<T>, handler: (event: HvClickOutsideEvent) => void) => void;
 
 export declare function useComputation(valueFn: any, valueFallback?: any): any[];
 
 export declare const useControlled: (controlledProp: any, initialState: any) => any[];
 
+export declare const useEnhancedEffect: typeof useEffect;
+
 export declare type UseFiltersProps = (<D extends object = Record<string, unknown>>(hooks: Hooks<D>) => void) & {
     pluginName: string;
 };
@@ -6647,6 +7142,19 @@ export declare const useWidth: () => string;
 
 declare type ValueOf<T> = T[keyof T];
 
+export declare const verticalNavigationClasses: HvVerticalNavigationClasses;
+
+export declare const VerticalNavigationContext: Context<VerticalNavigationContextValue>;
+
+declare interface VerticalNavigationContextValue {
+    isOpen: boolean;
+    collapsedMode: HvVerticalNavigationMode;
+}
+
+export declare const verticalNavigationHeaderClasses: HvVerticalNavigationHeaderClasses;
+
+export declare const verticalNavigationTreeClasses: HvVerticalNavigationTreeClasses;
+
 export declare type VisibilitySelectorActions = "previous_month" | "next_month" | "previous_year" | "next_year" | "month" | "month_year";
 
 export declare const warningTextClasses: HvWarningTextClasses;
@@ -6662,4 +7170,6 @@ declare interface WithIdProps extends HvExtraProps {
 
 export declare const withTooltip: (Component: any, label: string | undefined, placement: any, hideTooltip: any, tooltipProps: any, tooltipContainerProps: any) => (props: any) => JSX_2.Element;
 
+export declare const wrapperTooltip: (hasTooltips: any, Component: any, label: any) => ((props: any) => JSX_2.Element) | (() => any);
+
 export { }