@hitachivantara/uikit-react-core 5.66.10 → 5.66.12

package/dist/esm/hooks/useEmotionCache.js

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import "@emotion/react/jsx-runtime";
+import "react/jsx-runtime";
 import "@mui/material/styles";
 import { EmotionContext } from "@hitachivantara/uikit-react-shared";
 import "@hitachivantara/uikit-styles";

package/dist/esm/hooks/useTheme.js

@@ -1,5 +1,5 @@
 import { useContext, useMemo } from "react";
-import "@emotion/react/jsx-runtime";
+import "react/jsx-runtime";
 import "@mui/material/styles";
 import { HvThemeContext } from "@hitachivantara/uikit-react-shared";
 import "@hitachivantara/uikit-styles";

package/dist/esm/providers/Provider.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import createCache from "@emotion/cache";
 import { CacheProvider, Global, css, ClassNames } from "@emotion/react";

package/dist/esm/providers/ThemeProvider.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { HvThemeContext, EmotionContext } from "@hitachivantara/uikit-react-shared";

package/dist/esm/types/generic.js.map

@@ -1 +1 @@
-{"version":3,"file":"generic.js","sources":["../../../src/types/generic.ts"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type {\n  HvExtraDeepProps,\n  HvExtraProps,\n} from \"@hitachivantara/uikit-react-shared\";\n\nexport type { HvExtraProps, HvExtraDeepProps };\n\ntype AsProp<C extends React.ElementType> = {\n  /** Custom element type to override the root component */\n  component?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n// Workaround to fix the use of Omit with ComponentPropsWithoutRef\n// Without this the event handlers return any instead of the type for the chosen element\ntype FixComponentProps<T> = T extends any ? T : never;\n\ntype PolymorphicComponent<\n  C extends React.ElementType,\n  Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  FixComponentProps<\n    Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>\n  >;\n\nexport type PolymorphicRef<C extends React.ElementType> =\n  React.ComponentPropsWithRef<C>[\"ref\"];\n\nexport type PolymorphicComponentRef<\n  C extends React.ElementType,\n  Props = {},\n> = PolymorphicComponent<C, Props> & { ref?: PolymorphicRef<C> };\n\n/** HV Base Props. Extends `React.HTMLAttributes` of an element `E`, and filters `K` keys. */\nexport type HvBaseProps<\n  E extends HTMLElement = HTMLDivElement,\n  K extends keyof React.HTMLAttributes<E> = never,\n> = Omit<React.HTMLAttributes<E>, K>;\n\n/** This type allows to do a deep partial by applying the Partial type to each key recursively */\nexport type DeepPartial<T> = T extends Object\n  ? Partial<{\n      [P in keyof T]: DeepPartial<T[P]>;\n    }>\n  : T;\n\n/** This type combines the HvExtraProps and DeepPartial types */\nexport type HvExtraDeepPartialProps<T> = Partial<{\n  [P in keyof T]: DeepPartial<T[P]> & HvExtraProps;\n}> &\n  HvExtraProps;\n\nexport type Arrayable<T> = T | T[];\n\n/** React.forwardRef with fixed type declarations */\nexport function fixedForwardRef<T, P = {}>(\n  // TODO: change `React.ReactElement | null` to `React.ReactNode` in typescript@5\n  render: (props: P, ref: React.Ref<T>) => React.ReactElement | null,\n): (props: P & React.RefAttributes<T>) => React.ReactElement | null {\n  return forwardRef(render) as any;\n}\n\n// Source code from: https://github.com/piotrwitek/utility-types/blob/master/src/mapped-types.ts\n/**\n * Optional\n * @desc From `T` make a set of properties by key `K` become optional\n * @example\n *    type Props = {\n *      name: string;\n *      age: number;\n *      visible: boolean;\n *    };\n *\n *    // Expect: { name?: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props>;\n *\n *    // Expect: { name: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props, 'age' | 'visible'>;\n */\nexport type HvOptional<T extends object, K extends keyof T = keyof T> = Omit<\n  T,\n  K\n> &\n  Partial<Pick<T, K>>;\n"],"names":[],"mappings":";AAyDO,SAAS,gBAEd,QACkE;AAClE,SAAO,WAAW,MAAM;AAC1B;"}
+{"version":3,"file":"generic.js","sources":["../../../src/types/generic.ts"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type {\n  HvExtraDeepProps,\n  HvExtraProps,\n} from \"@hitachivantara/uikit-react-shared\";\n\nexport type { HvExtraProps, HvExtraDeepProps };\n\ntype AsProp<C extends React.ElementType> = {\n  /** Custom element type to override the root component */\n  component?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n// Workaround to fix the use of Omit with ComponentPropsWithoutRef\n// Without this the event handlers return any instead of the type for the chosen element\ntype FixComponentProps<T> = T extends any ? T : never;\n\ntype PolymorphicComponent<\n  C extends React.ElementType,\n  Props = {},\n> = React.PropsWithChildren<Props & AsProp<C>> &\n  FixComponentProps<\n    Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>\n  >;\n\nexport type PolymorphicRef<C extends React.ElementType> =\n  React.ComponentPropsWithRef<C>[\"ref\"];\n\nexport type PolymorphicComponentRef<\n  C extends React.ElementType,\n  Props = {},\n> = PolymorphicComponent<C, Props> & { ref?: PolymorphicRef<C> };\n\n/** HV Base Props. Extends `React.HTMLAttributes` of an element `E`, and filters `K` keys. */\nexport type HvBaseProps<\n  E extends HTMLElement = HTMLDivElement,\n  K extends keyof React.HTMLAttributes<E> = never,\n> = Omit<React.HTMLAttributes<E>, K>;\n\n/** This type allows to do a deep partial by applying the Partial type to each key recursively */\nexport type DeepPartial<T> = T extends {}\n  ? Partial<{\n      [P in keyof T]: DeepPartial<T[P]>;\n    }>\n  : T;\n\n/** This type combines the HvExtraProps and DeepPartial types */\nexport type HvExtraDeepPartialProps<T> = Partial<{\n  [P in keyof T]: DeepPartial<T[P]> & HvExtraProps;\n}> &\n  HvExtraProps;\n\nexport type Arrayable<T> = T | T[];\n\n/** React.forwardRef with fixed type declarations */\nexport function fixedForwardRef<T, P = {}>(\n  // TODO: change `React.ReactElement | null` to `React.ReactNode` in typescript@5\n  render: (props: P, ref: React.Ref<T>) => React.ReactElement | null,\n): (props: P & React.RefAttributes<T>) => React.ReactElement | null {\n  return forwardRef(render) as any;\n}\n\n// Source code from: https://github.com/piotrwitek/utility-types/blob/master/src/mapped-types.ts\n/**\n * Optional\n * @desc From `T` make a set of properties by key `K` become optional\n * @example\n *    type Props = {\n *      name: string;\n *      age: number;\n *      visible: boolean;\n *    };\n *\n *    // Expect: { name?: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props>;\n *\n *    // Expect: { name: string; age?: number; visible?: boolean; }\n *    type Props = Optional<Props, 'age' | 'visible'>;\n */\nexport type HvOptional<T extends object, K extends keyof T = keyof T> = Omit<\n  T,\n  K\n> &\n  Partial<Pick<T, K>>;\n"],"names":[],"mappings":";AAyDO,SAAS,gBAEd,QACkE;AAClE,SAAO,WAAW,MAAM;AAC1B;"}

package/dist/esm/utils/focusableElementFinder.js

@@ -1,5 +1,5 @@
 const SELECTORS = 'input, button, select, textarea, a[href], [tabindex]:not([tabindex="-1"])';
-const getFocusableList = (node) => node && node.querySelectorAll(SELECTORS) || [];
+const getFocusableList = (node) => node?.querySelectorAll(SELECTORS) || [];
 const getPrevNextFocus = (nodeId) => {
   const nodes = getFocusableList(document);
   const nbNodes = nodes.length;

package/dist/esm/utils/focusableElementFinder.js.map

@@ -1 +1 @@
-{"version":3,"file":"focusableElementFinder.js","sources":["../../../src/utils/focusableElementFinder.ts"],"sourcesContent":["const SELECTORS =\n  'input, button, select, textarea, a[href], [tabindex]:not([tabindex=\"-1\"])';\n\n/** Gets the list of focusable elements. */\nexport const getFocusableList = (node: any) =>\n  (node && node.querySelectorAll(SELECTORS)) || [];\n\n/** Auxiliary function to find adjacent nodes to focus. */\nexport const getPrevNextFocus = (nodeId?: string) => {\n  const nodes = getFocusableList(document);\n\n  const nbNodes = nodes.length;\n  let index = 0;\n  for (; index < nbNodes; index += 1) {\n    if (nodes[index].id === nodeId) {\n      break;\n    }\n  }\n  return {\n    nextFocus: nodes[index + 1 > nbNodes - 1 ? 0 : index + 1],\n    prevFocus: nodes[index - 1 < 0 ? nbNodes - 1 : index - 1],\n  };\n};\n\n/** Get the first and last focusable element from a node. */\nexport const getFirstAndLastFocus = (node: any) => {\n  const focusableList = getFocusableList(node);\n\n  return {\n    first: focusableList[0] || null,\n    last: focusableList[focusableList.length - 1] || null,\n  };\n};\n\nexport default getPrevNextFocus;\n"],"names":[],"mappings":"AAAA,MAAM,YACJ;AAGW,MAAA,mBAAmB,CAAC,SAC9B,QAAQ,KAAK,iBAAiB,SAAS,KAAM,CAAC;AAGpC,MAAA,mBAAmB,CAAC,WAAoB;AAC7C,QAAA,QAAQ,iBAAiB,QAAQ;AAEvC,QAAM,UAAU,MAAM;AACtB,MAAI,QAAQ;AACL,SAAA,QAAQ,SAAS,SAAS,GAAG;AAClC,QAAI,MAAM,KAAK,EAAE,OAAO,QAAQ;AAC9B;AAAA,IACF;AAAA,EACF;AACO,SAAA;AAAA,IACL,WAAW,MAAM,QAAQ,IAAI,UAAU,IAAI,IAAI,QAAQ,CAAC;AAAA,IACxD,WAAW,MAAM,QAAQ,IAAI,IAAI,UAAU,IAAI,QAAQ,CAAC;AAAA,EAAA;AAE5D;AAGa,MAAA,uBAAuB,CAAC,SAAc;AAC3C,QAAA,gBAAgB,iBAAiB,IAAI;AAEpC,SAAA;AAAA,IACL,OAAO,cAAc,CAAC,KAAK;AAAA,IAC3B,MAAM,cAAc,cAAc,SAAS,CAAC,KAAK;AAAA,EAAA;AAErD;"}
+{"version":3,"file":"focusableElementFinder.js","sources":["../../../src/utils/focusableElementFinder.ts"],"sourcesContent":["const SELECTORS =\n  'input, button, select, textarea, a[href], [tabindex]:not([tabindex=\"-1\"])';\n\n/** Gets the list of focusable elements. */\nexport const getFocusableList = (node: any) =>\n  node?.querySelectorAll(SELECTORS) || [];\n\n/** Auxiliary function to find adjacent nodes to focus. */\nexport const getPrevNextFocus = (nodeId?: string) => {\n  const nodes = getFocusableList(document);\n\n  const nbNodes = nodes.length;\n  let index = 0;\n  for (; index < nbNodes; index += 1) {\n    if (nodes[index].id === nodeId) {\n      break;\n    }\n  }\n  return {\n    nextFocus: nodes[index + 1 > nbNodes - 1 ? 0 : index + 1],\n    prevFocus: nodes[index - 1 < 0 ? nbNodes - 1 : index - 1],\n  };\n};\n\n/** Get the first and last focusable element from a node. */\nexport const getFirstAndLastFocus = (node: any) => {\n  const focusableList = getFocusableList(node);\n\n  return {\n    first: focusableList[0] || null,\n    last: focusableList[focusableList.length - 1] || null,\n  };\n};\n\nexport default getPrevNextFocus;\n"],"names":[],"mappings":"AAAA,MAAM,YACJ;AAGK,MAAM,mBAAmB,CAAC,SAC/B,MAAM,iBAAiB,SAAS,KAAK,CAAC;AAG3B,MAAA,mBAAmB,CAAC,WAAoB;AAC7C,QAAA,QAAQ,iBAAiB,QAAQ;AAEvC,QAAM,UAAU,MAAM;AACtB,MAAI,QAAQ;AACL,SAAA,QAAQ,SAAS,SAAS,GAAG;AAClC,QAAI,MAAM,KAAK,EAAE,OAAO,QAAQ;AAC9B;AAAA,IACF;AAAA,EACF;AACO,SAAA;AAAA,IACL,WAAW,MAAM,QAAQ,IAAI,UAAU,IAAI,IAAI,QAAQ,CAAC;AAAA,IACxD,WAAW,MAAM,QAAQ,IAAI,IAAI,UAAU,IAAI,QAAQ,CAAC;AAAA,EAAA;AAE5D;AAGa,MAAA,uBAAuB,CAAC,SAAc;AAC3C,QAAA,gBAAgB,iBAAiB,IAAI;AAEpC,SAAA;AAAA,IACL,OAAO,cAAc,CAAC,KAAK;AAAA,IAC3B,MAAM,cAAc,cAAc,SAAS,CAAC,KAAK;AAAA,EAAA;AAErD;"}

package/dist/esm/utils/iconVariant.js

@@ -1,4 +1,4 @@
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Info, Fail, Caution, Success } from "@hitachivantara/uikit-react-icons";
 const iconVariant = (variant, color, semantic) => {
   switch (variant) {

package/dist/types/index.d.ts

@@ -61,7 +61,7 @@ import { InputBaseComponentProps } from '@mui/material/InputBase';
 import { InputBaseProps } from '@mui/material/InputBase';
 import { InputProps } from '@mui/material/Input';
 import { JSX as JSX_2 } from 'react';
-import { JSX as JSX_3 } from '@emotion/react/jsx-runtime';
+import { JSX as JSX_3 } from 'react/jsx-runtime';
 import { JSXElementConstructor } from 'react';
 import { OptionGroupProps } from '@mui/base/OptionGroup';
 import { OptionOwnProps } from '@mui/base/Option';
@@ -650,7 +650,7 @@ export declare interface DateRangeProp {
 export declare const decreaseSize: (size: string) => "XS" | "S" | "M" | "L";
 
 /** This type allows to do a deep partial by applying the Partial type to each key recursively */
-export declare type DeepPartial<T> = T extends Object ? Partial<{
+export declare type DeepPartial<T> = T extends {} ? Partial<{
     [P in keyof T]: DeepPartial<T[P]>;
 }> : T;
 
@@ -1041,13 +1041,13 @@ export declare const globalActionsClasses: {
     section: "HvGlobalActions-section";
     wrapper: "HvGlobalActions-wrapper";
     sectionName: "HvGlobalActions-sectionName";
+    backButton: "HvGlobalActions-backButton";
     actions: "HvGlobalActions-actions";
     positionSticky: "HvGlobalActions-positionSticky";
     positionFixed: "HvGlobalActions-positionFixed";
     global: "HvGlobalActions-global";
     globalSectionArea: "HvGlobalActions-globalSectionArea";
     globalWrapperComplement: "HvGlobalActions-globalWrapperComplement";
-    backButton: "HvGlobalActions-backButton";
 };
 
 export declare const gridClasses: {
@@ -2265,13 +2265,11 @@ export declare interface HvCardHeaderProps extends Omit<CardHeaderProps, "classe
     classes?: HvCardHeaderClasses;
 }
 
-export declare const HvCardMedia: ({ id, classes: classesProp, className, children, title, onClick, ...others }: HvCardMediaProps) => JSX_3.Element;
+export declare const HvCardMedia: ({ classes: classesProp, className, children, ...others }: HvCardMediaProps) => JSX_3.Element;
 
 export declare type HvCardMediaClasses = ExtractNames<typeof useClasses_42>;
 
 export declare interface HvCardMediaProps extends Omit<CardMediaProps, "classes">, React.ImgHTMLAttributes<HTMLDivElement> {
-    /** Id to be applied to the root node. */
-    id?: string;
     /** The title of the media. */
     title?: string;
     /** The function that will be executed when this section is clicked. */
@@ -4399,7 +4397,7 @@ export declare const HvLink: (props: HvLinkProps) => JSX_3.Element;
 export declare type HvLinkClasses = ExtractNames<typeof useClasses_83>;
 
 export declare interface HvLinkProps extends HvBaseProps<HTMLAnchorElement, "onClick"> {
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: any) => void | undefined;
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>, data: any) => void;
     route?: string;
     data?: any;
     children: any;
@@ -7191,102 +7189,50 @@ export declare interface HvValidationMessages {
  */
 export declare const HvVerticalNavigation: (props: HvVerticalNavigationProps) => JSX_3.Element;
 
-export declare const HvVerticalNavigationAction: ({ className, classes: classesProp, id, label, icon, onClick, ...others }: HvVerticalNavigationActionProps) => JSX_3.Element;
+export declare const HvVerticalNavigationAction: (props: HvVerticalNavigationActionProps) => JSX_3.Element;
 
 export declare type HvVerticalNavigationActionClasses = ExtractNames<typeof useClasses_123>;
 
-export declare interface HvVerticalNavigationActionProps {
-    /**
-     * Class names to be applied.
-     */
-    className?: string;
-    /**
-     * A Jss Object used to override or extend the styles applied to the component.
-     */
+export declare interface HvVerticalNavigationActionProps extends Omit<HvTypographyProps, "classes" | "onClick"> {
+    /** 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.
-     */
+    /** Visual label. */
     label?: string;
-    /**
-     * Icon.
-     */
+    /** Icon. */
     icon?: React.ReactNode;
-    /**
-     * Callback called when clicked.
-     */
-    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Callback called when clicked. */
+    onClick?: (event: React.KeyboardEvent<HTMLDivElement> | React.MouseEvent<HTMLDivElement>) => void;
 }
 
-export declare const HvVerticalNavigationActions: ({ className, classes: classesProp, id, children, ...others }: HvVerticalNavigationActionsProps) => JSX_3.Element;
+export declare const HvVerticalNavigationActions: (props: HvVerticalNavigationActionsProps) => JSX_3.Element;
 
 export declare type HvVerticalNavigationActionsClasses = ExtractNames<typeof useClasses_122>;
 
-export declare interface HvVerticalNavigationActionsProps {
-    /**
-     * Class names to be applied.
-     */
-    className?: string;
-    /**
-     * A Jss Object used to override or extend the styles applied to the component.
-     */
+export declare interface HvVerticalNavigationActionsProps extends HvBaseProps {
+    /** 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 = ExtractNames<typeof useClasses_120>;
 
-export declare const HvVerticalNavigationHeader: ({ title, openIcon: openIconProp, closeIcon: closeIconProp, collapseButtonProps, backButtonProps, className, classes: classesProp, onCollapseButtonClick, ...others }: HvVerticalNavigationHeaderProps) => JSX_3.Element | null;
+export declare const HvVerticalNavigationHeader: (props: HvVerticalNavigationHeaderProps) => JSX_3.Element | null;
 
 export declare type HvVerticalNavigationHeaderClasses = ExtractNames<typeof useClasses_121>;
 
-export declare interface HvVerticalNavigationHeaderProps {
-    /**
-     * Id to be applied to the root node.
-     */
-    id?: string;
-    /**
-     * The title text to show on Header.
-     */
+export declare interface HvVerticalNavigationHeaderProps extends HvBaseProps {
+    /** The title text to show on header. */
     title?: string;
-    /**
-     * Icon to show when Vertical Navigation is collapsed.
-     */
+    /** Icon to show when vertical navigation is collapsed. */
     openIcon?: React.ReactNode;
-    /**
-     * Icon to show when Vertical Navigation is expanded.
-     */
+    /** Icon to show when vertical navigation is expanded. */
     closeIcon?: React.ReactNode;
-    /**
-     * Props for the collapse button.
-     */
+    /** Props for the collapse button. */
     collapseButtonProps?: HvButtonProps;
-    /**
-     * Props for the back button.
-     */
+    /** Props for the back button. */
     backButtonProps?: HvButtonProps;
-    /**
-     * Class names to be applied.
-     */
-    className?: string;
-    /**
-     * A Jss Object used to override or extend the styles applied to the component.
-     */
+    /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvVerticalNavigationHeaderClasses;
-    /**
-     * Handler for the collapse button.
-     */
+    /** Handler for the collapse button. */
     onCollapseButtonClick?: React.MouseEventHandler<HTMLElement>;
 }
 
@@ -7295,13 +7241,9 @@ export declare type HvVerticalNavigationMode = "icon" | "simple";
 export declare type HvVerticalNavigationPosition = "static" | "relative" | "fixed" | "absolute";
 
 export declare interface HvVerticalNavigationProps extends HvBaseProps<HTMLDivElement> {
-    /**
-     * A Jss Object used to override or extend the styles applied to the component.
-     */
+    /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvVerticalNavigationClasses;
-    /**
-     * Current State of the Vertical Navigation Collapse
-     */
+    /** Current State of the Vertical Navigation Collapse */
     open?: boolean;
     /**
      * Collapsed Mode for the Vertical Navigation, the default value is "simple".
@@ -7309,9 +7251,7 @@ export declare interface HvVerticalNavigationProps extends HvBaseProps<HTMLDivEl
      * @deprecated - `useIcons` property should be used instead.
      */
     collapsedMode?: HvVerticalNavigationMode;
-    /**
-     * Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false.
-     */
+    /** Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false. */
     slider?: boolean;
     /**
      * Boolean to determine if icons should be displayed in the navigation menu.
@@ -7326,14 +7266,8 @@ export declare const HvVerticalNavigationSlider: (props: HvVerticalNavigationSli
 
 export declare type HvVerticalNavigationSliderClasses = ExtractNames<typeof useClasses_125>;
 
-export declare interface HvVerticalNavigationSliderProps {
-    /**
-     * Id to be applied to the root node of the panel.
-     */
-    id?: string;
-    /**
-     * A Jss Object used to override or extend the styles applied.
-     */
+export declare interface HvVerticalNavigationSliderProps extends Omit<HvListContainerProps, "classes"> {
+    /** A Jss Object used to override or extend the styles applied. */
     classes?: HvVerticalNavigationSliderClasses;
     /**
      * An array containing the data for each menu item.
@@ -7346,65 +7280,34 @@ export declare interface HvVerticalNavigationSliderProps {
      * target - the behavior when opening an url.
      */
     data?: NavigationData[];
-    /**
-     * The selected item id.
-     */
+    /** The selected item id. */
     selected?: string;
-    /**
-     * Triggered when the item is clicked.
-     */
+    /** Triggered when the item is clicked. */
     onNavigateToTarget?: (event: React.MouseEvent<HTMLLIElement>, item: NavigationData) => void;
-    /**
-     * Triggered when the navigate to child button is clicked.
-     */
+    /** Triggered when the navigate to child button is clicked. */
     onNavigateToChild?: (event: React.MouseEvent<HTMLButtonElement>, item: NavigationData) => void;
     /** Aria label to apply to the navigate to submenu button on the list items. */
     forwardButtonAriaLabel?: string;
 }
 
-export declare const HvVerticalNavigationTree: ({ id, className, classes: classesProp, data, mode, collapsible, expanded: expandedProp, defaultExpanded, onToggle, selected: selectedProp, defaultSelected, onChange, sliderForwardButtonAriaLabel, ...others }: HvVerticalNavigationTreeProps) => JSX_3.Element;
+export declare const HvVerticalNavigationTree: (props: HvVerticalNavigationTreeProps) => JSX_3.Element;
 
 export declare type HvVerticalNavigationTreeClasses = ExtractNames<typeof useClasses_124>;
 
 export declare interface HvVerticalNavigationTreeProps extends HvBaseProps<HTMLDivElement, "onChange"> {
-    /**
-     * 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.
-     */
+    /** A Jss Object used to override or extend the styles applied. */
     classes?: HvVerticalNavigationTreeClasses;
-    /**
-     * Modus operandi (role) of the widget instance.
-     */
+    /** Modus operandi (role) of the widget instance. */
     mode?: NavigationMode;
-    /**
-     * Can non-leaf nodes be collapsed / expanded.
-     */
+    /** Can non-leaf nodes be collapsed / expanded. */
     collapsible?: boolean;
-    /**
-     * The ID of the selected page.
-     */
+    /** The ID of the selected page. */
     selected?: string;
-    /**
-     * When uncontrolled, defines the initial selected page ID.
-     */
+    /** 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.
-     */
+    /** Callback fired when a navigation item is selected. */
+    onChange?: (event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLUListElement>, page: NavigationData) => void;
+    /** Expanded nodes' ids. */
     expanded?: string[];
     /**
      * When uncontrolled, defines the initial expanded nodes' ids.
@@ -7415,13 +7318,8 @@ export declare interface HvVerticalNavigationTreeProps extends HvBaseProps<HTMLD
      * 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;
+    /** Callback fired when tree items are expanded/collapsed. */
+    onToggle?: (event: React.KeyboardEvent<HTMLUListElement>, nodeIds: string[]) => void;
     /**
      * An array containing the data for each menu item.
      *
@@ -7436,7 +7334,7 @@ export declare interface HvVerticalNavigationTreeProps extends HvBaseProps<HTMLD
     sliderForwardButtonAriaLabel?: string;
 }
 
-export declare const HvVerticalNavigationTreeView: ForwardRefExoticComponent<HvVerticalNavigationTreeViewProps & RefAttributes<unknown>>;
+export declare const HvVerticalNavigationTreeView: ForwardRefExoticComponent<HvVerticalNavigationTreeViewProps & RefAttributes<HTMLUListElement>>;
 
 export declare type HvVerticalNavigationTreeViewClasses = ExtractNames<typeof useClasses_126>;
 
@@ -7515,94 +7413,35 @@ export declare interface HvVerticalNavigationTreeViewItemProps {
     disableTooltip?: boolean;
 }
 
-export declare interface 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 component.
-     */
+export declare interface HvVerticalNavigationTreeViewProps extends HvBaseProps<HTMLUListElement, "onChange"> {
+    /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvVerticalNavigationTreeViewClasses;
-    /**
-     * Modus operandi (role) of the widget instance.
-     */
+    /** Modus operandi (role) of the widget instance. */
     mode?: NavigationMode;
-    /**
-     * Enables selection.
-     * @default false
-     */
+    /** Enables selection. @default false */
     selectable?: boolean;
-    /**
-     * Enables the simultaneous selection of multiple items.
-     * @default false
-     */
+    /** 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.
-     */
+    /** 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.
-     */
+    /** 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.
-     */
+    /** Callback fired when a tree item is selected. */
+    onChange?: (event: React.KeyboardEvent<HTMLUListElement>, nodeId: string | string[], payloads: any) => void;
+    /** Expanded nodes' ids. */
     expanded?: string[];
-    /**
-     * When uncontrolled, defines the initial expanded nodes' ids.
-     * @default []
-     */
+    /** 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: string[]) => void;
-    /**
-     * If `true`, will allow focus on disabled items.
-     * @default false
-     */
+    /** Callback fired when tree items are expanded/collapsed. */
+    onToggle?: (event: React.KeyboardEvent<HTMLUListElement>, nodeIds: string[]) => 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;
 }
 
 export declare type HvVerticalScrollListItemClasses = ExtractNames<typeof useClasses_95>;
@@ -8428,6 +8267,7 @@ export declare const treeViewItemClasses: {
     label: "HvVerticalNavigationTreeViewItem-label";
     disabled: "HvVerticalNavigationTreeViewItem-disabled";
     selectable: "HvVerticalNavigationTreeViewItem-selectable";
+    icon: "HvVerticalNavigationTreeViewItem-icon";
     selected: "HvVerticalNavigationTreeViewItem-selected";
     hide: "HvVerticalNavigationTreeViewItem-hide";
     expanded: "HvVerticalNavigationTreeViewItem-expanded";
@@ -8971,11 +8811,13 @@ declare const useClasses_120: (classesProp?: Partial<Record<"root" | "slider" |
     cx: (...args: any) => string;
 };
 
-declare const useClasses_121: (classesProp?: Partial<Record<"root" | "minimized" | "collapseButton", string>>, addStatic?: boolean) => {
+declare const useClasses_121: (classesProp?: Partial<Record<"root" | "title" | "backButton" | "collapseButton" | "minimized", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
-        minimized: string;
+        title: string;
+        backButton: string;
         collapseButton: string;
+        minimized: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -9009,14 +8851,14 @@ declare const useClasses_123: (classesProp?: Partial<Record<"action" | "minimize
     cx: (...args: any) => string;
 };
 
-declare const useClasses_124: (classesProp?: Partial<Record<"root" | "listItem" | "list" | "popup" | "collapsed" | "navigationPopup", string>>, addStatic?: boolean) => {
+declare const useClasses_124: (classesProp?: Partial<Record<"root" | "listItem" | "list" | "navigationPopup" | "popup" | "collapsed", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         listItem: string;
         list: string;
+        navigationPopup: string;
         popup: string;
         collapsed: string;
-        navigationPopup: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -9025,11 +8867,14 @@ declare const useClasses_124: (classesProp?: Partial<Record<"root" | "listItem"
     cx: (...args: any) => string;
 };
 
-declare const useClasses_125: (classesProp?: Partial<Record<"root" | "listItemSelected" | "listItemFocus", string>>, addStatic?: boolean) => {
+declare const useClasses_125: (classesProp?: Partial<Record<"root" | "listItemSelected" | "listItemDisabled" | "listItemFocus" | "forwardButton" | "listContainer", string>>, addStatic?: boolean) => {
     classes: {
         root: string;
         listItemSelected: string;
+        listItemDisabled: string;
         listItemFocus: string;
+        forwardButton: string;
+        listContainer: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -9049,13 +8894,14 @@ declare const useClasses_126: (classesProp?: Partial<Record<"root", string>>, ad
     cx: (...args: any) => string;
 };
 
-declare const useClasses_127: (classesProp?: Partial<Record<"content" | "link" | "label" | "disabled" | "selectable" | "selected" | "hide" | "expanded" | "unselectable" | "group" | "node" | "focused" | "expandable" | "labelIcon" | "collapsed" | "minimized" | "unselected" | "labelExpandable", string>>, addStatic?: boolean) => {
+declare const useClasses_127: (classesProp?: Partial<Record<"content" | "link" | "label" | "disabled" | "selectable" | "icon" | "selected" | "hide" | "expanded" | "unselectable" | "group" | "node" | "focused" | "expandable" | "labelIcon" | "collapsed" | "minimized" | "unselected" | "labelExpandable", string>>, addStatic?: boolean) => {
     classes: {
         content: string;
         link: string;
         label: string;
         disabled: string;
         selectable: string;
+        icon: string;
         selected: string;
         hide: string;
         expanded: string;
@@ -10026,8 +9872,9 @@ declare const useClasses_57: (classesProp?: Partial<Record<"description" | "labe
     cx: (...args: any) => string;
 };
 
-declare const useClasses_58: (classesProp?: Partial<Record<"selection" | "selectAll" | "selectAllContainer" | "dropdownListContainer" | "rootList" | "searchContainer" | "listBorderDown" | "listContainer", string>>, addStatic?: boolean) => {
+declare const useClasses_58: (classesProp?: Partial<Record<"listContainer" | "selection" | "selectAll" | "selectAllContainer" | "dropdownListContainer" | "rootList" | "searchContainer" | "listBorderDown", string>>, addStatic?: boolean) => {
     classes: {
+        listContainer: string;
         selection: string;
         selectAll: string;
         selectAllContainer: string;
@@ -10035,7 +9882,6 @@ declare const useClasses_58: (classesProp?: Partial<Record<"selection" | "select
         rootList: string;
         searchContainer: string;
         listBorderDown: string;
-        listContainer: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -10303,20 +10149,20 @@ declare const useClasses_72: (classesProp?: Partial<Record<"name" | "small" | "r
     cx: (...args: any) => string;
 };
 
-declare const useClasses_73: (classesProp?: Partial<Record<"name" | "root" | "section" | "wrapper" | "sectionName" | "actions" | "positionSticky" | "positionFixed" | "global" | "globalSectionArea" | "globalWrapperComplement" | "backButton", string>>, addStatic?: boolean) => {
+declare const useClasses_73: (classesProp?: Partial<Record<"name" | "root" | "section" | "wrapper" | "sectionName" | "backButton" | "actions" | "positionSticky" | "positionFixed" | "global" | "globalSectionArea" | "globalWrapperComplement", string>>, addStatic?: boolean) => {
     classes: {
         name: string;
         root: string;
         section: string;
         wrapper: string;
         sectionName: string;
+        backButton: string;
         actions: string;
         positionSticky: string;
         positionFixed: string;
         global: string;
         globalSectionArea: string;
         globalWrapperComplement: string;
-        backButton: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -11317,23 +11163,28 @@ declare interface VerticalNavigationContextValue {
 
 export declare const verticalNavigationHeaderClasses: {
     root: "HvVerticalNavigationHeader-root";
-    minimized: "HvVerticalNavigationHeader-minimized";
+    title: "HvVerticalNavigationHeader-title";
+    backButton: "HvVerticalNavigationHeader-backButton";
     collapseButton: "HvVerticalNavigationHeader-collapseButton";
+    minimized: "HvVerticalNavigationHeader-minimized";
 };
 
 export declare const verticalNavigationSliderClasses: {
     root: "HvVerticalNavigationSlider-root";
     listItemSelected: "HvVerticalNavigationSlider-listItemSelected";
+    listItemDisabled: "HvVerticalNavigationSlider-listItemDisabled";
     listItemFocus: "HvVerticalNavigationSlider-listItemFocus";
+    forwardButton: "HvVerticalNavigationSlider-forwardButton";
+    listContainer: "HvVerticalNavigationSlider-listContainer";
 };
 
 export declare const verticalNavigationTreeClasses: {
     root: "HvVerticalNavigationTree-root";
     listItem: "HvVerticalNavigationTree-listItem";
     list: "HvVerticalNavigationTree-list";
+    navigationPopup: "HvVerticalNavigationTree-navigationPopup";
     popup: "HvVerticalNavigationTree-popup";
     collapsed: "HvVerticalNavigationTree-collapsed";
-    navigationPopup: "HvVerticalNavigationTree-navigationPopup";
 };
 
 export declare const verticalScrollListItemClasses: {