@hitachivantara/uikit-react-core 5.109.1 → 6.0.0-next.10

package/dist/{esm/providers → providers}/Provider.js

@@ -2,9 +2,9 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useId, useMemo } from "react";
 import createCache from "@emotion/cache";
 import { CacheProvider, Global, css, ClassNames } from "@emotion/react";
-import { CssBaseline, getThemesVars, CssScopedBaseline } from "@hitachivantara/uikit-styles";
+import { CssBaseline, getThemeVars, CssScopedBaseline } from "@hitachivantara/uikit-styles";
+import { pentaho } from "../themes/pentaho.js";
 import { getElementById } from "../utils/document.js";
-import { processThemes } from "../utils/theme.js";
 import { HvThemeProvider } from "./ThemeProvider.js";
 import { defaultCacheKey, defaultEmotionCache } from "@hitachivantara/uikit-react-shared";
 const HvProvider = ({
@@ -12,14 +12,12 @@ const HvProvider = ({
   rootElementId,
   cssBaseline = "global",
   cssTheme = "global",
-  themes,
-  theme,
-  colorMode,
+  theme = pentaho,
+  colorMode = theme.defaultColorMode || "light",
   emotionCache: emotionCacheProp,
   classNameKey = defaultCacheKey
 }) => {
   const scopedRootId = useId();
-  const themesList = processThemes(themes);
   const emotionCache = useMemo(() => {
     if (emotionCacheProp) return emotionCacheProp;
     if (classNameKey === defaultCacheKey) return defaultEmotionCache;
@@ -35,17 +33,16 @@ const HvProvider = ({
             ...CssBaseline
           }
         }}
-          ${getThemesVars(themesList)}
+          ${getThemeVars(theme)}
         `
       }
     ),
     /* @__PURE__ */ jsx(
       HvThemeProvider,
       {
-        themes: themesList,
-        theme: theme || themesList[0].name,
+        theme,
         emotionCache,
-        colorMode: colorMode || Object.keys(themesList[0].colors.modes)[0],
+        colorMode,
         themeRootId: cssTheme === "scoped" ? rootElementId || scopedRootId : void 0,
         children: /* @__PURE__ */ jsx(ClassNames, { children: ({ css: css2 }) => {
           if (cssBaseline === "scoped") {

package/dist/{esm/providers → providers}/ThemeProvider.js

@@ -1,68 +1,63 @@
 import { jsx } from "react/jsx-runtime";
-import { useState, useEffect, useCallback, useMemo } from "react";
+import { useState, useEffect, useMemo } from "react";
 import { createTheme, ThemeProvider } from "@mui/material/styles";
 import { HvThemeContext, EmotionContext } from "@hitachivantara/uikit-react-shared";
 import { EmotionContext as EmotionContext2, HvThemeContext as HvThemeContext2, defaultCacheKey, defaultEmotionCache } from "@hitachivantara/uikit-react-shared";
-import { parseTheme } from "@hitachivantara/uikit-styles";
+import { getContainerElement } from "../utils/document.js";
 import { setElementAttrs } from "../utils/theme.js";
 const HvThemeProvider = ({
   children,
-  themes: themesList,
-  theme: themeProp,
+  theme,
   emotionCache,
   colorMode: colorModeProp,
   themeRootId: rootId
 }) => {
-  const [theme, setTheme] = useState(themeProp);
-  const [colorMode, setColorMode] = useState(colorModeProp);
-  const {
-    theme: activeTheme,
-    selectedTheme,
-    selectedMode,
-    colorModes,
-    colorScheme
-  } = parseTheme(themesList, theme, colorMode);
-  const themes = themesList.map((t) => t.name);
+  const [colorModeValue, setColorModeValue] = useState(colorModeProp);
+  const colorMode = colorModeValue === "dark" ? "dark" : "light";
   useEffect(() => {
-    setTheme(themeProp);
-    setColorMode(colorModeProp);
-  }, [colorModeProp, themeProp]);
+    setColorModeValue(colorModeProp);
+  }, [colorModeProp]);
   useEffect(() => {
-    setElementAttrs(selectedTheme, selectedMode, colorScheme, rootId);
-  }, [colorScheme, rootId, selectedMode, selectedTheme]);
-  const changeTheme = useCallback(
-    (newTheme = selectedTheme, newMode = selectedMode) => {
-      setTheme(newTheme);
-      setColorMode(newMode);
-    },
-    [selectedMode, selectedTheme]
-  );
+    const element = getContainerElement(rootId);
+    if (!element) return;
+    setElementAttrs(element, theme.name, colorMode);
+  }, [colorMode, rootId, theme.name]);
   const value = useMemo(
     () => ({
-      themes,
-      colorModes,
-      activeTheme,
-      selectedTheme,
-      selectedMode,
-      changeTheme,
-      rootId
+      colorModes: ["light", "dark"],
+      // activeTheme: theme as HvTheme,
+      selectedMode: colorMode,
+      changeMode(newMode = colorMode) {
+        setColorModeValue(newMode);
+      },
+      rootId,
+      // TODO: remove once backwards-compatibility is not needed anymore
+      activeTheme: {
+        ...theme,
+        colors: {
+          ...theme.colors,
+          modes: {
+            ...theme.colors,
+            light: { ...theme.colors.light, type: "light" },
+            dark: { ...theme.colors.dark, type: "dark" }
+          }
+        }
+      },
+      themes: [theme],
+      selectedTheme: theme.name,
+      changeTheme(theme2, mode) {
+        setColorModeValue(mode);
+      }
     }),
-    [
-      themes,
-      colorModes,
-      activeTheme,
-      selectedTheme,
-      selectedMode,
-      changeTheme,
-      rootId
-    ]
+    [theme, colorMode, rootId]
   );
   const muiTheme = useMemo(() => {
-    const colors = activeTheme.colors.modes[selectedMode];
+    const colors = theme.colors[colorMode] || theme.colors.light;
     return createTheme({
-      spacing: activeTheme.space.base,
+      colorSchemes: { light: true, dark: true },
+      spacing: theme.space.base,
       typography: {
-        fontFamily: activeTheme.fontFamily.body
+        fontFamily: theme.fontFamily.body
       },
       palette: {
         primary: { main: colors.primary },
@@ -96,9 +91,9 @@ const HvThemeProvider = ({
           }
         }
       },
-      breakpoints: activeTheme.breakpoints
+      breakpoints: theme.breakpoints
     });
-  }, [activeTheme, selectedMode]);
+  }, [theme, colorMode]);
   const emotionCacheValue = useMemo(
     () => ({ cache: emotionCache }),
     [emotionCache]

package/dist/themes/index.js

@@ -0,0 +1,8 @@
+import { next } from "./next.js";
+import { pentaho } from "./pentaho.js";
+const themes = { next, pentaho };
+export {
+  next,
+  pentaho,
+  themes
+};

package/dist/{esm/themes/ds5.js → themes/next.js}

@@ -1,5 +1,5 @@
-import { mergeTheme, ds5 as ds5$1, theme } from "@hitachivantara/uikit-styles";
-const ds5 = mergeTheme(ds5$1, {
+import { mergeTheme, next as next$1, theme } from "@hitachivantara/uikit-styles";
+const next = mergeTheme(next$1, {
   components: {
     HvAvatar: {
       classes: {
@@ -122,20 +122,8 @@ const ds5 = mergeTheme(ds5$1, {
     HvColorPicker: {
       classes: {
         colorPicker: {
-          " .HvColorPickerPresetColors-swatchWrap > span > div": {
+          ".HvColorPickerSwatch-root": {
             borderRadius: theme.radii.round
-          },
-          " .HvColorPickerSavedColors-swatchWrap > span > div": {
-            borderRadius: theme.radii.round
-          },
-          " .HvColorPickerPicker-saturation > div": {
-            borderRadius: theme.radii.round,
-            " .saturation-white": {
-              borderRadius: theme.radii.round,
-              " .saturation-black": {
-                borderRadius: theme.radii.round
-              }
-            }
           }
         }
       }
@@ -280,5 +268,5 @@ const ds5 = mergeTheme(ds5$1, {
   }
 });
 export {
-  ds5
+  next
 };

package/dist/{esm/themes/pentahoPlus.js → themes/pentaho.js}

@@ -1,4 +1,4 @@
-import { mergeTheme, pentahoPlus as pentahoPlus$1, theme, neutral, slate, blue } from "@hitachivantara/uikit-styles";
+import { mergeTheme, pentaho as pentaho$1, theme, neutral, slate, blue } from "@hitachivantara/uikit-styles";
 const ld = (c1, c2) => `light-dark(${c1}, ${c2})`;
 const semaColors = ["positive", "warning", "negative", "info"];
 const notificationMap = {
@@ -19,7 +19,7 @@ const popperStyles = {
   borderRadius: theme.radii.large,
   boxShadow: `0px 0px 6px 0px rgba(65, 65, 65, 0.08)`
 };
-const pentahoPlus = mergeTheme(pentahoPlus$1, {
+const pentaho = mergeTheme(pentaho$1, {
   icons: {
     viewBox: "0 0 256 256",
     // Semantic icons
@@ -42,13 +42,13 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
     },
     HvBadge: {
       classes: {
-        badgePosition: {
+        badge: {
           color: ld(theme.colors.textLight, theme.colors.textDark),
-          "&[data-color='textSubtle']:not(.HvBadge-badgePosition:empty)": {
+          "&[data-color='textSubtle']:not(:empty)": {
             color: theme.colors.textSubtle,
             backgroundColor: theme.colors.bgPageSecondary
           },
-          "&[data-color='primary']:not(.HvBadge-badgePosition:empty)": {
+          "&[data-color='primary']:not(:empty)": {
             color: theme.colors.primary,
             backgroundColor: theme.colors.primaryDimmed
           }
@@ -229,7 +229,7 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
       classes: {
         root: {
           borderRadius: theme.radii.round,
-          "&& .HvButton-secondarySubtle": {
+          "& .HvButton-subtle[data-color=text]": {
             borderColor: theme.colors.textDimmed,
             backgroundColor: inputColors.bg
           }
@@ -276,7 +276,7 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
               borderColor: theme.colors.textDisabled
             }
           },
-          "& .HvTagsInput-chipRoot": {
+          "& .HvTagsInput-tag": {
             outlineColor: theme.colors.textDisabled
           }
         }
@@ -812,10 +812,12 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
             borderRadius: theme.radii.full
           }
         },
-        inputExtension: {
-          backgroundColor: "transparent",
-          height: 0,
-          boxShadow: "none"
+        suggestionsContainer: {
+          "&::before": {
+            backgroundColor: "transparent",
+            height: 0,
+            boxShadow: "none"
+          }
         }
       }
     },
@@ -842,7 +844,7 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
         root: {
           "--r": "calc(var(--HvButton-height) / 2)"
         },
-        iconSelected: {
+        open: {
           "&[data-color=secondary]": {
             borderColor: theme.colors.textDimmed
           }
@@ -873,5 +875,5 @@ const pentahoPlus = mergeTheme(pentahoPlus$1, {
   }
 });
 export {
-  pentahoPlus
+  pentaho
 };

package/dist/utils/setId.js

@@ -0,0 +1,4 @@
+const setId = (...args) => args.some((arg) => arg == null) ? void 0 : args.join("-");
+export {
+  setId
+};

package/dist/utils/theme.js

@@ -0,0 +1,9 @@
+const setElementAttrs = (element, themeName, modeName) => {
+  element.dataset.theme = themeName;
+  element.dataset.colorMode = modeName;
+  element.classList.add("uikit-root-element");
+  element.style.colorScheme = modeName;
+};
+export {
+  setElementAttrs
+};

package/dist/{esm/utils → utils}/useSavedState.js

@@ -1,9 +1,8 @@
 import { useState, useCallback } from "react";
 function useSavedState(defaultState) {
-  const [initialState] = useState(defaultState);
-  const [state, setState] = useState(initialState);
+  const [state, setState] = useState(defaultState);
   const [submittedState, setSubmittedState] = useState(
-    initialState
+    defaultState
   );
   const changeState = useCallback((value, save = false) => {
     setState(value);
@@ -12,7 +11,7 @@ function useSavedState(defaultState) {
   const rollback = () => {
     setState(submittedState);
   };
-  return [state, changeState, rollback, submittedState, initialState];
+  return [state, changeState, rollback, submittedState];
 }
 export {
   useSavedState

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@hitachivantara/uikit-react-core",
-  "version": "5.109.1",
+  "version": "6.0.0-next.10",
+  "type": "module",
   "private": false,
   "author": "Hitachi Vantara UI Kit Team",
   "description": "UI Kit Core React components.",
@@ -25,30 +26,29 @@
   "peerDependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.16.14",
-    "react": ">=17.0.0",
-    "react-dom": ">=17.0.0"
+    "@mui/material": "^7.0.2",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "dependencies": {
     "@emotion/cache": "^11.11.0",
     "@emotion/serialize": "^1.1.2",
-    "@hitachivantara/uikit-react-shared": "^5.5.9",
-    "@hitachivantara/uikit-react-utils": "^0.2.50",
-    "@hitachivantara/uikit-styles": "^5.54.0",
+    "@hitachivantara/uikit-react-shared": "^6.0.0-next.6",
+    "@hitachivantara/uikit-react-utils": "^6.0.0-next.6",
+    "@hitachivantara/uikit-styles": "^6.0.0-next.5",
     "@internationalized/date": "^3.2.0",
     "@mui/base": "5.0.0-beta.68",
     "@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",
     "clsx": "^2.0.0",
-    "dayjs": "^1.11.10",
-    "detect-browser": "^5.3.0",
     "embla-carousel-react": "^8.1.3",
     "notistack": "^3.0.2",
     "rc-slider": "^10.5.0",
     "rc-tooltip": "~6.3.0",
-    "react-color": "^2.19.3",
     "react-popper": "^2.3.0",
     "react-resize-detector": "^8.1.0",
     "react-table": "^7.8.0",
@@ -61,14 +61,13 @@
     "access": "public",
     "directory": "package"
   },
-  "gitHead": "73670d30564b1022bf9c620da204eec182e8bd4b",
+  "gitHead": "f7ad5a89be6f6fe234809656fec7403e0b114b4b",
   "exports": {
     ".": {
-      "types": "./dist/types/index.d.ts",
-      "require": "./dist/cjs/index.cjs",
-      "import": "./dist/esm/index.js"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
     }
   },
-  "types": "dist/types/index.d.ts",
-  "module": "dist/esm/index.js"
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js"
 }

package/dist/cjs/Accordion/Accordion.cjs

@@ -1,91 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const useExpandable = require("../hooks/useExpandable.cjs");
-const icons = require("../icons.cjs");
-const Accordion_styles = require("./Accordion.styles.cjs");
-const Typography = require("../Typography/Typography.cjs");
-const ButtonBase = require("../ButtonBase/ButtonBase.cjs");
-const HvAccordion = React.forwardRef(function HvAccordion2(props, ref) {
-  const {
-    id,
-    className,
-    classes: classesProp,
-    disabled = false,
-    label,
-    onChange,
-    children,
-    expanded,
-    headingLevel,
-    defaultExpanded = false,
-    containerProps,
-    labelVariant = "label",
-    disableEventHandling,
-    ...others
-  } = uikitReactUtils.useDefaultProps("HvAccordion", props);
-  const { classes, cx } = Accordion_styles.useClasses(classesProp);
-  const { isOpen, toggleOpen, buttonProps, regionProps } = useExpandable.useExpandable({
-    id,
-    expanded,
-    disabled,
-    defaultExpanded
-  });
-  const handleClick = React.useCallback(
-    (event) => {
-      if (!disabled) {
-        onChange?.(event, isOpen);
-        toggleOpen();
-      }
-      if (!disableEventHandling) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    },
-    [disableEventHandling, disabled, isOpen, onChange, toggleOpen]
-  );
-  const accordionHeader = React.useMemo(() => {
-    const accordionButton = /* @__PURE__ */ jsxRuntime.jsxs(
-      Typography.HvTypography,
-      {
-        ...buttonProps,
-        component: ButtonBase.HvButtonBase,
-        className: cx(classes.label, { [classes.disabled]: disabled }),
-        disabled,
-        onClick: handleClick,
-        variant: labelVariant,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "CaretDown", rotate: isOpen, size: "xs" }),
-          label
-        ]
-      }
-    );
-    return headingLevel === void 0 ? accordionButton : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: `h${headingLevel}`, variant: labelVariant, children: accordionButton });
-  }, [
-    cx,
-    classes,
-    handleClick,
-    label,
-    buttonProps,
-    disabled,
-    headingLevel,
-    isOpen,
-    labelVariant
-  ]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
-    accordionHeader,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: cx(classes.container, { [classes.hidden]: !isOpen }),
-        hidden: !isOpen,
-        ...regionProps,
-        ...containerProps,
-        children
-      }
-    )
-  ] });
-});
-exports.accordionClasses = Accordion_styles.staticClasses;
-exports.HvAccordion = HvAccordion;

package/dist/cjs/Accordion/Accordion.styles.cjs

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvAccordion", {
-  root: {},
-  hidden: { height: 0, display: "none" },
-  container: { paddingTop: 8, height: "auto" },
-  label: {
-    width: "100%",
-    display: "flex",
-    justifyContent: "flex-start",
-    alignItems: "center",
-    height: "32px"
-  },
-  disabled: {}
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/ActionBar/ActionBar.cjs

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const ActionBar_styles = require("./ActionBar.styles.cjs");
-const HvActionBar = React.forwardRef(function HvActionBar2(props, ref) {
-  const {
-    classes: classesProp,
-    className,
-    children,
-    ...others
-  } = uikitReactUtils.useDefaultProps("HvActionBar", props);
-  const { classes, cx } = ActionBar_styles.useClasses(classesProp);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cx(classes.root, className), ...others, children });
-});
-exports.actionBarClasses = ActionBar_styles.staticClasses;
-exports.HvActionBar = HvActionBar;

package/dist/cjs/ActionBar/ActionBar.styles.cjs

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const uikitStyles = require("@hitachivantara/uikit-styles");
-const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvActionBar", {
-  root: {
-    width: "100%",
-    padding: uikitStyles.theme.space.sm,
-    borderTop: `1px solid ${uikitStyles.theme.colors.borderSubtle}`,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end"
-  }
-});
-exports.staticClasses = staticClasses;
-exports.useClasses = useClasses;

package/dist/cjs/ActionsGeneric/ActionsGeneric.cjs

@@ -1,111 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("react/jsx-runtime");
-const React = require("react");
-const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
-const icons = require("../icons.cjs");
-const setId = require("../utils/setId.cjs");
-const ActionsGeneric_styles = require("./ActionsGeneric.styles.cjs");
-const DropDownMenu = require("../DropDownMenu/DropDownMenu.cjs");
-const IconButton = require("../IconButton/IconButton.cjs");
-const Button = require("../Button/Button.cjs");
-const HvActionsGeneric = React.forwardRef(function HvActionsGeneric2(props, ref) {
-  const {
-    id: idProp,
-    classes: classesProp,
-    className,
-    category = "secondaryGhost",
-    // TODO - remove and update variant default in v6
-    variant: variantProp,
-    disabled = false,
-    actions = [],
-    actionsCallback,
-    // TODO - remove in v6
-    onAction,
-    maxVisibleActions = Infinity,
-    iconOnly: iconOnlyProp,
-    dropdownMenuProps: dropdownMenuPropsProp,
-    ...others
-  } = uikitReactUtils.useDefaultProps("HvActionsGeneric", props);
-  const { onClick: onClickDropdownMenu, ...dropdownMenuProps } = dropdownMenuPropsProp || {};
-  const variant = variantProp || category;
-  const { classes, cx } = ActionsGeneric_styles.useClasses(classesProp);
-  const handleCallback = (event, id, action) => {
-    actionsCallback?.(event, id, action);
-    onAction?.(event, action);
-  };
-  if (!Array.isArray(actions)) return React.isValidElement(actions) ? actions : null;
-  const renderButton = (action, idx) => {
-    const {
-      disabled: actDisabled,
-      id: actId,
-      icon,
-      label,
-      iconOnly,
-      ...other
-    } = action;
-    const actionId = setId.setId(idProp, idx, "action", action.id);
-    const renderedIcon = React.isValidElement(icon) ? icon : icon?.({ isDisabled: disabled });
-    const commonButtonProps = {
-      id: actionId,
-      variant,
-      className: classes.button,
-      disabled: actDisabled ?? disabled,
-      onClick: (event) => handleCallback(event, idProp || "", action),
-      ...other
-    };
-    const key = actionId || idx;
-    const isIcon = iconOnly ?? iconOnlyProp;
-    if (isIcon) {
-      return /* @__PURE__ */ jsxRuntime.jsx(IconButton.HvIconButton, { ...commonButtonProps, title: label, children: renderedIcon }, key);
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { ...commonButtonProps, startIcon: renderedIcon, children: label }, key);
-  };
-  const renderActionsGrid = () => {
-    const actsVisible = actions.slice(0, maxVisibleActions);
-    const actsDropdown = actions.slice(maxVisibleActions);
-    const iconColor = variant === "semantic" && "textDark" || void 0;
-    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      actsVisible.map((action, idx) => renderButton(action, idx)),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        DropDownMenu.HvDropDownMenu,
-        {
-          id: setId.setId(idProp, "menu"),
-          disabled,
-          variant,
-          classes: {
-            root: classes.dropDownMenu,
-            icon: classes.dropDownMenuButton,
-            iconSelected: classes.dropDownMenuButtonSelected
-          },
-          icon: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "DotsVertical", color: iconColor }),
-          placement: "left",
-          onClick: (event, action) => {
-            handleCallback(event, idProp || "", action);
-            onClickDropdownMenu?.(event, action);
-          },
-          dataList: actsDropdown,
-          keepOpened: false,
-          disablePortal: false,
-          ...dropdownMenuProps
-        }
-      )
-    ] });
-  };
-  const actionOverflow = actions.length > maxVisibleActions;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: cx(
-        classes.root,
-        { [classes.actionContainer]: actionOverflow },
-        className
-      ),
-      ...others,
-      children: actionOverflow ? renderActionsGrid() : actions.map((action, idx) => renderButton(action, idx))
-    }
-  );
-});
-exports.actionsGenericClasses = ActionsGeneric_styles.staticClasses;
-exports.HvActionsGeneric = HvActionsGeneric;