@hitachivantara/uikit-react-core 6.8.1 → 6.9.0

package/dist/RadioGroup/RadioGroup.js

@@ -1,163 +1,102 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useMemo, Children, cloneElement } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { HvLabelContainer } from "../FormElement/LabelContainer.js";
-import { useControlled } from "../hooks/useControlled.js";
-import { useUniqueId } from "../hooks/useUniqueId.js";
 import { setId } from "../utils/setId.js";
-import { useClasses } from "./RadioGroup.styles.js";
-import { staticClasses } from "./RadioGroup.styles.js";
+import { useUniqueId } from "../hooks/useUniqueId.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
-const getValueFromSelectedChildren = (children) => {
-  const childrenArray = Children.toArray(children);
-  const childrenCount = childrenArray.length;
-  for (let i = 0; i !== childrenCount; i += 1) {
-    const child = childrenArray[i];
-    const childIsControlled = child?.props?.checked !== void 0;
-    const childIsSelected = childIsControlled ? child?.props?.checked : child?.props?.defaultChecked;
-    if (childIsSelected) {
-      return child?.props?.value;
-    }
-  }
-  return null;
-};
-const HvRadioGroup = forwardRef(
-  function HvRadioGroup2(props, ref) {
-    const {
-      id,
-      classes: classesProp,
-      className,
-      children,
-      name,
-      value: valueProp,
-      defaultValue,
-      label,
-      description,
-      status,
-      statusMessage,
-      required,
-      readOnly,
-      disabled,
-      orientation = "vertical",
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      "aria-describedby": ariaDescribedBy,
-      "aria-errormessage": ariaErrorMessage,
-      onChange,
-      ...others
-    } = useDefaultProps("HvRadioGroup", props);
-    const { classes, cx } = useClasses(classesProp);
-    const elementId = useUniqueId(id);
-    const [value, setValue] = useControlled(
-      valueProp,
-      defaultValue !== void 0 ? defaultValue : (
-        // When uncontrolled and no default value is given,
-        // extract the initial selected values from the children own state
-        (() => getValueFromSelectedChildren(children))
-      )
-    );
-    const onChildChangeInterceptor = useCallback(
-      (childOnChange, event, isChecked, newValue) => {
-        childOnChange?.(event, isChecked, newValue);
-        onChange?.(event, newValue);
-        setValue(newValue);
-      },
-      [onChange, setValue]
-    );
-    const modifiedChildren = useMemo(() => {
-      return Children.map(children, (child) => {
-        const childValue = child?.props?.value ?? "on";
-        const childIsSelected = childValue === value;
-        return cloneElement(child, {
-          checked: childIsSelected,
-          name: child?.props?.name || name || elementId,
-          onChange: (event, isChecked, newValue) => onChildChangeInterceptor(
-            child?.props?.onChange,
-            event,
-            isChecked,
-            newValue
-          ),
-          inputProps: {
-            ...child?.props?.inputProps,
-            // Set the required attribute directly in the input
-            // the radio form element context shouldn't be aware so the
-            // label doesn't show redundant asterisk
-            required
-          },
-          disabled: disabled || child?.props?.disabled,
-          readOnly: readOnly || child?.props?.readOnly
-        });
-      });
-    }, [
-      children,
-      disabled,
-      elementId,
-      name,
-      onChildChangeInterceptor,
-      readOnly,
-      required,
-      value
-    ]);
-    const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
-    const errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
-    return /* @__PURE__ */ jsxs(
-      HvFormElement,
-      {
-        id,
-        name,
-        status: status || "standBy",
-        disabled,
-        required,
-        readOnly,
-        className: cx(classes.root, className),
-        children: [
-          /* @__PURE__ */ jsx(
-            HvLabelContainer,
-            {
-              label,
-              description,
-              labelId: setId(elementId, "label"),
-              descriptionId: setId(elementId, "description"),
-              classes: {
-                label: classes.label
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref,
-              role: "radiogroup",
-              "aria-label": ariaLabel,
-              "aria-labelledby": ariaLabelledBy || label && setId(elementId, "label") || void 0,
-              "aria-invalid": status === "invalid" ? true : void 0,
-              "aria-errormessage": status === "invalid" ? errorMessageId : void 0,
-              "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
-              className: cx(classes.group, {
-                [classes.vertical]: orientation === "vertical",
-                [classes.horizontal]: orientation === "horizontal",
-                [classes.invalid]: status === "invalid"
-              }),
-              ...others,
-              children: modifiedChildren
-            }
-          ),
-          canShowError && /* @__PURE__ */ jsx(
-            HvWarningText,
-            {
-              id: setId(elementId, "error"),
-              disableBorder: true,
-              className: classes.error,
-              children: statusMessage
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-export {
-  HvRadioGroup,
-  staticClasses as radioGroupClasses
+import { useControlled } from "../hooks/useControlled.js";
+import { HvLabelContainer } from "../FormElement/LabelContainer.js";
+import { useClasses } from "./RadioGroup.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { Children, cloneElement, forwardRef, useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/RadioGroup/RadioGroup.tsx
+var getValueFromSelectedChildren = (children) => {
+	const childrenArray = Children.toArray(children);
+	const childrenCount = childrenArray.length;
+	for (let i = 0; i !== childrenCount; i += 1) {
+		const child = childrenArray[i];
+		if (child?.props?.checked !== void 0 ? child?.props?.checked : child?.props?.defaultChecked) return child?.props?.value;
+	}
+	return null;
 };
+/**
+* A radio group is a type of selection list that can only have a single entry checked at any one time.
+*/
+var HvRadioGroup = forwardRef(function HvRadioGroup(props, ref) {
+	const { id, classes: classesProp, className, children, name, value: valueProp, defaultValue, label, description, status, statusMessage, required, readOnly, disabled, orientation = "vertical", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-errormessage": ariaErrorMessage, onChange, ...others } = useDefaultProps("HvRadioGroup", props);
+	const { classes, cx } = useClasses(classesProp);
+	const elementId = useUniqueId(id);
+	const [value, setValue] = useControlled(valueProp, defaultValue !== void 0 ? defaultValue : () => getValueFromSelectedChildren(children));
+	const onChildChangeInterceptor = useCallback((childOnChange, event, isChecked, newValue) => {
+		childOnChange?.(event, isChecked, newValue);
+		onChange?.(event, newValue);
+		setValue(newValue);
+	}, [onChange, setValue]);
+	const modifiedChildren = useMemo(() => {
+		return Children.map(children, (child) => {
+			return cloneElement(child, {
+				checked: (child?.props?.value ?? "on") === value,
+				name: child?.props?.name || name || elementId,
+				onChange: (event, isChecked, newValue) => onChildChangeInterceptor(child?.props?.onChange, event, isChecked, newValue),
+				inputProps: {
+					...child?.props?.inputProps,
+					required
+				},
+				disabled: disabled || child?.props?.disabled,
+				readOnly: readOnly || child?.props?.readOnly
+			});
+		});
+	}, [
+		children,
+		disabled,
+		elementId,
+		name,
+		onChildChangeInterceptor,
+		readOnly,
+		required,
+		value
+	]);
+	const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
+	const errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
+	return /* @__PURE__ */ jsxs(HvFormElement, {
+		id,
+		name,
+		status: status || "standBy",
+		disabled,
+		required,
+		readOnly,
+		className: cx(classes.root, className),
+		children: [
+			/* @__PURE__ */ jsx(HvLabelContainer, {
+				label,
+				description,
+				labelId: setId(elementId, "label"),
+				descriptionId: setId(elementId, "description"),
+				classes: { label: classes.label }
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref,
+				role: "radiogroup",
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy || label && setId(elementId, "label") || void 0,
+				"aria-invalid": status === "invalid" ? true : void 0,
+				"aria-errormessage": status === "invalid" ? errorMessageId : void 0,
+				"aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
+				className: cx(classes.group, {
+					[classes.vertical]: orientation === "vertical",
+					[classes.horizontal]: orientation === "horizontal",
+					[classes.invalid]: status === "invalid"
+				}),
+				...others,
+				children: modifiedChildren
+			}),
+			canShowError && /* @__PURE__ */ jsx(HvWarningText, {
+				id: setId(elementId, "error"),
+				disableBorder: true,
+				className: classes.error,
+				children: statusMessage
+			})
+		]
+	});
+});
+//#endregion
+export { HvRadioGroup };

package/dist/RadioGroup/RadioGroup.styles.js

@@ -1,36 +1,30 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const { staticClasses, useClasses } = createClasses("HvRadioGroup", {
-  root: {
-    display: "inline-block",
-    overflow: "clip",
-    overflowClipMargin: 4,
-    verticalAlign: "top"
-  },
-  label: {},
-  group: { display: "flex" },
-  vertical: {
-    flexDirection: "column",
-    // Prevent the focus ring to be hidden by sibling hover background
-    "&>*": {
-      zIndex: 0
-    },
-    "&>*:focus-within": {
-      zIndex: 1
-    }
-  },
-  horizontal: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: theme.space.sm
-  },
-  invalid: {
-    paddingBottom: theme.space.xs,
-    borderBottom: `1px solid ${theme.form.errorColor}`
-  },
-  error: {}
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/RadioGroup/RadioGroup.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvRadioGroup", {
+	root: {
+		display: "inline-block",
+		overflow: "clip",
+		overflowClipMargin: 4,
+		verticalAlign: "top"
+	},
+	label: {},
+	group: { display: "flex" },
+	vertical: {
+		flexDirection: "column",
+		"&>*": { zIndex: 0 },
+		"&>*:focus-within": { zIndex: 1 }
+	},
+	horizontal: {
+		flexDirection: "row",
+		flexWrap: "wrap",
+		gap: theme.space.sm
+	},
+	invalid: {
+		paddingBottom: theme.space.xs,
+		borderBottom: `1px solid ${theme.form.errorColor}`
+	},
+	error: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.js

@@ -1,53 +1,36 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./HorizontalScrollListItem.styles.js";
-import { staticClasses } from "./HorizontalScrollListItem.styles.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
-const HvHorizontalScrollListItem = (props) => {
-  const {
-    id,
-    className,
-    classes: classesProp,
-    selected,
-    label,
-    tooltipPlacement,
-    href,
-    ...others
-  } = useDefaultProps("HvHorizontalScrollListItem", props);
-  const { classes, cx } = useClasses(classesProp);
-  const Component = href != null ? "a" : "div";
-  return /* @__PURE__ */ jsx("li", { id, className: cx(classes.root, className), "aria-current": selected, children: /* @__PURE__ */ jsxs(
-    Component,
-    {
-      role: href == null ? "button" : void 0,
-      tabIndex: 0,
-      className: classes.button,
-      href,
-      ...others,
-      children: [
-        /* @__PURE__ */ jsx(
-          HvOverflowTooltip,
-          {
-            className: cx(classes.text, { [classes.selected]: selected }),
-            placement: tooltipPlacement,
-            data: label
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            "aria-hidden": true,
-            className: cx(classes.bullet, {
-              [classes.bulletSelected]: selected
-            }),
-            children: /* @__PURE__ */ jsx("span", {})
-          }
-        )
-      ]
-    }
-  ) });
-};
-export {
-  HvHorizontalScrollListItem,
-  staticClasses as horizontalScrollListItemClasses
+import { useClasses } from "./HorizontalScrollListItem.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx
+/**
+* HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll
+*/
+var HvHorizontalScrollListItem = (props) => {
+	const { id, className, classes: classesProp, selected, label, tooltipPlacement, href, ...others } = useDefaultProps("HvHorizontalScrollListItem", props);
+	const { classes, cx } = useClasses(classesProp);
+	const Component = href != null ? "a" : "div";
+	return /* @__PURE__ */ jsx("li", {
+		id,
+		className: cx(classes.root, className),
+		"aria-current": selected,
+		children: /* @__PURE__ */ jsxs(Component, {
+			role: href == null ? "button" : void 0,
+			tabIndex: 0,
+			className: classes.button,
+			href,
+			...others,
+			children: [/* @__PURE__ */ jsx(HvOverflowTooltip, {
+				className: cx(classes.text, { [classes.selected]: selected }),
+				placement: tooltipPlacement,
+				data: label
+			}), /* @__PURE__ */ jsx("div", {
+				"aria-hidden": true,
+				className: cx(classes.bullet, { [classes.bulletSelected]: selected }),
+				children: /* @__PURE__ */ jsx("span", {})
+			})]
+		})
+	});
 };
+//#endregion
+export { HvHorizontalScrollListItem };

package/dist/ScrollToHorizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js

@@ -1,50 +1,41 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../utils/focusUtils.js";
-const name = "HvHorizontalScrollListItem";
-const { staticClasses, useClasses } = createClasses(name, {
-  root: {
-    padding: theme.spacing("xs", 0),
-    maxWidth: 120
-  },
-  button: {
-    display: "flex",
-    flexDirection: "column",
-    justifyContent: "center",
-    alignItems: "center",
-    "&:focus-visible": {
-      ...outlineStyles
-    }
-  },
-  text: {
-    margin: theme.spacing("xs", "xs", "0")
-  },
-  selected: {
-    fontWeight: theme.typography.label.fontWeight
-  },
-  bullet: {
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-    minHeight: 24,
-    height: 24,
-    width: 24,
-    fontSize: 4,
-    color: theme.colors.textDisabled,
-    "& > span": {
-      margin: "auto",
-      width: "1em",
-      height: "1em",
-      backgroundColor: "currentcolor",
-      borderRadius: theme.radii.full
-    }
-  },
-  bulletSelected: {
-    fontSize: 6,
-    color: theme.colors.text
-  }
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+var { staticClasses, useClasses } = createClasses("HvHorizontalScrollListItem", {
+	root: {
+		padding: theme.spacing("xs", 0),
+		maxWidth: 120
+	},
+	button: {
+		display: "flex",
+		flexDirection: "column",
+		justifyContent: "center",
+		alignItems: "center",
+		"&:focus-visible": { ...outlineStyles }
+	},
+	text: { margin: theme.spacing("xs", "xs", "0") },
+	selected: { fontWeight: theme.typography.label.fontWeight },
+	bullet: {
+		display: "flex",
+		justifyContent: "center",
+		alignItems: "center",
+		minHeight: 24,
+		height: 24,
+		width: 24,
+		fontSize: 4,
+		color: theme.colors.textDisabled,
+		"& > span": {
+			margin: "auto",
+			width: "1em",
+			height: "1em",
+			backgroundColor: "currentcolor",
+			borderRadius: theme.radii.full
+		}
+	},
+	bulletSelected: {
+		fontSize: 6,
+		color: theme.colors.text
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/ScrollToHorizontal/ScrollToHorizontal.js

@@ -1,94 +1,59 @@
-import { jsx } from "react/jsx-runtime";
-import { useTheme } from "@mui/material/styles";
-import useMediaQuery from "@mui/material/useMediaQuery";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
-import { useScrollTo } from "../hooks/useScrollTo.js";
 import { isKey } from "../utils/keyboardUtils.js";
-import { useClasses } from "./ScrollToHorizontal.styles.js";
-import { staticClasses } from "./ScrollToHorizontal.styles.js";
+import { useScrollTo } from "../hooks/useScrollTo.js";
 import { HvHorizontalScrollListItem } from "./HorizontalScrollListItem/HorizontalScrollListItem.js";
-const HvScrollToHorizontal = (props) => {
-  const {
-    id,
-    defaultSelectedIndex = 0,
-    scrollElementId,
-    navigationMode = "push",
-    relativeLinks = false,
-    onChange,
-    onClick,
-    onEnter,
-    className,
-    classes: classesProp,
-    options,
-    offset = 0,
-    position = "relative",
-    tooltipPosition = "top",
-    ...others
-  } = useDefaultProps("HvScrollToHorizontal", props);
-  const { classes, css, cx } = useClasses(classesProp);
-  const muiTheme = useTheme();
-  const downSm = useMediaQuery(muiTheme.breakpoints.down("sm"));
-  const upMd = useMediaQuery(muiTheme.breakpoints.up("md"));
-  const [selectedIndex, setScrollTo, elements] = useScrollTo(
-    defaultSelectedIndex,
-    scrollElementId,
-    navigationMode,
-    relativeLinks,
-    offset,
-    options,
-    onChange
-  );
-  const tabs = elements.map((option, index) => /* @__PURE__ */ jsx(
-    HvHorizontalScrollListItem,
-    {
-      onClick: (event) => {
-        event.preventDefault();
-        setScrollTo(event, option.value, index, () => onChange?.(event, index));
-        onClick?.(event, index);
-      },
-      onKeyDown: (event) => {
-        if (isKey(event, "Enter") !== true) return;
-        event.preventDefault();
-        setScrollTo(event, option.value, index, () => onChange?.(event, index));
-        onEnter?.(event, index);
-      },
-      href: navigationMode !== "none" ? option.href : void 0,
-      tooltipPlacement: tooltipPosition,
-      selected: selectedIndex === index,
-      label: option.label,
-      classes: {
-        bullet: classes.item,
-        selected: classes.itemSelected
-      }
-    },
-    option.key || option.label
-  ));
-  return /* @__PURE__ */ jsx(
-    "ol",
-    {
-      className: cx(
-        css({
-          width: position === "fixed" && (upMd || downSm) ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})` : "100%",
-          marginTop: 0,
-          marginBottom: 0,
-          marginRight: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
-          marginLeft: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0
-        }),
-        classes.root,
-        {
-          [classes.positionSticky]: position === "sticky",
-          [classes.positionFixed]: position === "fixed"
-        },
-        className
-      ),
-      id,
-      ...others,
-      children: tabs
-    }
-  );
-};
-export {
-  HvScrollToHorizontal,
-  staticClasses as scrollToHorizontalClasses
+import { useClasses } from "./ScrollToHorizontal.styles.js";
+import { theme } from "@hitachivantara/uikit-styles";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { jsx } from "react/jsx-runtime";
+import { useTheme as useTheme$1 } from "@mui/material/styles";
+import useMediaQuery from "@mui/material/useMediaQuery";
+//#region src/ScrollToHorizontal/ScrollToHorizontal.tsx
+/**
+* The horizontal scroll to element can be used to quickly navigate in a page.
+*/
+var HvScrollToHorizontal = (props) => {
+	const { id, defaultSelectedIndex = 0, scrollElementId, navigationMode = "push", relativeLinks = false, onChange, onClick, onEnter, className, classes: classesProp, options, offset = 0, position = "relative", tooltipPosition = "top", ...others } = useDefaultProps("HvScrollToHorizontal", props);
+	const { classes, css, cx } = useClasses(classesProp);
+	const muiTheme = useTheme$1();
+	const downSm = useMediaQuery(muiTheme.breakpoints.down("sm"));
+	const upMd = useMediaQuery(muiTheme.breakpoints.up("md"));
+	const [selectedIndex, setScrollTo, elements] = useScrollTo(defaultSelectedIndex, scrollElementId, navigationMode, relativeLinks, offset, options, onChange);
+	const tabs = elements.map((option, index) => /* @__PURE__ */ jsx(HvHorizontalScrollListItem, {
+		onClick: (event) => {
+			event.preventDefault();
+			setScrollTo(event, option.value, index, () => onChange?.(event, index));
+			onClick?.(event, index);
+		},
+		onKeyDown: (event) => {
+			if (isKey(event, "Enter") !== true) return;
+			event.preventDefault();
+			setScrollTo(event, option.value, index, () => onChange?.(event, index));
+			onEnter?.(event, index);
+		},
+		href: navigationMode !== "none" ? option.href : void 0,
+		tooltipPlacement: tooltipPosition,
+		selected: selectedIndex === index,
+		label: option.label,
+		classes: {
+			bullet: classes.item,
+			selected: classes.itemSelected
+		}
+	}, option.key || option.label));
+	return /* @__PURE__ */ jsx("ol", {
+		className: cx(css({
+			width: position === "fixed" && (upMd || downSm) ? `calc(100% - 2*${theme.spacing(upMd ? 4 : 2)})` : "100%",
+			marginTop: 0,
+			marginBottom: 0,
+			marginRight: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0,
+			marginLeft: position === "fixed" && (upMd || downSm) ? theme.spacing(upMd ? 4 : 2) : 0
+		}), classes.root, {
+			[classes.positionSticky]: position === "sticky",
+			[classes.positionFixed]: position === "fixed"
+		}, className),
+		id,
+		...others,
+		children: tabs
+	});
 };
+//#endregion
+export { HvScrollToHorizontal };