@hitachivantara/uikit-react-core 6.8.2 → 6.9.0

package/dist/BreadCrumb/Page/Page.js

@@ -1,37 +1,27 @@
-import { jsx } from "react/jsx-runtime";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { useClasses } from "./Page.styles.js";
-import { staticClasses } from "./Page.styles.js";
 import { HvTypography } from "../../Typography/Typography.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
-const HvBreadCrumbPage = (props) => {
-  const {
-    component,
-    onClick,
-    elem,
-    classes: classesProp
-  } = useDefaultProps("HvBreadCrumbPage", props);
-  const { classes, cx } = useClasses(classesProp);
-  const { label, path, ...others } = elem;
-  const handleClick = (event) => {
-    event.preventDefault();
-    onClick?.(event, elem);
-  };
-  return /* @__PURE__ */ jsx(
-    HvTypography,
-    {
-      noWrap: true,
-      variant: "captionLabel",
-      component: component || "a",
-      href: elem.path,
-      onClick: onClick && handleClick,
-      className: cx(classes.link, classes.label, classes.a),
-      ...others,
-      children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: elem.label })
-    }
-  );
-};
-export {
-  HvBreadCrumbPage,
-  staticClasses as breadCrumbPageClasses
+import { useClasses } from "./Page.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { jsx } from "react/jsx-runtime";
+//#region src/BreadCrumb/Page/Page.tsx
+var HvBreadCrumbPage = (props) => {
+	const { component, onClick, elem, classes: classesProp } = useDefaultProps("HvBreadCrumbPage", props);
+	const { classes, cx } = useClasses(classesProp);
+	const { label, path, ...others } = elem;
+	const handleClick = (event) => {
+		event.preventDefault();
+		onClick?.(event, elem);
+	};
+	return /* @__PURE__ */ jsx(HvTypography, {
+		noWrap: true,
+		variant: "captionLabel",
+		component: component || "a",
+		href: elem.path,
+		onClick: onClick && handleClick,
+		className: cx(classes.link, classes.label, classes.a),
+		...others,
+		children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: elem.label })
+	});
 };
+//#endregion
+export { HvBreadCrumbPage };

package/dist/BreadCrumb/Page/Page.styles.js

@@ -1,27 +1,22 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { outlineStyles } from "../../utils/focusUtils.js";
-const { staticClasses, useClasses } = createClasses("HvBreadCrumbPage", {
-  link: {
-    padding: `8px ${theme.space.xs}`,
-    borderRadius: theme.radii.base,
-    maxWidth: 170 + 16,
-    textTransform: "capitalize",
-    "&:hover": {
-      cursor: "pointer",
-      backgroundColor: theme.colors.bgHover
-    },
-    "&:focus": {
-      backgroundColor: theme.colors.bgHover
-    },
-    "&:focus-visible": {
-      ...outlineStyles
-    }
-  },
-  label: {},
-  a: {}
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/BreadCrumb/Page/Page.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvBreadCrumbPage", {
+	link: {
+		padding: `8px ${theme.space.xs}`,
+		borderRadius: theme.radii.base,
+		maxWidth: 186,
+		textTransform: "capitalize",
+		"&:hover": {
+			cursor: "pointer",
+			backgroundColor: theme.colors.bgHover
+		},
+		"&:focus": { backgroundColor: theme.colors.bgHover },
+		"&:focus-visible": { ...outlineStyles }
+	},
+	label: {},
+	a: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { useClasses };

package/dist/BreadCrumb/PathElement/PathElement.js

@@ -1,20 +1,20 @@
-import { jsxs, jsx } from "react/jsx-runtime";
 import { HvIcon } from "../../icons.js";
 import { useClasses } from "./PathElement.styles.js";
-import { staticClasses } from "./PathElement.styles.js";
-const HvPathElement = ({
-  classes: classesProp,
-  last = false,
-  separator,
-  children
-}) => {
-  const { classes } = useClasses(classesProp);
-  return /* @__PURE__ */ jsxs("li", { className: classes.centerContainer, children: [
-    children,
-    !last && /* @__PURE__ */ jsx("div", { className: classes.separatorContainer, children: separator || /* @__PURE__ */ jsx(HvIcon, { name: "CaretRight", size: "xs", color: "textDisabled" }) })
-  ] });
-};
-export {
-  HvPathElement,
-  staticClasses as pathElementClasses
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/BreadCrumb/PathElement/PathElement.tsx
+var HvPathElement = ({ classes: classesProp, last = false, separator, children }) => {
+	const { classes } = useClasses(classesProp);
+	return /* @__PURE__ */ jsxs("li", {
+		className: classes.centerContainer,
+		children: [children, !last && /* @__PURE__ */ jsx("div", {
+			className: classes.separatorContainer,
+			children: separator || /* @__PURE__ */ jsx(HvIcon, {
+				name: "CaretRight",
+				size: "xs",
+				color: "textDisabled"
+			})
+		})]
+	});
 };
+//#endregion
+export { HvPathElement };

package/dist/BreadCrumb/PathElement/PathElement.styles.js

@@ -1,9 +1,11 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
-const { staticClasses, useClasses } = createClasses("HvPathElement", {
-  centerContainer: { display: "flex", alignItems: "center" },
-  separatorContainer: {}
+//#region src/BreadCrumb/PathElement/PathElement.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvPathElement", {
+	centerContainer: {
+		display: "flex",
+		alignItems: "center"
+	},
+	separatorContainer: {}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { useClasses };

package/dist/BreadCrumb/utils.js

@@ -1,30 +1,22 @@
-import { jsx } from "react/jsx-runtime";
 import { HvIcon } from "../icons.js";
 import { HvDropDownMenu } from "../DropDownMenu/DropDownMenu.js";
-const removeExtension = (label) => label.includes(".") ? label.slice(0, label.lastIndexOf(".")) : label;
-const pathWithSubMenu = (id, listRoute, maxVisible, onClick, dropDownMenuProps) => {
-  const nbrElemToSubMenu = listRoute.length - maxVisible;
-  const subMenuList = listRoute.slice(1, nbrElemToSubMenu + 1);
-  const handleClick = (event, data) => {
-    event.preventDefault();
-    onClick?.(event, data);
-  };
-  listRoute.splice(
-    1,
-    nbrElemToSubMenu,
-    /* @__PURE__ */ jsx(
-      HvDropDownMenu,
-      {
-        icon: /* @__PURE__ */ jsx(HvIcon, { name: "DotsHorizontal" }),
-        dataList: subMenuList,
-        ...dropDownMenuProps,
-        onClick: onClick != null ? handleClick : void 0
-      }
-    )
-  );
-  return listRoute;
-};
-export {
-  pathWithSubMenu,
-  removeExtension
+import { jsx } from "react/jsx-runtime";
+//#region src/BreadCrumb/utils.tsx
+var removeExtension = (label) => label.includes(".") ? label.slice(0, label.lastIndexOf(".")) : label;
+var pathWithSubMenu = (id, listRoute, maxVisible, onClick, dropDownMenuProps) => {
+	const nbrElemToSubMenu = listRoute.length - maxVisible;
+	const subMenuList = listRoute.slice(1, nbrElemToSubMenu + 1);
+	const handleClick = (event, data) => {
+		event.preventDefault();
+		onClick?.(event, data);
+	};
+	listRoute.splice(1, nbrElemToSubMenu, /* @__PURE__ */ jsx(HvDropDownMenu, {
+		icon: /* @__PURE__ */ jsx(HvIcon, { name: "DotsHorizontal" }),
+		dataList: subMenuList,
+		...dropDownMenuProps,
+		onClick: onClick != null ? handleClick : void 0
+	}));
+	return listRoute;
 };
+//#endregion
+export { pathWithSubMenu, removeExtension };

package/dist/BulkActions/BulkActions.js

@@ -1,99 +1,60 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { CounterLabel } from "../utils/CounterLabel.js";
-import { useClasses } from "./BulkActions.styles.js";
-import { staticClasses } from "./BulkActions.styles.js";
-import { HvCheckBox } from "../CheckBox/CheckBox.js";
 import { HvButton } from "../Button/Button.js";
+import { HvCheckBox } from "../CheckBox/CheckBox.js";
+import { CounterLabel } from "../utils/CounterLabel.js";
 import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
-const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
-  const {
-    id,
-    className,
-    classes: classesProp,
-    selectAllPagesLabel,
-    disabled,
-    actionsDisabled: actionsDisabledProp,
-    maxVisibleActions,
-    checkboxProps,
-    actions,
-    numTotal = 0,
-    numSelected = 0,
-    selectAllConjunctionLabel = "/",
-    showSelectAllPages,
-    semantic = true,
-    onAction,
-    onSelectAll,
-    onSelectAllPages,
-    ...others
-  } = useDefaultProps("HvBulkActions", props);
-  const { classes, cx } = useClasses(classesProp);
-  const anySelected = numSelected > 0;
-  const isSemantic = semantic && anySelected;
-  const actionsDisabled = disabled || actionsDisabledProp;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      id,
-      className: cx(classes.root, className, {
-        [classes.semantic]: isSemantic,
-        [classes.disabled]: disabled
-      }),
-      ...others,
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: classes.selectAllContainer, children: [
-          /* @__PURE__ */ jsx(
-            HvCheckBox,
-            {
-              disabled,
-              className: classes.selectAll,
-              checked: numSelected > 0,
-              semantic: isSemantic,
-              onChange: onSelectAll,
-              indeterminate: numSelected > 0 && numSelected < numTotal,
-              label: /* @__PURE__ */ jsx(
-                CounterLabel,
-                {
-                  selected: numSelected,
-                  total: numTotal,
-                  conjunctionLabel: selectAllConjunctionLabel
-                }
-              ),
-              ...checkboxProps
-            }
-          ),
-          showSelectAllPages && anySelected && numSelected < numTotal && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("div", { className: classes.divider }),
-            /* @__PURE__ */ jsx(
-              HvButton,
-              {
-                disabled,
-                className: classes.selectAllPages,
-                variant: isSemantic ? "primaryGhost" : "secondaryGhost",
-                onClick: onSelectAllPages,
-                children: selectAllPagesLabel ?? `Select all ${numTotal} items`
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx(
-          HvActionsGeneric,
-          {
-            classes: { root: classes.actions },
-            variant: isSemantic ? "primaryGhost" : "secondaryGhost",
-            actions,
-            disabled: actionsDisabled ?? numSelected === 0,
-            onAction,
-            maxVisibleActions
-          }
-        )
-      ]
-    }
-  );
+import { useClasses } from "./BulkActions.styles.js";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/BulkActions/BulkActions.tsx
+/**
+* Bulk Actions let users apply an action to one or multiple items at once, streamlining repetitive tasks.
+*/
+var HvBulkActions = forwardRef(function HvBulkActions(props, ref) {
+	const { id, className, classes: classesProp, selectAllPagesLabel, disabled, actionsDisabled: actionsDisabledProp, maxVisibleActions, checkboxProps, actions, numTotal = 0, numSelected = 0, selectAllConjunctionLabel = "/", showSelectAllPages, semantic = true, onAction, onSelectAll, onSelectAllPages, ...others } = useDefaultProps("HvBulkActions", props);
+	const { classes, cx } = useClasses(classesProp);
+	const anySelected = numSelected > 0;
+	const isSemantic = semantic && anySelected;
+	const actionsDisabled = disabled || actionsDisabledProp;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		id,
+		className: cx(classes.root, className, {
+			[classes.semantic]: isSemantic,
+			[classes.disabled]: disabled
+		}),
+		...others,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: classes.selectAllContainer,
+			children: [/* @__PURE__ */ jsx(HvCheckBox, {
+				disabled,
+				className: classes.selectAll,
+				checked: numSelected > 0,
+				semantic: isSemantic,
+				onChange: onSelectAll,
+				indeterminate: numSelected > 0 && numSelected < numTotal,
+				label: /* @__PURE__ */ jsx(CounterLabel, {
+					selected: numSelected,
+					total: numTotal,
+					conjunctionLabel: selectAllConjunctionLabel
+				}),
+				...checkboxProps
+			}), showSelectAllPages && anySelected && numSelected < numTotal && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", { className: classes.divider }), /* @__PURE__ */ jsx(HvButton, {
+				disabled,
+				className: classes.selectAllPages,
+				variant: isSemantic ? "primaryGhost" : "secondaryGhost",
+				onClick: onSelectAllPages,
+				children: selectAllPagesLabel ?? `Select all ${numTotal} items`
+			})] })]
+		}), /* @__PURE__ */ jsx(HvActionsGeneric, {
+			classes: { root: classes.actions },
+			variant: isSemantic ? "primaryGhost" : "secondaryGhost",
+			actions,
+			disabled: actionsDisabled ?? numSelected === 0,
+			onAction,
+			maxVisibleActions
+		})]
+	});
 });
-export {
-  HvBulkActions,
-  staticClasses as bulkActionsClasses
-};
+//#endregion
+export { HvBulkActions };

package/dist/BulkActions/BulkActions.styles.js

@@ -1,47 +1,39 @@
-import { createClasses } from "@hitachivantara/uikit-react-utils";
-import { theme } from "@hitachivantara/uikit-styles";
 import { staticClasses as staticClasses$1 } from "../ActionsGeneric/ActionsGeneric.styles.js";
-import "../ActionsGeneric/ActionsGeneric.js";
-const { staticClasses, useClasses } = createClasses("HvBulkActions", {
-  root: {
-    display: "flex",
-    alignItems: "center",
-    border: `1px solid ${theme.colors.border}`,
-    backgroundColor: theme.colors.bgContainer,
-    padding: theme.spacing("xs", "md"),
-    marginBottom: theme.space.xs
-  },
-  semantic: {
-    backgroundColor: theme.colors.bgHover
-  },
-  disabled: {
-    backgroundColor: theme.colors.bgDisabled
-  },
-  actions: {
-    display: "inline-flex",
-    marginLeft: "auto",
-    [`& .${staticClasses$1.dropDownMenu}:disabled`]: {
-      "&,:hover": {
-        backgroundColor: "transparent",
-        borderColor: "transparent"
-      }
-    }
-  },
-  selectAllContainer: {
-    display: "flex",
-    alignItems: "center",
-    gap: theme.space.xs
-  },
-  selectAll: {},
-  selectAllPages: {},
-  divider: {
-    display: "flex",
-    backgroundColor: theme.colors.border,
-    width: "1px",
-    height: "32px"
-  }
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "@hitachivantara/uikit-react-utils";
+//#region src/BulkActions/BulkActions.styles.tsx
+var { staticClasses, useClasses } = createClasses("HvBulkActions", {
+	root: {
+		display: "flex",
+		alignItems: "center",
+		border: `1px solid ${theme.colors.border}`,
+		backgroundColor: theme.colors.bgContainer,
+		padding: theme.spacing("xs", "md"),
+		marginBottom: theme.space.xs
+	},
+	semantic: { backgroundColor: theme.colors.bgHover },
+	disabled: { backgroundColor: theme.colors.bgDisabled },
+	actions: {
+		display: "inline-flex",
+		marginLeft: "auto",
+		[`& .${staticClasses$1.dropDownMenu}:disabled`]: { "&,:hover": {
+			backgroundColor: "transparent",
+			borderColor: "transparent"
+		} }
+	},
+	selectAllContainer: {
+		display: "flex",
+		alignItems: "center",
+		gap: theme.space.xs
+	},
+	selectAll: {},
+	selectAllPages: {},
+	divider: {
+		display: "flex",
+		backgroundColor: theme.colors.border,
+		width: "1px",
+		height: "32px"
+	}
 });
-export {
-  staticClasses,
-  useClasses
-};
+//#endregion
+export { staticClasses, useClasses };

package/dist/Button/Button.js

@@ -1,99 +1,71 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
-import { theme, getColor } from "@hitachivantara/uikit-styles";
 import { fixedForwardRef } from "../types/generic.js";
-import { useClasses, getIconSizeStyles, getSizeStyles } from "./Button.styles.js";
-import { staticClasses } from "./Button.styles.js";
+import { getIconSizeStyles, getSizeStyles, useClasses } from "./Button.styles.js";
+import { getColor, theme } from "@hitachivantara/uikit-styles";
+import { mergeStyles, useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Button/Button.tsx
 function parseVariant(variant) {
-  if (variant === "semantic") return ["inherit", "ghost"];
-  if (variant === "secondary") return ["text", "subtle"];
-  if (variant === "ghost") return ["primary", "ghost"];
-  if (variant === "contained" || variant === "subtle") {
-    return ["text", variant];
-  }
-  const result = variant.split(/(?=[A-Z])/);
-  if (!result[1]) return [result[0], "contained"];
-  return result.map((x) => x.toLowerCase());
+	({ secondary: "secondarySubtle" })[variant];
+	if (variant === "semantic") return ["inherit", "ghost"];
+	if (variant === "secondary") return ["text", "subtle"];
+	if (variant === "ghost") return ["primary", "ghost"];
+	if (variant === "contained" || variant === "subtle") return ["text", variant];
+	const result = variant.split(/(?=[A-Z])/);
+	if (!result[1]) return [result[0], "contained"];
+	return result.map((x) => x.toLowerCase());
 }
-const HvButton = fixedForwardRef(function HvButton2(props, ref) {
-  const {
-    classes: classesProp,
-    children,
-    icon = false,
-    variant: variantProp = icon ? "secondaryGhost" : "primary",
-    color: colorProp,
-    disabled = false,
-    className,
-    startIcon,
-    endIcon,
-    size,
-    radius,
-    overrideIconColors,
-    component: Component = "button",
-    focusableWhenDisabled,
-    onClick: onClickProp,
-    onMouseDown: onMouseDownProp,
-    selected,
-    style,
-    ...others
-  } = useDefaultProps("HvButton", props);
-  const { classes, css, cx } = useClasses(classesProp);
-  const [parsedColor, variant] = parseVariant(variantProp);
-  const color = colorProp ?? parsedColor;
-  const handleClick = (e) => {
-    if (disabled) return;
-    onClickProp?.(e);
-  };
-  const handleMouseDown = (e) => {
-    if (disabled) return;
-    onMouseDownProp?.(e);
-  };
-  const sizeStyles = useMemo(
-    () => size && (icon ? getIconSizeStyles(size) : getSizeStyles(size)),
-    [size, icon]
-  );
-  return /* @__PURE__ */ jsxs(
-    Component,
-    {
-      ref,
-      style: mergeStyles(style, {
-        "--color": color && getColor(color),
-        "--radius": radius && theme.radii[radius],
-        "--HvButton-height": sizeStyles?.height ?? "32px"
-      }),
-      className: cx(
-        classes.root,
-        classes[variant],
-        classes[variantProp],
-        // Placed after type and color CSS for DS3 override
-        {
-          [classes.icon]: icon,
-          [classes.disabled]: disabled
-        },
-        sizeStyles && css(sizeStyles),
-        className
-      ),
-      "data-color": color,
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      ...Component === "button" && { type: "button" },
-      ...disabled && {
-        disabled: !focusableWhenDisabled,
-        tabIndex: focusableWhenDisabled ? 0 : -1,
-        "aria-disabled": true
-      },
-      ...selected != null && { "aria-pressed": selected },
-      ...others,
-      children: [
-        startIcon && /* @__PURE__ */ jsx("span", { className: classes.startIcon, children: startIcon }),
-        children,
-        endIcon && /* @__PURE__ */ jsx("span", { className: classes.endIcon, children: endIcon })
-      ]
-    }
-  );
+/**
+* Button component is used to trigger an action or event.
+*/
+var HvButton = fixedForwardRef(function HvButton(props, ref) {
+	const { classes: classesProp, children, icon = false, variant: variantProp = icon ? "secondaryGhost" : "primary", color: colorProp, disabled = false, className, startIcon, endIcon, size, radius, overrideIconColors, component: Component = "button", focusableWhenDisabled, onClick: onClickProp, onMouseDown: onMouseDownProp, selected, style, ...others } = useDefaultProps("HvButton", props);
+	const { classes, css, cx } = useClasses(classesProp);
+	const [parsedColor, variant] = parseVariant(variantProp);
+	const color = colorProp ?? parsedColor;
+	const handleClick = (e) => {
+		if (disabled) return;
+		onClickProp?.(e);
+	};
+	const handleMouseDown = (e) => {
+		if (disabled) return;
+		onMouseDownProp?.(e);
+	};
+	const sizeStyles = useMemo(() => size && (icon ? getIconSizeStyles(size) : getSizeStyles(size)), [size, icon]);
+	return /* @__PURE__ */ jsxs(Component, {
+		ref,
+		style: mergeStyles(style, {
+			"--color": color && getColor(color),
+			"--radius": radius && theme.radii[radius],
+			"--HvButton-height": sizeStyles?.height ?? "32px"
+		}),
+		className: cx(classes.root, classes[variant], classes[variantProp], {
+			[classes.icon]: icon,
+			[classes.disabled]: disabled
+		}, sizeStyles && css(sizeStyles), className),
+		"data-color": color,
+		onClick: handleClick,
+		onMouseDown: handleMouseDown,
+		...Component === "button" && { type: "button" },
+		...disabled && {
+			disabled: !focusableWhenDisabled,
+			tabIndex: focusableWhenDisabled ? 0 : -1,
+			"aria-disabled": true
+		},
+		...selected != null && { "aria-pressed": selected },
+		...others,
+		children: [
+			startIcon && /* @__PURE__ */ jsx("span", {
+				className: classes.startIcon,
+				children: startIcon
+			}),
+			children,
+			endIcon && /* @__PURE__ */ jsx("span", {
+				className: classes.endIcon,
+				children: endIcon
+			})
+		]
+	});
 });
-export {
-  HvButton,
-  staticClasses as buttonClasses
-};
+//#endregion
+export { HvButton };