@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/ToggleButton/ToggleButton.js

@@ -1,37 +1,28 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
 import { HvButton } from "../Button/Button.js";
-const HvToggleButton = forwardRef(function HvToggleButton2(props, ref) {
-  const {
-    defaultSelected,
-    selected,
-    notSelectedIcon,
-    selectedIcon = null,
-    onClick,
-    children,
-    ...others
-  } = useDefaultProps("HvToggleButton", props);
-  const [isSelected, setIsSelected] = useControlled(
-    selected,
-    Boolean(defaultSelected)
-  );
-  return /* @__PURE__ */ jsx(
-    HvButton,
-    {
-      ref,
-      icon: true,
-      selected: isSelected,
-      onClick: (event) => {
-        setIsSelected(!isSelected);
-        onClick?.(event, !isSelected);
-      },
-      ...others,
-      children: children || (!isSelected ? notSelectedIcon : selectedIcon)
-    }
-  );
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ToggleButton/ToggleButton.tsx
+/**
+* Use when two opposing states are represented and the on/off analogy doesn’t fit.
+*
+* Only use well-known icons—otherwise, prefer a single checkbox instead.
+*/
+var HvToggleButton = forwardRef(function HvToggleButton(props, ref) {
+	const { defaultSelected, selected, notSelectedIcon, selectedIcon = null, onClick, children, ...others } = useDefaultProps("HvToggleButton", props);
+	const [isSelected, setIsSelected] = useControlled(selected, Boolean(defaultSelected));
+	return /* @__PURE__ */ jsx(HvButton, {
+		ref,
+		icon: true,
+		selected: isSelected,
+		onClick: (event) => {
+			setIsSelected(!isSelected);
+			onClick?.(event, !isSelected);
+		},
+		...others,
+		children: children || (!isSelected ? notSelectedIcon : selectedIcon)
+	});
 });
-export {
-  HvToggleButton
-};
+//#endregion
+export { HvToggleButton };

package/dist/Tooltip/Tooltip.js

@@ -1,55 +1,45 @@
+import { getElementById } from "../utils/document.js";
+import { useClasses } from "./Tooltip.styles.js";
+import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useEffect } from "react";
 import Fade from "@mui/material/Fade";
 import Tooltip from "@mui/material/Tooltip";
-import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
-import { getElementById } from "../utils/document.js";
-import { useClasses } from "./Tooltip.styles.js";
-import { staticClasses } from "./Tooltip.styles.js";
-const HvTooltip = forwardRef(function HvTooltip2(props, ref) {
-  const {
-    className,
-    classes: classesProp,
-    open,
-    enterDelay = 300,
-    placement = "top",
-    children,
-    title,
-    TransitionComponent = Fade,
-    TransitionProps = { timeout: 400, placement: "top" },
-    containerId,
-    ...others
-  } = useDefaultProps("HvTooltip", props);
-  const { rootId } = useTheme();
-  const { classes } = useClasses(classesProp);
-  const [container, setContainer] = useState(
-    () => getElementById(containerId ?? rootId)
-  );
-  useEffect(() => {
-    setContainer(getElementById(containerId ?? rootId));
-  }, [containerId, rootId]);
-  return /* @__PURE__ */ jsx(
-    Tooltip,
-    {
-      ref,
-      open,
-      enterDelay,
-      placement,
-      TransitionComponent,
-      TransitionProps,
-      className,
-      classes: {
-        tooltip: classes.tooltip,
-        popper: classes.popper
-      },
-      title,
-      PopperProps: { container },
-      ...others,
-      children
-    }
-  );
+//#region src/Tooltip/Tooltip.tsx
+/**
+* Tooltips display informative text on hover, focus, or tap, and automatically label the target element for accessibility.
+*
+* For icon-only buttons, consider using `HvIconButton`, which includes built-in tooltip behavior.
+*
+*/
+var HvTooltip = forwardRef(function HvTooltip(props, ref) {
+	const { className, classes: classesProp, open, enterDelay = 300, placement = "top", children, title, TransitionComponent = Fade, TransitionProps = {
+		timeout: 400,
+		placement: "top"
+	}, containerId, ...others } = useDefaultProps("HvTooltip", props);
+	const { rootId } = useTheme();
+	const { classes } = useClasses(classesProp);
+	const [container, setContainer] = useState(() => getElementById(containerId ?? rootId));
+	useEffect(() => {
+		setContainer(getElementById(containerId ?? rootId));
+	}, [containerId, rootId]);
+	return /* @__PURE__ */ jsx(Tooltip, {
+		ref,
+		open,
+		enterDelay,
+		placement,
+		TransitionComponent,
+		TransitionProps,
+		className,
+		classes: {
+			tooltip: classes.tooltip,
+			popper: classes.popper
+		},
+		title,
+		PopperProps: { container },
+		...others,
+		children
+	});
 });
-export {
-  HvTooltip,
-  staticClasses as tooltipClasses
-};
+//#endregion
+export { HvTooltip };

package/dist/Tooltip/Tooltip.styles.js

@@ -1,28 +1,27 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvTooltip", {
-  root: {},
-  tooltip: {
-    ...theme.typography.body,
-    display: "flex",
-    width: "fit-content",
-    maxWidth: 532,
-    backgroundColor: theme.colors.bgContainer,
-    boxShadow: theme.colors.shadow,
-    padding: theme.space.sm,
-    borderRadius: theme.radii.round,
-    "& p": {
-      display: "-webkit-box",
-      width: "fit-content",
-      boxOrient: "vertical",
-      textOverflow: "ellipsis",
-      wordBreak: "break-word",
-      overflow: "hidden"
-    }
-  },
-  popper: {}
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/Tooltip/Tooltip.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvTooltip", {
+	root: {},
+	tooltip: {
+		...theme.typography.body,
+		display: "flex",
+		width: "fit-content",
+		maxWidth: 532,
+		backgroundColor: theme.colors.bgContainer,
+		boxShadow: theme.colors.shadow,
+		padding: theme.space.sm,
+		borderRadius: theme.radii.round,
+		"& p": {
+			display: "-webkit-box",
+			width: "fit-content",
+			boxOrient: "vertical",
+			textOverflow: "ellipsis",
+			wordBreak: "break-word",
+			overflow: "hidden"
+		}
+	},
+	popper: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/TreeView/TreeItem/DefaultContent.js

@@ -1,74 +1,53 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useCss, createClasses } from "@hitachivantara/uikit-react-utils";
 import { useHvTreeItem } from "./useHvTreeItem.js";
-const { useClasses } = createClasses("HvTreeContent", {
-  root: {},
-  expanded: {},
-  selected: {},
-  focused: {},
-  disabled: {},
-  iconContainer: {},
-  label: {}
+import { createClasses, useCss } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/TreeView/TreeItem/DefaultContent.tsx
+var { useClasses } = createClasses("HvTreeContent", {
+	root: {},
+	expanded: {},
+	selected: {},
+	focused: {},
+	disabled: {},
+	iconContainer: {},
+	label: {}
+});
+/**
+* Internal default TreeItem `component`.
+* Use this as a basis to create a custom component.
+*/
+var DefaultContent = forwardRef(function DefaultContent(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 /* @__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
+		})]
+	});
 });
-const DefaultContent = forwardRef(
-  function DefaultContent2(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
-};
+//#endregion
+export { DefaultContent };

package/dist/TreeView/TreeItem/TreeItem.js

@@ -1,144 +1,106 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useState, useRef, useMemo, useEffect } from "react";
-import Collapse from "@mui/material/Collapse";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useForkRef } from "../../hooks/useForkRef.js";
-import { useDescendant, DescendantProvider } from "../internals/DescendantProvider.js";
+import { DescendantProvider, useDescendant } from "../internals/DescendantProvider.js";
 import { useTreeViewContext } from "../internals/TreeViewProvider.js";
 import { DefaultContent } from "./DefaultContent.js";
 import { useClasses } from "./TreeItem.styles.js";
-import { staticClasses } from "./TreeItem.styles.js";
-const HvTreeItem = forwardRef(
-  function HvTreeItem2(props, ref) {
-    const {
-      id: idProp,
-      nodeId,
-      children,
-      classes: classesProp,
-      className,
-      label,
-      disabled: disabledProp,
-      icon,
-      endIcon,
-      expandIcon,
-      collapseIcon,
-      ContentComponent: Component = DefaultContent,
-      TransitionProps: transitionProps,
-      ContentProps: contentProps,
-      disableTreeFocus = false,
-      ...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, level } = 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 ?? "").slice(0, 1).toLowerCase()
-        );
-      }
-      return void 0;
-    }, [instance, nodeId, label]);
-    const handleFocus = (event) => {
-      if (event.target === event.currentTarget && !disableTreeFocus) {
-        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, level: level + 1, children: /* @__PURE__ */ jsx(
-            Collapse,
-            {
-              component: "ul",
-              role: "group",
-              unmountOnExit: true,
-              className: classes.group,
-              in: expanded,
-              ...transitionProps,
-              children
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-export {
-  HvTreeItem,
-  staticClasses as treeItemClasses
-};
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Collapse from "@mui/material/Collapse";
+//#region src/TreeView/TreeItem/TreeItem.tsx
+var HvTreeItem = forwardRef(function HvTreeItem(props, ref) {
+	const { id: idProp, nodeId, children, classes: classesProp, className, label, disabled: disabledProp, icon, endIcon, expandIcon, collapseIcon, ContentComponent: Component = DefaultContent, TransitionProps: transitionProps, ContentProps: contentProps, disableTreeFocus = false, ...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 { index, parentId, level } = useDescendant(useMemo(() => ({
+		element: treeItemElement,
+		id: nodeId
+	}), [nodeId, treeItemElement]));
+	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);
+		}
+	}, [
+		instance,
+		parentId,
+		index,
+		nodeId,
+		expandable,
+		disabledProp,
+		id
+	]);
+	useEffect(() => {
+		if (instance && label) return instance.mapFirstChar(nodeId, (contentRef.current?.textContent ?? "").slice(0, 1).toLowerCase());
+	}, [
+		instance,
+		nodeId,
+		label
+	]);
+	const handleFocus = (event) => {
+		if (event.target === event.currentTarget && !disableTreeFocus) (typeof event.target.getRootNode === "function" ? event.target.getRootNode() : event.target.ownerDocument || document).getElementById(treeId).focus({ preventScroll: true });
+		if (instance && !focused && !disabled && !(!disabledItemsFocusable && disabled) && event.currentTarget === event.target) 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,
+			level: level + 1,
+			children: /* @__PURE__ */ jsx(Collapse, {
+				component: "ul",
+				role: "group",
+				unmountOnExit: true,
+				className: classes.group,
+				in: expanded,
+				...transitionProps,
+				children
+			})
+		})]
+	});
+});
+//#endregion
+export { HvTreeItem };