@hitachivantara/uikit-react-core 5.103.0 → 5.104.1

package/dist/cjs/DropDownMenu/DropDownMenu.styles.cjs

@@ -20,7 +20,9 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDropDownM
   menuListRoot: {
     padding: uikitStyles.theme.space.sm
   },
-  menuList: {}
+  menuList: {
+    overflowClipMargin: uikitStyles.theme.space.sm
+  }
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Focus/Focus.cjs

@@ -84,13 +84,18 @@ const HvFocus = ({
     setHasRunConfig(true);
   };
   const addFocusClass = (evt) => {
-    classes.focused.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
+    if (focusOnClick) {
+      classes.focused.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
+    } else {
+      classes.focusedVisible.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
+    }
     evt.currentTarget.classList.add("HvIsFocused");
     classes?.focus?.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
   };
   const removeFocusClass = () => {
     getFocuses().forEach((element) => {
       classes.focused.split(" ").forEach((c) => element.classList.remove(c));
+      classes.focusedVisible.split(" ").forEach((c) => element.classList.remove(c));
       element.classList.remove("HvIsFocused");
       classes?.focus?.split(" ").forEach((c) => element.classList.remove(c));
     });
@@ -109,9 +114,6 @@ const HvFocus = ({
     if (strategy === "grid" && hasCard) return;
     utils.setFocusTo(evt.currentTarget);
     setTabIndex(evt.currentTarget, 0);
-    if (!focusOnClick) {
-      removeFocusClass();
-    }
   };
   const focusAndUpdateIndex = (nextFocus, previousFocus, focusesList) => {
     if (focusesList?.includes(previousFocus)) {

package/dist/cjs/Focus/Focus.styles.cjs

@@ -21,6 +21,20 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvFocus", {
       ...focusUtils.outlineStyles
     }
   },
+  focusedVisible: {
+    "&:focus-visible": {
+      ...focusUtils.outlineStyles,
+      "@media (-webkit-min-device-pixel-ratio:0)": {
+        ...focusUtils.outlineStyles
+      }
+    },
+    "&:focus-within:has(:focus-visible)": {
+      ...focusUtils.outlineStyles,
+      "@media (-webkit-min-device-pixel-ratio:0)": {
+        ...focusUtils.outlineStyles
+      }
+    }
+  },
   focus: {}
 });
 exports.staticClasses = staticClasses;

package/dist/cjs/List/List.cjs

@@ -160,6 +160,7 @@ const HvList = (props) => {
       i
     );
   };
+  const renderSeparator = (index) => /* @__PURE__ */ jsxRuntime.jsx("hr", { className: classes.separator }, `separator-${index}`);
   const filteredList = list.filter((it) => !it.isHidden);
   const anySelected = list.map((item) => item.selected && !item.disabled).reduce((result, selected) => result || selected, false);
   const selectedItemIndex = list.findIndex((item) => item.selected);
@@ -215,6 +216,16 @@ const HvList = (props) => {
     condensed,
     ariaMultiSelectable
   ]);
+  const renderListWithSeparators = () => {
+    const items = [];
+    filteredList.forEach((item, i) => {
+      items.push(renderListItem(item, i));
+      if (item.separator && i < filteredList.length - 1) {
+        items.push(renderSeparator(i));
+      }
+    });
+    return items;
+  };
   if (filteredList.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     multiSelect && useSelector && showSelectAll && renderSelectAll(),
@@ -229,7 +240,7 @@ const HvList = (props) => {
         disableGutters: useSelector,
         "aria-multiselectable": ariaMultiSelectable,
         ...others,
-        children: filteredList.map((item, i) => renderListItem(item, i))
+        children: renderListWithSeparators()
       }
     ) : /* @__PURE__ */ jsxRuntime.jsx(
       reactWindow.FixedSizeList,

package/dist/cjs/List/List.styles.cjs

@@ -29,6 +29,12 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvList", {
       backgroundColor: uikitStyles.theme.colors.bgHover
     }
   },
+  separator: {
+    height: 1,
+    backgroundColor: uikitStyles.theme.colors.border,
+    margin: `${uikitStyles.theme.space.xs} calc(${uikitStyles.theme.space.sm} * -1)`,
+    border: "none"
+  },
   link: {
     ...uikitStyles.theme.typography.body,
     textDecoration: "none",

package/dist/cjs/ListContainer/ListItem/ListItem.styles.cjs

@@ -22,13 +22,18 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvListItem"
     "&$condensed": {
       marginBottom: 0
     },
-    "&.HvIsFocused": {
+    "&.HvIsFocused:focus-visible": {
       ...focusUtils.outlineStyles,
       backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
       zIndex: 2
     }
   },
-  focus: { backgroundColor: uikitStyles.theme.colors.bgPageSecondary, zIndex: 2 },
+  focus: {
+    "&:focus-visible": {
+      backgroundColor: uikitStyles.theme.colors.bgPageSecondary,
+      zIndex: 2
+    }
+  },
   gutters: {
     padding: `0 ${uikitStyles.theme.space.xs}`,
     ":has($startAdornment)": {

package/dist/cjs/Section/Section.styles.cjs

@@ -31,6 +31,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSection",
     }
   },
   content: {
+    backgroundColor: uikitStyles.theme.colors.bgPage,
     padding: uikitStyles.theme.space.sm,
     borderRadius: "inherit",
     borderColor: "inherit",

package/dist/cjs/StatusIcon/StatusIcon.cjs

@@ -2,6 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const CheckCircle = require("@phosphor-icons/react/CheckCircle");
+const Question = require("@phosphor-icons/react/Question");
+const Warning = require("@phosphor-icons/react/Warning");
+const WarningDiamond = require("@phosphor-icons/react/WarningDiamond");
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const icons = require("../icons.cjs");
 const StatusIcon_styles = require("./StatusIcon.styles.cjs");
@@ -12,6 +16,12 @@ const variantIconMap = {
   error: "Fail",
   info: "Info"
 };
+const pentahoIconsMap = {
+  success: (props) => /* @__PURE__ */ jsxRuntime.jsx(CheckCircle.CheckCircle, { ...props }),
+  warning: (props) => /* @__PURE__ */ jsxRuntime.jsx(Warning.Warning, { ...props }),
+  error: (props) => /* @__PURE__ */ jsxRuntime.jsx(WarningDiamond.WarningDiamond, { ...props }),
+  info: (props) => /* @__PURE__ */ jsxRuntime.jsx(Question.Question, { ...props })
+};
 const HvStatusIcon = React.forwardRef(function HvStatusIcon2(props, ref) {
   const {
     classes: classesProp,
@@ -19,9 +29,11 @@ const HvStatusIcon = React.forwardRef(function HvStatusIcon2(props, ref) {
     variant = "default",
     customIcon,
     size = "sm",
-    type = "full"
+    type = "full",
+    weight = "regular"
   } = uikitReactUtils.useDefaultProps("HvStatusIcon", props);
   const { classes, cx } = StatusIcon_styles.useClasses(classesProp);
+  const { selectedTheme } = uikitReactUtils.useTheme();
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -30,7 +42,9 @@ const HvStatusIcon = React.forwardRef(function HvStatusIcon2(props, ref) {
       "data-type": type,
       "data-size": size,
       className: cx(classes.root, className),
-      children: /* @__PURE__ */ jsxRuntime.jsx(IconContainer.HvIconContainer, { size, children: customIcon || /* @__PURE__ */ jsxRuntime.jsx(
+      children: selectedTheme === "pentahoPlus" && !customIcon ? /* @__PURE__ */ jsxRuntime.jsx(IconContainer.HvIconContainer, { size, children: pentahoIconsMap[variant]?.({
+        weight
+      }) }) : /* @__PURE__ */ jsxRuntime.jsx(IconContainer.HvIconContainer, { size, children: customIcon || /* @__PURE__ */ jsxRuntime.jsx(
         icons.HvIcon,
         {
           compact: true,

package/dist/cjs/themes/pentahoPlus.cjs

@@ -200,7 +200,12 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
     HvSection: {
       classes: {
         content: {
-          backgroundColor: uikitStyles.theme.colors.bgPage
+          backgroundColor: uikitStyles.theme.colors.bgContainer
+        },
+        raisedHeader: {
+          "& .HvSection-header": {
+            boxShadow: "none"
+          }
         }
       }
     },
@@ -670,7 +675,7 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
             overflow: "hidden",
             height: "fit-content",
             "--rt": uikitStyles.theme.radii.large,
-            "& .HvCard-semanticContainer": {
+            "& .HvCard-semanticBar": {
               display: "none"
             }
           },

package/dist/esm/DropDownMenu/DropDownMenu.styles.js

@@ -18,7 +18,9 @@ const { staticClasses, useClasses } = createClasses("HvDropDownMenu", {
   menuListRoot: {
     padding: theme.space.sm
   },
-  menuList: {}
+  menuList: {
+    overflowClipMargin: theme.space.sm
+  }
 });
 export {
   staticClasses,

package/dist/esm/Focus/Focus.js

@@ -82,13 +82,18 @@ const HvFocus = ({
     setHasRunConfig(true);
   };
   const addFocusClass = (evt) => {
-    classes.focused.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
+    if (focusOnClick) {
+      classes.focused.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
+    } else {
+      classes.focusedVisible.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
+    }
     evt.currentTarget.classList.add("HvIsFocused");
     classes?.focus?.split(" ").forEach((c) => evt.currentTarget.classList.add(c));
   };
   const removeFocusClass = () => {
     getFocuses().forEach((element) => {
       classes.focused.split(" ").forEach((c) => element.classList.remove(c));
+      classes.focusedVisible.split(" ").forEach((c) => element.classList.remove(c));
       element.classList.remove("HvIsFocused");
       classes?.focus?.split(" ").forEach((c) => element.classList.remove(c));
     });
@@ -107,9 +112,6 @@ const HvFocus = ({
     if (strategy === "grid" && hasCard) return;
     setFocusTo(evt.currentTarget);
     setTabIndex(evt.currentTarget, 0);
-    if (!focusOnClick) {
-      removeFocusClass();
-    }
   };
   const focusAndUpdateIndex = (nextFocus, previousFocus, focusesList) => {
     if (focusesList?.includes(previousFocus)) {

package/dist/esm/Focus/Focus.styles.js

@@ -19,6 +19,20 @@ const { staticClasses, useClasses } = createClasses("HvFocus", {
       ...outlineStyles
     }
   },
+  focusedVisible: {
+    "&:focus-visible": {
+      ...outlineStyles,
+      "@media (-webkit-min-device-pixel-ratio:0)": {
+        ...outlineStyles
+      }
+    },
+    "&:focus-within:has(:focus-visible)": {
+      ...outlineStyles,
+      "@media (-webkit-min-device-pixel-ratio:0)": {
+        ...outlineStyles
+      }
+    }
+  },
   focus: {}
 });
 export {

package/dist/esm/List/List.js

@@ -159,6 +159,7 @@ const HvList = (props) => {
       i
     );
   };
+  const renderSeparator = (index) => /* @__PURE__ */ jsx("hr", { className: classes.separator }, `separator-${index}`);
   const filteredList = list.filter((it) => !it.isHidden);
   const anySelected = list.map((item) => item.selected && !item.disabled).reduce((result, selected) => result || selected, false);
   const selectedItemIndex = list.findIndex((item) => item.selected);
@@ -214,6 +215,16 @@ const HvList = (props) => {
     condensed,
     ariaMultiSelectable
   ]);
+  const renderListWithSeparators = () => {
+    const items = [];
+    filteredList.forEach((item, i) => {
+      items.push(renderListItem(item, i));
+      if (item.separator && i < filteredList.length - 1) {
+        items.push(renderSeparator(i));
+      }
+    });
+    return items;
+  };
   if (filteredList.length === 0) return null;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     multiSelect && useSelector && showSelectAll && renderSelectAll(),
@@ -228,7 +239,7 @@ const HvList = (props) => {
         disableGutters: useSelector,
         "aria-multiselectable": ariaMultiSelectable,
         ...others,
-        children: filteredList.map((item, i) => renderListItem(item, i))
+        children: renderListWithSeparators()
       }
     ) : /* @__PURE__ */ jsx(
       FixedSizeList,

package/dist/esm/List/List.styles.js

@@ -27,6 +27,12 @@ const { staticClasses, useClasses } = createClasses("HvList", {
       backgroundColor: theme.colors.bgHover
     }
   },
+  separator: {
+    height: 1,
+    backgroundColor: theme.colors.border,
+    margin: `${theme.space.xs} calc(${theme.space.sm} * -1)`,
+    border: "none"
+  },
   link: {
     ...theme.typography.body,
     textDecoration: "none",

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

@@ -20,13 +20,18 @@ const { staticClasses, useClasses } = createClasses("HvListItem", {
     "&$condensed": {
       marginBottom: 0
     },
-    "&.HvIsFocused": {
+    "&.HvIsFocused:focus-visible": {
       ...outlineStyles,
       backgroundColor: theme.colors.bgPageSecondary,
       zIndex: 2
     }
   },
-  focus: { backgroundColor: theme.colors.bgPageSecondary, zIndex: 2 },
+  focus: {
+    "&:focus-visible": {
+      backgroundColor: theme.colors.bgPageSecondary,
+      zIndex: 2
+    }
+  },
   gutters: {
     padding: `0 ${theme.space.xs}`,
     ":has($startAdornment)": {

package/dist/esm/Section/Section.styles.js

@@ -29,6 +29,7 @@ const { staticClasses, useClasses } = createClasses("HvSection", {
     }
   },
   content: {
+    backgroundColor: theme.colors.bgPage,
     padding: theme.space.sm,
     borderRadius: "inherit",
     borderColor: "inherit",

package/dist/esm/StatusIcon/StatusIcon.js

@@ -1,6 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { CheckCircle } from "@phosphor-icons/react/CheckCircle";
+import { Question } from "@phosphor-icons/react/Question";
+import { Warning } from "@phosphor-icons/react/Warning";
+import { WarningDiamond } from "@phosphor-icons/react/WarningDiamond";
+import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../icons.js";
 import { useClasses } from "./StatusIcon.styles.js";
 import { staticClasses } from "./StatusIcon.styles.js";
@@ -11,6 +15,12 @@ const variantIconMap = {
   error: "Fail",
   info: "Info"
 };
+const pentahoIconsMap = {
+  success: (props) => /* @__PURE__ */ jsx(CheckCircle, { ...props }),
+  warning: (props) => /* @__PURE__ */ jsx(Warning, { ...props }),
+  error: (props) => /* @__PURE__ */ jsx(WarningDiamond, { ...props }),
+  info: (props) => /* @__PURE__ */ jsx(Question, { ...props })
+};
 const HvStatusIcon = forwardRef(function HvStatusIcon2(props, ref) {
   const {
     classes: classesProp,
@@ -18,9 +28,11 @@ const HvStatusIcon = forwardRef(function HvStatusIcon2(props, ref) {
     variant = "default",
     customIcon,
     size = "sm",
-    type = "full"
+    type = "full",
+    weight = "regular"
   } = useDefaultProps("HvStatusIcon", props);
   const { classes, cx } = useClasses(classesProp);
+  const { selectedTheme } = useTheme();
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -29,7 +41,9 @@ const HvStatusIcon = forwardRef(function HvStatusIcon2(props, ref) {
       "data-type": type,
       "data-size": size,
       className: cx(classes.root, className),
-      children: /* @__PURE__ */ jsx(HvIconContainer, { size, children: customIcon || /* @__PURE__ */ jsx(
+      children: selectedTheme === "pentahoPlus" && !customIcon ? /* @__PURE__ */ jsx(HvIconContainer, { size, children: pentahoIconsMap[variant]?.({
+        weight
+      }) }) : /* @__PURE__ */ jsx(HvIconContainer, { size, children: customIcon || /* @__PURE__ */ jsx(
         HvIcon,
         {
           compact: true,

package/dist/esm/themes/pentahoPlus.js

@@ -198,7 +198,12 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
     HvSection: {
       classes: {
         content: {
-          backgroundColor: theme.colors.bgPage
+          backgroundColor: theme.colors.bgContainer
+        },
+        raisedHeader: {
+          "& .HvSection-header": {
+            boxShadow: "none"
+          }
         }
       }
     },
@@ -668,7 +673,7 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
             overflow: "hidden",
             height: "fit-content",
             "--rt": theme.radii.large,
-            "& .HvCard-semanticContainer": {
+            "& .HvCard-semanticBar": {
               display: "none"
             }
           },

package/dist/types/index.d.ts

@@ -51,6 +51,7 @@ import { HvThemeColorModeStructure } from '@hitachivantara/uikit-styles';
 import { HvThemeContext } from '@hitachivantara/uikit-react-shared';
 import { HvThemeContextValue } from '@hitachivantara/uikit-react-shared';
 import { HvThemeStructure } from '@hitachivantara/uikit-styles';
+import { IconWeight } from '@phosphor-icons/react';
 import { IdType as IdType_2 } from 'react-table';
 import { InputBaseProps } from '@mui/material/InputBase';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
@@ -938,6 +939,7 @@ export declare const focusClasses: {
     disabled: string;
     focusDisabled: string;
     focused: string;
+    focusedVisible: string;
     focus: string;
 };
 
@@ -4534,6 +4536,7 @@ export declare interface HvListProps extends HvBaseProps<HTMLUListElement, "onCh
      * - icon: The icon.
      * - showNavIcon: If true renders the navigation icon on the right.
      * - path: The path to navigate to.
+     * - separator: Whether to show a separator after this list item.
      */
     values: HvListValue[];
     /** If true renders a multi select list. */
@@ -4582,6 +4585,8 @@ export declare interface HvListValue extends Record<string, any> {
     path?: string;
     params?: object;
     tabIndex?: number;
+    /** Whether to show a separator after this list item */
+    separator?: boolean;
 }
 
 /**
@@ -6055,6 +6060,8 @@ export declare interface HvStatusIconProps extends HvBaseProps {
     size?: HvSize;
     /** The type of status icon. */
     type?: HvStatusIconType;
+    /** Icon style */
+    weight?: IconWeight;
     /** A Jss Object used to override or extend the styles applied to the component. */
     classes?: HvStatusIconClasses;
 }
@@ -7639,6 +7646,7 @@ export declare const listClasses: {
     truncate: string;
     item: string;
     itemSelector: string;
+    separator: string;
     link: string;
     selectAllSelector: string;
 };
@@ -9410,13 +9418,14 @@ declare const useClasses_39: (classesProp?: Partial<Record<"root" | "invalid" |
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_4: (classesProp?: Partial<Record<"disabled" | "selected" | "root" | "focus" | "focused" | "focusDisabled", string>>, addStatic?: boolean) => {
+declare const useClasses_4: (classesProp?: Partial<Record<"disabled" | "selected" | "root" | "focus" | "focused" | "focusDisabled" | "focusedVisible", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         selected: string;
         disabled: string;
         focusDisabled: string;
         focused: string;
+        focusedVisible: string;
         focus: string;
     };
     readonly css: any;
@@ -10226,7 +10235,7 @@ declare const useClasses_87: (classesProp?: Partial<Record<"a", string>>, addSta
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_88: (classesProp?: Partial<Record<"link" | "root" | "item" | "virtualizedRoot" | "selectorRoot" | "selectorContainer" | "box" | "truncate" | "itemSelector" | "selectAllSelector", string>>, addStatic?: boolean) => {
+declare const useClasses_88: (classesProp?: Partial<Record<"link" | "separator" | "root" | "item" | "virtualizedRoot" | "selectorRoot" | "selectorContainer" | "box" | "truncate" | "itemSelector" | "selectAllSelector", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         virtualizedRoot: string;
@@ -10236,6 +10245,7 @@ declare const useClasses_88: (classesProp?: Partial<Record<"link" | "root" | "it
         truncate: string;
         item: string;
         itemSelector: string;
+        separator: string;
         link: string;
         selectAllSelector: string;
     };
@@ -10243,7 +10253,7 @@ declare const useClasses_88: (classesProp?: Partial<Record<"link" | "root" | "it
     readonly cx: (...args: any) => string;
 };
 
-declare const useClasses_89: (classesProp?: Partial<Record<"overlay" | "label" | "small" | "hidden" | "root" | "blur" | "barContainer" | "loadingBar" | "regular" | "smallColor" | "regularColor", string>>, addStatic?: boolean) => {
+declare const useClasses_89: (classesProp?: Partial<Record<"overlay" | "label" | "small" | "hidden" | "root" | "blur" | "regular" | "barContainer" | "loadingBar" | "smallColor" | "regularColor", string>>, addStatic?: boolean) => {
     readonly classes: {
         root: string;
         barContainer: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.103.0",
+  "version": "5.104.1",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Core React components.",
@@ -32,11 +32,12 @@
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-shared": "^5.5.4",
-    "@hitachivantara/uikit-react-utils": "^0.2.44",
-    "@hitachivantara/uikit-styles": "^5.50.2",
+    "@hitachivantara/uikit-react-shared": "^5.5.5",
+    "@hitachivantara/uikit-react-utils": "^0.2.45",
+    "@hitachivantara/uikit-styles": "^5.51.0",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
+    "@phosphor-icons/react": "^2.1.7",
     "@popperjs/core": "^2.11.8",
     "@react-aria/datepicker": "^3.9.0",
     "@react-stately/datepicker": "^3.9.0",
@@ -61,7 +62,7 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "5799882b08854f3714634028eddac77ca7ece8ea",
+  "gitHead": "108aeb035cc208aa2603071db6d10135d1501f7e",
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",