@hitachivantara/uikit-react-core 5.63.0 → 5.63.2

package/dist/esm/AvatarGroup/AvatarGroup.js

@@ -1,11 +1,12 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
-import { forwardRef, Children, cloneElement } from "react";
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { forwardRef, Children } from "react";
 import { css } from "@emotion/css";
 import { theme } from "@hitachivantara/uikit-styles";
 import { HvAvatar } from "../Avatar/Avatar.js";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
 import { useClasses } from "./AvatarGroup.styles.js";
 import { staticClasses } from "./AvatarGroup.styles.js";
+import { HvAvatarGroupProvider } from "./AvatarGroupContext.js";
 const getSpacingValue = (spacing, size) => {
   switch (size) {
     case "xs":
@@ -22,83 +23,126 @@ const getSpacingValue = (spacing, size) => {
       return spacing === "compact" ? 30 : 18;
   }
 };
+const getFontSize = (size) => {
+  switch (size) {
+    case "xs":
+      return "1em";
+    case "sm":
+      return "1.25em";
+    case "md":
+      return "1.5em";
+    case "lg":
+      return "1.75em";
+    case "xl":
+      return "3em";
+    default:
+      return "1em";
+  }
+};
+const Overflow = ({
+  direction,
+  childrenToShow,
+  spacingValue,
+  overflowComponent,
+  totalChildren,
+  maxVisible,
+  size
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        marginLeft: direction === "row" && childrenToShow.length > 0 ? -spacingValue : 0,
+        marginTop: direction === "column" && childrenToShow.length > 0 ? -spacingValue : 0,
+        zIndex: 0
+      },
+      children: overflowComponent ? overflowComponent(totalChildren - maxVisible) : /* @__PURE__ */ jsxs(
+        HvAvatar,
+        {
+          size,
+          backgroundColor: theme.colors.atmo4,
+          classes: {
+            avatar: css({
+              [`&.HvAvatar-${size}`]: {
+                fontSize: getFontSize(size)
+              }
+            })
+          },
+          children: [
+            "+",
+            totalChildren - maxVisible
+          ]
+        }
+      )
+    }
+  );
+};
 const HvAvatarGroup = forwardRef(
   (props, ref) => {
     const {
       className,
+      style,
       classes: classesProp,
       children,
       size = "sm",
       spacing = "loose",
       direction = "row",
-      toBack = true,
       maxVisible = 3,
       overflowComponent,
       highlight = false,
+      toBack = false,
       ...others
     } = useDefaultProps("HvAvatarGroup", props);
     const { classes, cx } = useClasses(classesProp);
     const spacingValue = getSpacingValue(spacing, size);
     const totalChildren = Children.count(children);
-    const zIndexMultiplier = toBack ? -1 : 1;
     const willOverflow = totalChildren > maxVisible;
-    return /* @__PURE__ */ jsxs(
+    const childrenToShow = Children.toArray(children).slice(0, maxVisible);
+    if (toBack)
+      childrenToShow.reverse();
+    return /* @__PURE__ */ jsx(
       "div",
       {
-        className: cx(classes.root, classes[direction], className),
+        className: cx(
+          classes.root,
+          classes[direction],
+          { [classes.highlight]: highlight },
+          { [classes.toBack]: toBack },
+          className
+        ),
+        style: {
+          ["--spacing"]: `-${spacingValue}px`,
+          ...style
+        },
         ref,
         ...others,
-        children: [
-          Children.map(children, (child, index) => {
-            if (index < maxVisible) {
-              return cloneElement(child, {
-                classes: {
-                  container: css({
-                    marginLeft: direction === "row" ? index !== 0 ? -spacingValue : 0 : 0,
-                    marginTop: direction === "column" ? index !== 0 ? -spacingValue : 0 : 0
-                  }),
-                  root: css({
-                    zIndex: 100 + index * zIndexMultiplier,
-                    ...highlight && {
-                      "&:hover": {
-                        zIndex: 100 + totalChildren + 1
-                      }
-                    }
-                  })
-                },
-                size
-              });
+        children: /* @__PURE__ */ jsxs(HvAvatarGroupProvider, { size, children: [
+          toBack && willOverflow && /* @__PURE__ */ jsx(
+            Overflow,
+            {
+              childrenToShow,
+              direction,
+              maxVisible,
+              overflowComponent,
+              size,
+              spacingValue,
+              totalChildren
             }
-          }),
-          willOverflow && /* @__PURE__ */ jsx(
-            "div",
+          ),
+          childrenToShow,
+          !toBack && willOverflow && /* @__PURE__ */ jsx(
+            Overflow,
             {
-              style: {
-                marginLeft: direction === "row" ? -spacingValue : 0,
-                marginTop: direction === "column" ? -spacingValue : 0,
-                zIndex: 100 + maxVisible * zIndexMultiplier
-              },
-              children: overflowComponent ? overflowComponent(totalChildren - maxVisible) : /* @__PURE__ */ jsxs(
-                HvAvatar,
-                {
-                  size,
-                  backgroundColor: theme.colors.atmo4,
-                  classes: {
-                    avatar: css({
-                      [`&.HvAvatar-${size}`]: {
-                        fontSize: "unset"
-                      }
-                    })
-                  },
-                  children: [
-                    "+",
-                    totalChildren - maxVisible
-                  ]
-                }
-              )
+              childrenToShow,
+              direction,
+              maxVisible,
+              overflowComponent,
+              size,
+              spacingValue,
+              totalChildren
             }
           )
-        ]
+        ] })
       }
     );
   }

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { Children, cloneElement, 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\";\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\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      classes: classesProp,\n      children,\n      size = \"sm\",\n      spacing = \"loose\",\n      direction = \"row\",\n      toBack = true,\n      maxVisible = 3,\n      overflowComponent,\n      highlight = 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 zIndexMultiplier = toBack ? -1 : 1;\n    const willOverflow = totalChildren > maxVisible;\n\n    return (\n      <div\n        className={cx(classes.root, classes[direction], className)}\n        ref={ref}\n        {...others}\n      >\n        {Children.map(children, (child: any, index: number) => {\n          if (index < maxVisible) {\n            return cloneElement(child, {\n              classes: {\n                container: css({\n                  marginLeft:\n                    direction === \"row\" ? (index !== 0 ? -spacingValue : 0) : 0,\n                  marginTop:\n                    direction === \"column\"\n                      ? index !== 0\n                        ? -spacingValue\n                        : 0\n                      : 0,\n                }),\n                root: css({\n                  zIndex: 100 + index * zIndexMultiplier,\n                  ...(highlight && {\n                    \"&:hover\": {\n                      zIndex: 100 + totalChildren + 1,\n                    },\n                  }),\n                }),\n              },\n              size,\n            });\n          }\n        })}\n        {willOverflow && (\n          <div\n            style={{\n              marginLeft: direction === \"row\" ? -spacingValue : 0,\n              marginTop: direction === \"column\" ? -spacingValue : 0,\n              zIndex: 100 + maxVisible * zIndexMultiplier,\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: \"unset\",\n                    },\n                  }),\n                }}\n              >\n                +{totalChildren - maxVisible}\n              </HvAvatar>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;AAyCA,MAAM,kBAAkB,CACtB,SACA,SACG;AACH,UAAQ,MAAM;AAAA,IACZ,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC;AACS,aAAA,YAAY,YAAY,KAAK;AAAA,EACxC;AACF;AAKO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,aAAa;AAAA,MACb;AAAA,MACA,YAAY;AAAA,MACZ,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,gBAAgB,SAAS,IAAI;AAE5C,UAAA,gBAAgB,SAAS,MAAM,QAAQ;AACvC,UAAA,mBAAmB,SAAS,KAAK;AACvC,UAAM,eAAe,gBAAgB;AAGnC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,QAAQ,SAAS,GAAG,SAAS;AAAA,QACzD;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,SAAS,IAAI,UAAU,CAAC,OAAY,UAAkB;AACrD,gBAAI,QAAQ,YAAY;AACtB,qBAAO,aAAa,OAAO;AAAA,gBACzB,SAAS;AAAA,kBACP,WAAW,IAAI;AAAA,oBACb,YACE,cAAc,QAAS,UAAU,IAAI,CAAC,eAAe,IAAK;AAAA,oBAC5D,WACE,cAAc,WACV,UAAU,IACR,CAAC,eACD,IACF;AAAA,kBAAA,CACP;AAAA,kBACD,MAAM,IAAI;AAAA,oBACR,QAAQ,MAAM,QAAQ;AAAA,oBACtB,GAAI,aAAa;AAAA,sBACf,WAAW;AAAA,wBACT,QAAQ,MAAM,gBAAgB;AAAA,sBAChC;AAAA,oBACF;AAAA,kBAAA,CACD;AAAA,gBACH;AAAA,gBACA;AAAA,cAAA,CACD;AAAA,YACH;AAAA,UAAA,CACD;AAAA,UACA,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,YAAY,cAAc,QAAQ,CAAC,eAAe;AAAA,gBAClD,WAAW,cAAc,WAAW,CAAC,eAAe;AAAA,gBACpD,QAAQ,MAAM,aAAa;AAAA,cAC7B;AAAA,cAEC,UACC,oBAAA,kBAAkB,gBAAgB,UAAU,IAE5C;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA,iBAAiB,MAAM,OAAO;AAAA,kBAC9B,SAAS;AAAA,oBACP,QAAQ,IAAI;AAAA,sBACV,CAAC,cAAc,IAAI,EAAE,GAAG;AAAA,wBACtB,UAAU;AAAA,sBACZ;AAAA,oBAAA,CACD;AAAA,kBACH;AAAA,kBACD,UAAA;AAAA,oBAAA;AAAA,oBACG,gBAAgB;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACpB;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}
+{"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\nconst Overflow = ({\n  direction,\n  childrenToShow,\n  spacingValue,\n  overflowComponent,\n  totalChildren,\n  maxVisible,\n  size,\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":";;;;;;;;;AA0CA,MAAM,kBAAkB,CACtB,SACA,SACG;AACH,UAAQ,MAAM;AAAA,IACZ,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC;AACS,aAAA,YAAY,YAAY,KAAK;AAAA,EACxC;AACF;AAEA,MAAM,cAAc,CAAC,SAAqC;AACxD,UAAQ,MAAM;AAAA,IACZ,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT,KAAK;AACI,aAAA;AAAA,IACT;AACS,aAAA;AAAA,EACX;AACF;AAEA,MAAM,WAAW,CAAC;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AAEF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,QACL,YACE,cAAc,SAAS,eAAe,SAAS,IAAI,CAAC,eAAe;AAAA,QACrE,WACE,cAAc,YAAY,eAAe,SAAS,IAC9C,CAAC,eACD;AAAA,QACN,QAAQ;AAAA,MACV;AAAA,MAEC,UACC,oBAAA,kBAAkB,gBAAgB,UAAU,IAE5C;AAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,iBAAiB,MAAM,OAAO;AAAA,UAC9B,SAAS;AAAA,YACP,QAAQ,IAAI;AAAA,cACV,CAAC,cAAc,IAAI,EAAE,GAAG;AAAA,gBACtB,UAAU,YAAY,IAAI;AAAA,cAC5B;AAAA,YAAA,CACD;AAAA,UACH;AAAA,UACD,UAAA;AAAA,YAAA;AAAA,YACG,gBAAgB;AAAA,UAAA;AAAA,QAAA;AAAA,MACpB;AAAA,IAAA;AAAA,EAAA;AAIR;AAKO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,aAAa;AAAA,MACb;AAAA,MACA,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,gBAAgB,SAAS,IAAI;AAE5C,UAAA,gBAAgB,SAAS,MAAM,QAAQ;AAC7C,UAAM,eAAe,gBAAgB;AAErC,UAAM,iBAAiB,SAAS,QAAQ,QAAQ,EAAE,MAAM,GAAG,UAAU;AAGjE,QAAA;AAAQ,qBAAe,QAAQ;AAGjC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW;AAAA,UACT,QAAQ;AAAA,UACR,QAAQ,SAAS;AAAA,UACjB,EAAE,CAAC,QAAQ,SAAS,GAAG,UAAU;AAAA,UACjC,EAAE,CAAC,QAAQ,MAAM,GAAG,OAAO;AAAA,UAC3B;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACL,CAAC,WAAqB,GAAG,IAAI,YAAY;AAAA,UACzC,GAAG;AAAA,QACL;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QAEJ,UAAA,qBAAC,yBAAsB,MACpB,UAAA;AAAA,UAAA,UAAU,gBACT;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UACF;AAAA,UAED;AAAA,UACA,CAAC,UAAU,gBACV;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

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

@@ -8,14 +8,64 @@ const { staticClasses, useClasses } = createClasses("HvAvatarGroup", {
     [`& .${staticClasses$1.root}`]: {
       border: `2px solid ${theme.colors.atmo2}`,
       boxSizing: "content-box"
+    },
+    "&$row": {
+      flexDirection: "row",
+      justifyContent: "flex-start",
+      [`& .${staticClasses$1.container}`]: {
+        "&:not(:first-of-type)": {
+          marginLeft: "var(--spacing)"
+        }
+      },
+      "&$toBack": {
+        flexDirection: "row-reverse",
+        justifyContent: "flex-end",
+        [`& .${staticClasses$1.container}`]: {
+          "&:last-of-type": {
+            marginLeft: 0
+          },
+          "&:not(:last-of-type)": {
+            marginLeft: "var(--spacing)"
+          }
+        }
+      }
+    },
+    "&$column": {
+      flexDirection: "column",
+      [`& .${staticClasses$1.container}`]: {
+        "&:not(:first-of-type)": {
+          marginTop: "var(--spacing)"
+        }
+      },
+      "&$toBack": {
+        flexDirection: "column-reverse",
+        [`& .${staticClasses$1.container}`]: {
+          "&:last-of-type": {
+            marginTop: 0
+          },
+          "&:not(:last-of-type)": {
+            marginTop: "var(--spacing)"
+          }
+        }
+      }
+    },
+    [`&$highlight`]: {
+      [`& .${staticClasses$1.status}:hover`]: {
+        zIndex: theme.zIndices.popover
+      }
     }
   },
   row: {
-    flexDirection: "row"
+    flexDirection: "row",
+    justifyContent: "flex-start",
+    "&$toBack": {
+      flexDirection: "row-reverse",
+      justifyContent: "flex-end"
+    }
   },
-  column: {
-    flexDirection: "column"
-  }
+  column: {},
+  highlight: {},
+  toBack: {}
 });
 export {
   staticClasses,

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

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.styles.js","sources":["../../../src/AvatarGroup/AvatarGroup.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { avatarClasses } from \"../Avatar/Avatar\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAvatarGroup\", {\n  root: {\n    display: \"flex\",\n    [`& .${avatarClasses.root}`]: {\n      border: `2px solid ${theme.colors.atmo2}`,\n      boxSizing: \"content-box\",\n    },\n  },\n  row: {\n    flexDirection: \"row\",\n  },\n  column: {\n    flexDirection: \"column\",\n  },\n});\n"],"names":["avatarClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,CAAC,MAAMA,gBAAc,IAAI,EAAE,GAAG;AAAA,MAC5B,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,MACvC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,KAAK;AAAA,IACH,eAAe;AAAA,EACjB;AAAA,EACA,QAAQ;AAAA,IACN,eAAe;AAAA,EACjB;AACF,CAAC;"}
+{"version":3,"file":"AvatarGroup.styles.js","sources":["../../../src/AvatarGroup/AvatarGroup.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { avatarClasses } from \"../Avatar/Avatar\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAvatarGroup\", {\n  root: {\n    display: \"flex\",\n    [`& .${avatarClasses.root}`]: {\n      border: `2px solid ${theme.colors.atmo2}`,\n      boxSizing: \"content-box\",\n    },\n    \"&$row\": {\n      flexDirection: \"row\",\n      justifyContent: \"flex-start\",\n\n      [`& .${avatarClasses.container}`]: {\n        \"&:not(:first-of-type)\": {\n          marginLeft: \"var(--spacing)\",\n        },\n      },\n      \"&$toBack\": {\n        flexDirection: \"row-reverse\",\n        justifyContent: \"flex-end\",\n        [`& .${avatarClasses.container}`]: {\n          \"&:last-of-type\": {\n            marginLeft: 0,\n          },\n          \"&:not(:last-of-type)\": {\n            marginLeft: \"var(--spacing)\",\n          },\n        },\n      },\n    },\n    \"&$column\": {\n      flexDirection: \"column\",\n      [`& .${avatarClasses.container}`]: {\n        \"&:not(:first-of-type)\": {\n          marginTop: \"var(--spacing)\",\n        },\n      },\n      \"&$toBack\": {\n        flexDirection: \"column-reverse\",\n        [`& .${avatarClasses.container}`]: {\n          \"&:last-of-type\": {\n            marginTop: 0,\n          },\n          \"&:not(:last-of-type)\": {\n            marginTop: \"var(--spacing)\",\n          },\n        },\n      },\n    },\n    [`&$highlight`]: {\n      [`& .${avatarClasses.status}:hover`]: {\n        zIndex: theme.zIndices.popover,\n      },\n    },\n  },\n  row: {\n    flexDirection: \"row\",\n    justifyContent: \"flex-start\",\n    \"&$toBack\": {\n      flexDirection: \"row-reverse\",\n      justifyContent: \"flex-end\",\n    },\n  },\n  column: {},\n  highlight: {},\n  toBack: {},\n});\n"],"names":["avatarClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,CAAC,MAAMA,gBAAc,IAAI,EAAE,GAAG;AAAA,MAC5B,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,MACvC,WAAW;AAAA,IACb;AAAA,IACA,SAAS;AAAA,MACP,eAAe;AAAA,MACf,gBAAgB;AAAA,MAEhB,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,QACjC,yBAAyB;AAAA,UACvB,YAAY;AAAA,QACd;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,eAAe;AAAA,QACf,gBAAgB;AAAA,QAChB,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,UACjC,kBAAkB;AAAA,YAChB,YAAY;AAAA,UACd;AAAA,UACA,wBAAwB;AAAA,YACtB,YAAY;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,eAAe;AAAA,MACf,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,QACjC,yBAAyB;AAAA,UACvB,WAAW;AAAA,QACb;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,eAAe;AAAA,QACf,CAAC,MAAMA,gBAAc,SAAS,EAAE,GAAG;AAAA,UACjC,kBAAkB;AAAA,YAChB,WAAW;AAAA,UACb;AAAA,UACA,wBAAwB;AAAA,YACtB,WAAW;AAAA,UACb;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,MACf,CAAC,MAAMA,gBAAc,MAAM,QAAQ,GAAG;AAAA,QACpC,QAAQ,MAAM,SAAS;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAAA,EACA,KAAK;AAAA,IACH,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,YAAY;AAAA,MACV,eAAe;AAAA,MACf,gBAAgB;AAAA,IAClB;AAAA,EACF;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,WAAW,CAAC;AAAA,EACZ,QAAQ,CAAC;AACX,CAAC;"}

package/dist/esm/AvatarGroup/AvatarGroupContext.js

@@ -0,0 +1,19 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useMemo, useContext } from "react";
+const HvAvatarGroupContext = createContext(null);
+const HvAvatarGroupProvider = ({
+  size,
+  children
+}) => {
+  const value = useMemo(() => ({ size }), [size]);
+  return /* @__PURE__ */ jsx(HvAvatarGroupContext.Provider, { value, children });
+};
+const useAvatarGroupContext = () => {
+  const context = useContext(HvAvatarGroupContext);
+  return context;
+};
+export {
+  HvAvatarGroupContext,
+  HvAvatarGroupProvider,
+  useAvatarGroupContext
+};

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

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarGroupContext.js","sources":["../../../src/AvatarGroup/AvatarGroupContext.tsx"],"sourcesContent":["import { createContext, useContext, useMemo } from \"react\";\nimport { HvSize } from \"@hitachivantara/uikit-styles\";\n\ntype HvAvatarGroupContextProviderProps = {\n  size: HvSize;\n  children: React.ReactNode;\n};\n\ntype HvAvatarGroupContextProp = {\n  size: HvSize;\n};\n\nexport const HvAvatarGroupContext =\n  createContext<HvAvatarGroupContextProp | null>(null);\n\nexport const HvAvatarGroupProvider = ({\n  size,\n  children,\n}: HvAvatarGroupContextProviderProps) => {\n  const value = useMemo(() => ({ size }), [size]);\n\n  return (\n    <HvAvatarGroupContext.Provider value={value}>\n      {children}\n    </HvAvatarGroupContext.Provider>\n  );\n};\n\nexport const useAvatarGroupContext = () => {\n  const context = useContext(HvAvatarGroupContext);\n  return context;\n};\n"],"names":[],"mappings":";;AAYa,MAAA,uBACX,cAA+C,IAAI;AAE9C,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AACF,MAAyC;AACjC,QAAA,QAAQ,QAAQ,OAAO,EAAE,SAAS,CAAC,IAAI,CAAC;AAE9C,SACG,oBAAA,qBAAqB,UAArB,EAA8B,OAC5B,SACH,CAAA;AAEJ;AAEO,MAAM,wBAAwB,MAAM;AACnC,QAAA,UAAU,WAAW,oBAAoB;AACxC,SAAA;AACT;"}

package/dist/esm/CheckBoxGroup/CheckBoxGroup.styles.js

@@ -3,8 +3,8 @@ import { createClasses } from "../utils/classes.js";
 const { staticClasses, useClasses } = createClasses("HvCheckBoxGroup", {
   root: {
     display: "inline-block",
-    padding: 0,
-    margin: 0,
+    padding: 4,
+    margin: -4,
     overflow: "hidden",
     verticalAlign: "top"
   },

package/dist/esm/CheckBoxGroup/CheckBoxGroup.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.styles.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBoxGroup\", {\n  root: {\n    display: \"inline-block\",\n    padding: 0,\n    margin: 0,\n    overflow: \"hidden\",\n    verticalAlign: \"top\",\n  },\n  label: { marginBottom: theme.space.xs },\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n\n    \"&>*:not(:first-of-type)\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.colors.negative}`,\n  },\n  selectAll: {},\n  error: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,EACtC,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IAEV,2BAA2B;AAAA,MACzB,YAAY,MAAM,MAAM;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,OAAO,QAAQ;AAAA,EAClD;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,OAAO,CAAC;AACV,CAAC;"}
+{"version":3,"file":"CheckBoxGroup.styles.js","sources":["../../../src/CheckBoxGroup/CheckBoxGroup.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCheckBoxGroup\", {\n  root: {\n    display: \"inline-block\",\n    padding: 4,\n    margin: -4,\n    overflow: \"hidden\",\n    verticalAlign: \"top\",\n  },\n  label: { marginBottom: theme.space.xs },\n  group: { display: \"flex\" },\n  vertical: {\n    flexDirection: \"column\",\n\n    // Prevent the focus ring to be hidden by sibling hover background\n    \"&>*\": {\n      zIndex: 0,\n    },\n    \"&>*:focus-within\": {\n      zIndex: 1,\n    },\n  },\n  horizontal: {\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n\n    \"&>*:not(:first-of-type)\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  invalid: {\n    paddingBottom: theme.space.xs,\n    borderBottom: `1px solid ${theme.colors.negative}`,\n  },\n  selectAll: {},\n  error: {},\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,eAAe;AAAA,EACjB;AAAA,EACA,OAAO,EAAE,cAAc,MAAM,MAAM,GAAG;AAAA,EACtC,OAAO,EAAE,SAAS,OAAO;AAAA,EACzB,UAAU;AAAA,IACR,eAAe;AAAA;AAAA,IAGf,OAAO;AAAA,MACL,QAAQ;AAAA,IACV;AAAA,IACA,oBAAoB;AAAA,MAClB,QAAQ;AAAA,IACV;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,eAAe;AAAA,IACf,UAAU;AAAA,IAEV,2BAA2B;AAAA,MACzB,YAAY,MAAM,MAAM;AAAA,IAC1B;AAAA,EACF;AAAA,EACA,SAAS;AAAA,IACP,eAAe,MAAM,MAAM;AAAA,IAC3B,cAAc,aAAa,MAAM,OAAO,QAAQ;AAAA,EAClD;AAAA,EACA,WAAW,CAAC;AAAA,EACZ,OAAO,CAAC;AACV,CAAC;"}

package/dist/esm/Dialog/Dialog.js

@@ -68,7 +68,6 @@ const HvDialog = (props) => {
           )
         }
       },
-      "aria-modal": true,
       ...others,
       children: [
         /* @__PURE__ */ jsx(

package/dist/esm/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvIconButton } from \"../IconButton\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\"> {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { rootId } = useTheme();\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n  return (\n    <MuiDialog\n      container={getElementById(rootId)}\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => {\n        // `disableBackdropClick` property was removed in MUI5\n        // and we want to maintain that functionality\n        if (disableBackdropClick) return;\n\n        onClose?.(event, reason);\n      }}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: classes.background,\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            },\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvIconButton\n        title={buttonTitle}\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        onClick={(event) => onClose?.(event, undefined)}\n      >\n        <Close />\n      </HvIconButton>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAiDa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,WAAW;AAEb,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC;AAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS,EAAE,WAAW,IAAI,EAAE,UAAU,WAAA,CAAY,EAAE;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,WAAW;AAGtB,YAAA;AAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM;AAAA,YACJ,IAAI,EAAE,UAAU,YAAY;AAAA,YAC5B,QAAQ;AAAA,YACR,WAAW,GAAG,QAAQ,WAAW,QAAQ,OAAO,CAAC;AAAA,YACjD;AAAA,cACE,CAAC,QAAQ,UAAU,GAAG;AAAA,YACxB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,cAAU;AAAA,MACT,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,UAAU,UAAU,OAAO,MAAS;AAAA,YAE9C,8BAAC,OAAM,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,UACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport { HvIconButton } from \"../IconButton\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\"> {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { rootId } = useTheme();\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n  return (\n    <MuiDialog\n      container={getElementById(rootId)}\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => {\n        // `disableBackdropClick` property was removed in MUI5\n        // and we want to maintain that functionality\n        if (disableBackdropClick) return;\n\n        onClose?.(event, reason);\n      }}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: classes.background,\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            },\n          ),\n        },\n      }}\n      {...others}\n    >\n      <HvIconButton\n        title={buttonTitle}\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        onClick={(event) => onClose?.(event, undefined)}\n      >\n        <Close />\n      </HvIconButton>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAiDa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,WAAW;AAEb,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC;AAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS,EAAE,WAAW,IAAI,EAAE,UAAU,WAAA,CAAY,EAAE;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,WAAW;AAGtB,YAAA;AAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAChB;AAAA,QACF;AAAA,MACF;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM;AAAA,YACJ,IAAI,EAAE,UAAU,YAAY;AAAA,YAC5B,QAAQ;AAAA,YACR,WAAW,GAAG,QAAQ,WAAW,QAAQ,OAAO,CAAC;AAAA,YACjD;AAAA,cACE,CAAC,QAAQ,UAAU,GAAG;AAAA,YACxB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,UAAU,UAAU,OAAO,MAAS;AAAA,YAE9C,8BAAC,OAAM,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,UACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/esm/Drawer/Drawer.js

@@ -44,11 +44,6 @@ const HvDrawer = (props) => {
           backdrop: {
             classes: {
               root: classes.background
-            },
-            onClick: (event) => {
-              if (disableBackdropClick)
-                return;
-              onClose?.(event, "backdropClick");
             }
           }
         }

package/dist/esm/Drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../src/Drawer/Drawer.tsx"],"sourcesContent":["import MuiDrawer, { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvIconButton } from \"../IconButton\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps extends Omit<MuiDrawerProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\",\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer is open.\n   * @deprecated Use `hideBackdrop` instead.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    hideBackdrop,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleOnClose: MuiDrawerProps[\"onClose\"] = (\n    event: React.SyntheticEvent,\n    reason,\n  ) => {\n    if (reason === \"backdropClick\" && disableBackdropClick) return;\n\n    onClose?.(event, reason);\n  };\n\n  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      classes={{\n        paper: classes.paper,\n      }}\n      hideBackdrop={shouldHideBackdrop}\n      {...(!shouldHideBackdrop && {\n        slotProps: {\n          backdrop: {\n            classes: {\n              root: classes.background,\n            },\n            onClick: (event) => {\n              if (disableBackdropClick) return;\n              onClose?.(event, \"backdropClick\");\n            },\n          },\n        },\n      })}\n      onClose={handleOnClose}\n      {...others}\n    >\n      <HvIconButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        onClick={onClose}\n        title={buttonTitle}\n      >\n        <Close />\n      </HvIconButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAuEa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,cAAc;AAAA,IACd,eAAe;AAAA,IACf;AAAA,IACA,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,gBAA2C,CAC/C,OACA,WACG;AACH,QAAI,WAAW,mBAAmB;AAAsB;AAExD,cAAU,OAAO,MAAM;AAAA,EAAA;AAGnB,QAAA,qBAAqB,gBAAgB,CAAC;AAG1C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,cAAc;AAAA,MACb,GAAI,CAAC,sBAAsB;AAAA,QAC1B,WAAW;AAAA,UACT,UAAU;AAAA,YACR,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,YACA,SAAS,CAAC,UAAU;AACd,kBAAA;AAAsB;AAC1B,wBAAU,OAAO,eAAe;AAAA,YAClC;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,YACT,OAAO;AAAA,YAEP,8BAAC,OAAM,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Drawer.js","sources":["../../../src/Drawer/Drawer.tsx"],"sourcesContent":["import MuiDrawer, { DrawerProps as MuiDrawerProps } from \"@mui/material/Drawer\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvIconButton } from \"../IconButton\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps extends Omit<MuiDrawerProps, \"classes\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\",\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /**\n   * Show backdrop when drawer is open.\n   * @deprecated Use `hideBackdrop` instead.\n   */\n  showBackdrop?: boolean;\n  /**\n   * Prevent closing the dialog when clicking on the backdrop.\n   */\n  disableBackdropClick?: boolean;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    showBackdrop = true,\n    hideBackdrop,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleOnClose: MuiDrawerProps[\"onClose\"] = (\n    event: React.SyntheticEvent,\n    reason,\n  ) => {\n    if (reason === \"backdropClick\" && disableBackdropClick) return;\n\n    onClose?.(event, reason);\n  };\n\n  const shouldHideBackdrop = hideBackdrop ?? !showBackdrop;\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      classes={{\n        paper: classes.paper,\n      }}\n      hideBackdrop={shouldHideBackdrop}\n      {...(!shouldHideBackdrop && {\n        slotProps: {\n          backdrop: {\n            classes: {\n              root: classes.background,\n            },\n          },\n        },\n      })}\n      onClose={handleOnClose}\n      {...others}\n    >\n      <HvIconButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        onClick={onClose}\n        title={buttonTitle}\n      >\n        <Close />\n      </HvIconButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAuEa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,cAAc;AAAA,IACd,eAAe;AAAA,IACf;AAAA,IACA,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,gBAA2C,CAC/C,OACA,WACG;AACH,QAAI,WAAW,mBAAmB;AAAsB;AAExD,cAAU,OAAO,MAAM;AAAA,EAAA;AAGnB,QAAA,qBAAqB,gBAAgB,CAAC;AAG1C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS;AAAA,QACP,OAAO,QAAQ;AAAA,MACjB;AAAA,MACA,cAAc;AAAA,MACb,GAAI,CAAC,sBAAsB;AAAA,QAC1B,WAAW;AAAA,UACT,UAAU;AAAA,YACR,SAAS;AAAA,cACP,MAAM,QAAQ;AAAA,YAChB;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,YACT,OAAO;AAAA,YAEP,8BAAC,OAAM,EAAA;AAAA,UAAA;AAAA,QACT;AAAA,QACC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/FilterGroup/Counter/Counter.js

@@ -16,7 +16,7 @@ const getExistingFiltersById = (idx, filterValues, filterOptions) => {
 const HvFilterGroupCounter = (props) => {
   const {
     className,
-    id,
+    groupId,
     classes: classesProp
   } = useDefaultProps("HvFilterGroupCounter", props);
   const { classes, cx } = useClasses(classesProp);
@@ -25,15 +25,13 @@ const HvFilterGroupCounter = (props) => {
     filterValues = [],
     appliedFilters = []
   } = useContext(HvFilterGroupContext);
-  const options = id && filterOptions.find((option) => option.id === id) ? [
-    filterOptions.find((option) => option.id === id)
-  ] : filterOptions;
-  const optionIdx = filterOptions.findIndex((option) => option.id === id);
+  const options = groupId && filterOptions.find((option) => option.id === groupId) ? [filterOptions.find((option) => option.id === groupId)] : filterOptions;
+  const optionIdx = filterOptions.findIndex((option) => option.id === groupId);
   let groupsCounter = 0;
   appliedFilters.forEach((fg, i) => {
     groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);
   });
-  const partialCounter = id ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0 : groupsCounter;
+  const partialCounter = groupId ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0 : groupsCounter;
   const totalCounter = options.reduce(
     (acc, option) => acc + option.data.length,
     0

package/dist/esm/FilterGroup/Counter/Counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Counter.js","sources":["../../../../src/FilterGroup/Counter/Counter.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"../types\";\nimport { staticClasses, useClasses } from \"./Counter.styles\";\n\nexport { staticClasses as filterGroupCounterClasses };\n\nexport type HvFilterGroupCounterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupCounterProps {\n  className?: string;\n  id?: string;\n  classes?: HvFilterGroupCounterClasses;\n}\n\nconst getExistingFiltersById = (\n  idx: number,\n  filterValues: HvFilterGroupValue,\n  filterOptions: HvFilterGroupFilters,\n) => {\n  let total = 0;\n  filterValues[idx]?.forEach((fv) => {\n    if (filterOptions[idx]?.data.find((f) => f.id === fv)) {\n      total += 1;\n    }\n  });\n  return total;\n};\n\nexport const HvFilterGroupCounter = (props: HvFilterGroupCounterProps) => {\n  const {\n    className,\n    id,\n    classes: classesProp,\n  } = useDefaultProps(\"HvFilterGroupCounter\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const {\n    filterOptions,\n    filterValues = [],\n    appliedFilters = [],\n  } = useContext(HvFilterGroupContext);\n\n  const options =\n    id && filterOptions.find((option) => option.id === id)\n      ? ([\n          filterOptions.find((option) => option.id === id),\n        ] as HvFilterGroupFilters)\n      : filterOptions;\n  const optionIdx = filterOptions.findIndex((option) => option.id === id);\n\n  let groupsCounter = 0;\n  appliedFilters.forEach((fg, i) => {\n    groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);\n  });\n\n  const partialCounter = id\n    ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0\n    : groupsCounter;\n\n  const totalCounter = options.reduce(\n    (acc, option) => acc + option.data.length,\n    0,\n  );\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {partialCounter > 0 ? (\n        <p className={classes.partialCounter}>{partialCounter}</p>\n      ) : (\n        partialCounter\n      )}\n      {` / ${totalCounter}`}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,yBAAyB,CAC7B,KACA,cACA,kBACG;AACH,MAAI,QAAQ;AACZ,eAAa,GAAG,GAAG,QAAQ,CAAC,OAAO;AAC7B,QAAA,cAAc,GAAG,GAAG,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG;AAC5C,eAAA;AAAA,IACX;AAAA,EAAA,CACD;AACM,SAAA;AACT;AAEa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,wBAAwB,KAAK;AACjD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA;AAAA,IACJ;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,iBAAiB,CAAC;AAAA,EAAA,IAChB,WAAW,oBAAoB;AAE7B,QAAA,UACJ,MAAM,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE,IAChD;AAAA,IACC,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,EAAE;AAAA,EAEjD,IAAA;AACN,QAAM,YAAY,cAAc,UAAU,CAAC,WAAW,OAAO,OAAO,EAAE;AAEtE,MAAI,gBAAgB;AACL,iBAAA,QAAQ,CAAC,IAAI,MAAM;AACf,qBAAA,uBAAuB,GAAG,cAAc,aAAa;AAAA,EAAA,CACvE;AAED,QAAM,iBAAiB,KACnB,uBAAuB,WAAW,cAAc,aAAa,KAAK,IAClE;AAEJ,QAAM,eAAe,QAAQ;AAAA,IAC3B,CAAC,KAAK,WAAW,MAAM,OAAO,KAAK;AAAA,IACnC;AAAA,EAAA;AAGF,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAA;AAAA,IAAA,iBAAiB,IACf,oBAAA,KAAA,EAAE,WAAW,QAAQ,gBAAiB,0BAAe,IAEtD;AAAA,IAED,MAAM,YAAY;AAAA,EACrB,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Counter.js","sources":["../../../../src/FilterGroup/Counter/Counter.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { HvFilterGroupFilters, HvFilterGroupValue } from \"../types\";\nimport { staticClasses, useClasses } from \"./Counter.styles\";\n\nexport { staticClasses as filterGroupCounterClasses };\n\nexport type HvFilterGroupCounterClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupCounterProps {\n  className?: string;\n  groupId?: string;\n  classes?: HvFilterGroupCounterClasses;\n}\n\nconst getExistingFiltersById = (\n  idx: number,\n  filterValues: HvFilterGroupValue,\n  filterOptions: HvFilterGroupFilters,\n) => {\n  let total = 0;\n  filterValues[idx]?.forEach((fv) => {\n    if (filterOptions[idx]?.data.find((f) => f.id === fv)) {\n      total += 1;\n    }\n  });\n  return total;\n};\n\nexport const HvFilterGroupCounter = (props: HvFilterGroupCounterProps) => {\n  const {\n    className,\n    groupId,\n    classes: classesProp,\n  } = useDefaultProps(\"HvFilterGroupCounter\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const {\n    filterOptions,\n    filterValues = [],\n    appliedFilters = [],\n  } = useContext(HvFilterGroupContext);\n\n  const options =\n    groupId && filterOptions.find((option) => option.id === groupId)\n      ? [filterOptions.find((option) => option.id === groupId)!]\n      : filterOptions;\n  const optionIdx = filterOptions.findIndex((option) => option.id === groupId);\n\n  let groupsCounter = 0;\n  appliedFilters.forEach((fg, i) => {\n    groupsCounter += getExistingFiltersById(i, filterValues, filterOptions);\n  });\n\n  const partialCounter = groupId\n    ? getExistingFiltersById(optionIdx, filterValues, filterOptions) || 0\n    : groupsCounter;\n\n  const totalCounter = options.reduce(\n    (acc, option) => acc + option.data.length,\n    0,\n  );\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {partialCounter > 0 ? (\n        <p className={classes.partialCounter}>{partialCounter}</p>\n      ) : (\n        partialCounter\n      )}\n      {` / ${totalCounter}`}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAkBA,MAAM,yBAAyB,CAC7B,KACA,cACA,kBACG;AACH,MAAI,QAAQ;AACZ,eAAa,GAAG,GAAG,QAAQ,CAAC,OAAO;AAC7B,QAAA,cAAc,GAAG,GAAG,KAAK,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG;AAC5C,eAAA;AAAA,IACX;AAAA,EAAA,CACD;AACM,SAAA;AACT;AAEa,MAAA,uBAAuB,CAAC,UAAqC;AAClE,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,EAAA,IACP,gBAAgB,wBAAwB,KAAK;AACjD,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA;AAAA,IACJ;AAAA,IACA,eAAe,CAAC;AAAA,IAChB,iBAAiB,CAAC;AAAA,EAAA,IAChB,WAAW,oBAAoB;AAEnC,QAAM,UACJ,WAAW,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,IAC3D,CAAC,cAAc,KAAK,CAAC,WAAW,OAAO,OAAO,OAAO,CAAE,IACvD;AACN,QAAM,YAAY,cAAc,UAAU,CAAC,WAAW,OAAO,OAAO,OAAO;AAE3E,MAAI,gBAAgB;AACL,iBAAA,QAAQ,CAAC,IAAI,MAAM;AACf,qBAAA,uBAAuB,GAAG,cAAc,aAAa;AAAA,EAAA,CACvE;AAED,QAAM,iBAAiB,UACnB,uBAAuB,WAAW,cAAc,aAAa,KAAK,IAClE;AAEJ,QAAM,eAAe,QAAQ;AAAA,IAC3B,CAAC,KAAK,WAAW,MAAM,OAAO,KAAK;AAAA,IACnC;AAAA,EAAA;AAGF,8BACG,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GACvC,UAAA;AAAA,IAAA,iBAAiB,IACf,oBAAA,KAAA,EAAE,WAAW,QAAQ,gBAAiB,0BAAe,IAEtD;AAAA,IAED,MAAM,YAAY;AAAA,EACrB,EAAA,CAAA;AAEJ;"}

package/dist/esm/FilterGroup/LeftPanel/LeftPanel.js

@@ -1,7 +1,6 @@
 import { jsx } from "@emotion/react/jsx-runtime";
 import { useContext } from "react";
 import { setId } from "../../utils/setId.js";
-import { wrapperTooltip } from "../../utils/wrapperTooltip.js";
 import { HvFilterGroupContext } from "../FilterGroupContext.js";
 import { useClasses } from "./LeftPanel.styles.js";
 import { staticClasses } from "./LeftPanel.styles.js";
@@ -9,29 +8,26 @@ import { HvFilterGroupCounter } from "../Counter/Counter.js";
 import { HvPanel } from "../../Panel/Panel.js";
 import { HvListContainer } from "../../ListContainer/ListContainer.js";
 import { HvListItem } from "../../ListContainer/ListItem/ListItem.js";
+import { HvOverflowTooltip } from "../../OverflowTooltip/OverflowTooltip.js";
 const HvFilterGroupLeftPanel = ({
   id,
   className,
   emptyElement,
   classes: classesProp
 }) => {
-  const { classes, cx } = useClasses(classesProp);
+  const { classes } = useClasses(classesProp);
   const { filterOptions, activeGroup, setActiveGroup } = useContext(HvFilterGroupContext);
-  return /* @__PURE__ */ jsx(HvPanel, { id: setId(id, "leftPanel"), className, children: filterOptions.length > 0 ? /* @__PURE__ */ jsx(HvListContainer, { id: setId(id, "leftPanel-list"), condensed: true, interactive: true, children: filterOptions.map((group, index) => {
-    const ItemText = wrapperTooltip(true, group.name, group.name);
-    return /* @__PURE__ */ jsx(
-      HvListItem,
-      {
-        id: group.id,
-        className: cx(classes.listItem),
-        onClick: () => setActiveGroup(index),
-        selected: filterOptions[activeGroup].id === group.id,
-        endAdornment: /* @__PURE__ */ jsx(HvFilterGroupCounter, { id: group.id }),
-        children: /* @__PURE__ */ jsx(ItemText, {})
-      },
-      group.name
-    );
-  }) }) : emptyElement });
+  return /* @__PURE__ */ jsx(HvPanel, { id: setId(id, "leftPanel"), className, children: filterOptions.length > 0 ? /* @__PURE__ */ jsx(HvListContainer, { id: setId(id, "leftPanel-list"), condensed: true, interactive: true, children: filterOptions.map((group, index) => /* @__PURE__ */ jsx(
+    HvListItem,
+    {
+      className: classes.listItem,
+      onClick: () => setActiveGroup(index),
+      selected: filterOptions[activeGroup].id === group.id,
+      endAdornment: /* @__PURE__ */ jsx(HvFilterGroupCounter, { groupId: group.id }),
+      children: /* @__PURE__ */ jsx(HvOverflowTooltip, { data: group.name })
+    },
+    group.id || group.name
+  )) }) : emptyElement });
 };
 export {
   HvFilterGroupLeftPanel,

package/dist/esm/FilterGroup/LeftPanel/LeftPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeftPanel.js","sources":["../../../../src/FilterGroup/LeftPanel/LeftPanel.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvListContainer, HvListItem } from \"../../ListContainer\";\nimport { HvPanel } from \"../../Panel\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { wrapperTooltip } from \"../../utils/wrapperTooltip\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./LeftPanel.styles\";\n\nexport { staticClasses as filterGroupLeftPanelClasses };\n\nexport type HvFilterGroupLeftPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupLeftPanelProps {\n  id?: string;\n  className?: string;\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupLeftPanelClasses;\n}\n\nexport const HvFilterGroupLeftPanel = ({\n  id,\n  className,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupLeftPanelProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const { filterOptions, activeGroup, setActiveGroup } =\n    useContext(HvFilterGroupContext);\n\n  return (\n    <HvPanel id={setId(id, \"leftPanel\")} className={className}>\n      {filterOptions.length > 0 ? (\n        <HvListContainer id={setId(id, \"leftPanel-list\")} condensed interactive>\n          {filterOptions.map((group, index) => {\n            const ItemText = wrapperTooltip(true, group.name, group.name);\n\n            return (\n              <HvListItem\n                id={group.id}\n                key={group.name}\n                className={cx(classes.listItem)}\n                onClick={() => setActiveGroup(index)}\n                selected={filterOptions[activeGroup].id === group.id}\n                endAdornment={<HvFilterGroupCounter id={group.id} />}\n              >\n                <ItemText />\n              </HvListItem>\n            );\n          })}\n        </HvListContainer>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAsBO,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AACX,MAAmC;AACjC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAC9C,QAAM,EAAE,eAAe,aAAa,eAAe,IACjD,WAAW,oBAAoB;AAG/B,SAAA,oBAAC,SAAQ,EAAA,IAAI,MAAM,IAAI,WAAW,GAAG,WAClC,UAAA,cAAc,SAAS,IACrB,oBAAA,iBAAA,EAAgB,IAAI,MAAM,IAAI,gBAAgB,GAAG,WAAS,MAAC,aAAW,MACpE,UAAc,cAAA,IAAI,CAAC,OAAO,UAAU;AACnC,UAAM,WAAW,eAAe,MAAM,MAAM,MAAM,MAAM,IAAI;AAG1D,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAI,MAAM;AAAA,QAEV,WAAW,GAAG,QAAQ,QAAQ;AAAA,QAC9B,SAAS,MAAM,eAAe,KAAK;AAAA,QACnC,UAAU,cAAc,WAAW,EAAE,OAAO,MAAM;AAAA,QAClD,cAAc,oBAAC,sBAAqB,EAAA,IAAI,MAAM,IAAI;AAAA,QAElD,8BAAC,UAAS,EAAA;AAAA,MAAA;AAAA,MANL,MAAM;AAAA,IAAA;AAAA,EAOb,CAEH,EACH,CAAA,IAEA,aAEJ,CAAA;AAEJ;"}
+{"version":3,"file":"LeftPanel.js","sources":["../../../../src/FilterGroup/LeftPanel/LeftPanel.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvListContainer, HvListItem } from \"../../ListContainer\";\nimport { HvOverflowTooltip } from \"../../OverflowTooltip\";\nimport { HvPanel } from \"../../Panel\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { setId } from \"../../utils/setId\";\nimport { HvFilterGroupCounter } from \"../Counter\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./LeftPanel.styles\";\n\nexport { staticClasses as filterGroupLeftPanelClasses };\n\nexport type HvFilterGroupLeftPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupLeftPanelProps {\n  id?: string;\n  className?: string;\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupLeftPanelClasses;\n}\n\nexport const HvFilterGroupLeftPanel = ({\n  id,\n  className,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupLeftPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const { filterOptions, activeGroup, setActiveGroup } =\n    useContext(HvFilterGroupContext);\n\n  return (\n    <HvPanel id={setId(id, \"leftPanel\")} className={className}>\n      {filterOptions.length > 0 ? (\n        <HvListContainer id={setId(id, \"leftPanel-list\")} condensed interactive>\n          {filterOptions.map((group, index) => (\n            <HvListItem\n              key={group.id || group.name}\n              className={classes.listItem}\n              onClick={() => setActiveGroup(index)}\n              selected={filterOptions[activeGroup].id === group.id}\n              endAdornment={<HvFilterGroupCounter groupId={group.id} />}\n            >\n              <HvOverflowTooltip data={group.name} />\n            </HvListItem>\n          ))}\n        </HvListContainer>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAsBO,MAAM,yBAAyB,CAAC;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AACX,MAAmC;AACjC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAC1C,QAAM,EAAE,eAAe,aAAa,eAAe,IACjD,WAAW,oBAAoB;AAG/B,SAAA,oBAAC,SAAQ,EAAA,IAAI,MAAM,IAAI,WAAW,GAAG,WAClC,UAAA,cAAc,SAAS,IACrB,oBAAA,iBAAA,EAAgB,IAAI,MAAM,IAAI,gBAAgB,GAAG,WAAS,MAAC,aAAW,MACpE,UAAc,cAAA,IAAI,CAAC,OAAO,UACzB;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAW,QAAQ;AAAA,MACnB,SAAS,MAAM,eAAe,KAAK;AAAA,MACnC,UAAU,cAAc,WAAW,EAAE,OAAO,MAAM;AAAA,MAClD,cAAc,oBAAC,sBAAqB,EAAA,SAAS,MAAM,IAAI;AAAA,MAEvD,UAAC,oBAAA,mBAAA,EAAkB,MAAM,MAAM,MAAM;AAAA,IAAA;AAAA,IANhC,MAAM,MAAM,MAAM;AAAA,EAAA,CAQ1B,EACH,CAAA,IAEA,aAEJ,CAAA;AAEJ;"}