@hitachivantara/uikit-react-core 5.66.13 → 5.67.0

package/dist/cjs/Tooltip/Tooltip.styles.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Tooltip = require("@mui/material/Tooltip");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvTooltip", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvTooltip", {
   root: {},
   tooltip: {},
   tooltipMulti: {},

package/dist/cjs/TreeView/TreeItem/DefaultContent.cjs

@@ -2,10 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const useCss = require("../../hooks/useCss.cjs");
-const classes = require("../../utils/classes.cjs");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const useHvTreeItem = require("./useHvTreeItem.cjs");
-const { useClasses } = classes.createClasses("HvTreeContent", {
+const { useClasses } = uikitReactShared.createClasses("HvTreeContent", {
   root: {},
   expanded: {},
   selected: {},
@@ -28,8 +27,8 @@ const DefaultContent = React.forwardRef(
       onMouseDown,
       ...others
     } = props;
-    const { classes: classes2 } = useClasses(classesProp);
-    const { cx } = useCss.useCss();
+    const { classes } = useClasses(classesProp);
+    const { cx } = uikitReactShared.useCss();
     const {
       disabled,
       expanded,
@@ -46,11 +45,11 @@ const DefaultContent = React.forwardRef(
         "div",
         {
           ...others,
-          className: cx(className, classes2.root, {
-            [classes2.expanded]: expanded,
-            [classes2.selected]: selected,
-            [classes2.focused]: focused,
-            [classes2.disabled]: disabled
+          className: cx(className, classes.root, {
+            [classes.expanded]: expanded,
+            [classes.selected]: selected,
+            [classes.focused]: focused,
+            [classes.disabled]: disabled
           }),
           onClick: (event) => {
             handleExpansion(event);
@@ -63,8 +62,8 @@ const DefaultContent = React.forwardRef(
           },
           ref,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes2.iconContainer, children: icon }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes2.label, children: label })
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.iconContainer, children: icon }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.label, children: label })
           ]
         }
       )

package/dist/cjs/TreeView/TreeItem/TreeItem.styles.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../utils/classes.cjs");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvTreeItem", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvTreeItem", {
   /** Applied to the root element */
   root: {
     listStyle: "none",

package/dist/cjs/TreeView/TreeView.styles.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classes = require("../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses("HvTreeView", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses("HvTreeView", {
   /** Applied to the root element */
   root: {
     padding: 0,

package/dist/cjs/Typography/Typography.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
-const useTheme = require("../hooks/useTheme.cjs");
 const generic = require("../types/generic.cjs");
 const Typography_styles = require("./Typography.styles.cjs");
 const utils = require("./utils.cjs");
@@ -52,7 +52,7 @@ const HvTypography = generic.fixedForwardRef(function HvTypography2(props, ref)
     ...others
   } = useDefaultProps.useDefaultProps("HvTypography", props);
   const { classes, cx } = Typography_styles.useClasses(classesProp);
-  const { activeTheme } = useTheme.useTheme();
+  const { activeTheme } = uikitReactShared.useTheme();
   const variant = utils.mapVariant(variantProp, activeTheme?.name);
   const Component = ComponentProp || paragraph && "p" || HvTypographyMap[variant] || "span";
   return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/Typography/Typography.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../utils/classes.cjs");
-const { useClasses, staticClasses } = classes.createClasses("HvTypography", {
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { useClasses, staticClasses } = uikitReactShared.createClasses("HvTypography", {
   root: {
     fontFamily: uikitStyles.theme.fontFamily.body
   },

package/dist/cjs/VerticalNavigation/Actions/Action.styles.cjs

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../utils/classes.cjs");
 const focusUtils = require("../../utils/focusUtils.cjs");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const hover = {
   background: uikitStyles.theme.colors.containerBackgroundHover
 };
-const { staticClasses, useClasses } = classes.createClasses(
+const { staticClasses, useClasses } = uikitReactShared.createClasses(
   "HvVerticalNavigationAction",
   {
     action: {

package/dist/cjs/VerticalNavigation/Actions/Actions.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses(
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses(
   "HvVerticalNavigationActions",
   {
     root: {

package/dist/cjs/VerticalNavigation/Header/Header.styles.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classes = require("../../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses(
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses(
   "HvVerticalNavigationHeader",
   {
     root: {

package/dist/cjs/VerticalNavigation/Navigation/Navigation.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses(
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses(
   "HvVerticalNavigationTree",
   {
     root: {

package/dist/cjs/VerticalNavigation/NavigationPopup/NavigationPopup.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses(
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses(
   "HvVerticalNavigationPopup",
   {
     popup: {},

package/dist/cjs/VerticalNavigation/NavigationPopup/NavigationPopupContainer.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const base = require("@mui/base");
+const Popper = require("@mui/base/Popper");
 const ClickAwayListener = require("@mui/material/ClickAwayListener");
-const useTheme = require("../../hooks/useTheme.cjs");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const document = require("../../utils/document.cjs");
 const VerticalNavigation = require("../VerticalNavigation.cjs");
 const NavigationPopup_styles = require("./NavigationPopup.styles.cjs");
@@ -18,10 +18,10 @@ const NavigationPopupContainer = ({
   ...others
 }) => {
   const { classes, cx } = NavigationPopup_styles.useClasses(classesProp);
-  const { rootId } = useTheme.useTheme();
+  const { rootId } = uikitReactShared.useTheme();
   const handleClickAway = () => onClose?.();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    base.Popper,
+    Popper.Popper,
     {
       open: true,
       anchorEl,

package/dist/cjs/VerticalNavigation/NavigationSlider/NavigationSlider.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses(
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses(
   "HvVerticalNavigationSlider",
   {
     root: {

package/dist/cjs/VerticalNavigation/TreeView/TreeView.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses(
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses(
   "HvVerticalNavigationTreeView",
   {
     root: {

package/dist/cjs/VerticalNavigation/TreeView/TreeViewItem.styles.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../../utils/classes.cjs");
 const focusUtils = require("../../utils/focusUtils.cjs");
 const Avatar_styles = require("../../Avatar/Avatar.styles.cjs");
 require("../../Avatar/Avatar.cjs");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const selected = {
   background: uikitStyles.theme.colors.atmo3,
   borderLeft: `4px solid ${uikitStyles.theme.colors.secondary}`
@@ -12,7 +12,7 @@ const selected = {
 const hover = {
   background: uikitStyles.theme.colors.containerBackgroundHover
 };
-const { staticClasses, useClasses } = classes.createClasses(
+const { staticClasses, useClasses } = uikitReactShared.createClasses(
   "HvVerticalNavigationTreeViewItem",
   {
     node: {

package/dist/cjs/VerticalNavigation/VerticalNavigation.styles.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const classes = require("../utils/classes.cjs");
-const { staticClasses, useClasses } = classes.createClasses(
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+const { staticClasses, useClasses } = uikitReactShared.createClasses(
   "HvVerticalNavigation",
   {
     root: {

package/dist/cjs/hooks/useDefaultProps.cjs

@@ -1,8 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const useCss = require("./useCss.cjs");
-const useTheme = require("./useTheme.cjs");
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 function filterProps(props) {
   return Object.keys(props).reduce(
     (acc, key) => {
@@ -15,8 +14,8 @@ function filterProps(props) {
   );
 }
 function useDefaultProps(componentName, props) {
-  const { activeTheme } = useTheme.useTheme();
-  const { css, cx } = useCss.useCss();
+  const { activeTheme } = uikitReactShared.useTheme();
+  const { css, cx } = uikitReactShared.useCss();
   const themeDefaultProps = activeTheme?.components?.[componentName];
   const classes = React.useMemo(() => {
     const themeClasses = themeDefaultProps?.classes || {};

package/dist/cjs/index.cjs

@@ -1,17 +1,16 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitReactShared = require("@hitachivantara/uikit-react-shared");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const useClickOutside = require("./hooks/useClickOutside.cjs");
 const useComputation = require("./hooks/useComputation.cjs");
 const useControlled = require("./hooks/useControlled.cjs");
-const useCss = require("./hooks/useCss.cjs");
 const useDefaultProps = require("./hooks/useDefaultProps.cjs");
 const useEnhancedEffect = require("./hooks/useEnhancedEffect.cjs");
 const useForkRef = require("./hooks/useForkRef.cjs");
 const useImageLoaded = require("./hooks/useImageLoaded.cjs");
 const useIsMounted = require("./hooks/useIsMounted.cjs");
 const useLabels = require("./hooks/useLabels.cjs");
-const useTheme = require("./hooks/useTheme.cjs");
 const useUniqueId = require("./hooks/useUniqueId.cjs");
 const useWidth = require("./hooks/useWidth.cjs");
 const Provider = require("./providers/Provider.cjs");
@@ -20,7 +19,6 @@ const generic = require("./types/generic.cjs");
 const withTooltip = require("./hocs/withTooltip.cjs");
 const browser = require("./utils/browser.cjs");
 const checkValidHexColorValue = require("./utils/checkValidHexColorValue.cjs");
-const classes = require("./utils/classes.cjs");
 const focusableElementFinder = require("./utils/focusableElementFinder.cjs");
 const focusUtils = require("./utils/focusUtils.cjs");
 const getComponentName = require("./utils/getComponentName.cjs");
@@ -34,6 +32,7 @@ const sizes = require("./utils/sizes.cjs");
 const theme = require("./utils/theme.cjs");
 const useSavedState = require("./utils/useSavedState.cjs");
 const wrapperTooltip = require("./utils/wrapperTooltip.cjs");
+const helpers = require("./utils/helpers.cjs");
 const useTable = require("./Table/hooks/useTable.cjs");
 const utils = require("./Typography/utils.cjs");
 const Typography_styles = require("./Typography/Typography.styles.cjs");
@@ -314,7 +313,34 @@ const TableSection = require("./TableSection/TableSection.cjs");
 const IconButton = require("./IconButton/IconButton.cjs");
 const Skeleton_styles = require("./Skeleton/Skeleton.styles.cjs");
 const Skeleton = require("./Skeleton/Skeleton.cjs");
-const uikitReactShared = require("@hitachivantara/uikit-react-shared");
+Object.defineProperty(exports, "EmotionContext", {
+  enumerable: true,
+  get: () => uikitReactShared.EmotionContext
+});
+Object.defineProperty(exports, "HvThemeContext", {
+  enumerable: true,
+  get: () => uikitReactShared.HvThemeContext
+});
+Object.defineProperty(exports, "createClasses", {
+  enumerable: true,
+  get: () => uikitReactShared.createClasses
+});
+Object.defineProperty(exports, "defaultCacheKey", {
+  enumerable: true,
+  get: () => uikitReactShared.defaultCacheKey
+});
+Object.defineProperty(exports, "defaultEmotionCache", {
+  enumerable: true,
+  get: () => uikitReactShared.defaultEmotionCache
+});
+Object.defineProperty(exports, "useCss", {
+  enumerable: true,
+  get: () => uikitReactShared.useCss
+});
+Object.defineProperty(exports, "useTheme", {
+  enumerable: true,
+  get: () => uikitReactShared.useTheme
+});
 Object.defineProperty(exports, "ds3", {
   enumerable: true,
   get: () => uikitStyles.ds3
@@ -338,7 +364,6 @@ Object.defineProperty(exports, "themes", {
 exports.useClickOutside = useClickOutside.useClickOutside;
 exports.useComputation = useComputation.useComputation;
 exports.useControlled = useControlled.useControlled;
-exports.useCss = useCss.useCss;
 exports.filterProps = useDefaultProps.filterProps;
 exports.useDefaultProps = useDefaultProps.useDefaultProps;
 exports.useEnhancedEffect = useEnhancedEffect.useEnhancedEffect;
@@ -346,7 +371,6 @@ exports.useForkRef = useForkRef.useForkRef;
 exports.useImageLoaded = useImageLoaded.useImageLoaded;
 exports.useIsMounted = useIsMounted.useIsMounted;
 exports.useLabels = useLabels.useLabels;
-exports.useTheme = useTheme.useTheme;
 exports.useUniqueId = useUniqueId.useUniqueId;
 exports.useWidth = useWidth.useWidth;
 exports.HvProvider = Provider.HvProvider;
@@ -355,9 +379,6 @@ exports.fixedForwardRef = generic.fixedForwardRef;
 exports.withTooltip = withTooltip.withTooltip;
 exports.isBrowser = browser.isBrowser;
 exports.checkValidHexColorValue = checkValidHexColorValue.checkValidHexColorValue;
-exports.createClasses = classes.createClasses;
-exports.getClasses = classes.getClasses;
-exports.replace$ = classes.replace$;
 exports.getFirstAndLastFocus = focusableElementFinder.getFirstAndLastFocus;
 exports.getFocusableList = focusableElementFinder.getFocusableList;
 exports.getPrevNextFocus = focusableElementFinder.getPrevNextFocus;
@@ -379,6 +400,7 @@ exports.processThemes = theme.processThemes;
 exports.setElementAttrs = theme.setElementAttrs;
 exports.useSavedState = useSavedState.useSavedState;
 exports.wrapperTooltip = wrapperTooltip.wrapperTooltip;
+exports.uniqueId = helpers.uniqueId;
 exports.useHvData = useTable.default;
 exports.useHvTable = useTable.default;
 exports.typographyVariants = utils.typographyVariants;
@@ -703,19 +725,3 @@ exports.HvTableSection = TableSection.HvTableSection;
 exports.HvIconButton = IconButton.HvIconButton;
 exports.skeletonClasses = Skeleton_styles.staticClasses;
 exports.HvSkeleton = Skeleton.HvSkeleton;
-Object.defineProperty(exports, "EmotionContext", {
-  enumerable: true,
-  get: () => uikitReactShared.EmotionContext
-});
-Object.defineProperty(exports, "HvThemeContext", {
-  enumerable: true,
-  get: () => uikitReactShared.HvThemeContext
-});
-Object.defineProperty(exports, "defaultCacheKey", {
-  enumerable: true,
-  get: () => uikitReactShared.defaultCacheKey
-});
-Object.defineProperty(exports, "defaultEmotionCache", {
-  enumerable: true,
-  get: () => uikitReactShared.defaultEmotionCache
-});

package/dist/esm/Accordion/Accordion.styles.js

@@ -1,6 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
 import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvAccordion", {
   root: {
     "& + root": {

package/dist/esm/ActionBar/ActionBar.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvActionBar", {
   root: {
     width: "100%",

package/dist/esm/ActionsGeneric/ActionsGeneric.js

@@ -23,8 +23,10 @@ const HvActionsGeneric = (props) => {
     onAction,
     maxVisibleActions = Infinity,
     iconOnly: iconOnlyProp,
+    dropdownMenuProps: dropdownMenuPropsProp,
     ...others
   } = useDefaultProps("HvActionsGeneric", props);
+  const { onClick: onClickDropdownMenu, ...dropdownMenuProps } = dropdownMenuPropsProp || {};
   const variant = variantProp || category;
   const { classes, cx } = useClasses(classesProp);
   const handleCallback = (event, id, action) => {
@@ -78,10 +80,14 @@ const HvActionsGeneric = (props) => {
           },
           icon: /* @__PURE__ */ jsx(MoreOptionsVertical, { color: iconColor }),
           placement: "left",
-          onClick: (event, action) => handleCallback(event, idProp || "", action),
+          onClick: (event, action) => {
+            handleCallback(event, idProp || "", action);
+            onClickDropdownMenu?.(event, action);
+          },
           dataList: actsDropdown,
           keepOpened: false,
-          disablePortal: false
+          disablePortal: false,
+          ...dropdownMenuProps
         }
       )
     ] });

package/dist/esm/ActionsGeneric/ActionsGeneric.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionsGeneric.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvDropDownMenu } from \"../DropDownMenu\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  /** Action id. */\n  id: string;\n  /** Action label. */\n  label: string;\n  /** Action icon. */\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  /** Whether the action is disabled or not. */\n  disabled?: boolean;\n  /** When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. */\n  iconOnly?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /**\n   * The button category for all actions.\n   *\n   * @deprecated Use `variant` instead.\n   */\n  category?: HvButtonVariant;\n  /** The button variant for all actions. */\n  variant?: HvButtonVariant;\n  /** Whether the actions should be all disabled. */\n  disabled?: boolean;\n  /** Whether the actions should be all icon buttons when visible. */\n  iconOnly?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an array of actions. */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**\n   * The callback function called when an action is triggered, receiving the `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric,\n  ) => void;\n  /** The callback function called when an action is triggered, receiving the `action` as parameter. */\n  onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;\n  /** The maximum number of visible actions before they're collapsed into a dropdown menu. */\n  maxVisibleActions?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = (props: HvActionsGenericProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant: variantProp,\n    disabled = false,\n    actions = [],\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    maxVisibleActions = Infinity,\n    iconOnly: iconOnlyProp,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const variant = variantProp || category;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleCallback: HvActionsGenericProps[\"actionsCallback\"] = (\n    event,\n    id,\n    action,\n  ) => {\n    actionsCallback?.(event, id, action);\n    onAction?.(event, action);\n  };\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const {\n      disabled: actDisabled,\n      id: actId,\n      icon,\n      label,\n      iconOnly,\n      ...other\n    } = action;\n    const actionId = setId(idProp, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    const commonButtonProps: HvButtonProps = {\n      id: actionId,\n      variant,\n      className: classes.button,\n      disabled: actDisabled ?? disabled,\n      onClick: (event) => handleCallback(event, idProp || \"\", action),\n      ...other,\n    };\n\n    const key = actionId || idx;\n    const isIcon = iconOnly ?? iconOnlyProp;\n\n    if (isIcon) {\n      return (\n        <HvIconButton key={key} {...commonButtonProps} title={label}>\n          {renderedIcon}\n        </HvIconButton>\n      );\n    }\n\n    return (\n      <HvButton key={key} {...commonButtonProps} startIcon={renderedIcon}>\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = variant === \"semantic\";\n    const iconColor =\n      (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(idProp, \"menu\")}\n          disabled={disabled}\n          variant={variant}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) =>\n            handleCallback(event, idProp || \"\", action as HvActionGeneric)\n          }\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className,\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAgEa,MAAA,mBAAmB,CAAC,UAAiC;AAC1D,QAAA;AAAA,IACJ,IAAI;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,WAAW;AAAA;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU,CAAC;AAAA,IACX;AAAA;AAAA,IACA;AAAA,IACA,oBAAoB;AAAA,IACpB,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,oBAAoB,KAAK;AAE7C,QAAM,UAAU,eAAe;AAE/B,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,iBAA2D,CAC/D,OACA,IACA,WACG;AACe,sBAAA,OAAO,IAAI,MAAM;AACnC,eAAW,OAAO,MAAM;AAAA,EAAA;AAGtB,MAAA,CAAC,MAAM,QAAQ,OAAO,EAAU,QAAA,eAAe,OAAO,IAAI,UAAU;AAElE,QAAA,eAAe,CAAC,QAAyB,QAAgB;AACvD,UAAA;AAAA,MACJ,UAAU;AAAA,MACV,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACD,IAAA;AACJ,UAAM,WAAW,MAAM,QAAQ,KAAK,UAAU,OAAO,EAAE;AAEjD,UAAA,eAAe,eAAe,IAAI,IACpC,OACC,OAAoB,EAAE,YAAY,SAAA,CAAU;AAEjD,UAAM,oBAAmC;AAAA,MACvC,IAAI;AAAA,MACJ;AAAA,MACA,WAAW,QAAQ;AAAA,MACnB,UAAU,eAAe;AAAA,MACzB,SAAS,CAAC,UAAU,eAAe,OAAO,UAAU,IAAI,MAAM;AAAA,MAC9D,GAAG;AAAA,IAAA;AAGL,UAAM,MAAM,YAAY;AACxB,UAAM,SAAS,YAAY;AAE3B,QAAI,QAAQ;AACV,iCACG,cAAwB,EAAA,GAAG,mBAAmB,OAAO,OACnD,0BADgB,GAEnB;AAAA,IAEJ;AAEA,+BACG,UAAoB,EAAA,GAAG,mBAAmB,WAAW,cACnD,mBADY,GAEf;AAAA,EAAA;AAIJ,QAAM,oBAAoB,MAAM;AAC9B,UAAM,cAAc,QAAQ,MAAM,GAAG,iBAAiB;AAChD,UAAA,eAAe,QAAQ,MAAM,iBAAiB;AAEpD,UAAM,WAAW,YAAY;AAC7B,UAAM,YACH,YAAY,kBAAoB,YAAY,eAAgB;AAE/D,WAEK,qBAAA,UAAA,EAAA,UAAA;AAAA,MAAA,YAAY,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,MAC3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI,MAAM,QAAQ,MAAM;AAAA,UACxB;AAAA,UACA;AAAA,UACA,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,YACd,MAAM,QAAQ;AAAA,YACd,cAAc,QAAQ;AAAA,UACxB;AAAA,UACA,MAAM,oBAAC,qBAAoB,EAAA,OAAO,UAAW,CAAA;AAAA,UAC7C,WAAU;AAAA,UACV,SAAS,CAAC,OAAO,WACf,eAAe,OAAO,UAAU,IAAI,MAAyB;AAAA,UAE/D,UAAU;AAAA,UACV,YAAY;AAAA,UACZ,eAAe;AAAA,QAAA;AAAA,MACjB;AAAA,IACF,EAAA,CAAA;AAAA,EAAA;AAIE,QAAA,iBAAiB,QAAQ,SAAS;AAGtC,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,EAAE,CAAC,QAAQ,eAAe,GAAG,eAAe;AAAA,QAC5C;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAA,iBACG,kBAAkB,IAClB,QAAQ,IAAI,CAAC,QAAQ,QAAQ,aAAa,QAAQ,GAAG,CAAC;AAAA,IAAA;AAAA,EAAA;AAGhE;"}
+{"version":3,"file":"ActionsGeneric.js","sources":["../../../src/ActionsGeneric/ActionsGeneric.tsx"],"sourcesContent":["import { isValidElement } from \"react\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton, HvButtonProps, HvButtonVariant } from \"../Button\";\nimport { HvDropDownMenu, HvDropDownMenuProps } from \"../DropDownMenu\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvIconButton } from \"../IconButton\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./ActionsGeneric.styles\";\n\nexport { staticClasses as actionsGenericClasses };\n\nexport type HvActionsGenericClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionGeneric {\n  /** Action id. */\n  id: string;\n  /** Action label. */\n  label: string;\n  /** Action icon. */\n  icon?:\n    | React.ReactNode\n    | ((params: { isDisabled?: boolean }) => React.ReactNode);\n  /** Whether the action is disabled or not. */\n  disabled?: boolean;\n  /** When set to `true`, the button will have the icon has its content and a tooltip with the label will appear when the button is visible and hovered. */\n  iconOnly?: boolean;\n}\n\nexport interface HvActionsGenericProps extends HvBaseProps {\n  /**\n   * The button category for all actions.\n   *\n   * @deprecated Use `variant` instead.\n   */\n  category?: HvButtonVariant;\n  /** The button variant for all actions. */\n  variant?: HvButtonVariant;\n  /** Whether the actions should be all disabled. */\n  disabled?: boolean;\n  /** Whether the actions should be all icon buttons when visible. */\n  iconOnly?: boolean;\n  /** The renderable content inside the actions slot of the footer, or an array of actions. */\n  actions: React.ReactNode | HvActionGeneric[];\n  /**\n   * The callback function called when an action is triggered, receiving the `action` as parameter.\n   *\n   * @deprecated Use `onAction` instead.\n   * */\n  actionsCallback?: (\n    event: React.SyntheticEvent,\n    id: string,\n    action: HvActionGeneric,\n  ) => void;\n  /** The callback function called when an action is triggered, receiving the `action` as parameter. */\n  onAction?: (event: React.SyntheticEvent, action: HvActionGeneric) => void;\n  /** The maximum number of visible actions before they're collapsed into a dropdown menu. */\n  maxVisibleActions?: number;\n  /** Props to be applied to the dropdown menu. */\n  dropdownMenuProps?: Partial<HvDropDownMenuProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionsGenericClasses;\n}\n\nexport const HvActionsGeneric = (props: HvActionsGenericProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    category = \"secondaryGhost\", // TODO - remove and update variant default in v6\n    variant: variantProp,\n    disabled = false,\n    actions = [],\n    actionsCallback, // TODO - remove in v6\n    onAction,\n    maxVisibleActions = Infinity,\n    iconOnly: iconOnlyProp,\n    dropdownMenuProps: dropdownMenuPropsProp,\n    ...others\n  } = useDefaultProps(\"HvActionsGeneric\", props);\n\n  const { onClick: onClickDropdownMenu, ...dropdownMenuProps } =\n    dropdownMenuPropsProp || {};\n\n  const variant = variantProp || category;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleCallback: HvActionsGenericProps[\"actionsCallback\"] = (\n    event,\n    id,\n    action,\n  ) => {\n    actionsCallback?.(event, id, action);\n    onAction?.(event, action);\n  };\n\n  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;\n\n  const renderButton = (action: HvActionGeneric, idx: number) => {\n    const {\n      disabled: actDisabled,\n      id: actId,\n      icon,\n      label,\n      iconOnly,\n      ...other\n    } = action;\n    const actionId = setId(idProp, idx, \"action\", action.id);\n\n    const renderedIcon = isValidElement(icon)\n      ? icon\n      : (icon as Function)?.({ isDisabled: disabled });\n\n    const commonButtonProps: HvButtonProps = {\n      id: actionId,\n      variant,\n      className: classes.button,\n      disabled: actDisabled ?? disabled,\n      onClick: (event) => handleCallback(event, idProp || \"\", action),\n      ...other,\n    };\n\n    const key = actionId || idx;\n    const isIcon = iconOnly ?? iconOnlyProp;\n\n    if (isIcon) {\n      return (\n        <HvIconButton key={key} {...commonButtonProps} title={label}>\n          {renderedIcon}\n        </HvIconButton>\n      );\n    }\n\n    return (\n      <HvButton key={key} {...commonButtonProps} startIcon={renderedIcon}>\n        {label}\n      </HvButton>\n    );\n  };\n\n  const renderActionsGrid = () => {\n    const actsVisible = actions.slice(0, maxVisibleActions);\n    const actsDropdown = actions.slice(maxVisibleActions);\n\n    const semantic = variant === \"semantic\";\n    const iconColor =\n      (disabled && \"secondary_60\") || (semantic && \"base_dark\") || undefined;\n\n    return (\n      <>\n        {actsVisible.map((action, idx) => renderButton(action, idx))}\n        <HvDropDownMenu\n          id={setId(idProp, \"menu\")}\n          disabled={disabled}\n          variant={variant}\n          classes={{\n            root: classes.dropDownMenu,\n            icon: classes.dropDownMenuButton,\n            iconSelected: classes.dropDownMenuButtonSelected,\n          }}\n          icon={<MoreOptionsVertical color={iconColor} />}\n          placement=\"left\"\n          onClick={(event, action) => {\n            handleCallback(event, idProp || \"\", action as HvActionGeneric);\n            onClickDropdownMenu?.(event, action);\n          }}\n          dataList={actsDropdown}\n          keepOpened={false}\n          disablePortal={false}\n          {...dropdownMenuProps}\n        />\n      </>\n    );\n  };\n\n  const actionOverflow = actions.length > maxVisibleActions;\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        { [classes.actionContainer]: actionOverflow },\n        className,\n      )}\n      {...others}\n    >\n      {actionOverflow\n        ? renderActionsGrid()\n        : actions.map((action, idx) => renderButton(action, idx))}\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/ActionsGeneric/ActionsGeneric.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvActionsGeneric", {
   root: {},
   button: {

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

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses(
   "HvAppSwitcher-Action",
   {

package/dist/esm/AppSwitcher/AppSwitcher.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvAppSwitcher", {
   root: {
     display: "flex",

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

@@ -1,5 +1,5 @@
-import { createClasses } from "../utils/classes.js";
 import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const EXTRA_SMALL = { container: "32px", avatar: "24px" };
 const SMALL = { container: "40px", avatar: "32px" };
 const MEDIUM = { container: "48px", avatar: "40px" };

package/dist/esm/AvatarGroup/AvatarGroup.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, Children } from "react";
-import { css } from "@emotion/css";
+import { useCss } from "@hitachivantara/uikit-react-shared";
 import { theme } from "@hitachivantara/uikit-styles";
 import { HvAvatar } from "../Avatar/Avatar.js";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
@@ -48,6 +48,7 @@ const Overflow = ({
   maxVisible,
   size
 }) => {
+  const { css } = useCss();
   return /* @__PURE__ */ jsx(
     "div",
     {

package/dist/esm/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { Children, forwardRef } from \"react\";\nimport { css } from \"@emotion/css\";\nimport { HvSize, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../Avatar/Avatar\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./AvatarGroup.styles\";\nimport { HvAvatarGroupProvider } from \"./AvatarGroupContext\";\n\nexport { staticClasses as avatarGroupClasses };\n\nexport type HvAvatarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAvatarGroupProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarGroupClasses;\n  /** The avatar size. */\n  size?: HvSize;\n  /** The spacing between avatars. */\n  spacing?: \"compact\" | \"loose\";\n  /** The direction of the group. */\n  direction?: \"row\" | \"column\";\n  /** Whether the avatars display behind the previous avatar or on top. */\n  toBack?: boolean;\n  /**\n   * The maximum number of visible avatars. If there are more avatars then the value of this property, an added avatar will\n   * be added to the end of the list, indicating the number of hidden avatars.\n   */\n  maxVisible?: number;\n  /**\n   * What to show as an overflow representation.\n   * If `undefined` a default `HvAvatar` will be displayed along with a HvTooltip with the count of overflowing items.\n   * */\n  overflowComponent?: (overflowCount: number) => React.ReactNode;\n  /**\n   * If `true` the avatars will be brought to the front when hovered.\n   */\n  highlight?: boolean;\n}\n\nconst getSpacingValue = (\n  spacing: HvAvatarGroupProps[\"spacing\"],\n  size: HvAvatarGroupProps[\"size\"],\n) => {\n  switch (size) {\n    case \"xs\":\n      return spacing === \"compact\" ? 24 : 16;\n    case \"sm\":\n      return spacing === \"compact\" ? 30 : 18;\n    case \"md\":\n      return spacing === \"compact\" ? 36 : 20;\n    case \"lg\":\n      return spacing === \"compact\" ? 44 : 24;\n    case \"xl\":\n      return spacing === \"compact\" ? 72 : 34;\n    default:\n      return spacing === \"compact\" ? 30 : 18;\n  }\n};\n\nconst getFontSize = (size: HvAvatarGroupProps[\"size\"]) => {\n  switch (size) {\n    case \"xs\":\n      return \"1em\";\n    case \"sm\":\n      return \"1.25em\";\n    case \"md\":\n      return \"1.5em\";\n    case \"lg\":\n      return \"1.75em\";\n    case \"xl\":\n      return \"3em\";\n    default:\n      return \"1em\";\n  }\n};\n\ninterface OverflowProps {\n  direction: HvAvatarGroupProps[\"direction\"];\n  childrenToShow: React.ReactNode[];\n  spacingValue: number;\n  overflowComponent?: (n: number) => React.ReactNode;\n  totalChildren: number;\n  maxVisible: number;\n  size: HvAvatarGroupProps[\"size\"];\n}\n\nconst Overflow = ({\n  direction,\n  childrenToShow,\n  spacingValue,\n  overflowComponent,\n  totalChildren,\n  maxVisible,\n  size,\n}: OverflowProps) => {\n  return (\n    <div\n      style={{\n        marginLeft:\n          direction === \"row\" && childrenToShow.length > 0 ? -spacingValue : 0,\n        marginTop:\n          direction === \"column\" && childrenToShow.length > 0\n            ? -spacingValue\n            : 0,\n        zIndex: 0,\n      }}\n    >\n      {overflowComponent ? (\n        overflowComponent(totalChildren - maxVisible)\n      ) : (\n        <HvAvatar\n          size={size}\n          backgroundColor={theme.colors.atmo4}\n          classes={{\n            avatar: css({\n              [`&.HvAvatar-${size}`]: {\n                fontSize: getFontSize(size),\n              },\n            }),\n          }}\n        >\n          +{totalChildren - maxVisible}\n        </HvAvatar>\n      )}\n    </div>\n  );\n};\n\n/**\n * The AvatarGroup component is used to group multiple avatars.\n */\nexport const HvAvatarGroup = forwardRef<HTMLDivElement, HvAvatarGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      style,\n      classes: classesProp,\n      children,\n      size = \"sm\",\n      spacing = \"loose\",\n      direction = \"row\",\n      maxVisible = 3,\n      overflowComponent,\n      highlight = false,\n      toBack = false,\n      ...others\n    } = useDefaultProps(\"HvAvatarGroup\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const spacingValue = getSpacingValue(spacing, size);\n\n    const totalChildren = Children.count(children);\n    const willOverflow = totalChildren > maxVisible;\n\n    const childrenToShow = Children.toArray(children).slice(0, maxVisible);\n\n    // Since the `HvAvatar` components are displayed in reverse order using `row-reverse`, we need to reverse the array.\n    if (toBack) childrenToShow.reverse();\n\n    return (\n      <div\n        className={cx(\n          classes.root,\n          classes[direction],\n          { [classes.highlight]: highlight },\n          { [classes.toBack]: toBack },\n          className,\n        )}\n        style={{\n          [\"--spacing\" as string]: `-${spacingValue}px`,\n          ...style,\n        }}\n        ref={ref}\n        {...others}\n      >\n        <HvAvatarGroupProvider size={size}>\n          {toBack && willOverflow && (\n            <Overflow\n              childrenToShow={childrenToShow}\n              direction={direction}\n              maxVisible={maxVisible}\n              overflowComponent={overflowComponent}\n              size={size}\n              spacingValue={spacingValue}\n              totalChildren={totalChildren}\n            />\n          )}\n          {childrenToShow}\n          {!toBack && willOverflow && (\n            <Overflow\n              childrenToShow={childrenToShow}\n              direction={direction}\n              maxVisible={maxVisible}\n              overflowComponent={overflowComponent}\n              size={size}\n              spacingValue={spacingValue}\n              totalChildren={totalChildren}\n            />\n          )}\n        </HvAvatarGroupProvider>\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AvatarGroup.js","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { Children, forwardRef } from \"react\";\nimport { useCss } from \"@hitachivantara/uikit-react-shared\";\nimport { HvSize, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../Avatar/Avatar\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./AvatarGroup.styles\";\nimport { HvAvatarGroupProvider } from \"./AvatarGroupContext\";\n\nexport { staticClasses as avatarGroupClasses };\n\nexport type HvAvatarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAvatarGroupProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarGroupClasses;\n  /** The avatar size. */\n  size?: HvSize;\n  /** The spacing between avatars. */\n  spacing?: \"compact\" | \"loose\";\n  /** The direction of the group. */\n  direction?: \"row\" | \"column\";\n  /** Whether the avatars display behind the previous avatar or on top. */\n  toBack?: boolean;\n  /**\n   * The maximum number of visible avatars. If there are more avatars then the value of this property, an added avatar will\n   * be added to the end of the list, indicating the number of hidden avatars.\n   */\n  maxVisible?: number;\n  /**\n   * What to show as an overflow representation.\n   * If `undefined` a default `HvAvatar` will be displayed along with a HvTooltip with the count of overflowing items.\n   * */\n  overflowComponent?: (overflowCount: number) => React.ReactNode;\n  /**\n   * If `true` the avatars will be brought to the front when hovered.\n   */\n  highlight?: boolean;\n}\n\nconst getSpacingValue = (\n  spacing: HvAvatarGroupProps[\"spacing\"],\n  size: HvAvatarGroupProps[\"size\"],\n) => {\n  switch (size) {\n    case \"xs\":\n      return spacing === \"compact\" ? 24 : 16;\n    case \"sm\":\n      return spacing === \"compact\" ? 30 : 18;\n    case \"md\":\n      return spacing === \"compact\" ? 36 : 20;\n    case \"lg\":\n      return spacing === \"compact\" ? 44 : 24;\n    case \"xl\":\n      return spacing === \"compact\" ? 72 : 34;\n    default:\n      return spacing === \"compact\" ? 30 : 18;\n  }\n};\n\nconst getFontSize = (size: HvAvatarGroupProps[\"size\"]) => {\n  switch (size) {\n    case \"xs\":\n      return \"1em\";\n    case \"sm\":\n      return \"1.25em\";\n    case \"md\":\n      return \"1.5em\";\n    case \"lg\":\n      return \"1.75em\";\n    case \"xl\":\n      return \"3em\";\n    default:\n      return \"1em\";\n  }\n};\n\ninterface OverflowProps {\n  direction: HvAvatarGroupProps[\"direction\"];\n  childrenToShow: React.ReactNode[];\n  spacingValue: number;\n  overflowComponent?: (n: number) => React.ReactNode;\n  totalChildren: number;\n  maxVisible: number;\n  size: HvAvatarGroupProps[\"size\"];\n}\n\nconst Overflow = ({\n  direction,\n  childrenToShow,\n  spacingValue,\n  overflowComponent,\n  totalChildren,\n  maxVisible,\n  size,\n}: OverflowProps) => {\n  const { css } = useCss();\n\n  return (\n    <div\n      style={{\n        marginLeft:\n          direction === \"row\" && childrenToShow.length > 0 ? -spacingValue : 0,\n        marginTop:\n          direction === \"column\" && childrenToShow.length > 0\n            ? -spacingValue\n            : 0,\n        zIndex: 0,\n      }}\n    >\n      {overflowComponent ? (\n        overflowComponent(totalChildren - maxVisible)\n      ) : (\n        <HvAvatar\n          size={size}\n          backgroundColor={theme.colors.atmo4}\n          classes={{\n            avatar: css({\n              [`&.HvAvatar-${size}`]: {\n                fontSize: getFontSize(size),\n              },\n            }),\n          }}\n        >\n          +{totalChildren - maxVisible}\n        </HvAvatar>\n      )}\n    </div>\n  );\n};\n\n/**\n * The AvatarGroup component is used to group multiple avatars.\n */\nexport const HvAvatarGroup = forwardRef<HTMLDivElement, HvAvatarGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      style,\n      classes: classesProp,\n      children,\n      size = \"sm\",\n      spacing = \"loose\",\n      direction = \"row\",\n      maxVisible = 3,\n      overflowComponent,\n      highlight = false,\n      toBack = false,\n      ...others\n    } = useDefaultProps(\"HvAvatarGroup\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const spacingValue = getSpacingValue(spacing, size);\n\n    const totalChildren = Children.count(children);\n    const willOverflow = totalChildren > maxVisible;\n\n    const childrenToShow = Children.toArray(children).slice(0, maxVisible);\n\n    // Since the `HvAvatar` components are displayed in reverse order using `row-reverse`, we need to reverse the array.\n    if (toBack) childrenToShow.reverse();\n\n    return (\n      <div\n        className={cx(\n          classes.root,\n          classes[direction],\n          { [classes.highlight]: highlight },\n          { [classes.toBack]: toBack },\n          className,\n        )}\n        style={{\n          [\"--spacing\" as string]: `-${spacingValue}px`,\n          ...style,\n        }}\n        ref={ref}\n        {...others}\n      >\n        <HvAvatarGroupProvider size={size}>\n          {toBack && willOverflow && (\n            <Overflow\n              childrenToShow={childrenToShow}\n              direction={direction}\n              maxVisible={maxVisible}\n              overflowComponent={overflowComponent}\n              size={size}\n              spacingValue={spacingValue}\n              totalChildren={totalChildren}\n            />\n          )}\n          {childrenToShow}\n          {!toBack && willOverflow && (\n            <Overflow\n              childrenToShow={childrenToShow}\n              direction={direction}\n              maxVisible={maxVisible}\n              overflowComponent={overflowComponent}\n              size={size}\n              spacingValue={spacingValue}\n              totalChildren={totalChildren}\n            />\n          )}\n        </HvAvatarGroupProvider>\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/AvatarGroup/AvatarGroup.styles.js

@@ -1,7 +1,7 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import "../Avatar/Avatar.js";
-import { createClasses } from "../utils/classes.js";
 import { staticClasses as staticClasses$1 } from "../Avatar/Avatar.styles.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { staticClasses, useClasses } = createClasses("HvAvatarGroup", {
   root: {
     display: "flex",

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

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const labelBaseStyle = {
   ...theme.typography.label,
   padding: "0 5px",

package/dist/esm/Banner/Banner.styles.js

@@ -1,5 +1,5 @@
 import { theme } from "@hitachivantara/uikit-styles";
-import { createClasses } from "../utils/classes.js";
+import { createClasses } from "@hitachivantara/uikit-react-shared";
 const { useClasses, staticClasses } = createClasses("HvBanner", {
   /** Styles applied to the component root class when the component is closed. */
   rootClosed: {