@hitachivantara/uikit-react-core 5.0.0-next.20 → 5.0.0-next.22

package/dist/types/index.d.ts

@@ -11,7 +11,6 @@ import { CellProps } from 'react-table';
 import { ChangeEvent } from 'react';
 import { CheckboxProps } from '@mui/material';
 import { ChipProps } from '@mui/material/Chip';
-import { Column } from 'react-table';
 import { ColumnInstance } from 'react-table';
 import { ColumnInterface } from 'react-table';
 import { ContainerProps } from '@mui/material/Container';
@@ -37,7 +36,6 @@ import { HvActionGeneric as HvActionGeneric_2 } from 'components';
 import { HvBannerActionPosition as HvBannerActionPosition_2 } from 'components';
 import { HvBannerVariant as HvBannerVariant_2 } from 'components';
 import { HvBaseDropdownProps as HvBaseDropdownProps_2 } from 'components';
-import { HvBaseProps as HvBaseProps_3 } from 'types/generic';
 import { HvBaseSwitchProps as HvBaseSwitchProps_2 } from 'components';
 import { HvBaseTheme } from '@hitachivantara/uikit-styles';
 import { HvBreakpoints as HvBreakpoints_2 } from 'types/tokens';
@@ -52,7 +50,6 @@ import { HvHeaderNavigationItemProp as HvHeaderNavigationItemProp_2 } from 'comp
 import { HvInputProps as HvInputProps_2 } from 'components';
 import { HvLabelProps as HvLabelProps_2 } from 'components';
 import { HvListValue as HvListValue_2 } from 'components';
-import { HvParsedThemeStyles } from '@hitachivantara/uikit-styles';
 import { HvRowInstance as HvRowInstance_2 } from 'components';
 import { HvSemanticColorKeys as HvSemanticColorKeys_2 } from 'types/tokens';
 import { HvTableColumnConfig as HvTableColumnConfig_2 } from 'components';
@@ -76,6 +73,7 @@ import { InputProps } from '@mui/material';
 import type { JSX as JSX_2 } from '@emotion/react/jsx-runtime';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { MouseEventHandler } from 'react';
+import { NavigationData as NavigationData_2 } from 'components';
 import { PopperProps } from '@mui/material';
 import { PropGetter } from 'react-table';
 import { RadioProps } from '@mui/material';
@@ -98,6 +96,7 @@ import { TableCommonProps } from 'react-table';
 import { TableExpandedToggleProps } from 'react-table';
 import { TableFooterProps } from 'react-table';
 import { TableHeaderProps } from 'react-table';
+import type { TableHTMLAttributes } from 'react';
 import { TableInstance } from 'react-table';
 import { TableOptions } from 'react-table';
 import { TablePropGetter } from 'react-table';
@@ -260,7 +259,7 @@ export declare const controlsClasses: HvControlsClasses;
  * Creates a customized theme based on the base theme and customizations given.
  * For the color modes, the colors that are not defined will be replaced by the values from the dawn mode of the base theme.
  */
-export declare const createTheme: (theme: HvCreateThemeProps) => HvTheme | HvThemeStructure;
+export declare const createTheme: (props: HvCreateThemeProps) => HvTheme | HvThemeStructure;
 
 export declare type DateRangeProp = {
     startDate: Date;
@@ -289,10 +288,7 @@ export declare const defaultGetToggleAllRowsSelectedProps: (props: any, { instan
     instance: any;
 }) => any[];
 
-export declare const defaultGetToggleRowSelectedProps: (props: any, { instance, row }: {
-    instance: any;
-    row: any;
-}) => any[];
+export declare const defaultGetToggleRowSelectedProps: (props: any, meta: any) => any[];
 
 declare type Descriptor = {
     id?: string;
@@ -433,14 +429,14 @@ export declare const headerNavigationClasses: HvHeaderNavigationClasses;
 
 export declare const hexToRgbA: (hex: any, factor?: number) => string;
 
-export declare type HvAccentColorKeys = "acce1" | "acce2" | "acce2h" | "acce3";
+export declare type HvAccentColorKeys = "primary" | "primary_80" | "primary_20" | "brand" | "secondary" | "secondary_60" | "secondary_80";
 
 export declare type HvAccentColors = Record<HvAccentColorKeys, string>;
 
 /**
  * A accordion is a design element that expands in place to expose hidden information.
  */
-export declare const HvAccordion: ({ id, className, classes, disabled, label, onChange, children, expanded, headingLevel, defaultExpanded, containerProps, ...others }: HvAccordionProps) => JSX_2.Element;
+export declare const HvAccordion: ({ id, className, classes, disabled, label, onChange, children, expanded, headingLevel, defaultExpanded, containerProps, labelVariant, ...others }: HvAccordionProps) => JSX_2.Element;
 
 export declare type HvAccordionClasses = {
     /** Styles applied to the component root of the accordion. */
@@ -496,6 +492,7 @@ export declare type HvAccordionProps = HvBaseProps & {
      * Is the accordion disabled.
      */
     disabled?: boolean;
+    labelVariant?: HvTypographyVariants_2;
 };
 
 export declare const HvActionBar: (props: HvActionBarProps) => JSX_2.Element;
@@ -715,7 +712,7 @@ export declare type HvAppSwitcherProps = HvBaseProps & {
     classes?: HvAppSwitcherClasses;
 };
 
-export declare type HvAtmosphereColorKeys = "atmo1" | "atmo2" | "atmo3" | "atmo4" | "atmo5";
+export declare type HvAtmosphereColorKeys = "atmo1" | "atmo2" | "atmo3" | "atmo4";
 
 export declare type HvAtmosphereColors = Record<HvAtmosphereColorKeys, string>;
 
@@ -1009,7 +1006,7 @@ export declare type HvBaseCheckBoxProps = Omit<CheckboxProps, "onChange" | "clas
     classes?: HvBaseCheckBoxClasses;
 };
 
-export declare type HvBaseColorKeys = "base1" | "base2";
+export declare type HvBaseColorKeys = "base_light" | "base_dark";
 
 export declare type HvBaseColors = Record<HvBaseColorKeys, string>;
 
@@ -1549,8 +1546,8 @@ export declare interface HvButtonProps extends React_2.ButtonHTMLAttributes<HTML
     overrideIconColors?: boolean;
     /** A Jss Object used to override or extend the styles applied. */
     classes?: HvButtonClasses;
+    /** Whether the Button is selected or not. */
     selected?: boolean;
-    sx?: CSSProperties;
 }
 
 export declare type HvButtonRadius = "none" | "base" | "round" | "circle" | "full";
@@ -1788,12 +1785,12 @@ export declare type HvCardProps = HvBaseProps & {
     classes?: HvCardClasses;
 };
 
-export declare type HvCategoricalColorKeys = "cviz1" | "cviz2" | "cviz3" | "cviz4" | "cviz5" | "cviz6" | "cviz7" | "cviz8" | "cviz9" | "cviz10" | "cviz11" | "cviz12" | "cviz13" | "cviz14" | "cviz15" | "cviz16" | "cviz17" | "cviz18" | "cviz19" | "cviz20";
+export declare type HvCategoricalColorKeys = "cat1" | "cat1_180" | "cat1_160" | "cat1_140" | "cat1_120" | "cat1_80" | "cat1_60" | "cat1_40" | "cat1_20" | "cat2" | "cat2_180" | "cat2_160" | "cat2_140" | "cat2_120" | "cat2_80" | "cat2_60" | "cat2_40" | "cat2_20" | "cat3" | "cat3_180" | "cat3_160" | "cat3_140" | "cat3_120" | "cat3_80" | "cat3_60" | "cat3_40" | "cat3_20" | "cat4" | "cat4_180" | "cat4_160" | "cat4_140" | "cat4_120" | "cat4_80" | "cat4_60" | "cat4_40" | "cat4_20" | "cat5" | "cat5_180" | "cat5_160" | "cat5_140" | "cat5_120" | "cat5_80" | "cat5_60" | "cat5_40" | "cat5_20" | "cat6" | "cat6_180" | "cat6_160" | "cat6_140" | "cat6_120" | "cat6_80" | "cat6_60" | "cat6_40" | "cat6_20" | "cat7" | "cat7_180" | "cat7_160" | "cat7_140" | "cat7_120" | "cat7_80" | "cat7_60" | "cat7_40" | "cat7_20" | "cat8" | "cat8_180" | "cat8_160" | "cat8_140" | "cat8_120" | "cat8_80" | "cat8_60" | "cat8_40" | "cat8_20" | "cat9" | "cat9_180" | "cat9_160" | "cat9_140" | "cat9_120" | "cat9_80" | "cat9_60" | "cat9_40" | "cat9_20" | "cat10" | "cat10_180" | "cat10_160" | "cat10_140" | "cat10_120" | "cat10_80" | "cat10_60" | "cat10_40" | "cat10_20" | "cat11" | "cat11_180" | "cat11_160" | "cat11_140" | "cat11_120" | "cat11_80" | "cat11_60" | "cat11_40" | "cat11_20" | "cat12" | "cat12_180" | "cat12_160" | "cat12_140" | "cat12_120" | "cat12_80" | "cat12_60" | "cat12_40" | "cat12_20" | "cat13" | "cat14" | "cat15" | "cat16" | "cat17" | "cat18" | "cat19" | "cat20";
 
-export declare interface HvCellInstance<D extends object = Record<string, unknown>, V = any> extends Cell<D, V>, UseGroupByCellProps<D> {
+export declare interface HvCellInstance<D extends object = Record<string, unknown>, V = any> extends Omit<Cell<D, V>, "column" | "row">, UseGroupByCellProps<D> {
     column: HvColumnInstance<D>;
     row: HvRowInstance<D>;
-    getCellProps: (propGetter?: CellPropGetter<D>) => HvUseTableCellProps;
+    getCellProps: (propGetter?: CellPropGetter<D> & HvExtraProps) => HvUseTableCellProps;
 }
 
 export declare type HvCellProps<D extends object, V = any> = CellProps<D, V> & {
@@ -1994,8 +1991,6 @@ export declare type HvCheckBoxProps = Omit<HvBaseCheckBoxProps, "classes"> & {
 
 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> & ({
     Header: string;
 } | ({
@@ -2010,7 +2005,7 @@ declare interface HvColumnGroupInterface<D extends object> {
     columns: Array<HvTableColumnConfig<D>>;
 }
 
-export declare interface HvColumnInstance<D extends object = Record<string, unknown>> extends ColumnInstance<D>, Omit<HvTableColumnOptions<D>, "id">, UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D>, UseSortByColumnProps<D> {
+export declare interface HvColumnInstance<D extends object = Record<string, unknown>> extends Omit<ColumnInstance<D>, "Cell" | "columns" | "parent" | "placeholderOf">, Omit<HvTableColumnOptions<D>, "id">, UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D>, UseSortByColumnProps<D> {
     Cell?: Renderer<HvCellProps<D>>;
     columns: Array<HvColumnInstance<D>>;
     parent: HvColumnInstance<D>;
@@ -2091,7 +2086,10 @@ export declare type HvControlsProps = HvBaseProps & {
      * An instance of useHvTable or useTable used to manage the data
      * if this is not provided data sorting and search must be handled externally
      */
-    callbacks?: Pick<HvTableInstance_2, "setSortBy" | "setGlobalFilter">;
+    callbacks?: {
+        setSortBy?: HvTableInstance_2["setSortBy"];
+        setGlobalFilter?: HvTableInstance_2["setGlobalFilter"];
+    };
     /**
      * Views configuration required for the view buttons
      */
@@ -3324,7 +3322,7 @@ export declare type HvHeaderProps = HvBaseProps & {
     classes?: HvHeaderClasses;
 };
 
-export declare interface HvHooks<D extends object = Record<string, unknown>> extends Hooks<D>, UseExpandedHooks<D>, UseGroupByHooks<D>, UseSortByHooks<D>, UseHvRowSelectionHooks<D>, UseHvTableStickyHooks<D>, UseHvPaginationHooks<D>, UseHvBulkActionsHooks<D> {
+export declare interface HvHooks<D extends object = Record<string, unknown>> extends Omit<Hooks<D>, "getToggleRowSelectedProps" | "getToggleAllRowsSelectedProps" | "getToggleAllPageRowsSelectedProps">, UseExpandedHooks<D>, UseGroupByHooks<D>, UseSortByHooks<D>, UseHvRowSelectionHooks<D>, UseHvTableStickyHooks<D>, UseHvPaginationHooks<D>, UseHvBulkActionsHooks<D> {
 }
 
 /**
@@ -4114,7 +4112,7 @@ export declare type HvPanelProps = HvBaseProps & {
     classes?: HvPanelClasses;
 };
 
-export declare type HvPolarizedColorKeys = "sema1" | "cviz21" | "cviz22" | "cviz23" | "cviz24" | "cviz25" | "cviz26" | "cviz27" | "cviz28" | "sema5";
+export declare type HvPolarizedColorKeys = "positive" | "positive_120" | "positive_80" | "warning" | "warning_120" | "warning_140" | "negative" | "cat21" | "cat22" | "cat23" | "cat24" | "cat25" | "cat26" | "cat27" | "cat28" | "catastrophic";
 
 export declare const HvProgressBar: (props: HvProgressBarProps) => JSX_2.Element;
 
@@ -4151,7 +4149,7 @@ export declare type HvProgressBarProps = HvBaseProps & {
 
 export declare type HvProgressBarStatus = "inProgress" | "completed" | "error";
 
-export declare function hvProgressColumn<D extends Record<string, number>, C extends HvTableColumnConfig_2<D>>(col: C, getPartial?: (row: HvRowInstance_2<D>) => number, getTotal?: (row: HvRowInstance_2<D>) => number, color?: "primary" | "secondary"): HvTableColumnConfig_2<D>;
+export declare function hvProgressColumn<D extends Record<string, unknown>, C extends HvTableColumnConfig_2<D>>(col: C, getPartial?: (row: HvRowInstance_2<D>) => number, getTotal?: (row: HvRowInstance_2<D>) => number, color?: "primary" | "secondary"): HvTableColumnConfig_2<D>;
 
 export declare const HvProgressColumnCell: ({ partial, total, color, }: HvProgressColumnCellProp) => JSX.Element | null;
 
@@ -4167,24 +4165,39 @@ declare interface HvProgressColumnCellProp {
 /**
  * Enables theming capabilities and makes cross-component theme properties available down the tree.
  */
-export declare const HvProvider: ({ children, rootElementId, enableCssBaseline, themes, theme, colorMode, }: HvProviderProps) => JSX_2.Element;
+export declare const HvProvider: ({ children, rootElementId, cssBaseline, cssTheme, themes, theme, colorMode, classNameKey, }: HvProviderProps) => JSX_2.Element;
 
 export declare type HvProviderProps = {
     /**
      * Your component tree.
      */
-    children?: React.ReactNode;
+    children?: React_2.ReactNode;
+    /**
+     * Id of your root element.
+     */
+    rootElementId?: string;
+    /**
+     * By default the baseline styles are applied globally, `global`, to the application for the UI Kit components to work properly.
+     * If you need to scope the baseline styles to avoid styling conflicts, you can set this property to `scoped`.
+     * To scope the baseline to your root, you need to add the `rootElementId` property.
+     * If the `rootElementId` property is not set, the baseline will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content.
+     * If you are providing your own baseline styles, you can set this property to `none` to disable the baseline styles.
+     */
+    cssBaseline?: "global" | "scoped" | "none";
     /**
-     * By default the baseline styles are applied globally to the application to avoid styling conflicts and for the UI Kit components to work properly.
-     * If you are providing your own baseline styles, you can set this property to false.
+     * By default the theme styles are applied globally, `global`, to the application.
+     * If you need to scope the theme styles to avoid styling conflicts, you can set this property to `scoped`.
+     * To scope the theme to your root, you need to add the `rootElementId` property.
+     * If the `rootElementId` property is not set, the theme will be scoped to a new container, `hv-uikit-scoped-root*`, created around your content.
      */
-    enableCssBaseline?: boolean;
+    cssTheme?: "global" | "scoped";
     /**
-     * Id of your root element. The theme's attributes and CSS variables will be set in this element.
+     * The string used to prefix the class names and uniquely identify them. The key can only contain lower case alphabetical characters.
+     * This is useful to avoid class name collisions.
      *
-     * If no value is provided, the document's body will be used.
+     * If no value is provided, the default is `hv-uikit-css`.
      */
-    rootElementId?: string;
+    classNameKey?: string;
     /**
      * List of themes to be used by UI Kit.
      * You can provide your own themes created with the `createTheme` utility and/or the default themes `ds3` and `ds5` provided by UI Kit.
@@ -4470,7 +4483,7 @@ export declare type HvRightListControls = HvListValue_2 & {
     desc: boolean;
 };
 
-export declare interface HvRowInstance<D extends object = Record<string, unknown>> extends Row<D>, UseGroupByRowProps<D>, UseHvRowSelectionRowInstance, UseHvRowExpandRowInstance<D> {
+export declare interface HvRowInstance<D extends object = Record<string, unknown>> extends Omit<Row<D>, "getToggleRowExpandedProps" | "getToggleRowSelectedProps" | "cells" | "allCells" | "subRows">, Omit<UseGroupByRowProps<D>, "subRows">, Omit<UseHvRowSelectionRowInstance, "subRows">, Omit<UseHvRowExpandRowInstance<D>, "subRows"> {
     cells: Array<HvCellInstance<D>>;
     allCells: Array<HvCellInstance<D>>;
     getRowProps: (propGetter?: RowPropGetter<D>) => HvUseTableRowProps;
@@ -4557,11 +4570,11 @@ export declare type HvSelectionListProps = HvBaseProps<HTMLUListElement, {
     classes?: HvSelectionListClasses;
 };
 
-export declare type HvSemanticColorKeys = "sema1" | "sema2" | "sema3" | "sema4" | "sema5" | "sema6" | "sema7" | "sema8" | "sema9" | "sema10" | "sema11" | "sema12" | "sema13" | "sema14" | "sema15" | "sema16" | "sema17" | "sema18" | "sema19" | "sema20";
+export declare type HvSemanticColorKeys = "positive" | "neutral" | "warning" | "negative" | "catastrophic" | "sema6" | "neutral_20" | "positive_80" | "positive_120" | "positive_20" | "negative_20" | "negative_120" | "negative_80" | "sema10" | "sema11" | "sema12" | "sema13" | "sema14" | "sema15" | "sema16" | "sema17" | "sema18" | "sema19" | "warning_20" | "warning_140" | "warning_120";
 
 export declare type HvSemanticColors = Record<HvSemanticColorKeys, string>;
 
-export declare type HvSequentialColorKeys = "cviz1" | "cviz1_100" | "cviz1_200" | "cviz1_300" | "cviz1_400" | "cviz1_500" | "cviz1_600" | "cviz1_700" | "cviz1_800" | "cviz1_900";
+export declare type HvSequentialColorKeys = "cat1" | "cat1_100" | "cat1_200" | "cat1_300" | "cat1_400" | "cat1_500" | "cat1_600" | "cat1_700" | "cat1_800" | "cat1_900";
 
 export declare const HvSimpleGrid: ({ children, breakpoints, spacing, cols, ...others }: HvSimpleGridProps) => JSX_2.Element;
 
@@ -4937,7 +4950,7 @@ export declare type HvTabClasses = {
  * For better data handling and **advanced features** we recommend the use of the utility hooks collection .
  * See the <a href="?id=lab-table-hooks--main&viewMode=docs" target="_self">Table Hooks documentation</a> for more details.
  */
-export declare const HvTable: ForwardRefExoticComponent<HvBaseProps<HTMLDivElement, {}> & {
+export declare const HvTable: ForwardRefExoticComponent<TableHTMLAttributes<HTMLTableElement> & {
     /**
      * The component used for the root node. Either a string to use a HTML element or a component.
      * Defaults to `table`.
@@ -4961,7 +4974,9 @@ export declare const HvTable: ForwardRefExoticComponent<HvBaseProps<HTMLDivEleme
  * HvTableBody acts as a `tbody` element.
  * `HvTableCell` and `HvTableRow` elements in it inherit body-specific styles
  */
-export declare const HvTableBody: React_2.ForwardRefExoticComponent<Omit<HvBaseProps<HTMLDivElement, {}>, "children"> & {
+export declare const HvTableBody: React_2.ForwardRefExoticComponent<HvBaseProps<HTMLTableSectionElement, {
+    children: any;
+}> & {
     /**
      * Content to be rendered
      */
@@ -4982,7 +4997,9 @@ export declare type HvTableBodyClasses = {
     root?: string;
 };
 
-export declare type HvTableBodyProps = Omit<HvBaseProps, "children"> & {
+export declare type HvTableBodyProps = HvBaseProps<HTMLTableSectionElement, {
+    children: any;
+}> & {
     /**
      * Content to be rendered
      */
@@ -5010,7 +5027,7 @@ export declare interface HvTAbleBulkActionsProps extends TableCommonProps {
 /**
  * `HvTableCell` acts as a `td` element and inherits styles from its context
  */
-export declare const HvTableCell: ForwardRefExoticComponent<Omit<TdHTMLAttributes<HTMLElement>, "align"> & Omit<HvBaseProps<HTMLDivElement, {}>, "children"> & {
+export declare const HvTableCell: ForwardRefExoticComponent<Omit<TdHTMLAttributes<HTMLTableCellElement>, "align"> & Omit<HvBaseProps<HTMLDivElement, {}>, "children"> & {
     /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */
     component?: ElementType<any> | undefined;
     /** Content to be rendered */
@@ -5098,7 +5115,7 @@ export declare type HvTableCellClasses = {
     resizing?: string;
 };
 
-export declare type HvTableCellProps = Omit<TdHTMLAttributes<HTMLElement>, "align"> & Omit<HvBaseProps, "children"> & {
+export declare type HvTableCellProps = Omit<TdHTMLAttributes<HTMLTableCellElement>, "align"> & Omit<HvBaseProps, "children"> & {
     /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to td. */
     component?: React.ElementType;
     /** Content to be rendered */
@@ -5154,7 +5171,9 @@ export declare interface HvTableColumnOptions<D extends object = Record<string,
 /**
  * HvTableContainer is a container for the HvTable
  */
-export declare const HvTableContainer: ForwardRefExoticComponent<Omit<HvBaseProps<HTMLDivElement, {}>, "children"> & {
+export declare const HvTableContainer: ForwardRefExoticComponent<HvBaseProps<HTMLDivElement, {
+    children: any;
+}> & {
     /**
      * Content to be rendered
      */
@@ -5173,7 +5192,9 @@ export declare type HvTableContainerClasses = {
     root?: string;
 };
 
-export declare type HvTableContainerProps = Omit<HvBaseProps, "children"> & {
+export declare type HvTableContainerProps = HvBaseProps<HTMLDivElement, {
+    children: any;
+}> & {
     /**
      * Content to be rendered
      */
@@ -5193,7 +5214,9 @@ export declare type HvTableDefinitionConfig<D extends object = Record<string, un
  * HvTableHead acts as a `thead` element.
  * `HvTableCell` and `HvTableRow` elements in it inherit header-specific styles
  */
-export declare const HvTableHead: ForwardRefExoticComponent<Omit<HvBaseProps<HTMLDivElement, {}>, "children"> & {
+export declare const HvTableHead: ForwardRefExoticComponent<HvBaseProps<HTMLTableSectionElement, {
+    children: any;
+}> & {
     /**
      * Content to be rendered
      */
@@ -5221,7 +5244,7 @@ export declare type HvTableHeadClasses = {
 /**
  * `HvTableHeader` acts as a `th` element and inherits styles from its context
  */
-export declare const HvTableHeader: ForwardRefExoticComponent<ThHTMLAttributes<HTMLElement> & Omit<HvBaseProps<HTMLDivElement, {}>, "children"> & {
+export declare const HvTableHeader: ForwardRefExoticComponent<Omit<ThHTMLAttributes<HTMLTableCellElement>, "align"> & Omit<HvBaseProps<HTMLDivElement, {}>, "children"> & {
     /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */
     component?: ElementType<any> | undefined;
     /** Content to be rendered */
@@ -5331,7 +5354,7 @@ export declare type HvTableHeaderClasses = {
     resizer?: string;
 };
 
-export declare type HvTableHeaderProps = ThHTMLAttributes<HTMLElement> & Omit<HvBaseProps, "children"> & {
+export declare type HvTableHeaderProps = Omit<ThHTMLAttributes<HTMLTableCellElement>, "align"> & Omit<HvBaseProps, "children"> & {
     /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to th. */
     component?: React.ElementType;
     /** Content to be rendered */
@@ -5374,7 +5397,9 @@ export declare type HvTableHeaderProps = ThHTMLAttributes<HTMLElement> & Omit<Hv
 
 export declare type HvTableHeadPropGetter<D extends object> = PropGetter<D, UseHvTableStickyTableHeadProps>;
 
-export declare type HvTableHeadProps = Omit<HvBaseProps, "children"> & {
+export declare type HvTableHeadProps = HvBaseProps<HTMLTableSectionElement, {
+    children: any;
+}> & {
     /**
      * Content to be rendered
      */
@@ -5392,7 +5417,7 @@ export declare type HvTableHeadProps = Omit<HvBaseProps, "children"> & {
     classes?: HvTableHeadClasses;
 };
 
-export declare interface HvTableInstance<D extends object = Record<string, unknown>> extends TableInstance<D>, Omit<HvTableOptions<D>, "columns" | "pageCount" | "initialState" | "data">, UseColumnOrderInstanceProps<D>, UseExpandedInstanceProps<D>, UseFiltersInstanceProps<D>, UseGlobalFiltersInstanceProps<D>, UseGroupByInstanceProps<D>, UsePaginationInstanceProps<D>, UseSortByInstanceProps<D>, UseHvRowSelectionTableInstance<D>, UseHvTableStickyTableInstance<D>, UseHvHeaderGroupsInstance, UseHvPaginationTableInstance<D>, UseHvBulkActionsTableInstanceProps<D> {
+export declare interface HvTableInstance<D extends object = Record<string, unknown>> extends Omit<TableInstance<D>, "getToggleAllRowsSelectedProps" | "getToggleAllPageRowsSelectedProps">, Omit<HvTableOptions<D>, "columns" | "pageCount" | "initialState" | "data">, UseColumnOrderInstanceProps<D>, Omit<UseExpandedInstanceProps<D>, "rows">, Omit<UseFiltersInstanceProps<D>, "rows" | "rowsById" | "flatRows">, Omit<UseGlobalFiltersInstanceProps<D>, "rows" | "rowsById" | "flatRows">, Omit<UseGroupByInstanceProps<D>, "rows" | "rowsById" | "flatRows">, Omit<UsePaginationInstanceProps<D>, "page">, Omit<UseSortByInstanceProps<D>, "rows">, Omit<UseHvRowSelectionTableInstance<D>, "selectedFlatRows">, UseHvTableStickyTableInstance<D>, UseHvHeaderGroupsInstance, UseHvPaginationTableInstance<D>, UseHvBulkActionsTableInstanceProps<D> {
     initialState: Partial<HvTableState<D>>;
     state: HvTableState<D>;
     columns: Array<HvColumnInstance<D>>;
@@ -5405,7 +5430,7 @@ export declare interface HvTableInstance<D extends object = Record<string, unkno
     rowsById: Record<string, HvRowInstance<D>>;
     flatRows: Array<HvRowInstance<D>>;
     getHooks: () => HvHooks<D>;
-    getTableProps: (propGetter?: TablePropGetter<D>) => HvUseTableProps;
+    getTableProps: (propGetter?: TablePropGetter<D> & HvExtraProps) => HvUseTableProps;
     selectedFlatRows: Array<HvRowInstance<D>>;
     initialRows: Array<HvRowInstance<D>>;
     initialRowsById: Record<string, HvRowInstance<D>>;
@@ -5432,7 +5457,7 @@ export declare interface HvTablePaginationProps extends TableCommonProps {
 
 export { HvTablePluginHook }
 
-export declare type HvTableProps = HvBaseProps & {
+export declare type HvTableProps = TableHTMLAttributes<HTMLTableElement> & {
     /**
      * The component used for the root node. Either a string to use a HTML element or a component.
      * Defaults to `table`.
@@ -5455,7 +5480,9 @@ export declare type HvTableProps = HvBaseProps & {
 /**
  * `HvTableRow` acts as a `tr` element and inherits styles from its context
  */
-export declare const HvTableRow: ForwardRefExoticComponent<Omit<HvBaseProps<HTMLDivElement, {}>, "children"> & {
+export declare const HvTableRow: ForwardRefExoticComponent<HvBaseProps<HTMLTableRowElement, {
+    children: any;
+}> & {
     /** Content to be rendered */
     children: React.ReactNode;
     /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to tbody. */
@@ -5495,7 +5522,9 @@ export declare type HvTableRowClasses = {
     variantListHead?: string;
 };
 
-export declare type HvTableRowProps = Omit<HvBaseProps, "children"> & {
+export declare type HvTableRowProps = HvBaseProps<HTMLTableRowElement, {
+    children: any;
+}> & {
     /** Content to be rendered */
     children: React.ReactNode;
     /** The component used for the root node. Either a string to use a HTML element or a component. Defaults to tbody. */
@@ -5589,7 +5618,7 @@ export declare type HvTagClasses = {
     disabledDeleteIcon?: string;
 };
 
-export declare function hvTagColumn<D extends Record<string, unknown>, C extends HvTableColumnConfig_2<D>>(col: C, valueDataKey: keyof D, colorDataKey: keyof D, textColorDataKey: keyof D, fromRowData?: boolean, tagProps?: HvTagProps_2): HvTableColumnConfig_2<D>;
+export declare function hvTagColumn<D extends Record<string, unknown>, C extends HvTableColumnConfig_2<D>, A extends Record<string, unknown>>(col: C, valueDataKey: keyof A, colorDataKey: keyof A, textColorDataKey: keyof A, fromRowData?: boolean, tagProps?: HvTagProps_2): HvTableColumnConfig_2<D>;
 
 export declare type HvTagProps = Omit<ChipProps, "color" | "classes"> & HvBaseProps<HTMLDivElement, {
     children: any;
@@ -5899,14 +5928,14 @@ export declare interface HvThemePalette {
     support: HvSupportColors;
 }
 
-export declare const HvThemeProvider: ({ children, themes: themesList, theme, colorMode, rootElementId, }: HvThemeProviderProps) => JSX_2.Element;
+export declare const HvThemeProvider: ({ children, themes: themesList, theme, colorMode, themeRootId, }: HvThemeProviderProps) => JSX_2.Element;
 
 declare interface HvThemeProviderProps {
     children: React.ReactNode;
     themes: (HvTheme | HvThemeStructure)[];
     theme: string;
     colorMode: string;
-    rootElementId?: string;
+    themeRootId?: string;
 }
 
 export declare const HvToggleButton: ForwardRefExoticComponent<HvBaseProps<HTMLButtonElement, {
@@ -6154,7 +6183,7 @@ export declare type HvValidationMessages = {
  *
  * 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 HvVerticalNavigation: ({ id, className, classes, children, open, collapsedMode, slider, ...others }: HvVerticalNavigationProps) => JSX_2.Element;
 
 export declare const HvVerticalNavigationAction: ({ className, classes, id, label, icon, onClick, ...others }: HvVerticalNavigationActionProps) => JSX_2.Element;
 
@@ -6222,9 +6251,11 @@ export declare type HvVerticalNavigationClasses = {
     root?: string;
     /** Style applied to the root of the component when its collapsed. */
     collapsed?: string;
+    /** Style applied to the root of the component when its in slider mode. */
+    slider?: any;
 };
 
-export declare const HvVerticalNavigationHeader: ({ title, openIcon, closeIcon, buttonProps, className, classes, onClick, ...others }: HvVerticalNavigationHeaderProps) => JSX_2.Element;
+export declare const HvVerticalNavigationHeader: ({ title, openIcon, closeIcon, collapseButtonProps, backButtonProps, className, classes, onCollapseButtonClick, ...others }: HvVerticalNavigationHeaderProps) => JSX_2.Element;
 
 export declare type HvVerticalNavigationHeaderClasses = {
     root?: string;
@@ -6232,14 +6263,42 @@ export declare type HvVerticalNavigationHeaderClasses = {
 };
 
 export declare type HvVerticalNavigationHeaderProps = {
-    id?: any;
-    title?: any;
+    /**
+     * Id to be applied to the root node.
+     */
+    id?: string;
+    /**
+     * The title text to show on Header.
+     */
+    title?: string;
+    /**
+     * Icon to show when Vertical Navigation is collapsed.
+     */
     openIcon?: React.ReactNode;
+    /**
+     * Icon to show when Vertical Navigation is expanded.
+     */
     closeIcon?: React.ReactNode;
-    buttonProps?: HvButtonProps_2;
+    /**
+     * Props for the collapse button.
+     */
+    collapseButtonProps?: HvButtonProps_2;
+    /**
+     * Props for the back button.
+     */
+    backButtonProps?: HvButtonProps_2;
+    /**
+     * Class names to be applied.
+     */
     className?: string;
+    /**
+     * A Jss Object used to override or extend the styles applied to the component.
+     */
     classes?: HvVerticalNavigationHeaderClasses;
-    onClick?: MouseEventHandler<HTMLElement>;
+    /**
+     * Handler for the collapse button.
+     */
+    onCollapseButtonClick?: MouseEventHandler<HTMLElement>;
 };
 
 export declare type HvVerticalNavigationMode = "icon" | "simple";
@@ -6264,15 +6323,60 @@ export declare type HvVerticalNavigationProps = {
      */
     open?: boolean;
     /**
-     *  Collapsed Mode for the Vertical Navigation, the default value is "simple".
+     *  Collpased Mode for the Vertical Navigation, the default value is "simple".
      */
     collapsedMode?: HvVerticalNavigationMode;
+    /**
+     * Boolean to determine if treeview is in slider mode (for mobile navigation), the default value is false.
+     */
+    slider?: boolean;
     /**
      * The content inside the actions container.
      */
     children?: React.ReactNode;
 };
 
+export declare const HvVerticalNavigationSlider: ({ id, classes, data, selected, onNavigateToTarget, onNavigateToChild, }: HvVerticalNavigationSliderProps) => JSX_2.Element;
+
+export declare type HvVerticalNavigationSliderClasses = {
+    root?: string;
+    listItemSelected?: string;
+};
+
+export declare type 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.
+     */
+    classes?: HvVerticalNavigationSliderClasses;
+    /**
+     * 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.
+     * icon - the icon react element
+     * data - sub-menu items
+     * href - the url used for navigation.
+     * target - the behavior when opening an url.
+     */
+    data?: NavigationData_2[];
+    /**
+     * The selected item id.
+     */
+    selected?: string;
+    /**
+     * Triggered when the item is clicked.
+     */
+    onNavigateToTarget?: (event: React.MouseEvent<HTMLLIElement>, item: NavigationData_2) => void;
+    /**
+     * Triggered when the navigate to child button is clicked.
+     */
+    onNavigateToChild?: (event: React.MouseEvent<HTMLButtonElement>, item: NavigationData_2) => void;
+};
+
 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 = {
@@ -6282,7 +6386,7 @@ export declare type HvVerticalNavigationTreeClasses = {
     collapsed?: string;
 };
 
-export declare type HvVerticalNavigationTreeProps = HvBaseProps_3<HTMLDivElement, {
+export declare type HvVerticalNavigationTreeProps = HvBaseProps<HTMLDivElement, {
     onChange: any;
 }> & {
     /**
@@ -6784,7 +6888,7 @@ export declare interface NavigationData {
     [otherProperty: string]: any;
 }
 
-export declare type NavigationMode = "treeview" | "navigation";
+export declare type NavigationMode = "treeview" | "navigation" | "slider";
 
 export declare const normalizeProgressBar: (value: number, max: number) => number;
 
@@ -6844,9 +6948,9 @@ export declare const rightControlClasses: HvRightControlClasses;
 export declare const selectionListClasses: HvSelectionListClasses;
 
 /**
- * Sets the element attributes for a theme and color mode.
+ * Sets the element attributes and style for a theme and color mode.
  */
-export declare const setElementAttrs: (theme: string, mode: string, styles: HvParsedThemeStyles, elementId?: string) => void;
+export declare const setElementAttrs: (themeName: string, modeName: string, colorScheme: string, themeRootId?: string) => void;
 
 export declare const setId: (...args: any[]) => string | undefined;
 
@@ -7096,9 +7200,7 @@ export declare interface UseHvSortByTableCellProps {
     sorted?: boolean;
 }
 
-declare function useHvTable<D extends object = Record<string, unknown>>(props: {
-    data?: D[];
-} & HvExtraProps, ...plugins: any): any;
+declare function useHvTable<D extends object = Record<string, unknown>>(options: HvTableOptions<D>, ...plugins: Array<HvTablePluginHook<D>>): HvTableInstance<D>;
 export { useHvTable as useHvData }
 export { useHvTable }
 
@@ -7222,10 +7324,23 @@ export declare const VerticalNavigationContext: Context<VerticalNavigationContex
 declare interface VerticalNavigationContextValue {
     isOpen: boolean;
     collapsedMode: HvVerticalNavigationMode;
+    slider?: boolean;
+    headerTitle?: string;
+    setHeaderTitle?: React.Dispatch<React.SetStateAction<string | undefined>>;
+    parentItem?: any;
+    withParentData?: any;
+    navigateToChildHandler?: (event: any, item: any) => void;
+    navigateToParentHandler?: () => void;
+    parentData?: NavigationData[];
+    setParentData?: React.Dispatch<React.SetStateAction<any>>;
+    parentSelected?: any;
+    setParentSelected?: React.Dispatch<React.SetStateAction<any>>;
 }
 
 export declare const verticalNavigationHeaderClasses: HvVerticalNavigationHeaderClasses;
 
+export declare const verticalNavigationSliderClasses: HvVerticalNavigationSliderClasses;
+
 export declare const verticalNavigationTreeClasses: HvVerticalNavigationTreeClasses;
 
 export declare type VisibilitySelectorActions = "previous_month" | "next_month" | "previous_year" | "next_year" | "month" | "month_year";