@hitachivantara/uikit-react-core 5.35.0 → 5.36.1

package/dist/esm/components/TreeView/TreeItem/useHvTreeItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useHvTreeItem.js","sources":["../../../../../src/components/TreeView/TreeItem/useHvTreeItem.ts"],"sourcesContent":["import * as React from \"react\";\n\nimport { useTreeViewContext, HvTreeViewPlugins } from \"../internals\";\n\nexport function useHvTreeItem(nodeId: string) {\n  const { instance, multiSelect } = useTreeViewContext<HvTreeViewPlugins>();\n\n  const expandable = instance ? instance.isNodeExpandable(nodeId) : false;\n  const expanded = instance ? instance.isNodeExpanded(nodeId) : false;\n  const focused = instance ? instance.isNodeFocused(nodeId) : false;\n  const selected = instance ? instance.isNodeSelected(nodeId) : false;\n  const disabled = instance ? instance.isNodeDisabled(nodeId) : false;\n\n  const handleExpansion = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!instance || disabled) return;\n\n    if (!focused) {\n      instance.focusNode(event, nodeId);\n    }\n\n    const multiple =\n      multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n    // If already expanded and trying to toggle selection don't close\n    if (expandable && !(multiple && instance.isNodeExpanded(nodeId))) {\n      instance.toggleNodeExpansion(event, nodeId);\n    }\n  };\n\n  const handleSelection = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (!instance || disabled) return;\n\n    if (!focused) {\n      instance.focusNode(event, nodeId);\n    }\n\n    const multiple =\n      multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);\n\n    if (multiple) {\n      if (event.shiftKey) {\n        instance.selectRange(event, { end: nodeId });\n      } else {\n        instance.selectNode(event, nodeId, true);\n      }\n    } else {\n      instance.selectNode(event, nodeId);\n    }\n  };\n\n  const preventSelection = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {\n      // Prevent text selection\n      event.preventDefault();\n    }\n  };\n\n  return {\n    instance,\n    disabled,\n    expanded,\n    selected,\n    focused,\n    handleExpansion,\n    handleSelection,\n    preventSelection,\n  };\n}\n"],"names":["useHvTreeItem","nodeId","instance","multiSelect","useTreeViewContext","expandable","isNodeExpandable","expanded","isNodeExpanded","focused","isNodeFocused","selected","isNodeSelected","disabled","isNodeDisabled","handleExpansion","event","focusNode","multiple","shiftKey","ctrlKey","metaKey","toggleNodeExpansion","handleSelection","selectRange","end","selectNode","preventSelection","preventDefault"],"mappings":";;AAIO,SAASA,cAAcC,QAAgB;AACtC,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,MAAgBC,mBAAsC;AAExE,QAAMC,aAAaH,WAAWA,SAASI,iBAAiBL,MAAM,IAAI;AAClE,QAAMM,WAAWL,WAAWA,SAASM,eAAeP,MAAM,IAAI;AAC9D,QAAMQ,UAAUP,WAAWA,SAASQ,cAAcT,MAAM,IAAI;AAC5D,QAAMU,WAAWT,WAAWA,SAASU,eAAeX,MAAM,IAAI;AAC9D,QAAMY,WAAWX,WAAWA,SAASY,eAAeb,MAAM,IAAI;AAExDc,QAAAA,kBAAkBA,CAACC,UAA4C;AACnE,QAAI,CAACd,YAAYW;AAAU;AAE3B,QAAI,CAACJ,SAAS;AACHQ,eAAAA,UAAUD,OAAOf,MAAM;AAAA,IAClC;AAEA,UAAMiB,WACJf,gBAAgBa,MAAMG,YAAYH,MAAMI,WAAWJ,MAAMK;AAG3D,QAAIhB,cAAc,EAAEa,YAAYhB,SAASM,eAAeP,MAAM,IAAI;AACvDqB,eAAAA,oBAAoBN,OAAOf,MAAM;AAAA,IAC5C;AAAA,EAAA;AAGIsB,QAAAA,kBAAkBA,CAACP,UAA4C;AACnE,QAAI,CAACd,YAAYW;AAAU;AAE3B,QAAI,CAACJ,SAAS;AACHQ,eAAAA,UAAUD,OAAOf,MAAM;AAAA,IAClC;AAEA,UAAMiB,WACJf,gBAAgBa,MAAMG,YAAYH,MAAMI,WAAWJ,MAAMK;AAE3D,QAAIH,UAAU;AACZ,UAAIF,MAAMG,UAAU;AAClBjB,iBAASsB,YAAYR,OAAO;AAAA,UAAES,KAAKxB;AAAAA,QAAAA,CAAQ;AAAA,MAAA,OACtC;AACIyB,iBAAAA,WAAWV,OAAOf,QAAQ,IAAI;AAAA,MACzC;AAAA,IAAA,OACK;AACIyB,eAAAA,WAAWV,OAAOf,MAAM;AAAA,IACnC;AAAA,EAAA;AAGI0B,QAAAA,mBAAmBA,CAACX,UAA4C;AACpE,QAAIA,MAAMG,YAAYH,MAAMI,WAAWJ,MAAMK,WAAWR,UAAU;AAEhEG,YAAMY,eAAe;AAAA,IACvB;AAAA,EAAA;AAGK,SAAA;AAAA,IACL1B;AAAAA,IACAW;AAAAA,IACAN;AAAAA,IACAI;AAAAA,IACAF;AAAAA,IACAM;AAAAA,IACAQ;AAAAA,IACAI;AAAAA,EAAAA;AAEJ;"}

package/dist/esm/components/TreeView/TreeView.js

@@ -0,0 +1,73 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { useSlotProps } from "@mui/base/utils";
+import { DropDownXS, DropRightXS } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { HV_TREE_VIEW_PLUGINS } from "./internals.js";
+import { useClasses } from "./TreeView.styles.js";
+import { staticClasses } from "./TreeView.styles.js";
+import { useTreeView } from "@mui/x-tree-view/internals/useTreeView";
+import { TreeViewProvider } from "@mui/x-tree-view/internals/TreeViewProvider";
+const HvTreeView = forwardRef(function HvTreeView2(props, ref) {
+  const {
+    id,
+    children,
+    classes: classesProp,
+    className,
+    disabledItemsFocusable,
+    multiSelect,
+    expanded,
+    defaultExpanded,
+    selected,
+    defaultSelected,
+    disableSelection,
+    defaultCollapseIcon = /* @__PURE__ */ jsx(DropDownXS, { role: "none" }),
+    defaultExpandIcon = /* @__PURE__ */ jsx(DropRightXS, { role: "none" }),
+    defaultEndIcon,
+    defaultParentIcon,
+    onNodeSelect,
+    onNodeToggle,
+    onNodeFocus,
+    ...others
+  } = useDefaultProps("HvTreeView", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
+  const {
+    getRootProps,
+    contextValue
+  } = useTreeView({
+    disabledItemsFocusable,
+    expanded,
+    defaultExpanded,
+    onNodeToggle,
+    onNodeFocus,
+    disableSelection,
+    defaultSelected,
+    selected,
+    multiSelect,
+    onNodeSelect,
+    id,
+    defaultCollapseIcon,
+    defaultEndIcon,
+    defaultExpandIcon,
+    defaultParentIcon,
+    plugins: HV_TREE_VIEW_PLUGINS,
+    rootRef: ref
+  });
+  const rootProps = useSlotProps({
+    elementType: "ul",
+    externalSlotProps: {},
+    externalForwardedProps: others,
+    className: classes.root,
+    getSlotProps: getRootProps,
+    ownerState: props
+  });
+  return /* @__PURE__ */ jsx(TreeViewProvider, { value: contextValue, children: /* @__PURE__ */ jsx("ul", { className: cx(classes.root, className), ...rootProps, ...others, children }) });
+});
+export {
+  HvTreeView,
+  staticClasses as treeView2Classes
+};
+//# sourceMappingURL=TreeView.js.map

package/dist/esm/components/TreeView/TreeView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.js","sources":["../../../../src/components/TreeView/TreeView.tsx"],"sourcesContent":["import { ReactNode, Ref, forwardRef } from \"react\";\nimport { useSlotProps } from \"@mui/base/utils\";\nimport { DropDownXS, DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  HV_TREE_VIEW_PLUGINS,\n  HvTreeViewPluginParameters,\n  TreeViewProvider,\n  useTreeView,\n} from \"./internals\";\nimport { staticClasses, useClasses } from \"./TreeView.styles\";\n\nexport { staticClasses as treeView2Classes }; // TODO: remove old `treeViewClasses`\n\nexport type HvTreeViewClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeViewProps<Multiple extends boolean | undefined>\n  extends HvBaseProps<HTMLUListElement>,\n    HvTreeViewPluginParameters<Multiple> {\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvTreeViewClasses;\n  /** Tree View children. Usually a `HvTreeItem` instance, or a custom variation of it */\n  children?: ReactNode;\n}\n\ntype HvTreeViewComponent = <Multiple extends boolean | undefined = undefined>(\n  props: HvTreeViewProps<Multiple>\n) => React.JSX.Element;\n\n/* eslint-disable prefer-arrow-callback */\n/**\n * A Tree View displays hierarchical structures.\n * It also facilitates the exploration of categorical levels and their content.\n *\n * Tree structures are built through composing the `HvTreeItem` component,\n * or a custom variation of it.\n *\n * It is based on MUI's [TreeView](https://mui.com/x/react-tree-view) component.\n *\n * @example\n * ```tsx\n * <HvTreeView>\n *   <HvTreeItem nodeId=\"1\" label=\"File1\" />\n * </HvTreeView>\n * ```\n */\nconst HvTreeView = forwardRef(function HvTreeView<\n  Multiple extends boolean | undefined\n>(props: HvTreeViewProps<Multiple>, ref: Ref<HTMLUListElement>) {\n  const {\n    id,\n    children,\n    classes: classesProp,\n    className,\n\n    disabledItemsFocusable,\n    multiSelect,\n    expanded,\n    defaultExpanded,\n    selected,\n    defaultSelected,\n    disableSelection,\n    defaultCollapseIcon = <DropDownXS role=\"none\" />,\n    defaultExpandIcon = <DropRightXS role=\"none\" />,\n    defaultEndIcon,\n    defaultParentIcon,\n    onNodeSelect,\n    onNodeToggle,\n    onNodeFocus,\n    ...others\n  } = useDefaultProps(\"HvTreeView\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { getRootProps, contextValue } = useTreeView({\n    disabledItemsFocusable,\n    expanded,\n    defaultExpanded,\n    onNodeToggle,\n    onNodeFocus,\n    disableSelection,\n    defaultSelected,\n    selected,\n    multiSelect,\n    onNodeSelect: onNodeSelect as HvTreeViewProps<any>[\"onNodeSelect\"],\n    id,\n    defaultCollapseIcon,\n    defaultEndIcon,\n    defaultExpandIcon,\n    defaultParentIcon,\n    plugins: HV_TREE_VIEW_PLUGINS,\n    rootRef: ref,\n  });\n\n  const rootProps = useSlotProps({\n    elementType: \"ul\",\n    externalSlotProps: {},\n    externalForwardedProps: others,\n    className: classes.root,\n    getSlotProps: getRootProps,\n    ownerState: props,\n  });\n\n  return (\n    <TreeViewProvider value={contextValue}>\n      <ul className={cx(classes.root, className)} {...rootProps} {...others}>\n        {children}\n      </ul>\n    </TreeViewProvider>\n  );\n}) as HvTreeViewComponent;\n\nexport { HvTreeView };\n"],"names":["HvTreeView","forwardRef","props","ref","id","children","classes","classesProp","className","disabledItemsFocusable","multiSelect","expanded","defaultExpanded","selected","defaultSelected","disableSelection","defaultCollapseIcon","defaultExpandIcon","defaultEndIcon","defaultParentIcon","onNodeSelect","onNodeToggle","onNodeFocus","others","useDefaultProps","cx","useClasses","getRootProps","contextValue","useTreeView","plugins","HV_TREE_VIEW_PLUGINS","rootRef","rootProps","useSlotProps","elementType","externalSlotProps","externalForwardedProps","root","getSlotProps","ownerState"],"mappings":";;;;;;;;;;AAkDA,MAAMA,aAAaC,WAAW,SAASD,YAErCE,OAAkCC,KAA4B;AACxD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,sBAAsB,oBAAC,YAAW,EAAA,MAAK,OAAS,CAAA;AAAA,IAChDC,oBAAoB,oBAAC,aAAY,EAAA,MAAK,OAAS,CAAA;AAAA,IAC/CC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,cAActB,KAAK;AACjC,QAAA;AAAA,IAAEI;AAAAA,IAASmB;AAAAA,EAAAA,IAAOC,WAAWnB,WAAW;AAExC,QAAA;AAAA,IAAEoB;AAAAA,IAAcC;AAAAA,MAAiBC,YAAY;AAAA,IACjDpB;AAAAA,IACAE;AAAAA,IACAC;AAAAA,IACAS;AAAAA,IACAC;AAAAA,IACAP;AAAAA,IACAD;AAAAA,IACAD;AAAAA,IACAH;AAAAA,IACAU;AAAAA,IACAhB;AAAAA,IACAY;AAAAA,IACAE;AAAAA,IACAD;AAAAA,IACAE;AAAAA,IACAW,SAASC;AAAAA,IACTC,SAAS7B;AAAAA,EAAAA,CACV;AAED,QAAM8B,YAAYC,aAAa;AAAA,IAC7BC,aAAa;AAAA,IACbC,mBAAmB,CAAC;AAAA,IACpBC,wBAAwBd;AAAAA,IACxBf,WAAWF,QAAQgC;AAAAA,IACnBC,cAAcZ;AAAAA,IACda,YAAYtC;AAAAA,EAAAA,CACb;AAED,6BACG,kBAAiB,EAAA,OAAO0B,cACvB,UAAA,oBAAC,QAAG,WAAWH,GAAGnB,QAAQgC,MAAM9B,SAAS,GAAG,GAAIyB,WAAeV,GAAAA,QAC5DlB,UACH,EACF,CAAA;AAEJ,CAAC;"}

package/dist/esm/components/TreeView/TreeView.styles.js

@@ -0,0 +1,18 @@
+import { createClasses } from "../../utils/classes.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvTreeView", {
+  /** Applied to the root element */
+  root: {
+    padding: 0,
+    margin: 0,
+    listStyle: "none",
+    outline: "none"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=TreeView.styles.js.map

package/dist/esm/components/TreeView/TreeView.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.styles.js","sources":["../../../../src/components/TreeView/TreeView.styles.ts"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTreeView\", {\n  /** Applied to the root element */\n  root: {\n    padding: 0,\n    margin: 0,\n    listStyle: \"none\",\n    outline: \"none\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","margin","listStyle","outline"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA;AAAA,EAEvEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,EACX;AACF,CAAC;"}

package/dist/esm/components/TreeView/internals.js

@@ -0,0 +1,15 @@
+import { useTreeViewContext } from "@mui/x-tree-view/internals/TreeViewProvider/useTreeViewContext";
+import { TreeViewProvider } from "@mui/x-tree-view/internals/TreeViewProvider";
+import { DescendantProvider, useDescendant } from "@mui/x-tree-view/internals/TreeViewProvider/DescendantProvider";
+import { DEFAULT_TREE_VIEW_PLUGINS } from "@mui/x-tree-view/internals/plugins/defaultPlugins";
+import { useTreeView } from "@mui/x-tree-view/internals/useTreeView";
+const HV_TREE_VIEW_PLUGINS = [...DEFAULT_TREE_VIEW_PLUGINS];
+export {
+  DescendantProvider,
+  HV_TREE_VIEW_PLUGINS,
+  TreeViewProvider,
+  useDescendant,
+  useTreeView,
+  useTreeViewContext
+};
+//# sourceMappingURL=internals.js.map

package/dist/esm/components/TreeView/internals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internals.js","sources":["../../../../src/components/TreeView/internals.ts"],"sourcesContent":["import { useTreeViewContext } from \"@mui/x-tree-view/internals/TreeViewProvider/useTreeViewContext\";\nimport { TreeViewProvider } from \"@mui/x-tree-view/internals/TreeViewProvider\";\nimport {\n  DescendantProvider,\n  TreeItemDescendant,\n  useDescendant,\n} from \"@mui/x-tree-view/internals/TreeViewProvider/DescendantProvider\";\nimport {\n  DEFAULT_TREE_VIEW_PLUGINS,\n  DefaultTreeViewPlugins,\n  DefaultTreeViewPluginParameters,\n} from \"@mui/x-tree-view/internals/plugins/defaultPlugins\";\nimport { useTreeView } from \"@mui/x-tree-view/internals/useTreeView\";\n\nexport type {\n  DefaultTreeViewPlugins as HvTreeViewPlugins,\n  DefaultTreeViewPluginParameters as HvTreeViewPluginParameters,\n  TreeItemDescendant,\n};\n\nexport const HV_TREE_VIEW_PLUGINS = [...DEFAULT_TREE_VIEW_PLUGINS] as const;\n\nexport {\n  DescendantProvider,\n  TreeViewProvider,\n  useDescendant,\n  useTreeView,\n  useTreeViewContext,\n};\n"],"names":["HV_TREE_VIEW_PLUGINS","DEFAULT_TREE_VIEW_PLUGINS"],"mappings":";;;;;AAoBaA,MAAAA,uBAAuB,CAAC,GAAGC,yBAAyB;"}

package/dist/esm/index.js

@@ -260,7 +260,12 @@ import { HvCarouselControls } from "./components/Carousel/CarouselControls.js";
 import { HvCarouselThumbnails } from "./components/Carousel/CarouselThumbnails.js";
 import { staticClasses as staticClasses112 } from "./components/TimePicker/TimePicker.styles.js";
 import { HvTimePicker } from "./components/TimePicker/TimePicker.js";
-import { staticClasses as staticClasses113 } from "./components/Section/Section.styles.js";
+import { staticClasses as staticClasses113 } from "./components/TreeView/TreeView.styles.js";
+import { HvTreeView } from "./components/TreeView/TreeView.js";
+import { staticClasses as staticClasses114 } from "./components/TreeView/TreeItem/TreeItem.styles.js";
+import { HvTreeItem } from "./components/TreeView/TreeItem/TreeItem.js";
+import { useHvTreeItem } from "./components/TreeView/TreeItem/useHvTreeItem.js";
+import { staticClasses as staticClasses115 } from "./components/Section/Section.styles.js";
 import { HvSection } from "./components/Section/Section.js";
 import { useClickOutside } from "./hooks/useClickOutside.js";
 import { useControlled } from "./hooks/useControlled.js";
@@ -425,6 +430,8 @@ export {
   HvTimePicker,
   HvToggleButton,
   HvTooltip,
+  HvTreeItem,
+  HvTreeView,
   HvTypography,
   HvVerticalNavigation,
   HvVerticalNavigationAction,
@@ -578,7 +585,7 @@ export {
   staticClasses89 as rightControlClasses,
   staticClasses106 as scrollToHorizontalClasses,
   staticClasses104 as scrollToVerticalClasses,
-  staticClasses113 as sectionClasses,
+  staticClasses115 as sectionClasses,
   staticClasses11 as selectionListClasses,
   setElementAttrs,
   setId,
@@ -608,6 +615,8 @@ export {
   staticClasses108 as timeAgoClasses,
   staticClasses112 as timePickerClasses,
   staticClasses48 as tooltipClasses,
+  staticClasses114 as treeItemClasses,
+  staticClasses113 as treeView2Classes,
   staticClasses98 as treeViewClasses,
   staticClasses99 as treeViewItemClasses,
   staticClasses as typographyClasses,
@@ -633,6 +642,7 @@ export {
   default3 as useHvTable,
   default6 as useHvTableSticky,
   default4 as useHvTableStyles,
+  useHvTreeItem,
   useImageLoaded,
   useInstance,
   useIsMounted,

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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[];
@@ -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.35.0",
+  "version": "5.36.1",
   "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.12",
+    "@hitachivantara/uikit-react-icons": "^5.7.0",
     "@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": "e322581164467dcb33d75ddcd8cfc12da884f71e",
+  "gitHead": "650c55c646650c66690ce880cf2159e3e4031230",
   "main": "dist/cjs/index.cjs",
   "exports": {
     ".": {