@hitachivantara/uikit-react-core 5.44.1 → 5.44.3

package/dist/esm/TimePicker/Unit/Unit.styles.js

@@ -0,0 +1,58 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvTimePickerUnit", {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    textAlign: "center",
+    ...theme.typography.title3
+  },
+  separator: {
+    width: 8
+  },
+  periodToggle: {
+    height: 40,
+    width: 40
+  },
+  element: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: 40,
+    width: 40
+  },
+  input: {
+    ...theme.typography.title3,
+    fontWeight: 600,
+    textAlign: "center",
+    height: 40,
+    width: 40,
+    padding: 0,
+    margin: 0,
+    "&::placeholder": {
+      fontSize: 16,
+      fontWeight: 600
+    }
+  },
+  inputRoot: {
+    width: 40,
+    height: 40
+  },
+  subtractIcon: {
+    marginTop: theme.space.xs
+  },
+  inputContainer: {
+    minWidth: 40,
+    maxWidth: 40
+  },
+  inputBorderContainer: {
+    top: 40
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Unit.styles.js.map

package/dist/esm/TimePicker/Unit/Unit.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Unit.styles.js","sources":["../../../../src/TimePicker/Unit/Unit.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTimePickerUnit\", {\n  root: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    textAlign: \"center\",\n    ...theme.typography.title3,\n  },\n\n  separator: {\n    width: 8,\n  },\n\n  periodToggle: {\n    height: 40,\n    width: 40,\n  },\n\n  element: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: 40,\n    width: 40,\n  },\n\n  input: {\n    ...theme.typography.title3,\n    fontWeight: 600,\n    textAlign: \"center\",\n    height: 40,\n    width: 40,\n    padding: 0,\n    margin: 0,\n    \"&::placeholder\": {\n      fontSize: 16,\n      fontWeight: 600,\n    },\n  },\n  inputRoot: {\n    width: 40,\n    height: 40,\n  },\n\n  subtractIcon: {\n    marginTop: theme.space.xs,\n  },\n  inputContainer: {\n    minWidth: 40,\n    maxWidth: 40,\n  },\n  inputBorderContainer: {\n    top: 40,\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,GAAG,MAAM,WAAW;AAAA,EACtB;AAAA,EAEA,WAAW;AAAA,IACT,OAAO;AAAA,EACT;AAAA,EAEA,cAAc;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EAEA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,OAAO;AAAA,EACT;AAAA,EAEA,OAAO;AAAA,IACL,GAAG,MAAM,WAAW;AAAA,IACpB,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,kBAAkB;AAAA,MAChB,UAAU;AAAA,MACV,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,OAAO;AAAA,IACP,QAAQ;AAAA,EACV;AAAA,EAEA,cAAc;AAAA,IACZ,WAAW,MAAM,MAAM;AAAA,EACzB;AAAA,EACA,gBAAgB;AAAA,IACd,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,sBAAsB;AAAA,IACpB,KAAK;AAAA,EACP;AACF,CAAC;"}

package/dist/esm/ToggleButton/ToggleButton.js

@@ -0,0 +1,39 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { useControlled } from "../hooks/useControlled.js";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { HvButton } from "../Button/Button.js";
+const HvToggleButton = forwardRef((props, ref) => {
+  const {
+    defaultSelected,
+    selected,
+    notSelectedIcon,
+    selectedIcon = null,
+    onClick,
+    children,
+    ...others
+  } = useDefaultProps("HvToggleButton", props);
+  const [isSelected, setIsSelected] = useControlled(
+    selected,
+    Boolean(defaultSelected)
+  );
+  const onClickHandler = (event) => {
+    setIsSelected(!isSelected);
+    onClick?.(event, !isSelected);
+  };
+  return /* @__PURE__ */ jsx(
+    HvButton,
+    {
+      ref,
+      icon: true,
+      "aria-pressed": isSelected,
+      onClick: onClickHandler,
+      ...others,
+      children: children || (!isSelected ? notSelectedIcon : selectedIcon)
+    }
+  );
+});
+export {
+  HvToggleButton
+};
+//# sourceMappingURL=ToggleButton.js.map

package/dist/esm/ToggleButton/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","sources":["../../../src/ToggleButton/ToggleButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvButton } from \"../Button\";\n\nexport interface HvToggleButtonProps\n  extends HvBaseProps<HTMLButtonElement, \"onClick\"> {\n  /** When uncontrolled, defines the initial selected state. */\n  defaultSelected?: boolean;\n  /** Defines if the button is selected. When defined the button state becomes controlled. */\n  selected?: boolean;\n  /** Defines if the button is disabled. */\n  disabled?: boolean;\n  /** Icon for when not selected. Ignored if the component has children. */\n  notSelectedIcon?: React.ReactNode;\n  /** Icon for when selected. Ignored if the component has children. */\n  selectedIcon?: React.ReactNode;\n  /** Function called when icon is clicked. */\n  onClick?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    selected: boolean\n  ) => void;\n}\n\nexport const HvToggleButton = forwardRef<\n  HTMLButtonElement,\n  HvToggleButtonProps\n>((props, ref) => {\n  const {\n    defaultSelected,\n    selected,\n    notSelectedIcon,\n    selectedIcon = null,\n    onClick,\n    children,\n    ...others\n  } = useDefaultProps(\"HvToggleButton\", props);\n\n  const [isSelected, setIsSelected] = useControlled(\n    selected,\n    Boolean(defaultSelected)\n  );\n\n  const onClickHandler = (event: React.MouseEvent<HTMLButtonElement>) => {\n    setIsSelected(!isSelected);\n    onClick?.(event, !isSelected);\n  };\n\n  return (\n    <HvButton\n      ref={ref}\n      icon\n      aria-pressed={isSelected}\n      onClick={onClickHandler}\n      {...others}\n    >\n      {children || (!isSelected ? notSelectedIcon : selectedIcon)}\n    </HvButton>\n  );\n});\n"],"names":[],"mappings":";;;;;AA0BO,MAAM,iBAAiB,WAG5B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAErC,QAAA,CAAC,YAAY,aAAa,IAAI;AAAA,IAClC;AAAA,IACA,QAAQ,eAAe;AAAA,EAAA;AAGnB,QAAA,iBAAiB,CAAC,UAA+C;AACrE,kBAAc,CAAC,UAAU;AACf,cAAA,OAAO,CAAC,UAAU;AAAA,EAAA;AAI5B,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAI;AAAA,MACJ,gBAAc;AAAA,MACd,SAAS;AAAA,MACR,GAAG;AAAA,MAEH,UAAA,aAAa,CAAC,aAAa,kBAAkB;AAAA,IAAA;AAAA,EAAA;AAGpD,CAAC;"}

package/dist/esm/Tooltip/Tooltip.js

@@ -0,0 +1,54 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import Tooltip from "@mui/material/Tooltip";
+import Fade from "@mui/material/Fade";
+import { useTheme } from "../hooks/useTheme.js";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { getElementById } from "../utils/document.js";
+import { useClasses } from "./Tooltip.styles.js";
+import { staticClasses } from "./Tooltip.styles.js";
+const HvTooltip = forwardRef((props, ref) => {
+  const {
+    className,
+    classes: classesProp,
+    open,
+    enterDelay = 300,
+    placement = "top",
+    useSingle = true,
+    children,
+    title,
+    TransitionComponent = Fade,
+    TransitionProps = { timeout: 400, placement: "top" },
+    containerId,
+    ...others
+  } = useDefaultProps("HvTooltip", props);
+  const { rootId } = useTheme();
+  const { classes } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      ref,
+      open: open ?? void 0,
+      enterDelay,
+      placement,
+      TransitionComponent,
+      TransitionProps,
+      className,
+      classes: {
+        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,
+        popper: classes.popper
+      },
+      title,
+      PopperProps: {
+        container: getElementById(containerId || rootId)
+      },
+      ...others,
+      children
+    }
+  );
+});
+export {
+  HvTooltip,
+  staticClasses as tooltipClasses
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/esm/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import { forwardRef, ReactElement } from \"react\";\nimport Tooltip, {\n  TooltipProps as MuiTooltipProps,\n} from \"@mui/material/Tooltip\";\nimport Fade from \"@mui/material/Fade\";\n\nimport { useTheme } from \"../hooks/useTheme\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { getElementById } from \"../utils/document\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Tooltip.styles\";\n\nexport { staticClasses as tooltipClasses };\n\nexport type HvTooltipClasses = ExtractNames<typeof useClasses>;\nexport type HvTooltipPlacementType = MuiTooltipProps[\"placement\"];\n\nexport interface HvTooltipProps extends Omit<MuiTooltipProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvTooltipClasses;\n  /**\n   * If true, the tooltip is shown.\n   */\n  open?: boolean;\n  /**\n   * Tooltip placement.\n   */\n  placement?: HvTooltipPlacementType;\n  /**\n   * The number of milliseconds to wait before showing the tooltip.\n   * This property won't impact the enter touch delay (enterTouchDelay).\n   */\n  enterDelay?: number;\n  /** @inheritdoc */\n  title: MuiTooltipProps[\"title\"];\n  /** @inheritdoc */\n  TransitionComponent?: MuiTooltipProps[\"TransitionComponent\"];\n  /** @inheritdoc */\n  TransitionProps?: MuiTooltipProps[\"TransitionProps\"];\n  /**\n   * Defines if should use a single or multiline tooltip.\n   */\n  useSingle?: boolean;\n  /**\n   * Node to apply the tooltip.\n   */\n  children: ReactElement;\n  /**\n   * Id attribute value of an HTML Element to have the tooltip appended to it.\n   */\n  containerId?: string;\n}\n\n/**\n * Tooltips display informative text when users hover over, focus on, or tap an element.\n * Accessibility-wise, the tooltip automatically labels the `children` content.\n */\nexport const HvTooltip = forwardRef((props: HvTooltipProps, ref) => {\n  const {\n    className,\n    classes: classesProp,\n    open,\n    enterDelay = 300,\n    placement = \"top\",\n    useSingle = true,\n    children,\n    title,\n    TransitionComponent = Fade,\n    TransitionProps = { timeout: 400, placement: \"top\" },\n    containerId,\n    ...others\n  } = useDefaultProps(\"HvTooltip\", props);\n\n  const { rootId } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  return (\n    <Tooltip\n      ref={ref}\n      open={open ?? undefined}\n      enterDelay={enterDelay}\n      placement={placement}\n      TransitionComponent={TransitionComponent}\n      TransitionProps={TransitionProps}\n      className={className}\n      classes={{\n        tooltip: useSingle ? classes.tooltip : classes.tooltipMulti,\n        popper: classes.popper,\n      }}\n      title={title}\n      PopperProps={{\n        container: getElementById(containerId || rootId),\n      }}\n      {...others}\n    >\n      {children}\n    </Tooltip>\n  );\n});\n"],"names":[],"mappings":";;;;;;;;;AAgEO,MAAM,YAAY,WAAW,CAAC,OAAuB,QAAQ;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,kBAAkB,EAAE,SAAS,KAAK,WAAW,MAAM;AAAA,IACnD;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,aAAa,KAAK;AAEhC,QAAA,EAAE,WAAW;AACnB,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAGxC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAM,QAAQ;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,SAAS,YAAY,QAAQ,UAAU,QAAQ;AAAA,QAC/C,QAAQ,QAAQ;AAAA,MAClB;AAAA,MACA;AAAA,MACA,aAAa;AAAA,QACX,WAAW,eAAe,eAAe,MAAM;AAAA,MACjD;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;"}

package/dist/esm/Tooltip/Tooltip.styles.js

@@ -0,0 +1,76 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { tooltipClasses } from "@mui/material/Tooltip";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvTooltip", {
+  root: {},
+  tooltip: {},
+  tooltipMulti: {},
+  popper: {
+    [`& .${tooltipClasses.popper}`]: {
+      opacity: 1
+    },
+    [`& .${tooltipClasses.tooltip}`]: {
+      fontFamily: theme.fontFamily.body,
+      ...theme.typography.body,
+      display: "flex",
+      width: "fit-content",
+      maxWidth: 532,
+      backgroundColor: theme.colors.atmo1,
+      boxShadow: theme.colors.shadow,
+      padding: 0,
+      "& p": {
+        display: "-webkit-box",
+        width: "fit-content",
+        boxOrient: "vertical",
+        textOverflow: "ellipsis",
+        overflow: "hidden"
+      }
+    },
+    "& $title": {
+      padding: "15px 20px",
+      borderBottom: `3px solid ${theme.colors.atmo2}`
+    },
+    "& $valuesContainer": {
+      padding: theme.space.sm
+    },
+    "& $values": {
+      display: "flex",
+      justifyContent: "space-between",
+      paddingBottom: "10px",
+      "&:last-child": {
+        paddingBottom: 0
+      }
+    },
+    "& $color": {
+      width: theme.space.xs
+    },
+    "& $separator": {
+      width: theme.space.xs
+    },
+    "& $separatorColor": {
+      width: "5px"
+    },
+    "& $valueWrapper": {
+      padding: theme.space.sm
+    },
+    "& $tooltip": {
+      padding: "15px 20px",
+      borderRadius: theme.radii.round,
+      "& p": {
+        wordBreak: "break-word"
+      }
+    }
+  },
+  title: {},
+  valuesContainer: {},
+  values: {},
+  color: {},
+  separatorColor: {},
+  separator: {},
+  valueWrapper: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Tooltip.styles.js.map

package/dist/esm/Tooltip/Tooltip.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.styles.js","sources":["../../../src/Tooltip/Tooltip.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { tooltipClasses as MuitooltipClasses } from \"@mui/material/Tooltip\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvTooltip\", {\n  root: {},\n  tooltip: {},\n  tooltipMulti: {},\n  popper: {\n    [`& .${MuitooltipClasses.popper}`]: {\n      opacity: 1,\n    },\n    [`& .${MuitooltipClasses.tooltip}`]: {\n      fontFamily: theme.fontFamily.body,\n      ...theme.typography.body,\n      display: \"flex\",\n      width: \"fit-content\",\n      maxWidth: 532,\n      backgroundColor: theme.colors.atmo1,\n      boxShadow: theme.colors.shadow,\n      padding: 0,\n\n      \"& p\": {\n        display: \"-webkit-box\",\n        width: \"fit-content\",\n        boxOrient: \"vertical\",\n        textOverflow: \"ellipsis\",\n        overflow: \"hidden\",\n      },\n    },\n    \"& $title\": {\n      padding: \"15px 20px\",\n      borderBottom: `3px solid ${theme.colors.atmo2}`,\n    },\n    \"& $valuesContainer\": {\n      padding: theme.space.sm,\n    },\n    \"& $values\": {\n      display: \"flex\",\n      justifyContent: \"space-between\",\n      paddingBottom: \"10px\",\n      \"&:last-child\": {\n        paddingBottom: 0,\n      },\n    },\n    \"& $color\": {\n      width: theme.space.xs,\n    },\n    \"& $separator\": {\n      width: theme.space.xs,\n    },\n    \"& $separatorColor\": {\n      width: \"5px\",\n    },\n    \"& $valueWrapper\": {\n      padding: theme.space.sm,\n    },\n    \"& $tooltip\": {\n      padding: \"15px 20px\",\n      borderRadius: theme.radii.round,\n      \"& p\": {\n        wordBreak: \"break-word\",\n      },\n    },\n  },\n  title: {},\n  valuesContainer: {},\n  values: {},\n  color: {},\n  separatorColor: {},\n  separator: {},\n  valueWrapper: {},\n});\n"],"names":["MuitooltipClasses"],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,aAAa;AAAA,EACtE,MAAM,CAAC;AAAA,EACP,SAAS,CAAC;AAAA,EACV,cAAc,CAAC;AAAA,EACf,QAAQ;AAAA,IACN,CAAC,MAAMA,eAAkB,MAAM,EAAE,GAAG;AAAA,MAClC,SAAS;AAAA,IACX;AAAA,IACA,CAAC,MAAMA,eAAkB,OAAO,EAAE,GAAG;AAAA,MACnC,YAAY,MAAM,WAAW;AAAA,MAC7B,GAAG,MAAM,WAAW;AAAA,MACpB,SAAS;AAAA,MACT,OAAO;AAAA,MACP,UAAU;AAAA,MACV,iBAAiB,MAAM,OAAO;AAAA,MAC9B,WAAW,MAAM,OAAO;AAAA,MACxB,SAAS;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,OAAO;AAAA,QACP,WAAW;AAAA,QACX,cAAc;AAAA,QACd,UAAU;AAAA,MACZ;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,SAAS;AAAA,MACT,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,IAC/C;AAAA,IACA,sBAAsB;AAAA,MACpB,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,aAAa;AAAA,MACX,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,gBAAgB;AAAA,QACd,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,OAAO,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,gBAAgB;AAAA,MACd,OAAO,MAAM,MAAM;AAAA,IACrB;AAAA,IACA,qBAAqB;AAAA,MACnB,OAAO;AAAA,IACT;AAAA,IACA,mBAAmB;AAAA,MACjB,SAAS,MAAM,MAAM;AAAA,IACvB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,MACT,cAAc,MAAM,MAAM;AAAA,MAC1B,OAAO;AAAA,QACL,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AAAA,EACR,iBAAiB,CAAC;AAAA,EAClB,QAAQ,CAAC;AAAA,EACT,OAAO,CAAC;AAAA,EACR,gBAAgB,CAAC;AAAA,EACjB,WAAW,CAAC;AAAA,EACZ,cAAc,CAAC;AACjB,CAAC;"}

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

@@ -0,0 +1,76 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef } from "react";
+import { useCss } from "../../hooks/useCss.js";
+import { createClasses } from "../../utils/classes.js";
+import { useHvTreeItem } from "./useHvTreeItem.js";
+const { useClasses } = createClasses("HvTreeContent", {
+  root: {},
+  expanded: {},
+  selected: {},
+  focused: {},
+  disabled: {},
+  iconContainer: {},
+  label: {}
+});
+const DefaultContent = forwardRef(
+  (props, ref) => {
+    const {
+      classes: classesProp,
+      className,
+      displayIcon,
+      expansionIcon,
+      icon: iconProp,
+      label,
+      nodeId,
+      onClick,
+      onMouseDown,
+      ...others
+    } = props;
+    const { classes } = useClasses(classesProp);
+    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,
+  useClasses
+};
+//# sourceMappingURL=DefaultContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultContent.js","sources":["../../../../src/TreeView/TreeItem/DefaultContent.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, forwardRef } from \"react\";\n\nimport { useCss } from \"../../hooks/useCss\";\nimport { ExtractNames, createClasses } from \"../../utils/classes\";\n\nimport { useHvTreeItem } from \"./useHvTreeItem\";\n\nexport const { useClasses } = createClasses(\"HvTreeContent\", {\n  root: {},\n  expanded: {},\n  selected: {},\n  focused: {},\n  disabled: {},\n  iconContainer: {},\n  label: {},\n});\n\nexport type HvTreeContentClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: ReactNode;\n}\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: classesProp,\n      className,\n      displayIcon,\n      expansionIcon,\n      icon: iconProp,\n      label,\n      nodeId,\n      onClick,\n      onMouseDown,\n      ...others\n    } = props;\n    const { classes } = useClasses(classesProp);\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":[],"mappings":";;;;;AAOO,MAAM,EAAE,WAAA,IAAe,cAAc,iBAAiB;AAAA,EAC3D,MAAM,CAAC;AAAA,EACP,UAAU,CAAC;AAAA,EACX,UAAU,CAAC;AAAA,EACX,SAAS,CAAC;AAAA,EACV,UAAU,CAAC;AAAA,EACX,eAAe,CAAC;AAAA,EAChB,OAAO,CAAC;AACV,CAAC;AAyBM,MAAM,iBAAiB;AAAA,EAC5B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,UAAA,EAAE,OAAO;AAET,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,IACE,cAAc,MAAM;AAElB,UAAA,OAAO,YAAY,iBAAiB;AAE1C;AAAA;AAAA,MAEE;AAAA,QAAC;AAAA,QAAA;AAAA,UACE,GAAG;AAAA,UACJ,WAAW,GAAG,WAAW,QAAQ,MAAM;AAAA,YACrC,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,QAAQ,GAAG;AAAA,YACpB,CAAC,QAAQ,OAAO,GAAG;AAAA,YACnB,CAAC,QAAQ,QAAQ,GAAG;AAAA,UAAA,CACrB;AAAA,UACD,SAAS,CAAC,UAAU;AAClB,4BAAgB,KAAK;AACrB,4BAAgB,KAAK;AACrB,sBAAU,KAAK;AAAA,UACjB;AAAA,UACA,aAAa,CAAC,UAAU;AACtB,6BAAiB,KAAK;AACtB,0BAAc,KAAK;AAAA,UACrB;AAAA,UACA;AAAA,UAEA,UAAA;AAAA,YAAA,oBAAC,OAAI,EAAA,WAAW,QAAQ,eAAgB,UAAK,MAAA;AAAA,YAC5C,oBAAA,OAAA,EAAI,WAAW,QAAQ,OAAQ,UAAM,OAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACxC;AAAA;AAAA,EAEJ;AACF;"}

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

@@ -0,0 +1,144 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { forwardRef, useState, useRef, useMemo, useEffect } from "react";
+import Collapse from "@mui/material/Collapse";
+import { useForkRef } from "../../hooks/useForkRef.js";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
+import { useTreeViewContext } from "../internals/TreeViewProvider.js";
+import { useDescendant, DescendantProvider } from "../internals/DescendantProvider.js";
+import { useClasses } from "./TreeItem.styles.js";
+import { staticClasses } from "./TreeItem.styles.js";
+import { DefaultContent } from "./DefaultContent.js";
+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/TreeView/TreeItem/TreeItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItem.js","sources":["../../../../src/TreeView/TreeItem/TreeItem.tsx"],"sourcesContent":["import {\n  FocusEvent,\n  HTMLAttributes,\n  JSXElementConstructor,\n  ReactNode,\n  forwardRef,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport Collapse from \"@mui/material/Collapse\";\nimport { TransitionProps } from \"@mui/material/transitions\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useForkRef } from \"../../hooks/useForkRef\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { useTreeViewContext } from \"../internals/TreeViewProvider\";\nimport { DefaultTreeViewPlugins } from \"../internals/hooks/plugins\";\nimport {\n  DescendantProvider,\n  TreeItemDescendant,\n  useDescendant,\n} from \"../internals/DescendantProvider\";\nimport { staticClasses, useClasses } from \"./TreeItem.styles\";\nimport { DefaultContent, HvTreeContentClasses } from \"./DefaultContent\";\n\nexport { staticClasses as treeItemClasses };\n\nexport type HvTreeItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvTreeContentProps extends HTMLAttributes<HTMLElement> {\n  /** className applied to the root element. */\n  className?: string;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeContentClasses;\n  /** The tree node label. */\n  label?: ReactNode;\n  /** The id of the node. */\n  nodeId: string;\n  /** The icon to display next to the tree node's label. */\n  icon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either an expansion or collapse icon. */\n  expansionIcon?: ReactNode;\n  /** The icon to display next to the tree node's label. Either a parent or end icon. */\n  displayIcon?: ReactNode;\n}\n\nexport interface HvTreeItemProps extends HTMLAttributes<HTMLElement> {\n  /** The element id */\n  id?: string;\n  /** The id of the node. */\n  nodeId: string;\n  /** The tree node label. */\n  label?: ReactNode;\n  /** Override or extend the styles applied to the component. */\n  classes?: HvTreeItemClasses;\n  /** If `true`, the node is disabled. */\n  disabled?: boolean;\n  /** The icon to display next to the tree node's label. */\n  icon?: ReactNode;\n  /** The component used for the content node. */\n  ContentComponent?: JSXElementConstructor<HvTreeContentProps>;\n  /** Props applied to the content component */\n  ContentProps?: HvTreeContentProps;\n  /** The content of the component. */\n  children?: ReactNode;\n  /** className applied to the root element. */\n  className?: string;\n  /** The icon used to collapse the node. */\n  collapseIcon?: ReactNode;\n  /** The icon displayed next to an end node. */\n  endIcon?: ReactNode;\n  /** The icon used to expand the node. */\n  expandIcon?: ReactNode;\n  /** The component used for the transition. */\n  TransitionComponent?: JSXElementConstructor<TransitionProps>;\n  /** Props applied to the transition component */\n  TransitionProps?: TransitionProps;\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<DefaultTreeViewPlugins>();\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":[],"mappings":"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"}

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

@@ -0,0 +1,71 @@
+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/TreeView/TreeItem/TreeItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TreeItem.styles.js","sources":["../../../../src/TreeView/TreeItem/TreeItem.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../../utils/classes\";\nimport { outlineStyles } from \"../../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":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,cAAc;AAAA;AAAA,EAEvE,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAAA,EACA,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,YAAY,MAAM,MAAM;AAAA,EAC1B;AAAA,EAEA,SAAS;AAAA,IACP,SAAS,MAAM,QAAQ,GAAG,CAAC;AAAA,IAC3B,WAAW;AAAA;AAAA,IAEX,OAAO;AAAA,IACP,WAAW;AAAA;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR,yBAAyB;AAAA,IACzB,0BAA0B;AAAA,MACxB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA,EACA,UAAU,CAAC;AAAA,EACX,UAAU;AAAA,IACR,iBAAiB,MAAM,OAAO;AAAA,EAChC;AAAA,EACA,SAAS;AAAA,IACP,iBAAiB,MAAM,OAAO;AAAA,IAC9B,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IACpB,YAAY;AAAA,MACV,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,EACF;AAAA,EACA,OAAO;AAAA,IACL,aAAa;AAAA,IACb,OAAO;AAAA,IACP,WAAW;AAAA;AAAA,IAGX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,GAAG,MAAM,WAAW;AAAA,EACtB;AAAA,EACA,eAAe;AAAA,IACb,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAEhB,OAAO;AAAA;AAAA,IACP,aAAa;AAAA,EACf;AACF,CAAC;"}

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

@@ -0,0 +1,56 @@
+import { useTreeViewContext } from "../internals/TreeViewProvider.js";
+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