@hitachivantara/uikit-react-core 5.99.1 → 5.100.1

package/dist/esm/Header/Navigation/MenuBar/Bar.styles.js

@@ -2,14 +2,14 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const show = {
   top: theme.header.height,
-  transition: ["top"],
+  transitionProperty: "top",
   boxShadow: theme.colors.shadow,
   transitionDuration: "500ms",
   backgroundColor: theme.colors.bgPage
 };
 const hide = {
   top: 0,
-  transition: ["top"],
+  transitionProperty: "top",
   boxShadow: "none",
   transitionDuration: "300ms"
 };

package/dist/esm/Loading/Loading.js

@@ -24,6 +24,7 @@ const HvLoading = forwardRef(function HvLoading2(props, ref) {
     {
       ref,
       hidden: !!hidden,
+      "data-size": size,
       style: mergeStyles(style, {
         color: getColor(color, small ? "text" : "brand"),
         "--customColor": getColor(color)

package/dist/esm/Loading/Loading.styles.js

@@ -6,28 +6,27 @@ const { staticClasses, useClasses } = createClasses("HvLoading", {
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    gap: theme.space.xs
+    gap: theme.space.xs,
+    "&[data-size=small]": {
+      "--bar-size": "2px",
+      "--size": "18px",
+      "--height": "40%"
+    }
   },
   barContainer: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-around",
-    ":has($regular)": {
-      width: 30,
-      height: 30
-    },
-    ":has($small)": {
-      "--height": "40%",
-      width: 18,
-      height: 18
-    }
+    width: "var(--size, 30px)",
+    height: "var(--size, 30px)"
   },
   loadingBar: {
     backgroundColor: "currentcolor",
     display: "inline-block",
     animation: "loading 1s ease-in-out infinite",
     // TODO: make this the default when it has better support
-    width: "round(up, 0.11em, 2px)",
+    // width: "round(up, 0.11em, 2px)",
+    width: "var(--bar-size, 4px)",
     height: "100%",
     "@keyframes loading": {
       "50%": {
@@ -44,13 +43,13 @@ const { staticClasses, useClasses } = createClasses("HvLoading", {
   overlay: {},
   blur: {},
   hidden: { display: "none" },
-  small: {
-    width: 2
-  },
-  regular: {
-    width: 4
-  },
+  /** @deprecated use data-size=small instead */
+  small: {},
+  /** @deprecated use data-size=regular instead */
+  regular: {},
+  /** @deprecated leverage data-size=small instead */
   smallColor: {},
+  /** @deprecated leverage data-size=regular instead */
   regularColor: {}
 });
 export {

package/dist/esm/ScrollToVertical/VerticalScrollListItem/VerticalScrollListItem.styles.js

@@ -24,7 +24,7 @@ const { staticClasses, useClasses } = createClasses(name, {
     fontSize: 4,
     color: theme.colors.textDisabled
   },
-  // TODO: remove in v6 (use classes.button)
+  /** @deprecated: use classes.button instead */
   text: {},
   button: {
     display: "flex",

package/dist/esm/StatusIcon/StatusIcon.styles.js

@@ -39,7 +39,7 @@ const { staticClasses, useClasses } = createClasses("HvStatusIcon", {
     ),
     [`&[data-variant="default"]`]: {
       color: theme.colors.text,
-      backgroundColor: theme.colors.bgContainerSecondary,
+      backgroundColor: theme.colors.bgPage,
       outline: `1px solid ${theme.colors.borderSubtle}`,
       [`&[data-type="simple"]`]: {
         outline: "none",

package/dist/esm/Switch/Switch.js

@@ -1,7 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from "react";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { getColor } from "@hitachivantara/uikit-styles";
 import { useControlled } from "../hooks/useControlled.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { setId } from "../utils/setId.js";
@@ -12,7 +11,6 @@ import { HvFormElement } from "../FormElement/FormElement.js";
 import { HvLabel } from "../FormElement/Label/Label.js";
 import { isInvalid } from "../FormElement/utils.js";
 import { HvWarningText } from "../FormElement/WarningText/WarningText.js";
-const isSemantical = (color) => ["positive", "negative", "warning"].includes(color);
 const HvSwitch = forwardRef(
   function HvSwitch2(props, ref) {
     const {
@@ -36,10 +34,9 @@ const HvSwitch = forwardRef(
       statusMessage,
       "aria-errormessage": ariaErrorMessage,
       inputProps,
-      color,
       ...others
     } = useDefaultProps("HvSwitch", props);
-    const { classes, cx, css } = useClasses(classesProp);
+    const { classes, cx } = useClasses(classesProp);
     const elementId = useUniqueId(id);
     const [isChecked, setIsChecked] = useControlled(checked, defaultChecked);
     const [validationState, setValidationState] = useControlled(
@@ -115,16 +112,6 @@ const HvSwitch = forwardRef(
                     "aria-describedby": ariaDescribedBy,
                     ...inputProps
                   },
-                  ...color && {
-                    classes: {
-                      switchBase: css({
-                        "&&&+.HvBaseSwitch-track,&&&.HvBaseSwitch-checked+.HvBaseSwitch-track": {
-                          backgroundColor: getColor(color),
-                          borderColor: isSemantical(color) ? getColor(`${color}Deep`) : "#00000032"
-                        }
-                      })
-                    }
-                  },
                   ...others
                 }
               )

package/dist/esm/Tag/Tag.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, isValidElement, cloneElement } from "react";
-import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, useTheme, mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { theme, getColor } from "@hitachivantara/uikit-styles";
 import { HvCheckBoxIcon } from "../BaseCheckBox/CheckBoxIcon.js";
 import { useControlled } from "../hooks/useControlled.js";
@@ -10,6 +10,12 @@ import { useClasses } from "./Tag.styles.js";
 import { staticClasses } from "./Tag.styles.js";
 import { HvButtonBase } from "../ButtonBase/ButtonBase.js";
 import { HvTypography } from "../Typography/Typography.js";
+const colorMap = {
+  positive_20: "positive",
+  negative_20: "negative",
+  warning_20: "warning",
+  neutral_20: "info"
+};
 const HvTag = forwardRef(function HvTag2(props, ref) {
   const {
     classes: classesProp,
@@ -25,7 +31,7 @@ const HvTag = forwardRef(function HvTag2(props, ref) {
     selected,
     defaultSelected = false,
     showSelectIcon = selectable,
-    color,
+    color: colorProp,
     icon: iconProp,
     deleteIcon: deleteIconProp,
     onDelete,
@@ -37,6 +43,7 @@ const HvTag = forwardRef(function HvTag2(props, ref) {
     ...others
   } = useDefaultProps("HvTag", props);
   const { classes, cx } = useClasses(classesProp);
+  const { activeTheme } = useTheme();
   const [isSelected, setIsSelected] = useControlled(
     selected,
     Boolean(defaultSelected)
@@ -45,6 +52,7 @@ const HvTag = forwardRef(function HvTag2(props, ref) {
     event.stopPropagation();
     onDelete?.(event);
   };
+  const color = activeTheme?.name === "pentahoPlus" && colorMap[colorProp] || colorProp;
   const tagColor = (
     // backwards-compatibility for `type` prop
     type === "categorical" && theme.alpha(color || "cat1", 0.2) || // use the palette color if it matches

package/dist/esm/themes/ds3.js

@@ -179,9 +179,7 @@ const ds3 = mergeTheme(ds3$1, {
     HvBaseSwitch: {
       classes: {
         root: {
-          width: "32px",
-          height: "16px",
-          borderRadius: 0,
+          padding: 0,
           "&:hover": {
             backgroundColor: "transparent"
           },
@@ -202,7 +200,8 @@ const ds3 = mergeTheme(ds3$1, {
         },
         thumb: {
           width: 12,
-          height: 12
+          height: 12,
+          left: -9
         }
       }
     },
@@ -1152,9 +1151,6 @@ const ds3 = mergeTheme(ds3$1, {
           "& button&.HvMultiButton-button&.HvMultiButton-selected": {
             height: 32
           }
-        },
-        splitDisabled: {
-          backgroundColor: theme.colors.atmo3
         }
       }
     },

package/dist/esm/themes/ds5.js

@@ -44,33 +44,33 @@ const ds5 = mergeTheme(ds5$1, {
       classes: {
         root: {
           ":where(:not(.HvButton-disabled,.HvButton-contained))": {
-            "&[data-color=warning]": { color: theme.colors.warning_140 }
+            "&[data-color=warning]": { color: theme.colors.warningDeep }
           }
         },
         contained: {
           ":where([data-color=primary]:not(.HvButton-disabled))": {
             ":hover, &:focus-visible": {
-              backgroundColor: theme.colors.primary_80,
-              borderColor: theme.colors.primary_80
+              backgroundColor: theme.colors.primaryStrong,
+              borderColor: theme.colors.primaryStrong
             }
           },
           ":where([data-color=positive]:not(.HvButton-disabled))": {
             ":hover, &:focus-visible": {
-              backgroundColor: theme.colors.positive_80,
-              borderColor: theme.colors.positive_80
+              backgroundColor: theme.colors.positiveStrong,
+              borderColor: theme.colors.positiveStrong
             }
           },
           ":where([data-color=warning]:not(.HvButton-disabled))": {
-            backgroundColor: theme.colors.warning_120,
+            backgroundColor: theme.colors.warningStrong,
             ":hover, &:focus-visible": {
-              backgroundColor: theme.colors.warning_140,
-              borderColor: theme.colors.warning_140
+              backgroundColor: theme.colors.warningDeep,
+              borderColor: theme.colors.warningDeep
             }
           },
           ":where([data-color=negative]:not(.HvButton-disabled))": {
             ":hover, &:focus-visible": {
-              backgroundColor: theme.colors.negative_80,
-              borderColor: theme.colors.negative_80
+              backgroundColor: theme.colors.negativeStrong,
+              borderColor: theme.colors.negativeStrong
             }
           }
         }
@@ -103,10 +103,10 @@ const ds5 = mergeTheme(ds5$1, {
         splitGroup: {
           // NEXT5 subtle multi-buttons have a custom background
           "& .HvButton-subtle": {
-            backgroundColor: theme.colors.atmo1
+            backgroundColor: theme.colors.bgContainer
           },
           "&& .HvButton-disabled": {
-            backgroundColor: theme.colors.atmo3
+            backgroundColor: theme.colors.bgDisabled
           }
         }
       }
@@ -131,7 +131,7 @@ const ds5 = mergeTheme(ds5$1, {
       classes: {
         root: {
           "&.HvTab-selected": {
-            color: theme.colors.secondary
+            color: theme.colors.text
           }
         }
       }
@@ -153,7 +153,7 @@ const ds5 = mergeTheme(ds5$1, {
             padding: 0
           },
           "& .HvIconContainer-root": {
-            color: `${theme.colors.secondary}!important`
+            color: `${theme.colors.text}!important`
           }
         }
       }

package/dist/esm/themes/pentahoPlus.js

@@ -112,39 +112,71 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
     HvBaseSwitch: {
       classes: {
         root: {
-          borderRadius: theme.radii.base,
+          padding: theme.space.xxs,
+          borderRadius: theme.radii.full,
           "&:hover": {
             backgroundColor: theme.colors.bgHover
           },
           "& .HvBaseSwitch-switchBase": {
             "& .HvBaseSwitch-thumb": {
               borderColor: "transparent",
-              boxShadow: `0px 1px 1px 0px ${theme.alpha(slate[700], 0.16)}`
+              backgroundColor: "#FFFFFF",
+              left: -8,
+              top: -3,
+              width: 14,
+              height: 14
             },
             "+.HvBaseSwitch-track": {
-              height: 14,
               backgroundColor: theme.colors.textDimmed,
-              borderColor: theme.colors.textSubtle
+              border: "none",
+              width: 40,
+              height: 18
             },
             "&.HvBaseSwitch-checked": {
-              "& .HvBaseSwitch-thumb": {
-                border: `1px solid ${theme.colors.bgContainer}`
-              },
               "+.HvBaseSwitch-track": {
-                borderColor: theme.colors.primaryStrong
+                backgroundColor: theme.colors.positive
+              },
+              "& .HvBaseSwitch-thumb": {
+                left: -2
               }
             },
             "&.HvBaseSwitch-disabled": {
               "& .HvBaseSwitch-thumb": {
-                backgroundColor: theme.colors.borderDisabled,
-                borderColor: theme.colors.borderDisabled
+                borderColor: theme.colors.textDisabled
               },
               "+.HvBaseSwitch-track": {
-                borderColor: theme.colors.borderDisabled,
-                backgroundColor: theme.colors.bgDisabled
+                backgroundColor: theme.colors.bgDisabled,
+                border: "none"
+              }
+            },
+            "&[data-size=medium]": {
+              "+.HvBaseSwitch-track": {
+                width: 48,
+                height: 24
+              },
+              "& .HvBaseSwitch-thumb": {
+                left: -5,
+                top: 0,
+                width: 16,
+                height: 16
+              },
+              "&.HvBaseSwitch-checked .HvBaseSwitch-thumb": {
+                left: 3,
+                top: 0
               }
             }
           }
+        },
+        readOnly: {
+          ":hover": {
+            backgroundColor: "transparent"
+          },
+          "& .HvBaseSwitch-switchBase + .HvBaseSwitch-track": {
+            backgroundColor: theme.colors.border
+          },
+          "& .HvBaseSwitch-switchBase.HvBaseSwitch-checked + .HvBaseSwitch-track": {
+            backgroundColor: theme.mix("positive", 0.5, "dimmer")
+          }
         }
       }
     },
@@ -152,7 +184,6 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
       classes: {
         content: {
           backgroundColor: theme.colors.bgPage
-          // = bgContainerSecondary
         }
       }
     },
@@ -360,7 +391,7 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
             },
             "&[data-color=secondary]": {
               borderColor: theme.colors.border,
-              backgroundColor: theme.colors.bgContainerSecondary
+              backgroundColor: theme.colors.bgPage
             },
             ":hover": {
               backgroundColor: theme.colors.primaryDimmed