@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/MultiButton/MultiButton.styles.js

@@ -1,139 +1,119 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { staticClasses as staticClasses$1 } from "../DropDownMenu/DropDownMenu.styles.js";
-import "../DropDownMenu/DropDownMenu.js";
-const { staticClasses, useClasses } = createClasses("HvMultiButton", {
-  root: {
-    display: "flex",
-    alignItems: "center",
-    position: "relative"
-  },
-  multiple: {
-    backgroundColor: theme.colors.bgPage,
-    borderWidth: 0,
-    borderColor: `${theme.colors.border} transparent`,
-    borderRadius: theme.radii.base,
-    "& $button": {
-      minWidth: 32,
-      maxWidth: 200,
-      padding: 0,
-      flex: "1 1 0%",
-      borderColor: "inherit",
-      borderRadius: 0,
-      fontWeight: theme.typography.body.fontWeight,
-      "&:disabled": {
-        color: theme.colors.textDisabled,
-        borderColor: "inherit"
-      },
-      "&:hover": {
-        borderColor: "inherit"
-      },
-      "&$firstButton": {
-        borderLeftColor: theme.colors.border,
-        borderTopLeftRadius: "inherit",
-        borderBottomLeftRadius: "inherit",
-        "&:disabled": {
-          borderLeftColor: theme.colors.border
-        }
-      },
-      "&$lastButton": {
-        borderRightColor: theme.colors.border,
-        borderTopRightRadius: "inherit",
-        borderBottomRightRadius: "inherit",
-        "&:disabled": {
-          borderRightColor: theme.colors.border
-        }
-      },
-      "&:not($firstButton)": {
-        marginLeft: "-1px"
-      },
-      "&$selected": {
-        backgroundColor: theme.colors.bgContainer,
-        fontWeight: theme.typography.label.fontWeight,
-        borderColor: "currentcolor",
-        zIndex: 2,
-        "&:hover:not(:disabled),&:focus-visible": {
-          backgroundColor: theme.colors.bgHover
-        },
-        "&:disabled": {
-          zIndex: 1,
-          borderColor: theme.colors.border
-        }
-      }
-    }
-  },
-  splitGroup: {
-    width: "fit-content",
-    "& $button:not($firstButton)": {
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0,
-      "&:not([aria-controls])": {
-        borderLeftWidth: 0
-      }
-    },
-    "& $button:not($lastButton)": {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0,
-      "&:not([aria-controls])": {
-        borderRightWidth: 0
-      },
-      "&::after": {
-        content: "''",
-        position: "absolute",
-        inset: "4px -1px 4px auto",
-        width: 1,
-        zIndex: 1,
-        height: "auto",
-        backgroundColor: "currentcolor"
-      }
-    }
-  },
-  splitGroupDisabled: {},
-  button: {
-    position: "relative",
-    // prevent the focus ring to be hidden by sibling hover background
-    [`&:focus-visible, &.${staticClasses$1.open}`]: {
-      zIndex: 5
-    }
-  },
-  selected: {},
-  vertical: {
-    flexDirection: "column",
-    alignItems: "stretch",
-    height: "auto",
-    borderColor: `transparent ${theme.colors.border}`,
-    "& $button": {
-      minWidth: 32,
-      flex: "1 1 32px",
-      "&$firstButton": {
-        borderTopColor: theme.colors.border,
-        borderTopLeftRadius: "inherit",
-        borderTopRightRadius: "inherit",
-        borderBottomLeftRadius: 0,
-        borderBottomRightRadius: 0
-      },
-      "&$lastButton": {
-        borderBottomColor: theme.colors.border,
-        borderBottomLeftRadius: "inherit",
-        borderBottomRightRadius: "inherit",
-        borderTopLeftRadius: 0,
-        borderTopRightRadius: 0
-      },
-      "&:not($firstButton)": {
-        marginLeft: 0,
-        marginTop: -1
-      },
-      "&$selected": {
-        height: 32,
-        borderColor: "currentcolor"
-      }
-    }
-  },
-  // TODO - review the need for these classes in v6 (use :first-child and :last-child instead)
-  firstButton: {},
-  lastButton: {}
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/MultiButton/MultiButton.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvMultiButton", {
+	root: {
+		display: "flex",
+		alignItems: "center",
+		position: "relative"
+	},
+	multiple: {
+		backgroundColor: theme.colors.bgPage,
+		borderWidth: 0,
+		borderColor: `${theme.colors.border} transparent`,
+		borderRadius: theme.radii.base,
+		"& $button": {
+			minWidth: 32,
+			maxWidth: 200,
+			padding: 0,
+			flex: "1 1 0%",
+			borderColor: "inherit",
+			borderRadius: 0,
+			fontWeight: theme.typography.body.fontWeight,
+			"&:disabled": {
+				color: theme.colors.textDisabled,
+				borderColor: "inherit"
+			},
+			"&:hover": { borderColor: "inherit" },
+			"&$firstButton": {
+				borderLeftColor: theme.colors.border,
+				borderTopLeftRadius: "inherit",
+				borderBottomLeftRadius: "inherit",
+				"&:disabled": { borderLeftColor: theme.colors.border }
+			},
+			"&$lastButton": {
+				borderRightColor: theme.colors.border,
+				borderTopRightRadius: "inherit",
+				borderBottomRightRadius: "inherit",
+				"&:disabled": { borderRightColor: theme.colors.border }
+			},
+			"&:not($firstButton)": { marginLeft: "-1px" },
+			"&$selected": {
+				backgroundColor: theme.colors.bgContainer,
+				fontWeight: theme.typography.label.fontWeight,
+				borderColor: "currentcolor",
+				zIndex: 2,
+				"&:hover:not(:disabled),&:focus-visible": { backgroundColor: theme.colors.bgHover },
+				"&:disabled": {
+					zIndex: 1,
+					borderColor: theme.colors.border
+				}
+			}
+		}
+	},
+	splitGroup: {
+		width: "fit-content",
+		"& $button:not($firstButton)": {
+			borderTopLeftRadius: 0,
+			borderBottomLeftRadius: 0,
+			"&:not([aria-controls])": { borderLeftWidth: 0 }
+		},
+		"& $button:not($lastButton)": {
+			borderTopRightRadius: 0,
+			borderBottomRightRadius: 0,
+			"&:not([aria-controls])": { borderRightWidth: 0 },
+			"&::after": {
+				content: "''",
+				position: "absolute",
+				inset: "4px -1px 4px auto",
+				width: 1,
+				zIndex: 1,
+				height: "auto",
+				backgroundColor: "currentcolor"
+			}
+		}
+	},
+	splitGroupDisabled: {},
+	button: {
+		position: "relative",
+		[`&:focus-visible, &.${staticClasses$1.open}`]: { zIndex: 5 }
+	},
+	selected: {},
+	vertical: {
+		flexDirection: "column",
+		alignItems: "stretch",
+		height: "auto",
+		borderColor: `transparent ${theme.colors.border}`,
+		"& $button": {
+			minWidth: 32,
+			flex: "1 1 32px",
+			"&$firstButton": {
+				borderTopColor: theme.colors.border,
+				borderTopLeftRadius: "inherit",
+				borderTopRightRadius: "inherit",
+				borderBottomLeftRadius: 0,
+				borderBottomRightRadius: 0
+			},
+			"&$lastButton": {
+				borderBottomColor: theme.colors.border,
+				borderBottomLeftRadius: "inherit",
+				borderBottomRightRadius: "inherit",
+				borderTopLeftRadius: 0,
+				borderTopRightRadius: 0
+			},
+			"&:not($firstButton)": {
+				marginLeft: 0,
+				marginTop: -1
+			},
+			"&$selected": {
+				height: 32,
+				borderColor: "currentcolor"
+			}
+		}
+	},
+	firstButton: {},
+	lastButton: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/NumberInput/NumberInput.js

@@ -1,54 +1,55 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useMemo } from "react";
-import { useForkRef } from "@mui/material/utils";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { HvAdornment } from "../FormElement/Adornment/Adornment.js";
 import { HvIcon } from "../icons.js";
 import { changeInputValue } from "../Input/utils.js";
-import { useClasses } from "./NumberInput.styles.js";
 import { HvInput } from "../Input/Input.js";
-import { HvAdornment } from "../FormElement/Adornment/Adornment.js";
-const HvNumberInput = forwardRef(function HvNumberInput2(props, ref) {
-  const {
-    classes: classesProp,
-    className,
-    readOnly,
-    ...others
-  } = useDefaultProps("HvNumberInput", props);
-  const { classes, cx } = useClasses(classesProp);
-  const inputRef = useRef(null);
-  const forkedRef = useForkRef(ref, inputRef);
-  const buttons = useMemo(() => {
-    const handleIncrease = () => {
-      if (inputRef.current) {
-        inputRef.current.stepUp();
-        changeInputValue(inputRef.current, inputRef.current.value);
-      }
-    };
-    const handleDecrease = () => {
-      if (inputRef.current) {
-        inputRef.current.stepDown();
-        changeInputValue(inputRef.current, inputRef.current.value);
-      }
-    };
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(HvAdornment, { icon: /* @__PURE__ */ jsx(HvIcon, { name: "Remove" }), onClick: handleDecrease }),
-      /* @__PURE__ */ jsx(HvAdornment, { icon: /* @__PURE__ */ jsx(HvIcon, { name: "Add" }), onClick: handleIncrease })
-    ] });
-  }, []);
-  return /* @__PURE__ */ jsx(
-    HvInput,
-    {
-      ref: forkedRef,
-      type: "number",
-      className: cx(classes.root, className),
-      endAdornment: !readOnly && buttons,
-      classes,
-      readOnly,
-      disableClear: true,
-      ...others
-    }
-  );
+import { useClasses } from "./NumberInput.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef, useMemo, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useForkRef } from "@mui/material/utils";
+//#region src/NumberInput/NumberInput.tsx
+/**
+* A Number Input lets users enter numeric values and provides buttons to increment or decrement the value.
+* It extends the HvInput component—refer to its documentation for additional available props.
+*
+* @extends HvInput
+*/
+var HvNumberInput = forwardRef(function HvNumberInput(props, ref) {
+	const { classes: classesProp, className, readOnly, ...others } = useDefaultProps("HvNumberInput", props);
+	const { classes, cx } = useClasses(classesProp);
+	const inputRef = useRef(null);
+	const forkedRef = useForkRef(ref, inputRef);
+	const buttons = useMemo(() => {
+		const handleIncrease = () => {
+			if (inputRef.current) {
+				inputRef.current.stepUp();
+				changeInputValue(inputRef.current, inputRef.current.value);
+			}
+		};
+		const handleDecrease = () => {
+			if (inputRef.current) {
+				inputRef.current.stepDown();
+				changeInputValue(inputRef.current, inputRef.current.value);
+			}
+		};
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(HvAdornment, {
+			icon: /* @__PURE__ */ jsx(HvIcon, { name: "Remove" }),
+			onClick: handleDecrease
+		}), /* @__PURE__ */ jsx(HvAdornment, {
+			icon: /* @__PURE__ */ jsx(HvIcon, { name: "Add" }),
+			onClick: handleIncrease
+		})] });
+	}, []);
+	return /* @__PURE__ */ jsx(HvInput, {
+		ref: forkedRef,
+		type: "number",
+		className: cx(classes.root, className),
+		endAdornment: !readOnly && buttons,
+		classes,
+		readOnly,
+		disableClear: true,
+		...others
+	});
 });
-export {
-  HvNumberInput
-};
+//#endregion
+export { HvNumberInput };

package/dist/NumberInput/NumberInput.styles.js

@@ -1,11 +1,6 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { staticClasses as staticClasses$1 } from "../Input/Input.styles.js";
-import "../Input/Input.js";
-const { staticClasses, useClasses } = createClasses(
-  "HvNumberInput",
-  staticClasses$1
-);
-export {
-  staticClasses,
-  useClasses
-};
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/NumberInput/NumberInput.styles.ts
+var { staticClasses, useClasses } = createClasses("HvNumberInput", staticClasses$1);
+//#endregion
+export { useClasses };

package/dist/OverflowTooltip/OverflowTooltip.js

@@ -1,78 +1,58 @@
+import { HvTooltip } from "../Tooltip/Tooltip.js";
+import { useClasses } from "./OverflowTooltip.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useMemo, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { useState, useMemo } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./OverflowTooltip.styles.js";
-import { staticClasses } from "./OverflowTooltip.styles.js";
-import { HvTooltip } from "../Tooltip/Tooltip.js";
-const isParagraph = (children = "") => /\s/.test(children);
-const HvOverflowTooltip = (props) => {
-  const {
-    classes: classesProp,
-    className,
-    data,
-    paragraphOverflow,
-    tooltipsProps,
-    ...others
-  } = useDefaultProps("HvOverflowTooltip", props);
-  const { classes, cx } = useClasses(classesProp);
-  const [isOverflowing, setIsOverflowing] = useState(false);
-  const isParag = useMemo(
-    () => paragraphOverflow && isParagraph(data?.toString()),
-    [data, paragraphOverflow]
-  );
-  const { ref } = useResizeDetector({
-    refreshMode: "throttle",
-    disableRerender: true,
-    refreshRate: 100,
-    refreshOptions: { trailing: true, leading: true },
-    onResize({ width, height, entry }) {
-      const { scrollHeight = 0, scrollWidth = 0 } = entry?.target || {};
-      setIsOverflowing(
-        isParag ? scrollHeight - (height || 0) >= 1 : scrollWidth - (width || 0) >= 1
-      );
-    }
-  });
-  const content = useMemo(
-    () => /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cx(
-          {
-            [classes.tooltipAnchor]: !isParag,
-            [classes.tooltipAnchorParagraph]: isParag
-          },
-          className
-        ),
-        children: data
-      }
-    ),
-    [
-      className,
-      classes.tooltipAnchor,
-      classes.tooltipAnchorParagraph,
-      cx,
-      data,
-      isParag,
-      ref
-    ]
-  );
-  return /* @__PURE__ */ jsx(
-    HvTooltip,
-    {
-      disableHoverListener: !isOverflowing,
-      classes: { tooltip: classes.tooltipData },
-      title: data,
-      "aria-label": null,
-      "aria-labelledby": null,
-      ...tooltipsProps,
-      ...others,
-      children: content
-    }
-  );
-};
-export {
-  HvOverflowTooltip,
-  staticClasses as overflowTooltipClasses
+//#region src/OverflowTooltip/OverflowTooltip.tsx
+var isParagraph = (children = "") => /\s/.test(children);
+/**
+* Displays a tooltip automatically when the text content overflows its container.
+*/
+var HvOverflowTooltip = (props) => {
+	const { classes: classesProp, className, data, paragraphOverflow, tooltipsProps, ...others } = useDefaultProps("HvOverflowTooltip", props);
+	const { classes, cx } = useClasses(classesProp);
+	const [isOverflowing, setIsOverflowing] = useState(false);
+	const isParag = useMemo(() => paragraphOverflow && isParagraph(data?.toString()), [data, paragraphOverflow]);
+	const { ref } = useResizeDetector({
+		refreshMode: "throttle",
+		disableRerender: true,
+		refreshRate: 100,
+		refreshOptions: {
+			trailing: true,
+			leading: true
+		},
+		onResize({ width, height, entry }) {
+			const { scrollHeight = 0, scrollWidth = 0 } = entry?.target || {};
+			setIsOverflowing(isParag ? scrollHeight - (height || 0) >= 1 : scrollWidth - (width || 0) >= 1);
+		}
+	});
+	const content = useMemo(() => /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cx({
+			[classes.tooltipAnchor]: !isParag,
+			[classes.tooltipAnchorParagraph]: isParag
+		}, className),
+		children: data
+	}), [
+		className,
+		classes.tooltipAnchor,
+		classes.tooltipAnchorParagraph,
+		cx,
+		data,
+		isParag,
+		ref
+	]);
+	return /* @__PURE__ */ jsx(HvTooltip, {
+		disableHoverListener: !isOverflowing,
+		classes: { tooltip: classes.tooltipData },
+		title: data,
+		"aria-label": null,
+		"aria-labelledby": null,
+		...tooltipsProps,
+		...others,
+		children: content
+	});
 };
+//#endregion
+export { HvOverflowTooltip };

package/dist/OverflowTooltip/OverflowTooltip.styles.js

@@ -1,24 +1,20 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses(
-  "HvOverflowTooltip",
-  {
-    tooltipData: {},
-    tooltipAnchor: {
-      whiteSpace: "nowrap",
-      overflow: "hidden",
-      textOverflow: "ellipsis",
-      maxWidth: "100%",
-      width: "fit-content"
-    },
-    tooltipAnchorParagraph: {
-      overflow: "hidden",
-      display: "-webkit-box",
-      WebkitLineClamp: 3,
-      WebkitBoxOrient: "vertical"
-    }
-  }
-);
-export {
-  staticClasses,
-  useClasses
-};
+//#region src/OverflowTooltip/OverflowTooltip.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvOverflowTooltip", {
+	tooltipData: {},
+	tooltipAnchor: {
+		whiteSpace: "nowrap",
+		overflow: "hidden",
+		textOverflow: "ellipsis",
+		maxWidth: "100%",
+		width: "fit-content"
+	},
+	tooltipAnchorParagraph: {
+		overflow: "hidden",
+		display: "-webkit-box",
+		WebkitLineClamp: 3,
+		WebkitBoxOrient: "vertical"
+	}
+});
+//#endregion
+export { staticClasses, useClasses };