@hitachivantara/uikit-react-core 5.95.0 → 5.96.0

package/dist/cjs/utils/theme.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitStyles = require("@hitachivantara/uikit-styles");
+const index = require("../themes/index.cjs");
 const document = require("./document.cjs");
 const setElementAttrs = (themeName, modeName, colorScheme, themeRootId) => {
   const element = document.getContainerElement(themeRootId);
@@ -37,14 +37,14 @@ const createTheme = (props) => {
     inheritColorModes = true,
     ...customizations
   } = props;
-  const customizedTheme = customizations ? applyThemeCustomizations(uikitStyles.themes[base], customizations) : { ...uikitStyles.themes[base] };
+  const customizedTheme = customizations ? applyThemeCustomizations(index.themes[base], customizations) : { ...index.themes[base] };
   customizedTheme.name = name.trim();
   customizedTheme.base = base;
   if (customizations) {
     Object.keys(customizedTheme.colors.modes).forEach((mode) => {
-      if (!uikitStyles.themes[base].colors.modes[mode]) {
+      if (!index.themes[base].colors.modes[mode]) {
         customizedTheme.colors.modes[mode] = {
-          ...uikitStyles.themes[base].colors.modes.dawn,
+          ...index.themes[base].colors.modes.dawn,
           ...customizedTheme.colors.modes[mode]
         };
       }
@@ -75,7 +75,7 @@ const processThemes = (themesList) => {
     });
     return list;
   }
-  return [uikitStyles.themes.ds5];
+  return [index.themes.ds5];
 };
 const getVarValue = (cssVar, rootElementId) => {
   const root = document.getElementById(rootElementId || "hv-root");

package/dist/esm/Avatar/Avatar.styles.js

@@ -35,7 +35,7 @@ const { staticClasses, useClasses } = createClasses("HvAvatar", {
   md: { width: 40, height: 40, fontSize: "1rem" },
   lg: { width: 52, height: 52, fontSize: "1.5rem" },
   xl: { width: 88, height: 88, fontSize: "2rem" },
-  avatar: {},
+  avatar: { borderRadius: "inherit" },
   badge: {
     width: 8,
     height: 8,

package/dist/esm/Badge/Badge.styles.js

@@ -7,7 +7,7 @@ const { staticClasses, useClasses } = createClasses("HvBadge", {
     ":has($badgeIcon)": {
       width: "fit-content",
       height: "fit-content",
-      "&>div:first-child": {
+      "&>div:first-of-type": {
         minWidth: 32,
         minHeight: 32,
         "--icsize": "100%"

package/dist/esm/ListContainer/ListItem/ListItem.js

@@ -5,21 +5,6 @@ import { useClasses } from "./ListItem.styles.js";
 import { staticClasses } from "./ListItem.styles.js";
 import ListContext from "../ListContext/ListContext.js";
 import { HvFocus } from "../../Focus/Focus.js";
-const applyClassNameAndStateToElement = (element, selected, disabled, onClick, className) => {
-  if (element == null) return null;
-  return cloneElement(element, {
-    className,
-    checked: !!selected,
-    disabled,
-    onChange: onClick
-  });
-};
-const applyClassNameToElement = (element, className) => {
-  if (element == null) return null;
-  return cloneElement(element, {
-    className
-  });
-};
 const HvListItem = forwardRef(function HvListItem2(props, ref) {
   const {
     classes: classesProp,
@@ -58,39 +43,34 @@ const HvListItem = forwardRef(function HvListItem2(props, ref) {
     },
     [disabled, onClick]
   );
-  const clonedStartAdornment = useMemo(
-    () => applyClassNameAndStateToElement(
-      startAdornment,
-      selected,
-      disabled,
-      handleClick,
-      cx(
-        classes.startAdornment,
-        { [classes.disabled]: disabled },
-        isValidElement(startAdornment) ? startAdornment.props.className : void 0
-      )
-    ),
-    [
-      cx,
-      classes?.startAdornment,
-      classes?.disabled,
+  const clonedStartAdornment = useMemo(() => {
+    if (!isValidElement(startAdornment)) return startAdornment;
+    return cloneElement(startAdornment, {
+      className: cx(classes.startAdornment, startAdornment.props.className, {
+        // TODO: remove 👇 props below
+        [classes.disabled]: disabled
+      }),
+      checked: !!selected,
       disabled,
-      handleClick,
-      selected,
-      startAdornment
-    ]
-  );
-  const clonedEndAdornment = useMemo(
-    () => applyClassNameToElement(
-      endAdornment,
-      cx(
-        classes.endAdornment,
-        { [classes.disabled]: disabled },
-        isValidElement(endAdornment) ? endAdornment.props.className : void 0
-      )
-    ),
-    [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]
-  );
+      onChange: handleClick
+    });
+  }, [
+    cx,
+    classes?.startAdornment,
+    classes?.disabled,
+    disabled,
+    handleClick,
+    selected,
+    startAdornment
+  ]);
+  const clonedEndAdornment = useMemo(() => {
+    if (!isValidElement(endAdornment)) return endAdornment;
+    return cloneElement(endAdornment, {
+      className: cx(classes.endAdornment, endAdornment.props.className, {
+        [classes.disabled]: disabled
+      })
+    });
+  }, [cx, classes?.endAdornment, classes?.disabled, disabled, endAdornment]);
   const roleOptionAriaProps = role === "option" || role === "menuitem" ? {
     "aria-disabled": disabled || void 0,
     "aria-selected": selected

package/dist/esm/ListContainer/ListItem/ListItem.styles.js

@@ -27,14 +27,12 @@ const { staticClasses, useClasses } = createClasses("HvListItem", {
     }
   },
   focus: { backgroundColor: theme.colors.bgPageSecondary, zIndex: 2 },
-  startAdornment: {},
-  endAdornment: {},
   gutters: {
     padding: `0 ${theme.space.xs}`,
-    "&$withStartAdornment": {
+    ":has($startAdornment)": {
       paddingLeft: 0
     },
-    "&$withEndAdornment": {
+    ":has($endAdornment)": {
       paddingRight: 0
     }
   },
@@ -53,22 +51,16 @@ const { staticClasses, useClasses } = createClasses("HvListItem", {
     color: theme.colors.textDisabled,
     backgroundColor: theme.colors.bgDisabled
   },
-  withStartAdornment: {
-    "& > div": {
-      float: "left"
-    },
-    "& svg": {
-      boxShadow: "none !important",
-      outline: "none !important"
-    }
+  startAdornment: {
+    float: "left"
   },
-  withEndAdornment: {
-    "& > div": { float: "right" },
-    "& svg": {
-      boxShadow: "none !important",
-      outline: "none !important"
-    }
-  }
+  endAdornment: {
+    float: "right"
+  },
+  /** @deprecated use `:has($startAdornment)` instead */
+  withStartAdornment: {},
+  /** @deprecated use `:has($endAdornment)` instead */
+  withEndAdornment: {}
 });
 export {
   staticClasses,

package/dist/esm/Typography/Typography.js

@@ -12,9 +12,9 @@ const HvTypographyMap = {
   title4: "h4",
   body: "p",
   label: "span",
-  captionLabel: "p",
-  caption1: "p",
-  caption2: "p",
+  captionLabel: "div",
+  caption1: "div",
+  caption2: "div",
   // LEGACY
   "5xlTitle": "h1",
   "4xlTitle": "h1",

package/dist/esm/index.js

@@ -1,5 +1,6 @@
-import { ds3, ds5, pentahoPlus, theme, themes } from "@hitachivantara/uikit-styles";
+import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses, useCss, useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
+import { themes } from "./themes/index.js";
 import { HvFormElement } from "./FormElement/FormElement.js";
 import { useClickOutside } from "./hooks/useClickOutside.js";
 import { useComputation } from "./hooks/useComputation.js";
@@ -27,6 +28,9 @@ import { decreaseSize, increaseSize } from "./utils/sizes.js";
 import { createTheme, getVarValue, processThemes, setElementAttrs } from "./utils/theme.js";
 import { useSavedState } from "./utils/useSavedState.js";
 import { uniqueId } from "./utils/helpers.js";
+import { ds3 } from "./themes/ds3.js";
+import { ds5 } from "./themes/ds5.js";
+import { pentahoPlus } from "./themes/pentahoPlus.js";
 import { typographyVariants } from "./Typography/utils.js";
 import { staticClasses } from "./Typography/Typography.styles.js";
 import { HvTypography } from "./Typography/Typography.js";