@hitachivantara/uikit-react-core 5.109.1 → 6.0.0-next.10

package/dist/{esm/Accordion → Accordion}/Accordion.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useMemo } from "react";
+import { forwardRef, useMemo } from "react";
+import { useEventCallback } from "@mui/material/utils";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useExpandable } from "../hooks/useExpandable.js";
 import { HvIcon } from "../icons.js";
@@ -9,7 +10,6 @@ import { HvTypography } from "../Typography/Typography.js";
 import { HvButtonBase } from "../ButtonBase/ButtonBase.js";
 const HvAccordion = forwardRef(function HvAccordion2(props, ref) {
   const {
-    id,
     className,
     classes: classesProp,
     disabled = false,
@@ -21,29 +21,19 @@ const HvAccordion = forwardRef(function HvAccordion2(props, ref) {
     defaultExpanded = false,
     containerProps,
     labelVariant = "label",
-    disableEventHandling,
     ...others
   } = useDefaultProps("HvAccordion", props);
   const { classes, cx } = useClasses(classesProp);
   const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable({
-    id,
     expanded,
     disabled,
     defaultExpanded
   });
-  const handleClick = useCallback(
-    (event) => {
-      if (!disabled) {
-        onChange?.(event, isOpen);
-        toggleOpen();
-      }
-      if (!disableEventHandling) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    },
-    [disableEventHandling, disabled, isOpen, onChange, toggleOpen]
-  );
+  const handleClick = useEventCallback((event) => {
+    if (disabled) return;
+    onChange?.(event, isOpen);
+    toggleOpen();
+  });
   const accordionHeader = useMemo(() => {
     const accordionButton = /* @__PURE__ */ jsxs(
       HvTypography,
@@ -63,7 +53,8 @@ const HvAccordion = forwardRef(function HvAccordion2(props, ref) {
     return headingLevel === void 0 ? accordionButton : /* @__PURE__ */ jsx(HvTypography, { component: `h${headingLevel}`, variant: labelVariant, children: accordionButton });
   }, [
     cx,
-    classes,
+    classes.label,
+    classes.disabled,
     handleClick,
     label,
     buttonProps,
@@ -72,7 +63,7 @@ const HvAccordion = forwardRef(function HvAccordion2(props, ref) {
     isOpen,
     labelVariant
   ]);
-  return /* @__PURE__ */ jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
     accordionHeader,
     /* @__PURE__ */ jsx(
       "div",

package/dist/{esm/ActionsGeneric → ActionsGeneric}/ActionsGeneric.js

@@ -13,13 +13,9 @@ const HvActionsGeneric = forwardRef(function HvActionsGeneric2(props, ref) {
     id: idProp,
     classes: classesProp,
     className,
-    category = "secondaryGhost",
-    // TODO - remove and update variant default in v6
-    variant: variantProp,
+    variant = "secondaryGhost",
     disabled = false,
     actions = [],
-    actionsCallback,
-    // TODO - remove in v6
     onAction,
     maxVisibleActions = Infinity,
     iconOnly: iconOnlyProp,
@@ -27,12 +23,7 @@ const HvActionsGeneric = forwardRef(function HvActionsGeneric2(props, ref) {
     ...others
   } = useDefaultProps("HvActionsGeneric", props);
   const { onClick: onClickDropdownMenu, ...dropdownMenuProps } = dropdownMenuPropsProp || {};
-  const variant = variantProp || category;
   const { classes, cx } = useClasses(classesProp);
-  const handleCallback = (event, id, action) => {
-    actionsCallback?.(event, id, action);
-    onAction?.(event, action);
-  };
   if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;
   const renderButton = (action, idx) => {
     const {
@@ -50,7 +41,7 @@ const HvActionsGeneric = forwardRef(function HvActionsGeneric2(props, ref) {
       variant,
       className: classes.button,
       disabled: actDisabled ?? disabled,
-      onClick: (event) => handleCallback(event, idProp || "", action),
+      onClick: (event) => onAction?.(event, action),
       ...other
     };
     const key = actionId || idx;
@@ -74,13 +65,12 @@ const HvActionsGeneric = forwardRef(function HvActionsGeneric2(props, ref) {
           variant,
           classes: {
             root: classes.dropDownMenu,
-            icon: classes.dropDownMenuButton,
-            iconSelected: classes.dropDownMenuButtonSelected
+            open: classes.dropDownMenuButtonSelected
           },
           icon: /* @__PURE__ */ jsx(HvIcon, { name: "DotsVertical", color: iconColor }),
           placement: "left",
           onClick: (event, action) => {
-            handleCallback(event, idProp || "", action);
+            onAction?.(event, action);
             onClickDropdownMenu?.(event, action);
           },
           dataList: actsDropdown,

package/dist/{esm/ActionsGeneric → ActionsGeneric}/ActionsGeneric.styles.js

@@ -8,7 +8,6 @@ const { staticClasses, useClasses } = createClasses("HvActionsGeneric", {
   button: {},
   actionContainer: { display: "flex", alignItems: "center", float: "right" },
   dropDownMenu: {},
-  dropDownMenuButton: {},
   dropDownMenuButtonSelected: {}
 });
 export {

package/dist/{esm/Avatar → Avatar}/Avatar.js

@@ -89,7 +89,7 @@ const HvAvatar = forwardRef(function HvAvatar2(props, ref) {
     "div",
     {
       ref,
-      className: cx(classes.container, classes.status, classes[variant]),
+      className: cx(classes.container, classes[variant]),
       style: statusInlineStyle,
       ...others,
       children: [

package/dist/{esm/Avatar → Avatar}/Avatar.styles.js

@@ -17,8 +17,6 @@ const { staticClasses, useClasses } = createClasses("HvAvatar", {
     textIndent: 1e4
   },
   fallback: {},
-  /** @deprecated use `classes.container` instead */
-  status: {},
   container: {
     display: "flex",
     alignItems: "center",

package/dist/Badge/Badge.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { getColor } from "@hitachivantara/uikit-styles";
+import { useClasses } from "./Badge.styles.js";
+import { staticClasses } from "./Badge.styles.js";
+const HvBadge = forwardRef(function HvBadge2(props, ref) {
+  const {
+    classes: classesProp,
+    className,
+    color,
+    showCount = false,
+    maxCount = 99,
+    label: labelProp,
+    icon,
+    children,
+    style,
+    ...others
+  } = useDefaultProps("HvBadge", props);
+  const { classes, cx } = useClasses(classesProp);
+  const label = useMemo(() => {
+    if (typeof labelProp !== "number") return labelProp;
+    if (labelProp <= 0) return null;
+    if (!showCount) return "";
+    return labelProp > maxCount ? `${maxCount}+` : labelProp;
+  }, [maxCount, labelProp, showCount]);
+  return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
+    children || icon,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-color": color,
+        style: mergeStyles(style, {
+          "--bg-color": color && getColor(color)
+        }),
+        className: cx(classes.badge, {
+          [classes.badgeHidden]: label == null,
+          [classes.badgeIcon]: icon,
+          [classes.badgeOneDigit]: String(label).length === 1
+        }),
+        children: label
+      }
+    )
+  ] });
+});
+export {
+  HvBadge,
+  staticClasses as badgeClasses
+};

package/dist/{esm/Badge → Badge}/Badge.styles.js

@@ -3,7 +3,6 @@ import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvBadge", {
   root: {
     position: "relative",
-    "&>*": { float: "left" },
     ":has($badgeIcon)": {
       width: "fit-content",
       height: "fit-content",
@@ -17,9 +16,9 @@ const { staticClasses, useClasses } = createClasses("HvBadge", {
   /** class applied to the badge container when it has content */
   badgeContainer: {},
   /** class applied to the badge */
-  badgePosition: {
-    // TODO: change to relative so that badges don't overflow into the siblings
+  badge: {
     position: "absolute",
+    top: 0,
     left: "100%",
     ...theme.typography.caption2,
     color: theme.colors.textDimmed,
@@ -28,7 +27,6 @@ const { staticClasses, useClasses } = createClasses("HvBadge", {
     lineHeight: "16px",
     minWidth: 8,
     padding: "0 5px",
-    float: "left",
     wordBreak: "keep-all",
     textAlign: "center",
     ":empty": {
@@ -37,14 +35,10 @@ const { staticClasses, useClasses } = createClasses("HvBadge", {
       padding: 0
     }
   },
-  /** applied to the badge when it's visible */
-  badge: {},
   /** applied to the badge when it's hidden */
   badgeHidden: {
     display: "none"
   },
-  showCount: {},
-  showLabel: {},
   badgeIcon: { top: "1px", left: "calc(100% - 7px)" },
   badgeOneDigit: { padding: 0, width: "16px" }
 });

package/dist/{esm/Banner → Banner}/Banner.js

@@ -3,13 +3,11 @@ import { forwardRef, useCallback } from "react";
 import Slide from "@mui/material/Slide";
 import Snackbar from "@mui/material/Snackbar";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { setId } from "../utils/setId.js";
 import { useClasses } from "./Banner.styles.js";
 import { staticClasses } from "./Banner.styles.js";
 import { HvBannerContent } from "./BannerContent/BannerContent.js";
 const HvBanner = forwardRef(function HvBanner2(props, ref) {
   const {
-    id,
     classes: classesProp,
     className,
     title,
@@ -23,8 +21,6 @@ const HvBanner = forwardRef(function HvBanner2(props, ref) {
     showIcon,
     customIcon,
     actions,
-    actionsCallback,
-    // TODO - remove in v6
     onAction,
     actionsPosition,
     label,
@@ -52,7 +48,6 @@ const HvBanner = forwardRef(function HvBanner2(props, ref) {
     Snackbar,
     {
       ref,
-      id,
       open,
       className,
       classes: {
@@ -68,13 +63,11 @@ const HvBanner = forwardRef(function HvBanner2(props, ref) {
       children: /* @__PURE__ */ jsx(
         HvBannerContent,
         {
-          id: setId(id, "content"),
           title,
           variant,
           customIcon,
           showIcon,
           actions,
-          actionsCallback,
           onAction,
           actionsPosition,
           onClose,

package/dist/{esm/Banner → Banner}/BannerContent/BannerContent.js

@@ -14,8 +14,6 @@ const HvBannerContent = forwardRef(function HvBannerContent2(props, ref) {
     variant = "default",
     onClose,
     actions,
-    actionsCallback,
-    // TODO - remove in v6
     onAction,
     actionsPosition = "auto",
     content,
@@ -34,32 +32,20 @@ const HvBannerContent = forwardRef(function HvBannerContent2(props, ref) {
       showIcon,
       customIcon,
       classes: {
-        root: cx(
-          classes.root,
-          classes.outContainer,
-          classes.baseVariant,
-          classes[variant],
-          className
-        ),
+        root: cx(classes.root, classes[variant], className),
         message: classes.message,
         action: classes.action,
         messageIcon: classes.iconContainer,
         messageContent: classes.messageContainer,
         actionCustom: classes.messageActions,
-        actionContent: cx(
-          classes.actionContainer,
-          classes.actionsInnerContainer
-        ),
+        actionContent: classes.actionContainer,
         actionClose: classes.closeAction
       },
       actions,
       actionsPosition,
       actionProps,
       onClose: (evt) => onClose?.(evt),
-      onAction: (evt, action) => {
-        onAction?.(evt, action);
-        actionsCallback?.(evt, id, action);
-      },
+      onAction,
       ...others,
       children: children ?? content
     }

package/dist/{esm/Banner → Banner}/BannerContent/BannerContent.styles.js

@@ -36,13 +36,7 @@ const { useClasses, staticClasses } = createClasses("HvBannerContent", {
     flex: "0 0 auto"
   },
   actionContainer: {},
-  closeAction: {},
-  /** @deprecated use ´classes.root` instead */
-  baseVariant: {},
-  /** @deprecated use `classes.root` instead */
-  outContainer: {},
-  /** @deprecated use `classes.actionContainer` instead */
-  actionsInnerContainer: {}
+  closeAction: {}
 });
 export {
   staticClasses,

package/dist/{esm/BaseDropdown → BaseDropdown}/BaseDropdown.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useState, useCallback, useMemo, isValidElement, cloneElement, Fragment } from "react";
+import { forwardRef, useState, useCallback, useMemo, useId, isValidElement, cloneElement, Fragment } from "react";
 import { usePopper } from "react-popper";
 import { useForkRef } from "@mui/material/utils";
 import { detectOverflow } from "@popperjs/core";
@@ -9,7 +9,6 @@ import { useUniqueId } from "../hooks/useUniqueId.js";
 import { HvIcon } from "../icons.js";
 import { getFirstAndLastFocus } from "../utils/focusableElementFinder.js";
 import { isKey, isOneOfKeys } from "../utils/keyboardUtils.js";
-import { setId } from "../utils/setId.js";
 import { useClasses } from "./BaseDropdown.styles.js";
 import { staticClasses } from "./BaseDropdown.styles.js";
 import { BaseDropdownPanel } from "./BaseDropdownPanel.js";
@@ -58,7 +57,7 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
   const ariaRole = role || (component == null ? "combobox" : void 0);
   const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : void 0);
   const id = useUniqueId(idProp);
-  const containerId = setId(id, "children-container");
+  const containerId = useId();
   const headerControlArias = {
     "aria-required": required ?? void 0,
     "aria-readonly": readOnly ?? void 0,
@@ -93,12 +92,9 @@ const BaseDropdown = forwardRef(function BaseDropdown2(props, ref) {
   const defaultHeaderElement = /* @__PURE__ */ jsxs(
     "div",
     {
-      id: setId(id, "header"),
       "data-popper-placement": popperPlacement,
       className: cx(classes.header, {
         [classes.headerOpen]: isOpen,
-        [classes.headerOpenUp]: isOpen && popperPlacement?.includes("top"),
-        [classes.headerOpenDown]: isOpen && popperPlacement?.includes("bottom"),
         [classes.headerReadOnly]: readOnly,
         [classes.headerDisabled]: disabled
       }),

package/dist/{esm/BaseDropdown → BaseDropdown}/BaseDropdown.styles.js

@@ -34,10 +34,6 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
       borderColor: theme.colors.text
     }
   },
-  /** @deprecated use `[data-popper-placement*='top']` selector instead */
-  headerOpenUp: {},
-  /** @deprecated use `[data-popper-placement*='bottom']` selector instead */
-  headerOpenDown: {},
   headerDisabled: {
     cursor: "not-allowed",
     pointerEvents: "none",
@@ -84,10 +80,6 @@ const { useClasses, staticClasses } = createClasses("HvBaseDropdown", {
     padding: 0,
     border: `1px solid ${theme.colors.text}`
   },
-  /** @deprecated leverage `[data-popper-placement]` instead */
-  panelOpenedUp: {},
-  /** @deprecated leverage `[data-popper-placement]` instead */
-  panelOpenedDown: {},
   inputExtensionOpen: {
     height: "0px",
     backgroundColor: theme.colors.bgContainer,

package/dist/{esm/BaseDropdown → BaseDropdown}/BaseDropdownPanel.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { ClickAwayListener } from "@mui/base/ClickAwayListener";
-import { Portal } from "@mui/base/Portal";
+import { Portal, ClickAwayListener } from "@mui/base";
 import { useCss, useTheme } from "@hitachivantara/uikit-react-utils";
 import { getContainerElement } from "../utils/document.js";
 import { useBaseDropdownContext } from "./context.js";
@@ -42,10 +41,7 @@ const BaseDropdownPanel = ({
             {
               id: containerId,
               "data-popper-placement": popperPlacement,
-              className: cx(classes.panel, {
-                [classes.panelOpenedUp]: popperPlacement?.includes("top"),
-                [classes.panelOpenedDown]: popperPlacement?.includes("bottom")
-              }),
+              className: classes.panel,
               children
             }
           ),

package/dist/{esm/BaseInput → BaseInput}/BaseInput.js

@@ -59,18 +59,14 @@ const HvBaseInput = forwardRef(function HvBaseInput2(props, ref) {
       readOnly: !!formElementProps.readOnly,
       disabled: formElementProps.disabled,
       onChange: (event) => onChange?.(event, event.target.value),
-      className: cx(classes.root, classes.inputRoot, className, {
-        [classes.inputRootMultiline]: multiline,
+      className: cx(classes.root, className, {
         [classes.multiline]: multiline,
-        [classes.inputRootInvalid]: invalid,
         [classes.invalid]: invalid,
-        [classes.inputRootReadOnly]: formElementProps.readOnly,
         [classes.readOnly]: formElementProps.readOnly,
-        [classes.inputRootDisabled]: formElementProps.disabled,
         [classes.disabled]: formElementProps.disabled
       }),
       classes: {
-        focused: cx(classes.focused, classes.inputRootFocused),
+        focused: classes.focused,
         input: cx(classes.input, {
           [classes.inputResizable]: !formElementProps.disabled && resizable,
           [classes.inputDisabled]: formElementProps.disabled,

package/dist/{esm/BaseInput → BaseInput}/BaseInput.styles.js

@@ -72,20 +72,6 @@ const { staticClasses, useClasses } = createClasses("HvBaseInput", {
     backgroundColor: theme.colors.bgPage
   },
   focused: {},
-  /** @deprecated unused. use `::after` instead */
-  inputBorderContainer: {},
-  /** @deprecated use `classes.invalid` instead */
-  inputRootInvalid: {},
-  /** @deprecated use `classes.readOnly` instead */
-  inputRootReadOnly: {},
-  /** @deprecated use `classes.root` instead */
-  inputRoot: {},
-  /** @deprecated unused */
-  inputRootFocused: {},
-  /** @deprecated use `classes.disabled` instead */
-  inputRootDisabled: {},
-  /** @deprecated use `classes.multiline` instead */
-  inputRootMultiline: {},
   input: {
     height: "100%",
     marginLeft: theme.space.xs,

package/dist/{esm/BreadCrumb → BreadCrumb}/utils.js

@@ -1,6 +1,5 @@
 import { jsx } from "react/jsx-runtime";
 import { HvIcon } from "../icons.js";
-import { setId } from "../utils/setId.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) => {
@@ -16,7 +15,6 @@ const pathWithSubMenu = (id, listRoute, maxVisible, onClick, dropDownMenuProps)
     /* @__PURE__ */ jsx(
       HvDropDownMenu,
       {
-        id: setId(id, "submenu"),
         icon: /* @__PURE__ */ jsx(HvIcon, { name: "DotsHorizontal" }),
         dataList: subMenuList,
         ...dropDownMenuProps,

package/dist/{esm/BulkActions → BulkActions}/BulkActions.js

@@ -1,12 +1,11 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { CounterLabel } from "../utils/CounterLabel.js";
-import { setId } from "../utils/setId.js";
 import { useClasses } from "./BulkActions.styles.js";
 import { staticClasses } from "./BulkActions.styles.js";
-import { HvButton } from "../Button/Button.js";
 import { HvCheckBox } from "../CheckBox/CheckBox.js";
+import { HvButton } from "../Button/Button.js";
 import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
 const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
   const {
@@ -23,15 +22,12 @@ const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
     selectAllConjunctionLabel = "/",
     showSelectAllPages = false,
     semantic = true,
-    actionsCallback,
-    // TODO - remove in v6
     onAction,
     onSelectAll,
     onSelectAllPages,
     ...others
   } = useDefaultProps("HvBulkActions", props);
   const { classes, cx } = useClasses(classesProp);
-  const { activeTheme } = useTheme();
   const anySelected = numSelected > 0;
   const isSemantic = semantic && anySelected;
   return /* @__PURE__ */ jsxs(
@@ -50,7 +46,6 @@ const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
           /* @__PURE__ */ jsx(
             HvCheckBox,
             {
-              id: setId(id, "select"),
               className: classes.selectAll,
               checked: numSelected > 0,
               semantic: isSemantic,
@@ -72,9 +67,8 @@ const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
             /* @__PURE__ */ jsx(
               HvButton,
               {
-                id: setId(id, "pages"),
                 className: classes.selectAllPages,
-                variant: isSemantic ? activeTheme?.bulkActions.actionButtonVariant : "secondaryGhost",
+                variant: isSemantic ? "primaryGhost" : "secondaryGhost",
                 onClick: onSelectAllPages,
                 children: selectAllPagesLabel ?? `Select all ${numTotal} items`
               }
@@ -84,12 +78,10 @@ const HvBulkActions = forwardRef(function HvBulkActions2(props, ref) {
         /* @__PURE__ */ jsx(
           HvActionsGeneric,
           {
-            id: setId(id, "actions"),
             classes: { root: classes.actions },
-            variant: isSemantic ? activeTheme?.bulkActions.actionButtonVariant : "secondaryGhost",
+            variant: isSemantic ? "primaryGhost" : "secondaryGhost",
             actions,
             disabled: actionsDisabled ?? numSelected === 0,
-            actionsCallback,
             onAction,
             maxVisibleActions
           }

package/dist/{esm/BulkActions → BulkActions}/BulkActions.styles.js

@@ -25,7 +25,7 @@ const { staticClasses, useClasses } = createClasses("HvBulkActions", {
   actions: {
     display: "inline-flex",
     marginLeft: "auto",
-    [`& .${staticClasses$1.dropDownMenuButton}:disabled`]: {
+    [`& .${staticClasses$1.dropDownMenu}:disabled`]: {
       "&,:hover": {
         backgroundColor: "transparent",
         borderColor: "transparent"

package/dist/{esm/Button → Button}/Button.styles.js

@@ -97,15 +97,7 @@ const { staticClasses, useClasses } = createClasses("HvButton", {
     "&$disabled": {
       backgroundColor: theme.alpha("textLight", 0.1)
     }
-  },
-  // TODO - remove in v6
-  primary: {},
-  primarySubtle: {},
-  primaryGhost: {},
-  secondarySubtle: {},
-  secondaryGhost: {},
-  // Deprecated (DS3)
-  secondary: {}
+  }
 });
 const sizes = {
   xs: { height: "24px", fontSize: "sm" },

package/dist/{esm/Calendar → Calendar}/Calendar.js

@@ -1,16 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { setId } from "../utils/setId.js";
 import { useClasses } from "./Calendar.styles.js";
 import { staticClasses } from "./Calendar.styles.js";
 import { DEFAULT_LOCALE, isRange } from "./utils.js";
-import { HvFormElementContext, HvFormElementValueContext } from "../FormElement/context.js";
+import { HvFormElementValueContext } from "../FormElement/context.js";
 import { HvSingleCalendar } from "./SingleCalendar/SingleCalendar.js";
 const HvCalendar = (props) => {
   const {
     classes: classesProp,
-    id: idProp,
+    id,
     locale = DEFAULT_LOCALE,
     value: valueProp,
     visibleMonth,
@@ -27,12 +26,9 @@ const HvCalendar = (props) => {
     ...others
   } = useDefaultProps("HvCalendar", props);
   const { classes } = useClasses(classesProp);
-  const context = useContext(HvFormElementContext);
   const elementValue = useContext(HvFormElementValueContext);
   const value = valueProp ?? elementValue;
-  const id = idProp ?? setId(context.id, "single-calendar");
   const rangeMode = isRange(value);
-  const rightCalendarId = setId(id, "single-calendar-right");
   const clampedMonth = visibleMonth && visibleMonth % 13 > 0 ? visibleMonth % 13 : 1;
   const singleCalendar = /* @__PURE__ */ jsx(
     HvSingleCalendar,
@@ -78,7 +74,6 @@ const HvCalendar = (props) => {
       HvSingleCalendar,
       {
         className: classes.singleCalendar,
-        id: rightCalendarId,
         locale,
         value,
         visibleMonth: rightVisibleMonth,

package/dist/{esm/Calendar → Calendar}/CalendarHeader/CalendarHeader.js

@@ -2,16 +2,15 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useContext, useState, useEffect } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { isKey } from "../../utils/keyboardUtils.js";
-import { setId } from "../../utils/setId.js";
 import { DEFAULT_LOCALE, isRange, getLocaleDateFormat, isDate, getFormattedDate, getStringFromDate, parseDateString, isSameDay } from "../utils.js";
 import { useClasses } from "./CalendarHeader.styles.js";
 import { staticClasses } from "./CalendarHeader.styles.js";
 import { HvInput } from "../../Input/Input.js";
-import { HvFormElementContext, HvFormElementDescriptorsContext } from "../../FormElement/context.js";
+import { HvFormElementDescriptorsContext } from "../../FormElement/context.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const HvCalendarHeader = (props) => {
   const {
-    id: idProp,
+    id,
     value: valueProp,
     locale = DEFAULT_LOCALE,
     classes: classesProp,
@@ -22,14 +21,12 @@ const HvCalendarHeader = (props) => {
     invalidDateLabel = "Invalid Date"
   } = useDefaultProps("HvCalendarHeader", props);
   const { classes, cx } = useClasses(classesProp);
-  const context = useContext(HvFormElementContext);
   const { label } = useContext(HvFormElementDescriptorsContext);
   const localValue = isRange(valueProp) ? showEndDate ? valueProp.endDate : valueProp.startDate : valueProp;
   const [dateValue, setDateValue] = useState(localValue);
   const [editedValue, setEditedValue] = useState(null);
   const [displayValue, setDisplayValue] = useState("");
   const [weekdayDisplay, setWeekdayDisplay] = useState("");
-  const id = idProp ?? setId(context.id, "calendarHeader");
   const inputValue = editedValue ?? displayValue;
   const localeFormat = getLocaleDateFormat(locale);
   const [isValidValue, setIsValidValue] = useState(
@@ -104,7 +101,6 @@ const HvCalendarHeader = (props) => {
           HvInput,
           {
             type: "text",
-            id: setId(id, "header-input"),
             placeholder: localeFormat,
             value: inputValue,
             "aria-labelledby": label?.[0]?.id,