@hitachivantara/uikit-react-core 6.8.0 → 6.8.2

package/dist/AppSwitcher/Action/Action.js

@@ -5,11 +5,11 @@ import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { HvIcon } from "../../icons.js";
 import { useClasses } from "./Action.styles.js";
 import { staticClasses } from "./Action.styles.js";
-import { HvAvatar } from "../../Avatar/Avatar.js";
-import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 import { HvTypography } from "../../Typography/Typography.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
 import { HvTooltip } from "../../Tooltip/Tooltip.js";
+import { HvAvatar } from "../../Avatar/Avatar.js";
+import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 const HvAppSwitcherAction = ({
   id,
   className,

package/dist/Badge/Badge.js

@@ -18,6 +18,7 @@ const HvBadge = forwardRef(function HvBadge2(props, ref) {
     ...others
   } = useDefaultProps("HvBadge", props);
   const { classes, cx } = useClasses(classesProp);
+  const hasContent = !!(children || icon);
   const label = useMemo(() => {
     if (typeof labelProp !== "number") return labelProp;
     if (labelProp <= 0) return null;
@@ -33,6 +34,7 @@ const HvBadge = forwardRef(function HvBadge2(props, ref) {
         style: mergeStyles(style, {
           "--bg-color": color && getColor(color)
         }),
+        "data-badge-inline": !hasContent ? "" : void 0,
         className: cx(classes.badge, {
           [classes.badgeHidden]: label == null,
           [classes.badgeIcon]: icon,

package/dist/Badge/Badge.styles.js

@@ -15,9 +15,11 @@ const { staticClasses, useClasses } = createClasses("HvBadge", {
   },
   /** class applied to the badge */
   badge: {
-    position: "absolute",
-    top: 0,
-    left: "100%",
+    "&:not([data-badge-inline])": {
+      position: "absolute",
+      top: 0,
+      left: "100%"
+    },
     ...theme.typography.caption2,
     color: theme.colors.textDimmed,
     borderRadius: theme.radii.full,
@@ -27,6 +29,10 @@ const { staticClasses, useClasses } = createClasses("HvBadge", {
     padding: "0 5px",
     wordBreak: "keep-all",
     textAlign: "center",
+    "&$badgeIcon": {
+      top: "1px",
+      left: "calc(100% - 7px)"
+    },
     ":empty": {
       height: 8,
       width: 8,
@@ -37,7 +43,7 @@ const { staticClasses, useClasses } = createClasses("HvBadge", {
   badgeHidden: {
     display: "none"
   },
-  badgeIcon: { top: "1px", left: "calc(100% - 7px)" },
+  badgeIcon: {},
   badgeOneDigit: { padding: 0, width: "16px" }
 });
 export {

package/dist/BaseDropdown/BaseDropdown.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useState, useId, useCallback, isValidElement, cloneElement, Fragment } from "react";
+import useEventCallback from "@mui/utils/useEventCallback";
 import useForkRef from "@mui/utils/useForkRef";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
@@ -139,6 +140,10 @@ const HvBaseDropdown = forwardRef(function BaseDropdown(props, ref) {
   const hasCustomHeader = !!HeaderComponentProp;
   const HeaderComponent = HeaderComponentProp || "div";
   const RootComponent = HeaderComponentProp ? Fragment : "div";
+  const onFirstUpdate = useEventCallback((state) => {
+    setComputedPlacement(state.placement);
+    onContainerCreation?.(state.elements?.popper ?? null, state);
+  });
   return /* @__PURE__ */ jsxs(RootComponent, { ...!hasCustomHeader && { className: classes.root }, children: [
     /* @__PURE__ */ jsx(
       HeaderComponent,
@@ -176,10 +181,7 @@ const HvBaseDropdown = forwardRef(function BaseDropdown(props, ref) {
         disablePortal,
         anchorEl: referenceElement,
         onToggle: handleToggle,
-        onFirstUpdate: (state) => {
-          setComputedPlacement(state.placement);
-          onContainerCreation?.(state.elements?.popper ?? null, state);
-        },
+        onFirstUpdate,
         popperOptions: popperProps,
         children
       }

package/dist/BaseDropdown/BaseDropdownPanel.js

@@ -1,5 +1,5 @@
 import { jsx } from "react/jsx-runtime";
-import { useRef, useState } from "react";
+import { useRef, useState, useMemo } from "react";
 import ClickAwayListener from "@mui/material/ClickAwayListener";
 import Popper from "@mui/material/Popper";
 import { useDefaultProps, useTheme, createClasses } from "@hitachivantara/uikit-react-utils";
@@ -30,7 +30,7 @@ const HvDropdownPanel = (props) => {
     anchorEl,
     disablePortal,
     modifiers: modifiersProp,
-    popperOptions,
+    popperOptions: popperOptionsProp,
     onToggle,
     onClickAway,
     onFirstUpdate,
@@ -45,6 +45,9 @@ const HvDropdownPanel = (props) => {
     modifiers: modifiersProp,
     onPlacementChange: setPlacement
   });
+  const popperOptions = useMemo(() => {
+    return { ...popperOptionsProp, onFirstUpdate };
+  }, [onFirstUpdate, popperOptionsProp]);
   const handleKeyDown = (event) => {
     if (isKey(event, "Esc")) {
       onToggle?.(event);
@@ -69,10 +72,7 @@ const HvDropdownPanel = (props) => {
       className: cx(classes.container, className),
       modifiers,
       onKeyDown: handleKeyDown,
-      popperOptions: {
-        onFirstUpdate,
-        ...popperOptions
-      },
+      popperOptions,
       ...others,
       children: /* @__PURE__ */ jsx(ClickAwayListener, { onClickAway, children: /* @__PURE__ */ jsx(
         HvPanel,

package/dist/BreadCrumb/BreadCrumb.js

@@ -6,9 +6,9 @@ import { useClasses } from "./BreadCrumb.styles.js";
 import { staticClasses } from "./BreadCrumb.styles.js";
 import { pathWithSubMenu, removeExtension } from "./utils.js";
 import { HvPathElement } from "./PathElement/PathElement.js";
-import { HvBreadCrumbPage } from "./Page/Page.js";
 import { HvIconButton } from "../IconButton/IconButton.js";
 import { HvTypography } from "../Typography/Typography.js";
+import { HvBreadCrumbPage } from "./Page/Page.js";
 const HomeIcon = (props) => /* @__PURE__ */ jsx(SvgBase, { viewBox: "0 0 256 256", width: "16", height: "16", ...props, children: /* @__PURE__ */ jsx("path", { d: "M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z" }) });
 const HvBreadCrumb = forwardRef(function HvBreadCrumb2(props, ref) {
   const {

package/dist/Calendar/CalendarHeader/CalendarHeader.js

@@ -5,9 +5,9 @@ import { isKey } from "../../utils/keyboardUtils.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 { HvFormElementDescriptorsContext } from "../../FormElement/context.js";
 import { HvTypography } from "../../Typography/Typography.js";
+import { HvInput } from "../../Input/Input.js";
 const HvCalendarHeader = (props) => {
   const {
     id,

package/dist/Calendar/SingleCalendar/SingleCalendar.js

@@ -8,9 +8,9 @@ import { DEFAULT_LOCALE, isDate, getWeekdayNamesList, isRange } from "../utils.j
 import { HvCalendarCell } from "./CalendarCell.js";
 import { useClasses } from "./SingleCalendar.styles.js";
 import { staticClasses } from "./SingleCalendar.styles.js";
+import { HvPanel } from "../../Panel/Panel.js";
 import { HvComposedNavigation } from "../CalendarNavigation/ComposedNavigation/ComposedNavigation.js";
 import { HvMonthSelector } from "../CalendarNavigation/MonthSelector/MonthSelector.js";
-import { HvPanel } from "../../Panel/Panel.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const HvSingleCalendar = (props) => {
   const {

package/dist/Carousel/Carousel.js

@@ -8,8 +8,8 @@ import { useClasses } from "./Carousel.styles.js";
 import { staticClasses } from "./Carousel.styles.js";
 import { HvCarouselControls } from "./CarouselControls.js";
 import { HvCarouselThumbnails } from "./CarouselThumbnails.js";
-import { HvContainer } from "../Container/Container.js";
 import { HvIconButton } from "../IconButton/IconButton.js";
+import { HvContainer } from "../Container/Container.js";
 import { HvTypography } from "../Typography/Typography.js";
 import { HvButton } from "../Button/Button.js";
 const DEFAULT_LABELS = {

package/dist/CheckBox/CheckBox.js

@@ -7,8 +7,8 @@ import { setId } from "../utils/setId.js";
 import { useClasses } from "./CheckBox.styles.js";
 import { staticClasses } from "./CheckBox.styles.js";
 import { HvBaseCheckBox } from "../BaseCheckBox/BaseCheckBox.js";
-import { isInvalid } from "../FormElement/utils.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
+import { isInvalid } from "../FormElement/utils.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const HvCheckBox = forwardRef(

package/dist/DatePicker/DatePicker.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useEffect } from "react";
+import { forwardRef, useRef, useMemo, useEffect } from "react";
 import { useForkRef } from "@mui/material/utils";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { DEFAULT_LOCALE, isDate } from "../Calendar/utils.js";
@@ -14,13 +14,13 @@ import { useClasses } from "./DatePicker.styles.js";
 import { staticClasses } from "./DatePicker.styles.js";
 import useVisibleDate from "./useVisibleDate.js";
 import { getDateLabel } from "./utils.js";
-import { HvCalendar } from "../Calendar/Calendar.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
-import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
+import { HvCalendar } from "../Calendar/Calendar.js";
 import { isInvalid } from "../FormElement/utils.js";
 import { HvActionBar } from "../ActionBar/ActionBar.js";
 import { HvButton } from "../Button/Button.js";
+import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const DEFAULT_LABELS = {
   /** Apply button label. */
   applyLabel: "Apply",
@@ -92,6 +92,11 @@ const HvDatePicker = forwardRef(
     const focusTarget = useRef(null);
     const { ref: refProp, ...otherDropdownProps } = dropdownProps;
     const dropdownForkedRef = useForkRef(ref, refProp);
+    const popperProps = useMemo(() => {
+      return {
+        modifiers: [{ name: "preventOverflow", enabled: escapeWithReference }]
+      };
+    }, [escapeWithReference]);
     useEffect(() => {
       setStartDate(rangeMode ? startValue : value, true);
       setEndDate(endValue, true);
@@ -290,11 +295,7 @@ const HvDatePicker = forwardRef(
               onContainerCreation: focusOnContainer,
               placeholder: dateString || placeholder || "",
               adornment: /* @__PURE__ */ jsx(HvIcon, { name: "Calendar", className: classes.icon }),
-              popperProps: {
-                modifiers: [
-                  { name: "preventOverflow", enabled: escapeWithReference }
-                ]
-              },
+              popperProps,
               "aria-haspopup": "dialog",
               "aria-label": ariaLabel,
               "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0,

package/dist/Dropdown/Dropdown.js

@@ -12,12 +12,12 @@ import { setId } from "../utils/setId.js";
 import { useClasses } from "./Dropdown.styles.js";
 import { staticClasses } from "./Dropdown.styles.js";
 import { getSelectionLabel, getSelected } from "./utils.js";
-import { HvDropdownList } from "./List/List.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
-import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
+import { HvDropdownList } from "./List/List.js";
 import { HvTypography } from "../Typography/Typography.js";
 import { isInvalid } from "../FormElement/utils.js";
+import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const DEFAULT_LABELS = {
   /** Label for overwrite the default header behavior. */
   select: void 0,

package/dist/Dropdown/List/List.js

@@ -6,10 +6,10 @@ import { CounterLabel } from "../../utils/CounterLabel.js";
 import { getSelected } from "../utils.js";
 import { useClasses } from "./List.styles.js";
 import { staticClasses } from "./List.styles.js";
-import { HvActionBar } from "../../ActionBar/ActionBar.js";
 import { HvList } from "../../List/List.js";
 import { HvInput } from "../../Input/Input.js";
 import { HvCheckBox } from "../../CheckBox/CheckBox.js";
+import { HvActionBar } from "../../ActionBar/ActionBar.js";
 import { HvButton } from "../../Button/Button.js";
 const clone = (values) => values.map((value) => ({ ...value }));
 const cleanHidden = (lst) => lst.map((item) => ({ ...item, isHidden: false }));

package/dist/FileUploader/FileUploader.js

@@ -3,9 +3,9 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useLabels } from "../hooks/useLabels.js";
 import { useClasses } from "./FileUploader.styles.js";
 import { staticClasses } from "./FileUploader.styles.js";
+import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvDropZone } from "./DropZone/DropZone.js";
 import { HvFileList } from "./FileList/FileList.js";
-import { HvFormElement } from "../FormElement/FormElement.js";
 const DEFAULT_LABELS = {
   removeFileButtonLabel: "Remove File"
 };

package/dist/FilterGroup/FilterContent/FilterContent.js

@@ -7,10 +7,10 @@ import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { useClasses } from "./FilterContent.styles.js";
 import { staticClasses } from "./FilterContent.styles.js";
 import { HvHeaderButton } from "./HeaderButton.js";
-import { HvFilterGroupLeftPanel } from "../LeftPanel/LeftPanel.js";
-import { HvFilterGroupRightPanel } from "../RightPanel/RightPanel.js";
 import { HvTypography } from "../../Typography/Typography.js";
 import { HvBaseDropdown } from "../../BaseDropdown/BaseDropdown.js";
+import { HvFilterGroupLeftPanel } from "../LeftPanel/LeftPanel.js";
+import { HvFilterGroupRightPanel } from "../RightPanel/RightPanel.js";
 import { HvActionBar } from "../../ActionBar/ActionBar.js";
 import { HvButton } from "../../Button/Button.js";
 import { HvFilterGroupCounter } from "../Counter/Counter.js";

package/dist/FilterGroup/FilterGroup.js

@@ -9,8 +9,8 @@ import { setId } from "../utils/setId.js";
 import { useClasses } from "./FilterGroup.styles.js";
 import { staticClasses } from "./FilterGroup.styles.js";
 import { HvFilterGroupProvider } from "./FilterGroupContext.js";
-import { HvFilterGroupContent } from "./FilterContent/FilterContent.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
+import { HvFilterGroupContent } from "./FilterContent/FilterContent.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const DEFAULT_LABELS = {
   /** Apply button label. */

package/dist/FilterGroup/LeftPanel/LeftPanel.js

@@ -5,11 +5,11 @@ import { HvIcon } from "../../icons.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { useClasses } from "./LeftPanel.styles.js";
 import { staticClasses } from "./LeftPanel.styles.js";
-import { HvFilterGroupCounter } from "../Counter/Counter.js";
 import { HvPanel } from "../../Panel/Panel.js";
 import { HvListContainer } from "../../ListContainer/ListContainer.js";
-import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
+import { HvFilterGroupCounter } from "../Counter/Counter.js";
+import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 const HvFilterGroupLeftPanel = ({
   className,
   emptyElement,

package/dist/Input/Input.js

@@ -18,10 +18,10 @@ import { useClasses } from "./Input.styles.js";
 import { staticClasses } from "./Input.styles.js";
 import { changeInputValue } from "./utils.js";
 import { HvAdornment } from "../FormElement/Adornment/Adornment.js";
-import { isValid, isInvalid } from "../FormElement/utils.js";
-import { HvBaseInput } from "../BaseInput/BaseInput.js";
 import { HvTooltip } from "../Tooltip/Tooltip.js";
+import { isValid, isInvalid } from "../FormElement/utils.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
+import { HvBaseInput } from "../BaseInput/BaseInput.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
 const DEFAULT_LABELS = {

package/dist/List/List.js

@@ -8,12 +8,12 @@ import { useClasses } from "./List.styles.js";
 import { staticClasses } from "./List.styles.js";
 import { useSelectableList } from "./useSelectableList.js";
 import { parseList } from "./utils.js";
+import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvCheckBox } from "../CheckBox/CheckBox.js";
 import { HvRadio } from "../Radio/Radio.js";
 import { HvOverflowTooltip } from "../OverflowTooltip/OverflowTooltip.js";
-import { HvListContainer } from "../ListContainer/ListContainer.js";
-import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
 import { HvTypography } from "../Typography/Typography.js";
+import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
 const DEFAULT_LABELS = {
   /** The label used in the middle of the multi-selection count. */
   selectionConjunction: "/"

package/dist/NumberInput/NumberInput.js

@@ -5,8 +5,8 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../icons.js";
 import { changeInputValue } from "../Input/utils.js";
 import { useClasses } from "./NumberInput.styles.js";
-import { HvAdornment } from "../FormElement/Adornment/Adornment.js";
 import { HvInput } from "../Input/Input.js";
+import { HvAdornment } from "../FormElement/Adornment/Adornment.js";
 const HvNumberInput = forwardRef(function HvNumberInput2(props, ref) {
   const {
     classes: classesProp,

package/dist/QueryBuilder/Rule/Attribute.js

@@ -29,6 +29,7 @@ const Attribute = ({
       disabled,
       readOnly,
       status: isInvalid ? "invalid" : "valid",
+      style: { gridArea: "attribute" },
       statusMessage: labels.rule.attribute.exists,
       onChange: (selected) => {
         if (selected) {

package/dist/QueryBuilder/Rule/Operator.js

@@ -31,6 +31,7 @@ const Operator = ({
       label: labels.rule.operator.label,
       placeholder: labels.rule.operator.placeholder,
       values,
+      style: { gridArea: "operator" },
       disabled: values.length === 0,
       readOnly,
       onChange: (selected) => {

package/dist/QueryBuilder/Rule/Rule.js

@@ -9,7 +9,6 @@ import { Value } from "../Value/Value.js";
 import { Attribute } from "./Attribute.js";
 import { Operator } from "./Operator.js";
 import { useClasses } from "./Rule.styles.js";
-import { HvGrid } from "../../Grid/Grid.js";
 import { HvIconButton } from "../../IconButton/IconButton.js";
 const Rule = (props) => {
   const {
@@ -47,56 +46,49 @@ const Rule = (props) => {
     }
     return -1;
   }, [attribute, attributes, combinator, operators]);
-  return /* @__PURE__ */ jsxs(
-    HvGrid,
-    {
-      container: true,
-      className: cx(classes.root, { [classes.isMdDown]: isMdDown }),
-      spacing: 0,
-      children: [
-        /* @__PURE__ */ jsx(HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsx(
-          Attribute,
-          {
-            attribute,
-            id,
-            disabled,
-            isInvalid
-          }
-        ) }),
-        attribute != null && availableOperators > 0 && /* @__PURE__ */ jsx(HvGrid, { item: true, xs: 12, md: 3, children: /* @__PURE__ */ jsx(
-          Operator,
-          {
-            id,
-            combinator,
-            attribute,
-            operator
-          }
-        ) }),
-        attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsx(HvGrid, { item: true, xs: 12, md: true, children: /* @__PURE__ */ jsx(
-          Value,
-          {
-            attribute,
-            id,
-            operator,
-            value
-          }
-        ) }),
-        /* @__PURE__ */ jsx(HvGrid, { item: true, className: classes.actionsContainer, children: /* @__PURE__ */ jsx(
-          HvIconButton,
-          {
-            placement: "bottom",
-            title: labels.rule.delete.tooltip,
-            onClick: () => disableConfirmation ? dispatchAction({ type: "remove-node", id }) : askAction({
-              actions: [{ type: "remove-node", id }],
-              dialog: labels.rule.delete
-            }),
-            disabled: readOnly,
-            children: /* @__PURE__ */ jsx(HvIcon, { name: "Delete" })
-          }
-        ) })
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, { [classes.isMdDown]: isMdDown }), children: [
+    /* @__PURE__ */ jsx(
+      Attribute,
+      {
+        attribute,
+        id,
+        disabled,
+        isInvalid
+      }
+    ),
+    attribute != null && availableOperators > 0 && /* @__PURE__ */ jsx(
+      Operator,
+      {
+        id,
+        combinator,
+        attribute,
+        operator
+      }
+    ),
+    attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsx("div", { style: { gridArea: "value" }, children: /* @__PURE__ */ jsx(
+      Value,
+      {
+        attribute,
+        id,
+        operator,
+        value
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      HvIconButton,
+      {
+        placement: "bottom",
+        className: classes.actionsContainer,
+        title: labels.rule.delete.tooltip,
+        onClick: () => disableConfirmation ? dispatchAction({ type: "remove-node", id }) : askAction({
+          actions: [{ type: "remove-node", id }],
+          dialog: labels.rule.delete
+        }),
+        disabled: readOnly,
+        children: /* @__PURE__ */ jsx(HvIcon, { name: "Delete" })
+      }
+    )
+  ] });
 };
 export {
   Rule

package/dist/QueryBuilder/Rule/Rule.styles.js

@@ -6,8 +6,12 @@ const { useClasses } = createClasses("HvQueryBuilderRule", {
     position: "relative",
     marginTop: theme.space.xs,
     minHeight: 94,
-    "&>div:not(:last-child)": {
-      paddingRight: theme.space.md
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr 2fr 32px",
+    gridTemplateAreas: '"attribute operator value actions"',
+    gap: theme.space.md,
+    "&:>*": {
+      minWidth: 0
     },
     // hide required * as all fields are required
     "& label>span[aria-hidden]": {
@@ -36,18 +40,16 @@ const { useClasses } = createClasses("HvQueryBuilderRule", {
     }
   },
   actionsContainer: {
-    marginLeft: "auto",
-    marginTop: "24px",
-    "&>:not(:last-child)": {
-      marginRight: theme.space.xs
-    }
+    gridArea: "actions",
+    justifySelf: "end",
+    marginTop: "24px"
   },
   isMdDown: {
-    "&>div:not(:last-child)": {
-      paddingRight: 0
-    },
-    "&>div:not(:first-of-type)": {
-      marginTop: theme.space.xs
+    gridTemplateColumns: "1fr",
+    gridTemplateAreas: '"attribute" "operator" "value" "actions"',
+    gap: theme.space.xs,
+    "& $actionsContainer": {
+      marginTop: 0
     }
   }
 });

package/dist/QueryBuilder/RuleGroup.js

@@ -4,10 +4,10 @@ import { HvIcon } from "../icons.js";
 import { useQueryBuilderContext } from "./Context.js";
 import { useClasses } from "./QueryBuilder.styles.js";
 import { Rule } from "./Rule/Rule.js";
-import { HvEmptyState } from "../EmptyState/EmptyState.js";
 import { HvButton } from "../Button/Button.js";
 import { HvMultiButton } from "../MultiButton/MultiButton.js";
 import { HvIconButton } from "../IconButton/IconButton.js";
+import { HvEmptyState } from "../EmptyState/EmptyState.js";
 import { HvTypography } from "../Typography/Typography.js";
 const RuleGroup = ({
   level = 0,

package/dist/Radio/Radio.js

@@ -8,9 +8,9 @@ import { useClasses } from "./Radio.styles.js";
 import { staticClasses } from "./Radio.styles.js";
 import { HvBaseRadio } from "../BaseRadio/BaseRadio.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
+import { isInvalid } from "../FormElement/utils.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
-import { isInvalid } from "../FormElement/utils.js";
 const HvRadio = forwardRef(
   function HvRadio2(props, ref) {
     const {

package/dist/Section/Section.js

@@ -40,7 +40,7 @@ const HvSection = forwardRef(
         }),
         ...others,
         children: [
-          hasHeader && // eslint-disable-next-line jsx-a11y/click-events-have-key-events jsx-a11y/no-static-element-interactions
+          hasHeader && // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
           /* @__PURE__ */ jsxs(
             "div",
             {

package/dist/SelectionList/SelectionList.js

@@ -9,9 +9,9 @@ import { multiSelectionEventHandler } from "../utils/multiSelectionEventHandler.
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./SelectionList.styles.js";
 import { staticClasses } from "./SelectionList.styles.js";
+import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
 import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
-import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvListContainer } from "../ListContainer/ListContainer.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const getValueFromSelectedChildren = (children, multiple) => {

package/dist/Switch/Switch.js

@@ -6,11 +6,11 @@ import { useUniqueId } from "../hooks/useUniqueId.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./Switch.styles.js";
 import { staticClasses } from "./Switch.styles.js";
-import { HvBaseSwitch } from "../BaseSwitch/BaseSwitch.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
+import { HvBaseSwitch } from "../BaseSwitch/BaseSwitch.js";
+import { isInvalid } from "../FormElement/utils.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
-import { isInvalid } from "../FormElement/utils.js";
 const HvSwitch = forwardRef(
   function HvSwitch2(props, ref) {
     const {

package/dist/Table/renderers/renderers.js

@@ -6,9 +6,9 @@ import { HvDateColumnCell } from "./DateColumnCell.js";
 import { HvDropdownColumnCell } from "./DropdownColumnCell.js";
 import { HvProgressColumnCell } from "./ProgressColumnCell.js";
 import { HvSwitchColumnCell } from "./SwitchColumnCell.js";
-import { HvTag } from "../../Tag/Tag.js";
 import { HvButton } from "../../Button/Button.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
+import { HvTag } from "../../Tag/Tag.js";
 const EM_DASH = "—";
 const hvStringFallback = (value) => {
   return typeof value === "string" && value !== "" ? value : EM_DASH;

package/dist/TagsInput/TagsInput.js

@@ -13,8 +13,8 @@ import { isKey } from "../utils/keyboardUtils.js";
 import { setId } from "../utils/setId.js";
 import { useClasses } from "./TagsInput.styles.js";
 import { staticClasses } from "./TagsInput.styles.js";
-import { HvCharCounter } from "../FormElement/CharCounter/CharCounter.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
+import { HvCharCounter } from "../FormElement/CharCounter/CharCounter.js";
 import { HvTag } from "../Tag/Tag.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const HvTagsInput = forwardRef(

package/dist/TextArea/TextArea.js

@@ -10,11 +10,11 @@ import { setId } from "../utils/setId.js";
 import { useClasses } from "./TextArea.styles.js";
 import { staticClasses } from "./TextArea.styles.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
-import { HvCharCounter } from "../FormElement/CharCounter/CharCounter.js";
 import { HvBaseInput } from "../BaseInput/BaseInput.js";
+import { isInvalid } from "../FormElement/utils.js";
+import { HvCharCounter } from "../FormElement/CharCounter/CharCounter.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 import { HvInfoMessage } from "../FormElement/InfoMessage/InfoMessage.js";
-import { isInvalid } from "../FormElement/utils.js";
 const HvTextArea = forwardRef(function HvTextArea2(props, ref) {
   const {
     id,

package/dist/TimePicker/Placeholder.js

@@ -1,6 +1,6 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
-import { useDateSegment } from "@react-aria/datepicker";
+import { useDateSegment } from "react-aria/useDateField";
 const getDateValue = (date) => {
   if (!date) return "";
   const { hour, minute, second } = date;
@@ -9,45 +9,50 @@ const getDateValue = (date) => {
 const PlaceholderSegment = ({
   segment,
   state,
-  placeholder
+  value
 }) => {
   const ref = useRef(null);
   const { segmentProps } = useDateSegment(segment, state, ref);
-  return /* @__PURE__ */ jsx("div", { ref, ...segmentProps, children: (() => {
-    if (segment.type === "literal") return segment.text;
-    if (segment.isPlaceholder) return placeholder ?? segment.text;
-    return segment.text.padStart(2, "0");
-  })() });
+  if (segment.type === "literal" && segment.text === "⁦") return;
+  return /* @__PURE__ */ jsx("div", { ref, ...segmentProps, children: value });
 };
 const Placeholder = forwardRef(
   function Placeholder2(props, ref) {
     const { name, state, placeholders, onKeyDown, ...others } = props;
     const { value, segments } = state;
-    return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        onKeyDown: (event) => {
-          event.stopPropagation();
-          onKeyDown?.(event);
-        },
-        ...others,
-        children: [
-          name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: getDateValue(value) }),
-          segments.map((segment) => /* @__PURE__ */ jsx(
-            PlaceholderSegment,
-            {
-              segment,
-              state,
-              placeholder: placeholders[segment.type]
-            },
-            segment.type
-          ))
-        ]
-      }
-    ) });
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          onKeyDown: (event) => {
+            event.stopPropagation();
+            onKeyDown?.(event);
+          },
+          ...others,
+          children: [
+            name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: getDateValue(value) }),
+            segments.map((segment, i) => /* @__PURE__ */ jsx(
+              PlaceholderSegment,
+              {
+                segment,
+                state,
+                value: renderSegment(segment, placeholders[segment.type])
+              },
+              segment.type === "literal" ? `literal-${i}` : segment.type
+            ))
+          ]
+        }
+      )
+    );
   }
 );
+function renderSegment(segment, placeholder) {
+  if (segment.type === "literal") return segment.text;
+  if (segment.isPlaceholder) return placeholder ?? segment.text;
+  return segment.text.padStart(2, "0");
+}
 export {
   Placeholder
 };

package/dist/TimePicker/TimePicker.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, useMemo } from "react";
+import { forwardRef, useRef, useMemo, useState } from "react";
+import { useTimeField } from "react-aria/useTimeField";
+import { useTimeFieldState } from "react-stately/useTimeFieldState";
 import { Time } from "@internationalized/date";
-import { useForkRef } from "@mui/material/utils";
-import { useTimeField } from "@react-aria/datepicker";
-import { useTimeFieldState } from "@react-stately/datepicker";
+import useForkRef from "@mui/utils/useForkRef";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { DEFAULT_LOCALE } from "../Calendar/utils.js";
 import { HvLabelContainer } from "../FormElement/LabelContainer.js";
@@ -14,9 +14,9 @@ import { setId } from "../utils/setId.js";
 import { Placeholder } from "./Placeholder.js";
 import { useClasses } from "./TimePicker.styles.js";
 import { staticClasses } from "./TimePicker.styles.js";
-import { Unit } from "./Unit/Unit.js";
 import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
+import { Unit } from "./Unit/Unit.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
 const toTime = (value) => {
   if (!value) return value;
@@ -64,8 +64,9 @@ const HvTimePicker = forwardRef(
     const timeFieldRef = useRef(null);
     const { ref: refProp, ...otherDropdownProps } = dropdownProps;
     const dropdownForkedRef = useForkRef(ref, refProp);
+    const valueState = useMemo(() => toTime(valueProp), [valueProp]);
     const stateProps = {
-      value: toTime(valueProp),
+      value: valueState,
       defaultValue: toTime(defaultValueProp),
       label,
       locale,
@@ -92,6 +93,11 @@ const HvTimePicker = forwardRef(
       state,
       timeFieldRef
     );
+    const popperProps = useMemo(() => {
+      return {
+        modifiers: [{ name: "preventOverflow", enabled: escapeWithReference }]
+      };
+    }, [escapeWithReference]);
     const [open, setOpen] = useState(false);
     const [validationMessage] = useControlled(statusMessage, "Required");
     const [validationState] = useControlled(status, "standBy");
@@ -176,13 +182,9 @@ const HvTimePicker = forwardRef(
               "aria-invalid": isStateInvalid ? true : void 0,
               "aria-errormessage": errorMessageId,
               disablePortal,
-              popperProps: {
-                modifiers: [
-                  { name: "preventOverflow", enabled: escapeWithReference }
-                ]
-              },
+              popperProps,
               ...otherDropdownProps,
-              children: /* @__PURE__ */ jsx("div", { ref: timeFieldRef, className: classes.timePopperContainer, children: state.segments.map((segment) => /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ jsx("div", { ref: timeFieldRef, className: classes.timePopperContainer, children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(
                 Unit,
                 {
                   state,
@@ -194,7 +196,7 @@ const HvTimePicker = forwardRef(
                     state.setSegment(segment.type, Number(val));
                   }
                 },
-                segment.type
+                segment.type === "literal" ? `literal-${i}` : segment.type
               )) })
             }
           ),

package/dist/VerticalNavigation/NavigationSlider/NavigationSlider.js

@@ -4,9 +4,9 @@ import { HvIcon } from "../../icons.js";
 import { useClasses } from "./NavigationSlider.styles.js";
 import { staticClasses } from "./NavigationSlider.styles.js";
 import { HvListContainer } from "../../ListContainer/ListContainer.js";
-import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
 import { HvButton } from "../../Button/Button.js";
+import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
 const HvVerticalNavigationSlider = (props) => {
   const {
     className,

package/dist/utils/Callout.js

@@ -6,8 +6,8 @@ import { theme } from "@hitachivantara/uikit-styles";
 import { HvIcon } from "../icons.js";
 import { iconVariant } from "./iconVariant.js";
 import { HvActionsGeneric } from "../ActionsGeneric/ActionsGeneric.js";
-import { HvStatusIcon } from "../StatusIcon/StatusIcon.js";
 import { HvButton } from "../Button/Button.js";
+import { HvStatusIcon } from "../StatusIcon/StatusIcon.js";
 const { useClasses } = createClasses("HvCallout", {
   root: {
     position: "relative",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "6.8.0",
+  "version": "6.8.2",
   "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
@@ -39,8 +39,6 @@
     "@internationalized/date": "^3.2.0",
     "@mui/base": "7.0.0-beta.4",
     "@popperjs/core": "^2.11.8",
-    "@react-aria/datepicker": "^3.9.0",
-    "@react-stately/datepicker": "^3.9.0",
     "@types/react-table": "^7.7.18",
     "@uiw/react-color-hue": "^2.9.2",
     "@uiw/react-color-saturation": "^2.9.2",
@@ -49,8 +47,10 @@
     "notistack": "^3.0.2",
     "rc-slider": "^10.5.0",
     "rc-tooltip": "~6.3.0",
+    "react-aria": "^3.48.0",
     "react-popper": "^2.3.0",
     "react-resize-detector": "^12.3.0",
+    "react-stately": "^3.46.0",
     "react-table": "^7.8.0",
     "react-window": "^1.8.10"
   },
@@ -61,7 +61,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "f79885f320f5cdf5b438ef8b2e866965c9626ce7",
+  "gitHead": "333e132a9823018d508ebbe71c81d0b467f9008d",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",