@hitachivantara/uikit-react-core 5.35.0 → 5.36.1

package/dist/cjs/components/TreeView/TreeView.styles.cjs

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classes = require("../../utils/classes.cjs");
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvTreeView", {
+  /** Applied to the root element */
+  root: {
+    padding: 0,
+    margin: 0,
+    listStyle: "none",
+    outline: "none"
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=TreeView.styles.cjs.map

package/dist/cjs/components/TreeView/TreeView.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeView.styles.cjs","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,QAAAA,cAAc,cAAc;AAAA;AAAA,EAEvEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,EACX;AACF,CAAC;;;"}

package/dist/cjs/components/TreeView/internals.cjs

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const useTreeViewContext = require("@mui/x-tree-view/internals/TreeViewProvider/useTreeViewContext");
+const TreeViewProvider = require("@mui/x-tree-view/internals/TreeViewProvider");
+const DescendantProvider = require("@mui/x-tree-view/internals/TreeViewProvider/DescendantProvider");
+const defaultPlugins = require("@mui/x-tree-view/internals/plugins/defaultPlugins");
+const useTreeView = require("@mui/x-tree-view/internals/useTreeView");
+const HV_TREE_VIEW_PLUGINS = [...defaultPlugins.DEFAULT_TREE_VIEW_PLUGINS];
+Object.defineProperty(exports, "useTreeViewContext", {
+  enumerable: true,
+  get: () => useTreeViewContext.useTreeViewContext
+});
+Object.defineProperty(exports, "TreeViewProvider", {
+  enumerable: true,
+  get: () => TreeViewProvider.TreeViewProvider
+});
+Object.defineProperty(exports, "DescendantProvider", {
+  enumerable: true,
+  get: () => DescendantProvider.DescendantProvider
+});
+Object.defineProperty(exports, "useDescendant", {
+  enumerable: true,
+  get: () => DescendantProvider.useDescendant
+});
+Object.defineProperty(exports, "useTreeView", {
+  enumerable: true,
+  get: () => useTreeView.useTreeView
+});
+exports.HV_TREE_VIEW_PLUGINS = HV_TREE_VIEW_PLUGINS;
+//# sourceMappingURL=internals.cjs.map

package/dist/cjs/components/TreeView/internals.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"internals.cjs","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,eAAyB,yBAAA;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/index.cjs

@@ -262,6 +262,11 @@ const CarouselControls = require("./components/Carousel/CarouselControls.cjs");
 const CarouselThumbnails = require("./components/Carousel/CarouselThumbnails.cjs");
 const TimePicker_styles = require("./components/TimePicker/TimePicker.styles.cjs");
 const TimePicker = require("./components/TimePicker/TimePicker.cjs");
+const TreeView_styles$1 = require("./components/TreeView/TreeView.styles.cjs");
+const TreeView$1 = require("./components/TreeView/TreeView.cjs");
+const TreeItem_styles = require("./components/TreeView/TreeItem/TreeItem.styles.cjs");
+const TreeItem = require("./components/TreeView/TreeItem/TreeItem.cjs");
+const useHvTreeItem = require("./components/TreeView/TreeItem/useHvTreeItem.cjs");
 const Section_styles = require("./components/Section/Section.styles.cjs");
 const Section = require("./components/Section/Section.cjs");
 const useClickOutside = require("./hooks/useClickOutside.cjs");
@@ -624,6 +629,11 @@ exports.HvCarouselControls = CarouselControls.HvCarouselControls;
 exports.HvCarouselThumbnails = CarouselThumbnails.HvCarouselThumbnails;
 exports.timePickerClasses = TimePicker_styles.staticClasses;
 exports.HvTimePicker = TimePicker.HvTimePicker;
+exports.treeView2Classes = TreeView_styles$1.staticClasses;
+exports.HvTreeView = TreeView$1.HvTreeView;
+exports.treeItemClasses = TreeItem_styles.staticClasses;
+exports.HvTreeItem = TreeItem.HvTreeItem;
+exports.useHvTreeItem = useHvTreeItem.useHvTreeItem;
 exports.sectionClasses = Section_styles.staticClasses;
 exports.HvSection = Section.HvSection;
 exports.useClickOutside = useClickOutside.useClickOutside;

package/dist/cjs/index.cjs.map

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

package/dist/esm/components/Drawer/Drawer.js

@@ -1,9 +1,12 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { Drawer } from "@mui/material";
+import { jsxs, Fragment, jsx } from "@emotion/react/jsx-runtime";
+import { Drawer, Backdrop } from "@mui/material";
 import { Close } from "@hitachivantara/uikit-react-icons";
+import { theme } from "@hitachivantara/uikit-styles";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { withTooltip } from "../../hocs/withTooltip.js";
 import { setId } from "../../utils/setId.js";
+import { useTheme } from "../../hooks/useTheme.js";
+import { hexToRgbA } from "../../utils/hexToRgbA.js";
 import { useClasses } from "./Drawer.styles.js";
 import { staticClasses } from "./Drawer.styles.js";
 import { HvButton } from "../Button/Button.js";
@@ -17,21 +20,36 @@ const HvDrawer = (props) => {
     onClose,
     anchor = "right",
     buttonTitle = "Close",
+    showBackdrop = true,
+    disableBackdropClick = false,
     ...others
   } = useDefaultProps("HvDrawer", props);
   const {
     classes,
-    cx
+    cx,
+    css
   } = useClasses(classesProp);
+  const {
+    colors
+  } = useTheme();
   const closeButtonDisplay = () => /* @__PURE__ */ jsx(Close, { role: "none" });
   const CloseButtonTooltipWrapper = buttonTitle ? withTooltip(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
-  return /* @__PURE__ */ jsxs(Drawer, { className: cx(classes.root, className), id, anchor, open, PaperProps: {
-    classes: {
-      root: classes.paper
-    }
-  }, onClose, ...others, children: [
-    /* @__PURE__ */ jsx(HvButton, { id: setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: onClose, "aria-label": buttonTitle, children: /* @__PURE__ */ jsx(CloseButtonTooltipWrapper, {}) }),
-    children
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Drawer, { className: cx(classes.root, className), id, anchor, open, PaperProps: {
+      classes: {
+        root: classes.paper
+      }
+    }, onClose, ...others, children: [
+      /* @__PURE__ */ jsx(HvButton, { id: setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: onClose, "aria-label": buttonTitle, children: /* @__PURE__ */ jsx(CloseButtonTooltipWrapper, {}) }),
+      children
+    ] }),
+    showBackdrop && /* @__PURE__ */ jsx(Backdrop, { open: !!open, onClick: (event) => {
+      if (disableBackdropClick)
+        return;
+      onClose?.(event, "backdropClick");
+    }, className: cx(css({
+      background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4)
+    }), classes.background) })
   ] });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvButton } from \"@core/components/Button\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n  extends MuiDrawerProps,\n    Omit<MuiDrawerProps, \"classes\">,\n    HvBaseProps<HTMLDivElement> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const closeButtonDisplay = () => <Close role=\"none\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      onClose={onClose}\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","others","useDefaultProps","cx","useClasses","closeButtonDisplay","CloseButtonTooltipWrapper","withTooltip","MuiDrawer","root","paper","setId","closeButton"],"mappings":";;;;;;;;;AAyEaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACd,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYX,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE9C,QAAMW,qBAAqBA,MAAO,oBAAA,OAAA,EAAM,MAAK,OAAS,CAAA;AAEtD,QAAMC,4BAA4BN,cAC9BO,YAAYF,oBAAoBL,aAAa,KAAK,IAClDK;AAGF,SAAA,qBAACG,QACC,EAAA,WAAWL,GAAGV,QAAQgB,MAAMjB,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,IACVC,SAAS;AAAA,MACPgB,MAAMhB,QAAQiB;AAAAA,IAChB;AAAA,EAAA,GAEF,SACIT,GAAAA,QAEJ,UAAA;AAAA,IAAA,oBAAC,YACC,IAAIU,MAAMhB,IAAI,OAAO,GACrB,WAAWF,QAAQmB,aACnB,SAAQ,kBACR,SAASd,SACT,cAAYE,aAEZ,UAAA,oBAAC,4BAAyB,CAAA,GAC5B;AAAA,IACCJ;AAAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n  Backdrop as MuiBackdrop,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n  extends MuiDrawerProps,\n    Omit<MuiDrawerProps, \"classes\">,\n    HvBaseProps<HTMLDivElement> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer ix open.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n  const { colors } = useTheme();\n\n  const closeButtonDisplay = () => <Close role=\"none\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  return (\n    <>\n      <MuiDrawer\n        className={cx(classes.root, className)}\n        id={id}\n        anchor={anchor}\n        open={open}\n        PaperProps={{\n          classes: {\n            root: classes.paper,\n          },\n        }}\n        onClose={onClose}\n        {...others}\n      >\n        <HvButton\n          id={setId(id, \"close\")}\n          className={classes.closeButton}\n          variant=\"secondaryGhost\"\n          onClick={onClose}\n          aria-label={buttonTitle}\n        >\n          <CloseButtonTooltipWrapper />\n        </HvButton>\n        {children}\n      </MuiDrawer>\n      {showBackdrop && (\n        <MuiBackdrop\n          open={!!open}\n          onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {\n            if (disableBackdropClick) return;\n            onClose?.(event, \"backdropClick\");\n          }}\n          className={cx(\n            css({\n              background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4),\n            }),\n            classes.background\n          )}\n        />\n      )}\n    </>\n  );\n};\n"],"names":["HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","showBackdrop","disableBackdropClick","others","useDefaultProps","cx","css","useClasses","colors","useTheme","closeButtonDisplay","CloseButtonTooltipWrapper","withTooltip","MuiDrawer","root","paper","setId","closeButton","MuiBackdrop","event","background","hexToRgbA","atmo4","theme"],"mappings":";;;;;;;;;;;;AAsFaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYb,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASY;AAAAA,IAAIC;AAAAA,EAAAA,IAAQC,WAAWb,WAAW;AAC7C,QAAA;AAAA,IAAEc;AAAAA,MAAWC,SAAS;AAE5B,QAAMC,qBAAqBA,MAAO,oBAAA,OAAA,EAAM,MAAK,OAAS,CAAA;AAEtD,QAAMC,4BAA4BX,cAC9BY,YAAYF,oBAAoBV,aAAa,KAAK,IAClDU;AAEJ,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAC,qBAAAG,QAAA,EACC,WAAWR,GAAGZ,QAAQqB,MAAMtB,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,MACVC,SAAS;AAAA,QACPqB,MAAMrB,QAAQsB;AAAAA,MAChB;AAAA,IAAA,GAEF,SACIZ,GAAAA,QAEJ,UAAA;AAAA,MAAA,oBAAC,YACC,IAAIa,MAAMrB,IAAI,OAAO,GACrB,WAAWF,QAAQwB,aACnB,SAAQ,kBACR,SAASnB,SACT,cAAYE,aAEZ,UAAA,oBAAC,4BAAyB,CAAA,GAC5B;AAAA,MACCJ;AAAAA,IAAAA,GACH;AAAA,IACCK,oCACEiB,UACC,EAAA,MAAM,CAAC,CAACrB,MACR,SAAS,CAACsB,UAAqD;AACzDjB,UAAAA;AAAsB;AAC1BJ,gBAAUqB,OAAO,eAAe;AAAA,IAAA,GAElC,WAAWd,GACTC,IAAI;AAAA,MACFc,YAAYC,UAAUb,QAAQc,SAASC,MAAMf,OAAOc,KAAK;AAAA,IAAA,CAC1D,GACD7B,QAAQ2B,UACV,GAEH;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/ListContainer/ListItem/ListItem.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import React__default, { useContext, useCallback, useMemo } from "react";
+import React__default, { forwardRef, useContext, useCallback, useMemo } from "react";
 import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { useClasses } from "./ListItem.styles.js";
 import { staticClasses } from "./ListItem.styles.js";
@@ -24,7 +24,7 @@ const applyClassNameToElement = (element, className) => {
   }
   return null;
 };
-const HvListItem = (props) => {
+const HvListItem = forwardRef((props, ref) => {
   const {
     id,
     classes: classesProp,
@@ -78,6 +78,7 @@ const HvListItem = (props) => {
       "li",
       {
         id,
+        ref,
         role,
         value,
         className: cx(classes.root, {
@@ -107,7 +108,7 @@ const HvListItem = (props) => {
   }, configuration: {
     tabIndex
   }, children: listItem }) : listItem;
-};
+});
 export {
   HvListItem,
   staticClasses as listItemClasses

package/dist/esm/components/ListContainer/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvFocus } from \"@core/components/Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /**\n   * Overrides the implicit list item role.\n   */\n  role?: string;\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element,\n  selected,\n  disabled,\n  onClick,\n  className\n) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n      checked: !!selected,\n      disabled,\n      onChange: (evt) => onClick?.(evt),\n    });\n  }\n\n  return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n    });\n  }\n\n  return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = (props: HvListItemProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp != null ? condensedProp : condensedContext;\n  const disableGutters =\n    disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n  const interactive =\n    interactiveProp != null ? interactiveProp : interactiveContext;\n\n  const handleOnClick = useCallback(\n    (evt) => {\n      if (!disabled) {\n        onClick?.(evt);\n      }\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleOnClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleOnClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <li\n      id={id}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: !!selected,\n          [classes.disabled]: !!disabled,\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      onClick={handleOnClick}\n      onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n};\n"],"names":["applyClassNameAndStateToElement","element","selected","disabled","onClick","className","React","cloneElement","checked","onChange","evt","applyClassNameToElement","HvListItem","props","id","classes","classesProp","role","value","interactive","interactiveProp","condensed","condensedProp","disableGutters","disableGuttersProp","startAdornment","endAdornment","children","tabIndex","others","useDefaultProps","cx","useClasses","topContainerRef","condensedContext","disableGuttersContext","interactiveContext","useContext","HvListContext","handleOnClick","useCallback","clonedStartAdornment","useMemo","isValidElement","undefined","clonedEndAdornment","roleOptionAriaProps","listItem","root","gutters","withStartAdornment","withEndAdornment","focus"],"mappings":"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"}
+{"version":3,"file":"ListItem.js","sources":["../../../../../src/components/ListContainer/ListItem/ListItem.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useContext, useMemo } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvFocus } from \"@core/components/Focus\";\n\nimport HvListContext from \"../ListContext\";\nimport { staticClasses, useClasses } from \"./ListItem.styles\";\n\nexport { staticClasses as listItemClasses };\n\nexport type HvListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListItemProps extends HvBaseProps<HTMLLIElement> {\n  /**\n   * Overrides the implicit list item role.\n   */\n  role?: HvBaseProps<HTMLLIElement>[\"role\"];\n  /** Indicates if the list item is selected. */\n  selected?: boolean;\n  /** If true, the list item will be disabled. */\n  disabled?: boolean;\n  /**\n   * If the list item is focusable and reacts to mouse over events.\n   * Defaults to true if the container list is interactive, false otherwise.\n   */\n  interactive?: boolean;\n  /**\n   * If `true` compacts the vertical spacing intended to separate the list items.\n   * Defaults to the value set in container list.\n   */\n  condensed?: boolean;\n  /**\n   * If `true`, the left and right padding is removed.\n   * Defaults to the value set in container list.\n   */\n  disableGutters?: boolean;\n  /**\n   * Element placed before the children.\n   * Also removes the left padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is either an icon (changing the color when the item is disabled)\n   * or a selector (preventing the double focus ring, propagating the checked and disabled states and wiring the onChange event).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * Element placed after the children and aligned next to the margin.\n   * Also removes the right padding (gutter).\n   *\n   * Some modifications are applied, assuming that it is an icon (changing the color when the item is disabled).\n   * If unwanted, the element should be placed directly as a child.\n   */\n  endAdornment?: React.ReactNode;\n  /** The value to be set on the 'li' element */\n  value?: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListItemClasses;\n}\n\nconst applyClassNameAndStateToElement = (\n  element,\n  selected,\n  disabled,\n  onClick,\n  className\n) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n      checked: !!selected,\n      disabled,\n      onChange: (evt) => onClick?.(evt),\n    });\n  }\n\n  return null;\n};\n\nconst applyClassNameToElement = (element, className) => {\n  if (element != null) {\n    return React.cloneElement(element, {\n      className,\n    });\n  }\n\n  return null;\n};\n\n/**\n * ListItem description/documentation paragraph\n */\nexport const HvListItem = forwardRef<any, HvListItemProps>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    role,\n    value,\n    selected,\n    disabled,\n    interactive: interactiveProp,\n    condensed: condensedProp,\n    disableGutters: disableGuttersProp,\n    startAdornment,\n    endAdornment,\n    onClick,\n    children,\n    tabIndex,\n    ...others\n  } = useDefaultProps(\"HvListItem\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    topContainerRef,\n    condensed: condensedContext,\n    disableGutters: disableGuttersContext,\n    interactive: interactiveContext,\n  } = useContext(HvListContext);\n\n  const condensed = condensedProp != null ? condensedProp : condensedContext;\n  const disableGutters =\n    disableGuttersProp != null ? disableGuttersProp : disableGuttersContext;\n  const interactive =\n    interactiveProp != null ? interactiveProp : interactiveContext;\n\n  const handleOnClick = useCallback(\n    (evt) => {\n      if (!disabled) {\n        onClick?.(evt);\n      }\n    },\n    [disabled, onClick]\n  );\n\n  const clonedStartAdornment = useMemo(\n    () =>\n      applyClassNameAndStateToElement(\n        startAdornment,\n        selected,\n        disabled,\n        handleOnClick,\n        cx(\n          classes.startAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(startAdornment)\n            ? startAdornment.props.className\n            : undefined\n        )\n      ),\n    [\n      cx,\n      classes?.startAdornment,\n      classes?.disabled,\n      disabled,\n      handleOnClick,\n      selected,\n      startAdornment,\n    ]\n  );\n  const clonedEndAdornment = useMemo(\n    () =>\n      applyClassNameToElement(\n        endAdornment,\n        cx(\n          classes.endAdornment,\n          { [classes.disabled]: disabled },\n          React.isValidElement(endAdornment)\n            ? endAdornment.props.className\n            : undefined\n        )\n      ),\n    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]\n  );\n\n  const roleOptionAriaProps =\n    role === \"option\" || role === \"menuitem\"\n      ? {\n          \"aria-disabled\": disabled || undefined,\n          \"aria-selected\": selected,\n        }\n      : {};\n\n  const listItem = (\n    // For later: this should only have an onClick event if interactive and has the appropriate role.\n    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n    <li\n      id={id}\n      ref={ref}\n      role={role}\n      value={value}\n      className={cx(\n        classes.root,\n        {\n          [classes.gutters]: !disableGutters,\n          [classes.condensed]: condensed,\n          [classes.interactive]: interactive,\n          [classes.selected]: !!selected,\n          [classes.disabled]: !!disabled,\n          [classes.withStartAdornment]: startAdornment != null,\n          [classes.withEndAdornment]: endAdornment != null,\n        },\n        className\n      )}\n      onClick={handleOnClick}\n      onKeyDown={() => {}} // Needed because of jsx-a11yclick-events-have-key-events\n      {...roleOptionAriaProps}\n      {...others}\n    >\n      {clonedStartAdornment}\n      {children}\n      {clonedEndAdornment}\n    </li>\n  );\n\n  return interactive ? (\n    <HvFocus\n      rootRef={topContainerRef}\n      selected={selected}\n      disabledClass={disabled || undefined}\n      strategy={role === \"option\" ? \"listbox\" : \"menu\"}\n      classes={{ focus: classes.focus }}\n      configuration={{\n        tabIndex,\n      }}\n    >\n      {listItem}\n    </HvFocus>\n  ) : (\n    listItem\n  );\n});\n"],"names":["applyClassNameAndStateToElement","element","selected","disabled","onClick","className","React","cloneElement","checked","onChange","evt","applyClassNameToElement","HvListItem","forwardRef","props","ref","id","classes","classesProp","role","value","interactive","interactiveProp","condensed","condensedProp","disableGutters","disableGuttersProp","startAdornment","endAdornment","children","tabIndex","others","useDefaultProps","cx","useClasses","topContainerRef","condensedContext","disableGuttersContext","interactiveContext","useContext","HvListContext","handleOnClick","useCallback","clonedStartAdornment","useMemo","isValidElement","undefined","clonedEndAdornment","roleOptionAriaProps","listItem","root","gutters","withStartAdornment","withEndAdornment","focus"],"mappings":"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"}

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

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { useCss } from "../../../hooks/useCss.js";
+import { useHvTreeItem } from "./useHvTreeItem.js";
+const DefaultContent = forwardRef((props, ref) => {
+  const {
+    classes,
+    className,
+    displayIcon,
+    expansionIcon,
+    icon: iconProp,
+    label,
+    nodeId,
+    onClick,
+    onMouseDown,
+    ...others
+  } = props;
+  const {
+    cx
+  } = useCss();
+  const {
+    disabled,
+    expanded,
+    selected,
+    focused,
+    handleExpansion,
+    handleSelection,
+    preventSelection
+  } = useHvTreeItem(nodeId);
+  const icon = iconProp ?? expansionIcon ?? displayIcon;
+  return (
+    /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */
+    /* @__PURE__ */ jsxs("div", { ...others, className: cx(className, classes.root, {
+      [classes.expanded]: expanded,
+      [classes.selected]: selected,
+      [classes.focused]: focused,
+      [classes.disabled]: disabled
+    }), onClick: (event) => {
+      handleExpansion(event);
+      handleSelection(event);
+      onClick?.(event);
+    }, onMouseDown: (event) => {
+      preventSelection(event);
+      onMouseDown?.(event);
+    }, ref, children: [
+      /* @__PURE__ */ jsx("div", { className: classes.iconContainer, children: icon }),
+      /* @__PURE__ */ jsx("div", { className: classes.label, children: label })
+    ] })
+  );
+});
+export {
+  DefaultContent
+};
+//# sourceMappingURL=DefaultContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultContent.js","sources":["../../../../../src/components/TreeView/TreeItem/DefaultContent.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useCss } from \"@core/hooks/useCss\";\n\nimport type { HvTreeContentProps } from \"./TreeItem\";\nimport { useHvTreeItem } from \"./useHvTreeItem\";\n\n/**\n * Internal default TreeItem `component`.\n * Use this as a basis to create a custom component.\n */\nexport const DefaultContent = forwardRef<HTMLDivElement, HvTreeContentProps>(\n  (props, ref) => {\n    const {\n      classes,\n      className,\n      displayIcon,\n      expansionIcon,\n      icon: iconProp,\n      label,\n      nodeId,\n      onClick,\n      onMouseDown,\n      ...others\n    } = props;\n\n    const { cx } = useCss();\n\n    const {\n      disabled,\n      expanded,\n      selected,\n      focused,\n      handleExpansion,\n      handleSelection,\n      preventSelection,\n    } = useHvTreeItem(nodeId);\n\n    const icon = iconProp ?? expansionIcon ?? displayIcon;\n\n    return (\n      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions -- Key event is handled by the TreeView */\n      <div\n        {...others}\n        className={cx(className, classes.root, {\n          [classes.expanded]: expanded,\n          [classes.selected]: selected,\n          [classes.focused]: focused,\n          [classes.disabled]: disabled,\n        })}\n        onClick={(event) => {\n          handleExpansion(event);\n          handleSelection(event);\n          onClick?.(event);\n        }}\n        onMouseDown={(event) => {\n          preventSelection(event);\n          onMouseDown?.(event);\n        }}\n        ref={ref}\n      >\n        <div className={classes.iconContainer}>{icon}</div>\n        <div className={classes.label}>{label}</div>\n      </div>\n    );\n  }\n);\n"],"names":["DefaultContent","forwardRef","props","ref","classes","className","displayIcon","expansionIcon","icon","iconProp","label","nodeId","onClick","onMouseDown","others","cx","useCss","disabled","expanded","selected","focused","handleExpansion","handleSelection","preventSelection","useHvTreeItem","root","event","iconContainer"],"mappings":";;;;AAWO,MAAMA,iBAAiBC,WAC5B,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,MAAMC;AAAAA,IACNC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EACDZ,IAAAA;AAEE,QAAA;AAAA,IAAEa;AAAAA,MAAOC,OAAO;AAEhB,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,EAAAA,IACEC,cAAcb,MAAM;AAElBH,QAAAA,OAAOC,YAAYF,iBAAiBD;AAE1C;AAAA;AAAA,IAEE,qBAAC,SACC,GAAIQ,QACJ,WAAWC,GAAGV,WAAWD,QAAQqB,MAAM;AAAA,MACrC,CAACrB,QAAQc,QAAQ,GAAGA;AAAAA,MACpB,CAACd,QAAQe,QAAQ,GAAGA;AAAAA,MACpB,CAACf,QAAQgB,OAAO,GAAGA;AAAAA,MACnB,CAAChB,QAAQa,QAAQ,GAAGA;AAAAA,IAAAA,CACrB,GACD,SAAUS,CAAU,UAAA;AAClBL,sBAAgBK,KAAK;AACrBJ,sBAAgBI,KAAK;AACrBd,gBAAUc,KAAK;AAAA,IAAA,GAEjB,aAAcA,CAAU,UAAA;AACtBH,uBAAiBG,KAAK;AACtBb,oBAAca,KAAK;AAAA,IAAA,GAErB,KAEA,UAAA;AAAA,MAAA,oBAAC,OAAI,EAAA,WAAWtB,QAAQuB,eAAgBnB,UAAK,MAAA;AAAA,MAC5C,oBAAA,OAAA,EAAI,WAAWJ,QAAQM,OAAQA,UAAM,OAAA;AAAA,IAAA,GACxC;AAAA;AAEJ,CACF;"}

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

@@ -0,0 +1,125 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useState, useRef, useMemo, useEffect } from "react";
+import { Collapse } from "@mui/material";
+import { useForkRef } from "../../../hooks/useForkRef.js";
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
+import "../internals.js";
+import { useClasses } from "./TreeItem.styles.js";
+import { staticClasses } from "./TreeItem.styles.js";
+import { DefaultContent } from "./DefaultContent.js";
+import { useTreeViewContext } from "@mui/x-tree-view/internals/TreeViewProvider/useTreeViewContext";
+import { useDescendant, DescendantProvider } from "@mui/x-tree-view/internals/TreeViewProvider/DescendantProvider";
+const HvTreeItem = forwardRef((props, ref) => {
+  const {
+    id: idProp,
+    nodeId,
+    children,
+    classes: classesProp,
+    className,
+    label,
+    disabled: disabledProp,
+    icon,
+    endIcon,
+    expandIcon,
+    collapseIcon,
+    ContentComponent: Component = DefaultContent,
+    TransitionProps: transitionProps,
+    ContentProps: contentProps,
+    ...others
+  } = useDefaultProps("HvTreeItem", props);
+  const {
+    classes,
+    cx
+  } = useClasses(classesProp);
+  const {
+    instance,
+    multiSelect,
+    disabledItemsFocusable,
+    treeId,
+    icons: contextIcons
+  } = useTreeViewContext();
+  const id = idProp || treeId && nodeId && `${treeId}-${nodeId}` || void 0;
+  const [treeItemElement, setTreeItemElement] = useState(null);
+  const contentRef = useRef(null);
+  const handleRef = useForkRef(setTreeItemElement, ref);
+  const descendant = useMemo(() => ({
+    element: treeItemElement,
+    id: nodeId
+  }), [nodeId, treeItemElement]);
+  const {
+    index,
+    parentId
+  } = useDescendant(descendant);
+  const expandable = !!(Array.isArray(children) ? children.length : children);
+  const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
+  const focused = instance ? instance.isNodeFocused(nodeId) : false;
+  const selected = instance ? instance.isNodeSelected(nodeId) : false;
+  const disabled = instance ? instance.isNodeDisabled(nodeId) : false;
+  const expansionIcon = !expanded ? expandIcon || contextIcons.defaultExpandIcon : collapseIcon || contextIcons.defaultCollapseIcon;
+  const displayIcon = expandable ? contextIcons.defaultParentIcon : endIcon || contextIcons.defaultEndIcon;
+  useEffect(() => {
+    if (instance && index !== -1) {
+      instance.updateNode({
+        id: nodeId,
+        idAttribute: id,
+        index,
+        parentId,
+        expandable,
+        disabled: disabledProp
+      });
+      return () => instance.removeNode(nodeId);
+    }
+    return void 0;
+  }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);
+  useEffect(() => {
+    if (instance && label) {
+      return instance.mapFirstChar(nodeId, (contentRef.current?.textContent ?? "").substring(0, 1).toLowerCase());
+    }
+    return void 0;
+  }, [instance, nodeId, label]);
+  const handleFocus = (event) => {
+    if (event.target === event.currentTarget) {
+      const rootElement = typeof event.target.getRootNode === "function" ? event.target.getRootNode() : event.target.ownerDocument || document;
+      rootElement.getElementById(treeId).focus({
+        preventScroll: true
+      });
+    }
+    const unfocusable = !disabledItemsFocusable && disabled;
+    const canFocus = instance && !focused && !disabled && !unfocusable && event.currentTarget === event.target;
+    if (canFocus) {
+      instance.focusNode(event, nodeId);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      id,
+      ref: handleRef,
+      role: "treeitem",
+      "aria-expanded": expandable ? expanded : void 0,
+      "aria-selected": multiSelect && selected || selected || void 0,
+      "aria-disabled": disabled || void 0,
+      className: cx(classes.root, className),
+      onFocus: handleFocus,
+      tabIndex: -1,
+      ...others,
+      children: [
+        /* @__PURE__ */ jsx(Component, { ref: contentRef, nodeId, classes: {
+          root: classes.content,
+          expanded: classes.expanded,
+          selected: classes.selected,
+          focused: classes.focused,
+          disabled: classes.disabled,
+          label: classes.label,
+          iconContainer: classes.iconContainer
+        }, label, icon, expansionIcon: expandable && expansionIcon, displayIcon, ...contentProps }),
+        children && /* @__PURE__ */ jsx(DescendantProvider, { id: nodeId, children: /* @__PURE__ */ jsx(Collapse, { component: "ul", role: "group", unmountOnExit: true, className: classes.group, in: expanded, ...transitionProps, children }) })
+      ]
+    }
+  );
+});
+export {
+  HvTreeItem,
+  staticClasses as treeItemClasses
+};
+//# sourceMappingURL=TreeItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItem.js","sources":["../../../../../src/components/TreeView/TreeItem/TreeItem.tsx"],"sourcesContent":["import {\n  FocusEvent,\n  ReactNode,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { Collapse } from \"@mui/material\";\nimport type { TreeItemContentProps, TreeItemProps } from \"@mui/x-tree-view\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  HvTreeViewPlugins,\n  DescendantProvider,\n  TreeItemDescendant,\n  useDescendant,\n  useTreeViewContext,\n} from \"../internals\";\nimport { staticClasses, useClasses } from \"./TreeItem.styles\";\nimport { DefaultContent } from \"./DefaultContent\";\n\nexport { staticClasses as treeItemClasses };\n\nexport type HvTreeItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends TreeItemContentProps {}\n\nexport interface HvTreeItemProps extends TreeItemProps {\n  classes?: HvTreeItemClasses;\n  disabled?: boolean;\n  icon?: ReactNode;\n  ContentComponent?: React.JSXElementConstructor<HvTreeContentProps>;\n}\n\nexport const HvTreeItem = forwardRef<HTMLLIElement, HvTreeItemProps>(\n  (props, ref) => {\n    const {\n      id: idProp,\n      nodeId,\n      children,\n      classes: classesProp,\n      className,\n      label,\n      disabled: disabledProp,\n      icon,\n      endIcon,\n      expandIcon,\n      collapseIcon,\n      ContentComponent: Component = DefaultContent,\n      TransitionProps: transitionProps,\n      ContentProps: contentProps,\n      ...others\n    } = useDefaultProps(\"HvTreeItem\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const {\n      instance,\n      multiSelect,\n      disabledItemsFocusable,\n      treeId,\n      icons: contextIcons,\n    } = useTreeViewContext<HvTreeViewPlugins>();\n\n    const id =\n      idProp || (treeId && nodeId && `${treeId}-${nodeId}`) || undefined;\n\n    const [treeItemElement, setTreeItemElement] =\n      useState<HTMLLIElement | null>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(setTreeItemElement, ref);\n\n    const descendant = useMemo<TreeItemDescendant>(\n      () => ({ element: treeItemElement!, id: nodeId }),\n      [nodeId, treeItemElement]\n    );\n\n    const { index, parentId } = useDescendant(descendant);\n\n    const expandable = !!(Array.isArray(children) ? children.length : children);\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 expansionIcon = !expanded\n      ? expandIcon || contextIcons.defaultExpandIcon\n      : collapseIcon || contextIcons.defaultCollapseIcon;\n\n    const displayIcon = expandable\n      ? contextIcons.defaultParentIcon\n      : endIcon || contextIcons.defaultEndIcon;\n\n    useEffect(() => {\n      // On the first render a node's index will be -1. We want to wait for the real index.\n      if (instance && index !== -1) {\n        instance.updateNode({\n          id: nodeId,\n          idAttribute: id,\n          index,\n          parentId,\n          expandable,\n          disabled: disabledProp,\n        });\n\n        return () => instance.removeNode(nodeId);\n      }\n\n      return undefined;\n    }, [instance, parentId, index, nodeId, expandable, disabledProp, id]);\n\n    useEffect(() => {\n      if (instance && label) {\n        return instance.mapFirstChar(\n          nodeId,\n          (contentRef.current?.textContent ?? \"\").substring(0, 1).toLowerCase()\n        );\n      }\n      return undefined;\n    }, [instance, nodeId, label]);\n\n    const handleFocus = (event: FocusEvent<HTMLLIElement, any>) => {\n      // DOM focus stays on the tree which manages focus with aria-activedescendant\n      if (event.target === event.currentTarget) {\n        const rootElement: any =\n          typeof event.target.getRootNode === \"function\"\n            ? event.target.getRootNode()\n            : event.target.ownerDocument || document;\n\n        rootElement.getElementById(treeId).focus({ preventScroll: true });\n      }\n\n      const unfocusable = !disabledItemsFocusable && disabled;\n      const canFocus =\n        instance &&\n        !focused &&\n        !disabled &&\n        !unfocusable &&\n        event.currentTarget === event.target;\n\n      if (canFocus) {\n        instance.focusNode(event, nodeId);\n      }\n    };\n\n    return (\n      <li\n        id={id}\n        ref={handleRef}\n        role=\"treeitem\"\n        aria-expanded={expandable ? expanded : undefined}\n        aria-selected={(multiSelect && selected) || selected || undefined}\n        aria-disabled={disabled || undefined}\n        className={cx(classes.root, className)}\n        // @ts-ignore\n        onFocus={handleFocus}\n        tabIndex={-1}\n        {...others}\n      >\n        <Component\n          ref={contentRef}\n          nodeId={nodeId}\n          classes={{\n            root: classes.content,\n            expanded: classes.expanded,\n            selected: classes.selected,\n            focused: classes.focused,\n            disabled: classes.disabled,\n            label: classes.label,\n            iconContainer: classes.iconContainer,\n          }}\n          label={label}\n          icon={icon}\n          expansionIcon={expandable && expansionIcon}\n          displayIcon={displayIcon}\n          {...contentProps}\n        />\n        {children && (\n          <DescendantProvider id={nodeId}>\n            <Collapse\n              component=\"ul\"\n              role=\"group\"\n              unmountOnExit\n              className={classes.group}\n              in={expanded}\n              {...transitionProps}\n            >\n              {children}\n            </Collapse>\n          </DescendantProvider>\n        )}\n      </li>\n    );\n  }\n);\n"],"names":["HvTreeItem","forwardRef","props","ref","id","idProp","nodeId","children","classes","classesProp","className","label","disabled","disabledProp","icon","endIcon","expandIcon","collapseIcon","ContentComponent","Component","DefaultContent","TransitionProps","transitionProps","ContentProps","contentProps","others","useDefaultProps","cx","useClasses","instance","multiSelect","disabledItemsFocusable","treeId","icons","contextIcons","useTreeViewContext","undefined","treeItemElement","setTreeItemElement","useState","contentRef","useRef","handleRef","useForkRef","descendant","useMemo","element","index","parentId","useDescendant","expandable","Array","isArray","length","expanded","isNodeExpanded","focused","isNodeFocused","selected","isNodeSelected","isNodeDisabled","expansionIcon","defaultExpandIcon","defaultCollapseIcon","displayIcon","defaultParentIcon","defaultEndIcon","useEffect","updateNode","idAttribute","removeNode","mapFirstChar","current","textContent","substring","toLowerCase","handleFocus","event","target","currentTarget","rootElement","getRootNode","ownerDocument","document","getElementById","focus","preventScroll","unfocusable","canFocus","focusNode","root","content","iconContainer","group"],"mappings":"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"}

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

@@ -0,0 +1,74 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../../utils/classes.js";
+import { outlineStyles } from "../../../utils/focusUtils.js";
+const {
+  staticClasses,
+  useClasses
+} = createClasses("HvTreeItem", {
+  /** Applied to the root element */
+  root: {
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+    outline: 0
+  },
+  group: {
+    margin: 0,
+    padding: 0,
+    marginLeft: theme.space.sm
+  },
+  content: {
+    padding: theme.spacing(0, 1),
+    minHeight: 32,
+    // TODO: review
+    width: "100%",
+    boxSizing: "border-box",
+    // prevent width + padding to overflow
+    display: "flex",
+    alignItems: "center",
+    cursor: "pointer",
+    WebkitTapHighlightColor: "transparent",
+    "&:hover:not($disabled)": {
+      backgroundColor: theme.colors.containerBackgroundHover
+    }
+  },
+  expanded: {},
+  selected: {
+    backgroundColor: theme.colors.atmo3
+  },
+  focused: {
+    backgroundColor: theme.colors.containerBackgroundHover,
+    "&:focus-visible": {
+      ...outlineStyles
+    }
+  },
+  disabled: {
+    cursor: "not-allowed",
+    color: theme.colors.secondary_60,
+    "& $label": {
+      color: theme.colors.secondary_60
+    }
+  },
+  label: {
+    paddingLeft: 4,
+    width: "100%",
+    boxSizing: "border-box",
+    // fixes overflow
+    minWidth: 0,
+    position: "relative",
+    ...theme.typography.body
+  },
+  iconContainer: {
+    display: "flex",
+    flexShrink: 0,
+    justifyContent: "center",
+    width: 16,
+    // TODO: review
+    marginRight: 4
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=TreeItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItem.styles.js","sources":["../../../../../src/components/TreeView/TreeItem/TreeItem.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTreeItem\", {\n  /** Applied to the root element */\n  root: {\n    listStyle: \"none\",\n    margin: 0,\n    padding: 0,\n    outline: 0,\n  },\n  group: {\n    margin: 0,\n    padding: 0,\n    marginLeft: theme.space.sm,\n  },\n\n  content: {\n    padding: theme.spacing(0, 1),\n    minHeight: 32, // TODO: review\n\n    width: \"100%\",\n    boxSizing: \"border-box\", // prevent width + padding to overflow\n    display: \"flex\",\n    alignItems: \"center\",\n    cursor: \"pointer\",\n    WebkitTapHighlightColor: \"transparent\",\n    \"&:hover:not($disabled)\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n  },\n  expanded: {},\n  selected: {\n    backgroundColor: theme.colors.atmo3,\n  },\n  focused: {\n    backgroundColor: theme.colors.containerBackgroundHover,\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n    \"& $label\": {\n      color: theme.colors.secondary_60,\n    },\n  },\n  label: {\n    paddingLeft: 4,\n    width: \"100%\",\n    boxSizing: \"border-box\",\n\n    // fixes overflow\n    minWidth: 0,\n    position: \"relative\",\n    ...theme.typography.body,\n  },\n  iconContainer: {\n    display: \"flex\",\n    flexShrink: 0,\n    justifyContent: \"center\",\n\n    width: 16, // TODO: review\n    marginRight: 4,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","listStyle","margin","padding","outline","group","marginLeft","theme","space","sm","content","spacing","minHeight","width","boxSizing","display","alignItems","cursor","WebkitTapHighlightColor","backgroundColor","colors","containerBackgroundHover","expanded","selected","atmo3","focused","outlineStyles","disabled","color","secondary_60","label","paddingLeft","minWidth","position","typography","body","iconContainer","flexShrink","justifyContent","marginRight"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,cAAc;AAAA;AAAA,EAEvEC,MAAM;AAAA,IACJC,WAAW;AAAA,IACXC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,SAAS;AAAA,EACX;AAAA,EACAC,OAAO;AAAA,IACLH,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTG,YAAYC,MAAMC,MAAMC;AAAAA,EAC1B;AAAA,EAEAC,SAAS;AAAA,IACPP,SAASI,MAAMI,QAAQ,GAAG,CAAC;AAAA,IAC3BC,WAAW;AAAA;AAAA,IAEXC,OAAO;AAAA,IACPC,WAAW;AAAA;AAAA,IACXC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,yBAAyB;AAAA,IACzB,0BAA0B;AAAA,MACxBC,iBAAiBZ,MAAMa,OAAOC;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,UAAU,CAAC;AAAA,EACXC,UAAU;AAAA,IACRJ,iBAAiBZ,MAAMa,OAAOI;AAAAA,EAChC;AAAA,EACAC,SAAS;AAAA,IACPN,iBAAiBZ,MAAMa,OAAOC;AAAAA,IAC9B,mBAAmB;AAAA,MACjB,GAAGK;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRV,QAAQ;AAAA,IACRW,OAAOrB,MAAMa,OAAOS;AAAAA,IACpB,YAAY;AAAA,MACVD,OAAOrB,MAAMa,OAAOS;AAAAA,IACtB;AAAA,EACF;AAAA,EACAC,OAAO;AAAA,IACLC,aAAa;AAAA,IACblB,OAAO;AAAA,IACPC,WAAW;AAAA;AAAA,IAGXkB,UAAU;AAAA,IACVC,UAAU;AAAA,IACV,GAAG1B,MAAM2B,WAAWC;AAAAA,EACtB;AAAA,EACAC,eAAe;AAAA,IACbrB,SAAS;AAAA,IACTsB,YAAY;AAAA,IACZC,gBAAgB;AAAA,IAEhBzB,OAAO;AAAA;AAAA,IACP0B,aAAa;AAAA,EACf;AACF,CAAC;"}

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

@@ -0,0 +1,62 @@
+import "../internals.js";
+import { useTreeViewContext } from "@mui/x-tree-view/internals/TreeViewProvider/useTreeViewContext";
+function useHvTreeItem(nodeId) {
+  const {
+    instance,
+    multiSelect
+  } = useTreeViewContext();
+  const expandable = instance ? instance.isNodeExpandable(nodeId) : false;
+  const expanded = instance ? instance.isNodeExpanded(nodeId) : false;
+  const focused = instance ? instance.isNodeFocused(nodeId) : false;
+  const selected = instance ? instance.isNodeSelected(nodeId) : false;
+  const disabled = instance ? instance.isNodeDisabled(nodeId) : false;
+  const handleExpansion = (event) => {
+    if (!instance || disabled)
+      return;
+    if (!focused) {
+      instance.focusNode(event, nodeId);
+    }
+    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+    if (expandable && !(multiple && instance.isNodeExpanded(nodeId))) {
+      instance.toggleNodeExpansion(event, nodeId);
+    }
+  };
+  const handleSelection = (event) => {
+    if (!instance || disabled)
+      return;
+    if (!focused) {
+      instance.focusNode(event, nodeId);
+    }
+    const multiple = multiSelect && (event.shiftKey || event.ctrlKey || event.metaKey);
+    if (multiple) {
+      if (event.shiftKey) {
+        instance.selectRange(event, {
+          end: nodeId
+        });
+      } else {
+        instance.selectNode(event, nodeId, true);
+      }
+    } else {
+      instance.selectNode(event, nodeId);
+    }
+  };
+  const preventSelection = (event) => {
+    if (event.shiftKey || event.ctrlKey || event.metaKey || disabled) {
+      event.preventDefault();
+    }
+  };
+  return {
+    instance,
+    disabled,
+    expanded,
+    selected,
+    focused,
+    handleExpansion,
+    handleSelection,
+    preventSelection
+  };
+}
+export {
+  useHvTreeItem
+};
+//# sourceMappingURL=useHvTreeItem.js.map