@hitachivantara/uikit-react-core 5.34.0 → 5.36.0

package/dist/types/index.d.ts

@@ -22,6 +22,7 @@ import { CSSInterpolation as CSSInterpolation_2 } from '@emotion/css';
 import { CSSProperties } from 'react';
 import { defaultCacheKey } from '@hitachivantara/uikit-react-shared';
 import { defaultEmotionCache } from '@hitachivantara/uikit-react-shared';
+import { DefaultTreeViewPluginParameters } from '@mui/x-tree-view/internals/plugins/defaultPlugins';
 import { DialogActionsProps } from '@mui/material/DialogActions';
 import { DialogContentProps } from '@mui/material/DialogContent';
 import { DialogProps } from '@mui/material/Dialog';
@@ -75,6 +76,7 @@ import { PropGetter } from 'react-table';
 import { RadioProps } from '@mui/material/Radio';
 import { RadioProps as RadioProps_2 } from '@mui/material';
 import { default as React_2 } from 'react';
+import * as React_3 from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { ReducerTableState } from 'react-table';
@@ -110,6 +112,8 @@ import { theme } from '@hitachivantara/uikit-styles';
 import { themes } from '@hitachivantara/uikit-styles';
 import type { ThHTMLAttributes } from 'react';
 import { TooltipProps } from '@mui/material';
+import type { TreeItemContentProps } from '@mui/x-tree-view';
+import type { TreeItemProps } from '@mui/x-tree-view';
 import { UseColumnOrderInstanceProps } from 'react-table';
 import { UseColumnOrderState } from 'react-table';
 import { useEffect } from 'react';
@@ -153,6 +157,11 @@ import { UseSortByInstanceProps } from 'react-table';
 import { UseSortByOptions } from 'react-table';
 import { UseSortByState } from 'react-table';
 import { UseTableHeaderGroupProps } from 'react-table';
+import type { UseTreeViewExpansionInstance } from '@mui/x-tree-view/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types';
+import type { UseTreeViewFocusInstance } from '@mui/x-tree-view/internals/plugins/useTreeViewFocus/useTreeViewFocus.types';
+import type { UseTreeViewKeyboardNavigationInstance } from '@mui/x-tree-view/internals/plugins/useTreeViewKeyboardNavigation/useTreeViewKeyboardNavigation.types';
+import type { UseTreeViewNodesInstance } from '@mui/x-tree-view/internals/plugins/useTreeViewNodes/useTreeViewNodes.types';
+import type { UseTreeViewSelectionInstance } from '@mui/x-tree-view/internals/plugins/useTreeViewSelection/useTreeViewSelection.types';
 
 declare type Accessor<D extends object> = (originalRow: D, index: number, sub: {
     subRows: D[];
@@ -1922,7 +1931,7 @@ export declare interface HvCalendarHeaderProps {
     /**
      * Callback to handle input onFocus.
      */
-    onFocus?: (event: React.FocusEventHandler<any>, formattedDate: string | null) => void;
+    onFocus?: (event: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement>, formattedDate: string | null) => void;
     /**
      * Indicates if header should display end date in a date range.
      */
@@ -2860,6 +2869,14 @@ export declare interface HvDrawerProps extends DrawerProps, Omit<DrawerProps, "c
      * Title for the button close.
      */
     buttonTitle?: string;
+    /**
+     * Show backdrop when drawer ix open.
+     */
+    showBackdrop?: boolean;
+    /**
+     * Prevent closing the dialog when clicking on the backdrop.
+     */
+    disableBackdropClick?: boolean;
     /** @ignore */
     ref?: DrawerProps["ref"];
     /** @ignore */
@@ -4307,7 +4324,7 @@ export declare interface HvListContainerProps extends HvBaseProps<HTMLUListEleme
 /**
  * ListItem description/documentation paragraph
  */
-export declare const HvListItem: (props: HvListItemProps) => JSX_2.Element;
+export declare const HvListItem: React_2.ForwardRefExoticComponent<HvListItemProps & React_2.RefAttributes<any>>;
 
 export declare type HvListItemClasses = ExtractNames<typeof useClasses_4>;
 
@@ -4315,7 +4332,7 @@ export declare interface HvListItemProps extends HvBaseProps<HTMLLIElement> {
     /**
      * Overrides the implicit list item role.
      */
-    role?: string;
+    role?: HvBaseProps<HTMLLIElement>["role"];
     /** Indicates if the list item is selected. */
     selected?: boolean;
     /** If true, the list item will be disabled. */
@@ -5419,7 +5436,7 @@ export declare interface HvScrollToVerticalProps extends HvBaseProps<HTMLOListEl
  */
 export declare const HvSection: (props: HvSectionProps) => JSX_2.Element;
 
-export declare type HvSectionClasses = ExtractNames<typeof useClasses_119>;
+export declare type HvSectionClasses = ExtractNames<typeof useClasses_121>;
 
 export declare interface HvSectionProps extends Omit<HvBaseProps<HTMLDivElement>, "title"> {
     /** The title of the section */
@@ -6739,6 +6756,49 @@ export declare interface HvTooltipProps extends Omit<TooltipProps, "classes"> {
     containerId?: string;
 }
 
+export declare interface HvTreeContentProps extends TreeItemContentProps {
+}
+
+export declare const HvTreeItem: ForwardRefExoticComponent<HvTreeItemProps & RefAttributes<HTMLLIElement>>;
+
+export declare type HvTreeItemClasses = ExtractNames<typeof useClasses_120>;
+
+export declare interface HvTreeItemProps extends TreeItemProps {
+    classes?: HvTreeItemClasses;
+    disabled?: boolean;
+    icon?: ReactNode;
+    ContentComponent?: React.JSXElementConstructor<HvTreeContentProps>;
+}
+
+/**
+ * A Tree View displays hierarchical structures.
+ * It also facilitates the exploration of categorical levels and their content.
+ *
+ * Tree structures are built through composing the `HvTreeItem` component,
+ * or a custom variation of it.
+ *
+ * It is based on MUI's [TreeView](https://mui.com/x/react-tree-view) component.
+ *
+ * @example
+ * ```tsx
+ * <HvTreeView>
+ *   <HvTreeItem nodeId="1" label="File1" />
+ * </HvTreeView>
+ * ```
+ */
+export declare const HvTreeView: HvTreeViewComponent;
+
+export declare type HvTreeViewClasses = ExtractNames<typeof useClasses_119>;
+
+declare type HvTreeViewComponent = <Multiple extends boolean | undefined = undefined>(props: HvTreeViewProps<Multiple>) => React.JSX.Element;
+
+export declare interface HvTreeViewProps<Multiple extends boolean | undefined> extends HvBaseProps<HTMLUListElement>, DefaultTreeViewPluginParameters<Multiple> {
+    /** A Jss Object used to override or extend the styles applied. */
+    classes?: HvTreeViewClasses;
+    /** Tree View children. Usually a `HvTreeItem` instance, or a custom variation of it */
+    children?: ReactNode;
+}
+
 /**
  * Typography component is used to render text and paragraphs within an interface.
  */
@@ -7920,6 +7980,22 @@ export declare const tooltipClasses: {
     valueWrapper: "HvTooltip-valueWrapper";
 };
 
+export declare const treeItemClasses: {
+    content: "HvTreeItem-content";
+    label: "HvTreeItem-label";
+    root: "HvTreeItem-root";
+    group: "HvTreeItem-group";
+    expanded: "HvTreeItem-expanded";
+    disabled: "HvTreeItem-disabled";
+    selected: "HvTreeItem-selected";
+    focused: "HvTreeItem-focused";
+    iconContainer: "HvTreeItem-iconContainer";
+};
+
+export declare const treeView2Classes: {
+    root: "HvTreeView-root";
+};
+
 export declare const treeViewClasses: {
     root: "HvVerticalNavigationTreeView-root";
 };
@@ -8427,13 +8503,9 @@ declare const useClasses_118: (classesProp?: Partial<Record<"placeholder" | "lab
     cx: (...args: any) => string;
 };
 
-declare const useClasses_119: (classesProp?: Partial<Record<"hidden" | "content" | "header" | "root" | "actions", string>>, addStatic?: boolean) => {
+declare const useClasses_119: (classesProp?: Partial<Record<"root", string>>, addStatic?: boolean) => {
     classes: {
-        hidden: string;
-        content: string;
-        header: string;
         root: string;
-        actions: string;
     };
     css: {
         (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
@@ -8455,6 +8527,40 @@ declare const useClasses_12: (classesProp?: Partial<Record<"root" | "popper" | "
     cx: (...args: any) => string;
 };
 
+declare const useClasses_120: (classesProp?: Partial<Record<"content" | "label" | "root" | "group" | "expanded" | "disabled" | "selected" | "focused" | "iconContainer", string>>, addStatic?: boolean) => {
+    classes: {
+        content: string;
+        label: string;
+        root: string;
+        group: string;
+        expanded: string;
+        disabled: string;
+        selected: string;
+        focused: string;
+        iconContainer: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
+declare const useClasses_121: (classesProp?: Partial<Record<"hidden" | "content" | "header" | "root" | "actions", string>>, addStatic?: boolean) => {
+    classes: {
+        hidden: string;
+        content: string;
+        header: string;
+        root: string;
+        actions: string;
+    };
+    css: {
+        (template: TemplateStringsArray, ...args: CSSInterpolation[]): string;
+        (...args: CSSInterpolation[]): string;
+    };
+    cx: (...args: any) => string;
+};
+
 declare const useClasses_13: (classesProp?: Partial<Record<"input" | "root" | "disabled" | "readOnly" | "invalid" | "resizable" | "inputBorderContainer" | "inputRootInvalid" | "inputRootReadOnly" | "inputRoot" | "inputRootFocused" | "inputRootDisabled" | "inputRootMultiline" | "inputDisabled" | "inputReadOnly" | "inputResizable", string>>, addStatic?: boolean) => {
     classes: {
         input: string;
@@ -10383,6 +10489,17 @@ export declare interface UseHvTableStylesTableRowProps {
     hover?: boolean;
 }
 
+export declare function useHvTreeItem(nodeId: string): {
+    instance: (UseTreeViewNodesInstance & UseTreeViewExpansionInstance & UseTreeViewSelectionInstance & UseTreeViewFocusInstance & UseTreeViewKeyboardNavigationInstance) | null;
+    disabled: boolean;
+    expanded: boolean;
+    selected: boolean;
+    focused: boolean;
+    handleExpansion: (event: React_3.MouseEvent<HTMLDivElement>) => void;
+    handleSelection: (event: React_3.MouseEvent<HTMLDivElement>) => void;
+    preventSelection: (event: React_3.MouseEvent<HTMLDivElement>) => void;
+};
+
 export declare const useImageLoaded: (src: any, srcSet: any) => string | boolean;
 
 export declare function useInstance(instance: any): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.34.0",
+  "version": "5.36.0",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "Core React components for the NEXT Design System.",
@@ -33,11 +33,12 @@
     "@emotion/css": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
     "@emotion/utils": "^1.2.1",
-    "@hitachivantara/uikit-react-icons": "^5.6.11",
-    "@hitachivantara/uikit-react-shared": "^5.1.15",
-    "@hitachivantara/uikit-styles": "^5.15.0",
+    "@hitachivantara/uikit-react-icons": "^5.6.12",
+    "@hitachivantara/uikit-react-shared": "^5.1.16",
+    "@hitachivantara/uikit-styles": "^5.16.0",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "^5.0.0-beta.4",
+    "@mui/x-tree-view": "6.0.0-beta.0",
     "@popperjs/core": "^2.11.8",
     "@react-aria/datepicker": "^3.4.1",
     "@react-stately/datepicker": "^3.4.1",
@@ -64,7 +65,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "d0dde26c6eff55d855702074f70a1480e51693cd",
+  "gitHead": "e0cb17343a2120b95474818aa0d2b693843e140f",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {