@hitachivantara/uikit-react-core 5.98.0 → 5.99.0

package/dist/cjs/themes/pentahoPlus.cjs

@@ -59,7 +59,7 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
         ),
         message: {
           "&&": {
-            color: uikitStyles.theme.colors.secondary
+            color: uikitStyles.theme.colors.text
           }
         },
         messageIcon: {
@@ -69,7 +69,7 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
           color: "var(--title)"
         },
         actionClose: {
-          color: uikitStyles.theme.colors.secondary
+          color: uikitStyles.theme.colors.text
         }
       }
     },
@@ -93,7 +93,7 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
         },
         checked: {
           "--bg-color": uikitStyles.theme.colors.primary,
-          color: uikitStyles.theme.colors.atmo1
+          color: uikitStyles.theme.colors.bgContainer
         }
       }
     },
@@ -150,6 +150,14 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
         }
       }
     },
+    HvSection: {
+      classes: {
+        content: {
+          backgroundColor: uikitStyles.theme.colors.bgPage
+          // = bgContainerSecondary
+        }
+      }
+    },
     HvSelect: {
       classes: {
         root: {
@@ -293,7 +301,7 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
         button: {
           borderRadius: 2,
           "&:focus": {
-            borderColor: uikitStyles.theme.colors.secondary
+            borderColor: uikitStyles.theme.colors.text
           }
         },
         inputRoot: {
@@ -437,6 +445,25 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
         }
       }
     },
+    HvDialog: {
+      classes: {
+        paper: {
+          borderRadius: uikitStyles.theme.radii.large
+        },
+        statusBar: {
+          border: "none",
+          borderTopLeftRadius: uikitStyles.theme.radii.large,
+          borderTopRightRadius: uikitStyles.theme.radii.large
+        }
+      }
+    },
+    HvDialogActions: {
+      classes: {
+        root: {
+          borderTop: "none"
+        }
+      }
+    },
     HvDropdownButton: {
       classes: {
         disabled: {
@@ -460,7 +487,7 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
     HvHeader: {
       classes: {
         root: {
-          borderBottom: `1px solid ${uikitStyles.theme.colors.atmo3}`,
+          borderBottom: `1px solid ${uikitStyles.theme.colors.borderSubtle}`,
           boxShadow: "none"
         }
       }
@@ -468,7 +495,7 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
     HvHeaderBrand: {
       classes: {
         separator: {
-          backgroundColor: uikitStyles.theme.colors.atmo4,
+          backgroundColor: uikitStyles.theme.colors.border,
           margin: uikitStyles.theme.spacing(0, "md"),
           height: 32
         }
@@ -478,16 +505,16 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
       classes: {
         active: {
           boxShadow: "none",
-          borderBottom: `1px solid ${uikitStyles.theme.colors.atmo3}`
+          borderBottom: `1px solid ${uikitStyles.theme.colors.borderSubtle}`
         },
         list: {
           "& li:hover > .HvHeader-MenuBar-hidden": {
             boxShadow: "none",
-            borderBottom: `1px solid ${uikitStyles.theme.colors.atmo3}`
+            borderBottom: `1px solid ${uikitStyles.theme.colors.borderSubtle}`
           },
           "& li:focus-within > .HvHeader-MenuBar-hidden": {
             boxShadow: "none",
-            borderBottom: `1px solid ${uikitStyles.theme.colors.atmo3}`
+            borderBottom: `1px solid ${uikitStyles.theme.colors.borderSubtle}`
           }
         }
       }
@@ -496,7 +523,7 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
       classes: {
         root: {
           width: 280,
-          color: uikitStyles.theme.colors.base_light,
+          color: uikitStyles.theme.colors.textLight,
           backgroundColor: uikitStyles.slate[900],
           borderRight: `1px solid ${uikitStyles.slate[500]}`,
           "& > :not(nav:first-of-type)": {
@@ -612,12 +639,14 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
         },
         selectable: {
           ":hover": {
-            outlineColor: uikitStyles.theme.colors.bgHover,
-            backgroundColor: uikitStyles.theme.colors.primaryDimmed
+            outlineColor: uikitStyles.theme.colors.primarySubtle,
+            backgroundColor: uikitStyles.theme.colors.bgHover
           }
         },
         selected: {
-          outlineColor: uikitStyles.theme.colors.primaryDeep
+          "&,&:hover,&:focus": {
+            outlineColor: uikitStyles.theme.colors.primary
+          }
         },
         semanticBar: {
           "--bar-height": "2px",
@@ -629,8 +658,13 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
       classes: {
         root: {
           flexDirection: "row-reverse",
-          padding: uikitStyles.theme.spacing("xs", "sm"),
-          gap: 0
+          padding: uikitStyles.theme.spacing("xs", "sm")
+        },
+        subheader: {
+          color: uikitStyles.theme.colors.textSubtle
+        },
+        action: {
+          alignSelf: "center"
         }
       }
     },
@@ -645,7 +679,7 @@ const pentahoPlus = uikitStyles.mergeTheme(uikitStyles.pentahoPlus, {
       }
     },
     HvFooter: {
-      name: "Pentaho+"
+      name: "Pentaho"
     },
     HvTabs: {
       classes: {

package/dist/esm/AppSwitcher/Action/Action.js

@@ -70,7 +70,10 @@ const HvAppSwitcherAction = ({
       disabled,
       className: cx(
         classes.root,
-        { [classes.disabled]: disabled, [classes.selected]: isSelected },
+        {
+          [classes.selected]: isSelected,
+          [classes.disabled]: disabled
+        },
         className
       ),
       children: /* @__PURE__ */ jsxs(

package/dist/esm/BaseRadio/BaseRadio.js

@@ -56,10 +56,10 @@ const HvBaseRadio = forwardRef(
         className: cx(
           classes.root,
           {
-            [classes.disabled]: disabled,
             [classes.focusVisible]: focusVisible,
             [classes.checked]: checked,
-            [classes.semantic]: semantic
+            [classes.semantic]: semantic,
+            [classes.disabled]: disabled
           },
           className
         ),

package/dist/esm/BaseSwitch/BaseSwitch.js

@@ -57,9 +57,9 @@ const HvBaseSwitch = forwardRef(
         className: cx(
           classes.root,
           {
-            [classes.disabled]: disabled,
+            [classes.focusVisible]: focusVisible,
             [classes.readOnly]: readOnly,
-            [classes.focusVisible]: focusVisible
+            [classes.disabled]: disabled
           },
           className
         ),

package/dist/esm/Card/Header/Header.styles.js

@@ -4,7 +4,9 @@ const { staticClasses, useClasses } = createClasses("HvCardHeader", {
   root: {
     position: "relative",
     padding: theme.spacing("12px", "xs", "sm", "sm"),
-    gap: theme.space.xs
+    gap: theme.space.xs,
+    alignItems: "center",
+    display: "flex"
   },
   titleShort: {
     ...theme.typography.label,

package/dist/esm/CheckBox/CheckBox.js

@@ -145,8 +145,8 @@ const HvCheckBox = forwardRef(
             "div",
             {
               className: cx(classes.container, {
-                [classes.disabled]: disabled,
-                [classes.invalidContainer]: isStateInvalid
+                [classes.invalidContainer]: isStateInvalid,
+                [classes.disabled]: disabled
               }),
               children: [
                 checkbox,

package/dist/esm/ColorPicker/Fields/Fields.js

@@ -3,7 +3,6 @@ import { useState, useRef, useEffect } from "react";
 import * as color from "react-color/lib/helpers/color";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Fields.styles.js";
-import { staticClasses } from "./Fields.styles.js";
 import { HvInput } from "../../Input/Input.js";
 const Fields = (props) => {
   const {
@@ -131,6 +130,5 @@ const Fields = (props) => {
   ] });
 };
 export {
-  Fields,
-  staticClasses as colorPickerFieldsClasses
+  Fields
 };

package/dist/esm/ColorPicker/Fields/Fields.styles.js

@@ -1,7 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const name = "HvColorPicker-Fields";
-const { staticClasses, useClasses } = createClasses(name, {
+const { useClasses } = createClasses("HvColorPickerFields", {
   fields: {
     width: "100%",
     display: "flex",
@@ -33,6 +32,5 @@ const { staticClasses, useClasses } = createClasses(name, {
   }
 });
 export {
-  staticClasses,
   useClasses
 };

package/dist/esm/ColorPicker/Picker/Picker.js

@@ -4,7 +4,6 @@ import { CustomPicker } from "react-color";
 import { Saturation, Hue } from "react-color/lib/components/common";
 import { useDefaultProps, useTheme } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Picker.styles.js";
-import { staticClasses } from "./Picker.styles.js";
 import { Fields } from "../Fields/Fields.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const Component = (props) => {
@@ -70,6 +69,5 @@ const Component = (props) => {
 };
 const Picker = CustomPicker(Component);
 export {
-  Picker,
-  staticClasses as colorPickerPickerClasses
+  Picker
 };

package/dist/esm/ColorPicker/Picker/Picker.styles.js

@@ -1,7 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const name = "HvColorPicker-Picker";
-const { staticClasses, useClasses } = createClasses(name, {
+const { useClasses } = createClasses("HvColorPickerPicker", {
   pickers: {
     display: "flex",
     flexDirection: "column"
@@ -62,6 +61,5 @@ const { staticClasses, useClasses } = createClasses(name, {
   fields: {}
 });
 export {
-  staticClasses,
   useClasses
 };

package/dist/esm/ColorPicker/PresetColors/PresetColors.js

@@ -3,7 +3,6 @@ import { Swatch } from "react-color/lib/components/common";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { getColor } from "@hitachivantara/uikit-styles";
 import { useClasses } from "./PresetColors.styles.js";
-import { staticClasses } from "./PresetColors.styles.js";
 import { HvTypography } from "../../Typography/Typography.js";
 const PresetColors = (props) => {
   const {
@@ -43,6 +42,5 @@ const PresetColors = (props) => {
   ] });
 };
 export {
-  PresetColors,
-  staticClasses as colorPickerPresetColorsClasses
+  PresetColors
 };

package/dist/esm/ColorPicker/PresetColors/PresetColors.styles.js

@@ -1,7 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const name = "HvColorPicker-PresetColors";
-const { staticClasses, useClasses } = createClasses(name, {
+const { useClasses } = createClasses("HvColorPickerPresetColors", {
   root: { width: "232px" },
   colors: {
     display: "flex",
@@ -25,6 +24,5 @@ const { staticClasses, useClasses } = createClasses(name, {
   }
 });
 export {
-  staticClasses,
   useClasses
 };

package/dist/esm/ColorPicker/SavedColors/SavedColors.js

@@ -3,7 +3,6 @@ import { Swatch } from "react-color/lib/components/common";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../../icons.js";
 import { useClasses } from "./SavedColors.styles.js";
-import { staticClasses } from "./SavedColors.styles.js";
 import { HvIconButton } from "../../IconButton/IconButton.js";
 const SavedColors = (props) => {
   const {
@@ -65,6 +64,5 @@ const SavedColors = (props) => {
   ] });
 };
 export {
-  SavedColors,
-  staticClasses as colorPickerSavedColorsClasses
+  SavedColors
 };

package/dist/esm/ColorPicker/SavedColors/SavedColors.styles.js

@@ -1,7 +1,6 @@
 import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
-const name = "HvColorPicker-SavedColors";
-const { staticClasses, useClasses } = createClasses(name, {
+const { useClasses } = createClasses("HvColorPickerSavedColors", {
   addButton: {
     margin: theme.space.xxs,
     width: "32px",
@@ -43,6 +42,5 @@ const { staticClasses, useClasses } = createClasses(name, {
   }
 });
 export {
-  staticClasses,
   useClasses
 };

package/dist/esm/Dialog/Content/Content.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
 import MuiDialogContent from "@mui/material/DialogContent";
-import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
+import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
 import { useClasses } from "./Content.styles.js";
 import { staticClasses } from "./Content.styles.js";
 import { HvTypography } from "../../Typography/Typography.js";
@@ -10,18 +11,43 @@ const HvDialogContent = (props) => {
     className,
     children,
     indentContent = false,
+    style,
     ...others
   } = useDefaultProps("HvDialogContent", props);
   const { classes, cx } = useClasses(classesProp);
+  const [hasBorder, setHasBorder] = useState(false);
+  const elRef = useRef(null);
+  useEffect(() => {
+    if (typeof ResizeObserver !== "undefined") {
+      const resizeObserver = new ResizeObserver(() => {
+        const el = elRef.current;
+        if (el) {
+          const hasOverflow = el.scrollHeight > el.clientHeight;
+          setHasBorder(hasOverflow);
+        }
+      });
+      if (elRef.current) {
+        resizeObserver.observe(elRef.current);
+      }
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+    return void 0;
+  }, []);
   return /* @__PURE__ */ jsx(
     HvTypography,
     {
+      ref: elRef,
       component: MuiDialogContent,
       className: cx(
         classes.root,
         { [classes.textContent]: !!indentContent },
         className
       ),
+      style: mergeStyles(style, {
+        "--borderW": hasBorder ? "1px" : "0px"
+      }),
       ...others,
       children
     }

package/dist/esm/Dialog/Content/Content.styles.js

@@ -2,10 +2,13 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvDialog-Content", {
   root: {
-    padding: theme.spacing(0, "sm", "sm")
+    padding: theme.spacing(0, "sm", "sm"),
+    borderColor: theme.colors.borderSubtle,
+    borderTopWidth: "var(--borderW)",
+    borderBottomWidth: "var(--borderW)"
   },
   textContent: {
-    marginLeft: "42px",
+    paddingLeft: `calc(42px + ${theme.space.sm})`,
     paddingRight: "62px",
     overflowY: "auto"
   }

package/dist/esm/Dialog/Dialog.styles.js

@@ -12,7 +12,9 @@ const { staticClasses, useClasses } = createClasses("HvDialog", {
     borderColor: theme.colors.border,
     borderRadius: theme.radii.round
   },
-  fullscreen: {},
+  fullscreen: {
+    borderRadius: 0
+  },
   fullHeight: {
     height: "100%"
   },

package/dist/esm/Dialog/Title/Title.js

@@ -1,11 +1,11 @@
-import { jsxs } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import MuiDialogTitle from "@mui/material/DialogTitle";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
-import { iconVariant } from "../../utils/iconVariant.js";
 import { useDialogContext } from "../context.js";
 import { useClasses } from "./Title.styles.js";
 import { staticClasses } from "./Title.styles.js";
 import { HvTypography } from "../../Typography/Typography.js";
+import { HvStatusIcon } from "../../StatusIcon/StatusIcon.js";
 const HvDialogTitle = (props) => {
   const {
     classes: classesProp,
@@ -18,7 +18,7 @@ const HvDialogTitle = (props) => {
   } = useDefaultProps("HvDialogTitle", props);
   const { classes, cx } = useClasses(classesProp);
   const { fullScreen } = useDialogContext();
-  const icon = customIcon || showIcon && iconVariant(variant);
+  const icon = customIcon || showIcon && /* @__PURE__ */ jsx(HvStatusIcon, { variant });
   return /* @__PURE__ */ jsxs(
     HvTypography,
     {

package/dist/esm/DropdownButton/DropdownButton.js

@@ -32,8 +32,8 @@ const HvDropdownButton = forwardRef(function HvDropdownButton2(props, ref) {
         classes.root,
         {
           [classes.open]: open,
-          [classes.disabled]: disabled,
-          [classes.readOnly]: readOnly
+          [classes.readOnly]: readOnly,
+          [classes.disabled]: disabled
         },
         className
       ),

package/dist/esm/QueryBuilder/ConfirmationDialog.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { HvDialog } from "../Dialog/Dialog.js";
+import { HvDialogTitle } from "../Dialog/Title/Title.js";
+import { HvDialogContent } from "../Dialog/Content/Content.js";
+import { HvDialogActions } from "../Dialog/Actions/Actions.js";
+import { HvButton } from "../Button/Button.js";
+const ConfirmationDialog = ({
+  title,
+  message,
+  onConfirm,
+  onCancel,
+  confirmButtonLabel,
+  cancelButtonLabel,
+  ...others
+}) => {
+  const handleClose = (_, reason) => {
+    if (reason !== "backdropClick") {
+      onCancel?.();
+    }
+  };
+  return /* @__PURE__ */ jsxs(HvDialog, { onClose: handleClose, ...others, children: [
+    /* @__PURE__ */ jsx(HvDialogTitle, { variant: "warning", showIcon: false, children: title }),
+    /* @__PURE__ */ jsx(HvDialogContent, { indentContent: true, children: message }),
+    /* @__PURE__ */ jsxs(HvDialogActions, { children: [
+      /* @__PURE__ */ jsx(HvButton, { variant: "primaryGhost", onClick: onConfirm, children: confirmButtonLabel }),
+      /* @__PURE__ */ jsx(HvButton, { autoFocus: true, variant: "primaryGhost", onClick: onCancel, children: cancelButtonLabel })
+    ] })
+  ] });
+};
+export {
+  ConfirmationDialog
+};

package/dist/esm/QueryBuilder/QueryBuilder.js

@@ -4,13 +4,13 @@ import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { useControlled } from "../hooks/useControlled.js";
 import { useLabels } from "../hooks/useLabels.js";
 import { isEqual } from "../utils/helpers.js";
+import { ConfirmationDialog } from "./ConfirmationDialog.js";
 import { defaultOperators, defaultCombinators, HvQueryBuilderProvider, defaultLabels } from "./Context.js";
 import { useClasses } from "./QueryBuilder.styles.js";
 import { staticClasses } from "./QueryBuilder.styles.js";
+import { RuleGroup } from "./RuleGroup.js";
 import { emptyGroup, setNodeIds, clearNodeIds } from "./utils/index.js";
 import reducer from "./utils/reducer.js";
-import { RuleGroup } from "./RuleGroup/RuleGroup.js";
-import { ConfirmationDialog } from "./ConfirmationDialog/ConfirmationDialog.js";
 const HvQueryBuilder = (props) => {
   const {
     attributes,
@@ -131,14 +131,14 @@ const HvQueryBuilder = (props) => {
     /* @__PURE__ */ jsx(
       ConfirmationDialog,
       {
-        isOpen: pendingAction != null,
+        open: pendingAction != null,
         onConfirm: handleConfirm,
         onCancel: handleCancel,
         title: pendingAction?.dialog.dialogTitle,
         message: pendingAction?.dialog.dialogMessage,
         confirmButtonLabel: pendingAction?.dialog.dialogConfirm,
         cancelButtonLabel: pendingAction?.dialog.dialogCancel,
-        closeButtonTooltip: pendingAction?.dialog.dialogCloseTooltip
+        buttonTitle: pendingAction?.dialog.dialogCloseTooltip
       }
     )
   ] });

package/dist/esm/QueryBuilder/Rule/{Attribute/Attribute.js → Attribute.js}

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo, memo } from "react";
-import { useQueryBuilderContext } from "../../Context.js";
-import { isBigList } from "../../utils/index.js";
-import { HvDropdown } from "../../../Dropdown/Dropdown.js";
+import { useMemo } from "react";
+import { useQueryBuilderContext } from "../Context.js";
+import { isBigList } from "../utils/index.js";
+import { HvDropdown } from "../../Dropdown/Dropdown.js";
 const Attribute = ({
   id,
   attribute,
@@ -60,7 +60,6 @@ const Attribute = ({
     }
   );
 };
-memo(Attribute);
 export {
   Attribute
 };

package/dist/esm/QueryBuilder/Rule/{Operator/Operator.js → Operator.js}

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { useMemo, memo } from "react";
-import { useQueryBuilderContext } from "../../Context.js";
-import { isBigList } from "../../utils/index.js";
-import { HvDropdown } from "../../../Dropdown/Dropdown.js";
+import { useMemo } from "react";
+import { useQueryBuilderContext } from "../Context.js";
+import { isBigList } from "../utils/index.js";
+import { HvDropdown } from "../../Dropdown/Dropdown.js";
 const Operator = ({
   id,
   combinator,
@@ -55,7 +55,6 @@ const Operator = ({
     }
   );
 };
-memo(Operator);
 export {
   Operator
 };

package/dist/esm/QueryBuilder/Rule/Rule.js

@@ -5,12 +5,11 @@ import useMediaQuery from "@mui/material/useMediaQuery";
 import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
 import { HvIcon } from "../../icons.js";
 import { useQueryBuilderContext } from "../Context.js";
+import { Value } from "../Value/Value.js";
+import { Attribute } from "./Attribute.js";
+import { Operator } from "./Operator.js";
 import { useClasses } from "./Rule.styles.js";
-import { staticClasses } from "./Rule.styles.js";
 import { HvGrid } from "../../Grid/Grid.js";
-import { Attribute } from "./Attribute/Attribute.js";
-import { Operator } from "./Operator/Operator.js";
-import { Value } from "./Value/Value.js";
 import { HvIconButton } from "../../IconButton/IconButton.js";
 const Rule = (props) => {
   const {
@@ -100,6 +99,5 @@ const Rule = (props) => {
   );
 };
 export {
-  Rule,
-  staticClasses as queryBuilderRuleClasses
+  Rule
 };