@hitachivantara/uikit-react-core 5.39.1 → 5.39.2

package/dist/esm/components/Login/Login.js

@@ -11,13 +11,19 @@ const HvLogin = (props) => {
     background,
     ...others
   } = useDefaultProps("HvLogin", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx("div", { id, className: cx(classes.root, className), style: {
-    backgroundImage: background && `url(${background})`
-  }, ...others, children: /* @__PURE__ */ jsx("div", { className: classes.formContainer, children }) });
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      className: cx(classes.root, className),
+      style: {
+        backgroundImage: background && `url(${background})`
+      },
+      ...others,
+      children: /* @__PURE__ */ jsx("div", { className: classes.formContainer, children })
+    }
+  );
 };
 export {
   HvLogin,

package/dist/esm/components/Login/Login.js.map

@@ -1 +1 @@
-{"version":3,"file":"Login.js","sources":["../../../../src/components/Login/Login.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { staticClasses, useClasses } from \"./Login.styles\";\n\nexport { staticClasses as loginClasses };\n\nexport type HvLoginClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoginProps extends HvBaseProps {\n  /**\n   *  The path for the background image.\n   */\n  background?: string;\n  /**\n   * Class names to be applied.\n   */\n  classes?: HvLoginClasses;\n}\n\n/**\n * Container layout for the login form.\n */\nexport const HvLogin = (props: HvLoginProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    children,\n    background,\n    ...others\n  } = useDefaultProps(\"HvLogin\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      id={id}\n      className={cx(classes.root, className)}\n      style={{\n        backgroundImage: background && `url(${background})`,\n      }}\n      {...others}\n    >\n      <div className={classes.formContainer}>{children}</div>\n    </div>\n  );\n};\n"],"names":["HvLogin","props","id","className","classes","classesProp","children","background","others","useDefaultProps","cx","useClasses","root","backgroundImage","formContainer"],"mappings":";;;;AAwBaA,MAAAA,UAAUA,CAACC,UAAwB;AACxC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,WAAWR,KAAK;AAE9B,QAAA;AAAA,IAAEG;AAAAA,IAASM;AAAAA,EAAAA,IAAOC,WAAWN,WAAW;AAG5C,SAAA,oBAAC,SACC,IACA,WAAWK,GAAGN,QAAQQ,MAAMT,SAAS,GACrC,OAAO;AAAA,IACLU,iBAAiBN,cAAe,OAAMA,UAAW;AAAA,EACnD,GACIC,GAAAA,QAEJ,UAAA,oBAAC,SAAI,WAAWJ,QAAQU,eAAgBR,SAAS,CAAA,EACnD,CAAA;AAEJ;"}
+{"version":3,"file":"Login.js","sources":["../../../../src/components/Login/Login.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvBaseProps } from \"@core/types/generic\";\n\nimport { staticClasses, useClasses } from \"./Login.styles\";\n\nexport { staticClasses as loginClasses };\n\nexport type HvLoginClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLoginProps extends HvBaseProps {\n  /**\n   *  The path for the background image.\n   */\n  background?: string;\n  /**\n   * Class names to be applied.\n   */\n  classes?: HvLoginClasses;\n}\n\n/**\n * Container layout for the login form.\n */\nexport const HvLogin = (props: HvLoginProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    children,\n    background,\n    ...others\n  } = useDefaultProps(\"HvLogin\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      id={id}\n      className={cx(classes.root, className)}\n      style={{\n        backgroundImage: background && `url(${background})`,\n      }}\n      {...others}\n    >\n      <div className={classes.formContainer}>{children}</div>\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAwBa,MAAA,UAAU,CAAC,UAAwB;AACxC,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AAEpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,OAAO;AAAA,QACL,iBAAiB,cAAc,OAAO,UAAU;AAAA,MAClD;AAAA,MACC,GAAG;AAAA,MAEJ,UAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,eAAgB,UAAS;AAAA,IAAA;AAAA,EAAA;AAGvD;"}

package/dist/esm/components/Login/Login.styles.js

@@ -1,9 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvLogin", {
+const { staticClasses, useClasses } = createClasses("HvLogin", {
   root: {
     backgroundRepeat: "no-repeat",
     backgroundPosition: "bottom",

package/dist/esm/components/Login/Login.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Login.styles.js","sources":["../../../../src/components/Login/Login.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLogin\", {\n  root: {\n    backgroundRepeat: \"no-repeat\",\n    backgroundPosition: \"bottom\",\n    backgroundSize: \"cover\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: 0,\n    margin: \"-1px 0 0 0\",\n  },\n  formContainer: {\n    background: theme.colors.atmo2,\n    marginLeft: \"auto\",\n    maxWidth: 500,\n    height: \"100%\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","backgroundRepeat","backgroundPosition","backgroundSize","width","height","padding","margin","formContainer","background","theme","colors","atmo2","marginLeft","maxWidth"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IACJC,kBAAkB;AAAA,IAClBC,oBAAoB;AAAA,IACpBC,gBAAgB;AAAA,IAChBC,OAAO;AAAA,IACPC,QAAQ;AAAA,IACRC,SAAS;AAAA,IACTC,QAAQ;AAAA,EACV;AAAA,EACAC,eAAe;AAAA,IACbC,YAAYC,MAAMC,OAAOC;AAAAA,IACzBC,YAAY;AAAA,IACZC,UAAU;AAAA,IACVT,QAAQ;AAAA,EACV;AACF,CAAC;"}
+{"version":3,"file":"Login.styles.js","sources":["../../../../src/components/Login/Login.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLogin\", {\n  root: {\n    backgroundRepeat: \"no-repeat\",\n    backgroundPosition: \"bottom\",\n    backgroundSize: \"cover\",\n    width: \"100%\",\n    height: \"100%\",\n    padding: 0,\n    margin: \"-1px 0 0 0\",\n  },\n  formContainer: {\n    background: theme.colors.atmo2,\n    marginLeft: \"auto\",\n    maxWidth: 500,\n    height: \"100%\",\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM;AAAA,IACJ,kBAAkB;AAAA,IAClB,oBAAoB;AAAA,IACpB,gBAAgB;AAAA,IAChB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,eAAe;AAAA,IACb,YAAY,MAAM,OAAO;AAAA,IACzB,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AACF,CAAC;"}

package/dist/esm/components/MultiButton/MultiButton.js

@@ -13,25 +13,33 @@ const HvMultiButton = (props) => {
     variant = "secondarySubtle",
     ...others
   } = useDefaultProps("HvMultiButton", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
-  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, {
-    [classes.vertical]: vertical
-  }, className), ...others, children: React__default.Children.map(children, (child) => {
-    if (React__default.isValidElement(child)) {
-      const childIsSelected = !!child.props.selected;
-      return cloneElement(child, {
-        variant,
-        disabled: disabled || child.props.disabled,
-        className: cx(child.props.className, classes.button, {
-          [classes.selected]: childIsSelected
-        }),
-        "aria-pressed": childIsSelected
-      });
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cx(
+        classes.root,
+        {
+          [classes.vertical]: vertical
+        },
+        className
+      ),
+      ...others,
+      children: React__default.Children.map(children, (child) => {
+        if (React__default.isValidElement(child)) {
+          const childIsSelected = !!child.props.selected;
+          return cloneElement(child, {
+            variant,
+            disabled: disabled || child.props.disabled,
+            className: cx(child.props.className, classes.button, {
+              [classes.selected]: childIsSelected
+            }),
+            "aria-pressed": childIsSelected
+          });
+        }
+      })
     }
-  }) });
+  );
 };
 export {
   HvMultiButton,

package/dist/esm/components/MultiButton/MultiButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.js","sources":["../../../../src/components/MultiButton/MultiButton.tsx"],"sourcesContent":["import React, { cloneElement } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButtonVariant } from \"@core/components/Button\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Category of button to use */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.vertical]: vertical,\n        },\n        className\n      )}\n      {...others}\n    >\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          const childIsSelected = !!child.props.selected;\n\n          return cloneElement(child as React.ReactElement, {\n            variant,\n            disabled: disabled || child.props.disabled,\n            className: cx(child.props.className, classes.button, {\n              [classes.selected]: childIsSelected,\n            }),\n            \"aria-pressed\": childIsSelected,\n          });\n        }\n      })}\n    </div>\n  );\n};\n"],"names":["HvMultiButton","props","className","children","classes","classesProp","disabled","vertical","variant","others","useDefaultProps","cx","useClasses","root","React","Children","map","child","isValidElement","childIsSelected","selected","cloneElement","button"],"mappings":";;;;;AAuBaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,UAAU;AAAA,IACV,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBT,KAAK;AACpC,QAAA;AAAA,IAAEG;AAAAA,IAASO;AAAAA,EAAAA,IAAOC,WAAWP,WAAW;AAE9C,SACG,oBAAA,OAAA,EACC,WAAWM,GACTP,QAAQS,MACR;AAAA,IACE,CAACT,QAAQG,QAAQ,GAAGA;AAAAA,EAAAA,GAEtBL,SACF,GACA,GAAIO,QAEHK,UAAMC,eAAAA,SAASC,IAAIb,UAAWc,CAAU,UAAA;AACnCH,QAAAA,eAAMI,eAAeD,KAAK,GAAG;AAC/B,YAAME,kBAAkB,CAAC,CAACF,MAAMhB,MAAMmB;AAEtC,aAAOC,aAAaJ,OAA6B;AAAA,QAC/CT;AAAAA,QACAF,UAAUA,YAAYW,MAAMhB,MAAMK;AAAAA,QAClCJ,WAAWS,GAAGM,MAAMhB,MAAMC,WAAWE,QAAQkB,QAAQ;AAAA,UACnD,CAAClB,QAAQgB,QAAQ,GAAGD;AAAAA,QAAAA,CACrB;AAAA,QACD,gBAAgBA;AAAAA,MAAAA,CACjB;AAAA,IACH;AAAA,EACD,CAAA,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"MultiButton.js","sources":["../../../../src/components/MultiButton/MultiButton.tsx"],"sourcesContent":["import React, { cloneElement } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvButtonVariant } from \"@core/components/Button\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./MultiButton.styles\";\n\nexport { staticClasses as multiButtonClasses };\nexport type HvMultiButtonClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvMultiButtonProps extends HvBaseProps {\n  /** If all the buttons are disabled. */\n  disabled?: boolean;\n  /** If the MultiButton is to be displayed vertically. */\n  vertical?: boolean;\n  /** Category of button to use */\n  variant?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvMultiButtonClasses;\n}\n\nexport const HvMultiButton = (props: HvMultiButtonProps) => {\n  const {\n    className,\n    children,\n    classes: classesProp,\n    disabled = false,\n    vertical = false,\n    variant = \"secondarySubtle\",\n    ...others\n  } = useDefaultProps(\"HvMultiButton\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div\n      className={cx(\n        classes.root,\n        {\n          [classes.vertical]: vertical,\n        },\n        className\n      )}\n      {...others}\n    >\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          const childIsSelected = !!child.props.selected;\n\n          return cloneElement(child as React.ReactElement, {\n            variant,\n            disabled: disabled || child.props.disabled,\n            className: cx(child.props.className, classes.button, {\n              [classes.selected]: childIsSelected,\n            }),\n            \"aria-pressed\": childIsSelected,\n          });\n        }\n      })}\n    </div>\n  );\n};\n"],"names":["React"],"mappings":";;;;;AAuBa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,WAAW;AAAA,IACX,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH,UAAMA,eAAA,SAAS,IAAI,UAAU,CAAC,UAAU;AACnC,YAAAA,eAAM,eAAe,KAAK,GAAG;AAC/B,gBAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AAEtC,iBAAO,aAAa,OAA6B;AAAA,YAC/C;AAAA,YACA,UAAU,YAAY,MAAM,MAAM;AAAA,YAClC,WAAW,GAAG,MAAM,MAAM,WAAW,QAAQ,QAAQ;AAAA,cACnD,CAAC,QAAQ,QAAQ,GAAG;AAAA,YAAA,CACrB;AAAA,YACD,gBAAgB;AAAA,UAAA,CACjB;AAAA,QACH;AAAA,MAAA,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/components/MultiButton/MultiButton.styles.js

@@ -1,9 +1,6 @@
 import { theme } from "@hitachivantara/uikit-styles";
 import { createClasses } from "../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvMultiButton", {
+const { staticClasses, useClasses } = createClasses("HvMultiButton", {
   root: {
     display: "flex",
     height: 32,

package/dist/esm/components/MultiButton/MultiButton.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiButton.styles.js","sources":["../../../../src/components/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    height: 32,\n    alignItems: \"center\",\n    transition: \"none\",\n    background: theme.colors.atmo2,\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&>.HvIsFocusVisible\": {\n      zIndex: 5,\n    },\n\n    \"& button$button\": {\n      height: 32,\n      width: \"100%\",\n      minWidth: 32,\n      maxWidth: 200,\n      padding: 0,\n      transition: \"none\",\n      flex: \"1 0 0px\",\n      borderTop: `solid 1px ${theme.colors.atmo4}`,\n      borderBottom: `solid 1px ${theme.colors.atmo4}`,\n      borderLeft: \"solid 1px transparent\",\n      borderRight: \"solid 1px transparent\",\n      borderRadius: 0,\n      ...theme.typography.body,\n      \"&:active\": {\n        backgroundColor: `${theme.colors.atmo3}`,\n      },\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        \"&:hover\": {\n          borderTop: `solid 1px ${theme.colors.atmo4}`,\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n          borderLeft: \"solid 1px transparent\",\n          borderRight: \"solid 1px transparent\",\n        },\n      },\n      \"&:first-of-type\": {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderBottomLeftRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTopRightRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderRight: `solid 1px ${theme.colors.atmo4} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        \"&:hover\": {\n          \"&:not(:disabled)\": {\n            border: `solid 1px ${theme.colors.secondary}`,\n          },\n          \"&:disabled\": {\n            border: `solid 1px ${theme.colors.atmo4}`,\n          },\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n    \"& button$button$selected\": {\n      background: theme.colors.atmo1,\n      height: 34,\n      ...theme.typography.label,\n      borderRadius: theme.radii.base,\n      border: `solid 1px ${theme.colors.secondary}`,\n      zIndex: 2,\n      \"&:hover\": {\n        background: theme.colors.atmo3,\n      },\n      \"&:first-of-type, &:last-of-type\": {\n        border: `solid 1px ${theme.colors.secondary}`,\n      },\n\n      // prevent the focus ring to be hidden by sibling hover background\n      // even when selected\n      \"&.HvIsFocusVisible\": {\n        zIndex: 5,\n      },\n    },\n  },\n  button: {},\n  selected: {},\n  // vertical button display Styling\n  vertical: {\n    flexDirection: \"column\",\n    height: \"auto\",\n    btnSecondary: {\n      flex: \"1 1 20px\",\n    },\n    \"& button$button\": {\n      width: \"100%\",\n      borderLeft: `solid 1px ${theme.colors.atmo4}`,\n      borderRight: `solid 1px ${theme.colors.atmo4}`,\n      borderTop: \"solid 1px transparent\",\n      borderBottom: \"solid 1px transparent\",\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTop: \"solid 1px transparent\",\n        borderBottom: \"solid 1px transparent\",\n        \"&:hover\": {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n          borderTop: \"solid 1px transparent\",\n          borderBottom: \"solid 1px transparent\",\n        },\n      },\n      \"&:first-of-type\": {\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderTopRightRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        borderBottomLeftRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderBottom: `solid 1px ${theme.colors.atmo4} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\n        marginLeft: 0,\n        marginTop: -1,\n      },\n      \"&$selected\": {\n        height: 32,\n        width: `calc(100% + 2px) !important`,\n        background: theme.colors.atmo1,\n        ...theme.typography.label,\n        borderRadius: theme.radii.base,\n        border: `solid 1px ${theme.colors.secondary}`,\n        zIndex: 2,\n        \"&:hover, &:focus\": {\n          background: theme.colors.atmo3,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","height","alignItems","transition","background","theme","colors","atmo2","position","zIndex","width","minWidth","maxWidth","padding","flex","borderTop","atmo4","borderBottom","borderLeft","borderRight","borderRadius","typography","body","backgroundColor","atmo3","color","secondary_60","borderTopLeftRadius","radii","base","borderBottomLeftRadius","borderTopRightRadius","borderBottomRightRadius","marginLeft","border","secondary","atmo1","label","button","selected","vertical","flexDirection","btnSecondary","marginTop"],"mappings":"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"}
+{"version":3,"file":"MultiButton.styles.js","sources":["../../../../src/components/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvMultiButton\", {\n  root: {\n    display: \"flex\",\n    height: 32,\n    alignItems: \"center\",\n    transition: \"none\",\n    background: theme.colors.atmo2,\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&>.HvIsFocusVisible\": {\n      zIndex: 5,\n    },\n\n    \"& button$button\": {\n      height: 32,\n      width: \"100%\",\n      minWidth: 32,\n      maxWidth: 200,\n      padding: 0,\n      transition: \"none\",\n      flex: \"1 0 0px\",\n      borderTop: `solid 1px ${theme.colors.atmo4}`,\n      borderBottom: `solid 1px ${theme.colors.atmo4}`,\n      borderLeft: \"solid 1px transparent\",\n      borderRight: \"solid 1px transparent\",\n      borderRadius: 0,\n      ...theme.typography.body,\n      \"&:active\": {\n        backgroundColor: `${theme.colors.atmo3}`,\n      },\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        \"&:hover\": {\n          borderTop: `solid 1px ${theme.colors.atmo4}`,\n          borderBottom: `solid 1px ${theme.colors.atmo4}`,\n          borderLeft: \"solid 1px transparent\",\n          borderRight: \"solid 1px transparent\",\n        },\n      },\n      \"&:first-of-type\": {\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderBottomLeftRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTopRightRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderRight: `solid 1px ${theme.colors.atmo4} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\n        marginLeft: \"-1px\",\n      },\n      \"&$selected\": {\n        \"&:hover\": {\n          \"&:not(:disabled)\": {\n            border: `solid 1px ${theme.colors.secondary}`,\n          },\n          \"&:disabled\": {\n            border: `solid 1px ${theme.colors.atmo4}`,\n          },\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n    \"& button$button$selected\": {\n      background: theme.colors.atmo1,\n      height: 34,\n      ...theme.typography.label,\n      borderRadius: theme.radii.base,\n      border: `solid 1px ${theme.colors.secondary}`,\n      zIndex: 2,\n      \"&:hover\": {\n        background: theme.colors.atmo3,\n      },\n      \"&:first-of-type, &:last-of-type\": {\n        border: `solid 1px ${theme.colors.secondary}`,\n      },\n\n      // prevent the focus ring to be hidden by sibling hover background\n      // even when selected\n      \"&.HvIsFocusVisible\": {\n        zIndex: 5,\n      },\n    },\n  },\n  button: {},\n  selected: {},\n  // vertical button display Styling\n  vertical: {\n    flexDirection: \"column\",\n    height: \"auto\",\n    btnSecondary: {\n      flex: \"1 1 20px\",\n    },\n    \"& button$button\": {\n      width: \"100%\",\n      borderLeft: `solid 1px ${theme.colors.atmo4}`,\n      borderRight: `solid 1px ${theme.colors.atmo4}`,\n      borderTop: \"solid 1px transparent\",\n      borderBottom: \"solid 1px transparent\",\n      \"&:disabled\": {\n        color: theme.colors.secondary_60,\n        borderLeft: `solid 1px ${theme.colors.atmo4}`,\n        borderRight: `solid 1px ${theme.colors.atmo4}`,\n        borderTop: \"solid 1px transparent\",\n        borderBottom: \"solid 1px transparent\",\n        \"&:hover\": {\n          borderLeft: `solid 1px ${theme.colors.atmo4}`,\n          borderRight: `solid 1px ${theme.colors.atmo4}`,\n          borderTop: \"solid 1px transparent\",\n          borderBottom: \"solid 1px transparent\",\n        },\n      },\n      \"&:first-of-type\": {\n        borderTop: `solid 1px ${theme.colors.atmo4}`,\n        borderTopLeftRadius: theme.radii.base,\n        borderTopRightRadius: theme.radii.base,\n      },\n      \"&:last-of-type\": {\n        borderBottom: `solid 1px ${theme.colors.atmo4}`,\n        borderBottomLeftRadius: theme.radii.base,\n        borderBottomRightRadius: theme.radii.base,\n        \"&:disabled:hover\": {\n          borderBottom: `solid 1px ${theme.colors.atmo4} !important`,\n        },\n      },\n      \"&:not(:first-of-type)\": {\n        marginLeft: 0,\n        marginTop: -1,\n      },\n      \"&$selected\": {\n        height: 32,\n        width: `calc(100% + 2px) !important`,\n        background: theme.colors.atmo1,\n        ...theme.typography.label,\n        borderRadius: theme.radii.base,\n        border: `solid 1px ${theme.colors.secondary}`,\n        zIndex: 2,\n        \"&:hover, &:focus\": {\n          background: theme.colors.atmo3,\n        },\n        \"&:disabled\": {\n          zIndex: 1,\n          color: theme.colors.secondary_60,\n          background: theme.colors.atmo1,\n          border: `solid 1px ${theme.colors.atmo4}`,\n        },\n      },\n    },\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,iBAAiB;AAAA,EAC1E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,YAAY,MAAM,OAAO;AAAA,IACzB,UAAU;AAAA,IACV,QAAQ;AAAA;AAAA,IAGR,uBAAuB;AAAA,MACrB,QAAQ;AAAA,IACV;AAAA,IAEA,mBAAmB;AAAA,MACjB,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,UAAU;AAAA,MACV,UAAU;AAAA,MACV,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,MAC1C,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,MAC7C,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,cAAc;AAAA,MACd,GAAG,MAAM,WAAW;AAAA,MACpB,YAAY;AAAA,QACV,iBAAiB,GAAG,MAAM,OAAO,KAAK;AAAA,MACxC;AAAA,MACA,cAAc;AAAA,QACZ,OAAO,MAAM,OAAO;AAAA,QACpB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,QAC1C,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,QAC7C,WAAW;AAAA,UACT,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,UAC1C,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,UAC7C,YAAY;AAAA,UACZ,aAAa;AAAA,QACf;AAAA,MACF;AAAA,MACA,mBAAmB;AAAA,QACjB,YAAY,aAAa,MAAM,OAAO,KAAK;AAAA,QAC3C,qBAAqB,MAAM,MAAM;AAAA,QACjC,wBAAwB,MAAM,MAAM;AAAA,MACtC;AAAA,MACA,kBAAkB;AAAA,QAChB,aAAa,aAAa,MAAM,OAAO,KAAK;AAAA,QAC5C,sBAAsB,MAAM,MAAM;AAAA,QAClC,yBAAyB,MAAM,MAAM;AAAA,QACrC,oBAAoB;AAAA,UAClB,aAAa,aAAa,MAAM,OAAO,KAAK;AAAA,QAC9C;AAAA,MACF;AAAA,MACA,yBAAyB;AAAA,QACvB,YAAY;AAAA,MACd;AAAA,MACA,cAAc;AAAA,QACZ,WAAW;AAAA,UACT,oBAAoB;AAAA,YAClB,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,UAC7C;AAAA,UACA,cAAc;AAAA,YACZ,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,UACzC;AAAA,QACF;AAAA,QACA,cAAc;AAAA,UACZ,QAAQ;AAAA,UACR,OAAO,MAAM,OAAO;AAAA,UACpB,YAAY,MAAM,OAAO;AAAA,UACzB,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,IACA,4BAA4B;AAAA,MAC1B,YAAY,MAAM,OAAO;AAAA,MACzB,QAAQ;AAAA,MACR,GAAG,MAAM,WAAW;AAAA,MACpB,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,YAAY,MAAM,OAAO;AAAA,MAC3B;AAAA,MACA,mCAAmC;AAAA,QACjC,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC7C;AAAA;AAAA;AAAA,MAIA,sBAAsB;AAAA,QACpB,QAAQ;AAAA,MACV;AAAA,IACF;AAAA,EACF;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,UAAU,CAAC;AAAA;AAAA,EAEX,UAAU;AAAA,IACR,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,cAAc;AAAA,MACZ,MAAM;AAAA,IACR;AAAA,IACA,mBAAmB;AAAA,MACjB,OAAO;AAAA,MACP,YAAY,aAAa,MAAM,OAAO,KAAK;AAAA,MAC3C,aAAa,aAAa,MAAM,OAAO,KAAK;AAAA,MAC5C,WAAW;AAAA,MACX,cAAc;AAAA,MACd,cAAc;AAAA,QACZ,OAAO,MAAM,OAAO;AAAA,QACpB,YAAY,aAAa,MAAM,OAAO,KAAK;AAAA,QAC3C,aAAa,aAAa,MAAM,OAAO,KAAK;AAAA,QAC5C,WAAW;AAAA,QACX,cAAc;AAAA,QACd,WAAW;AAAA,UACT,YAAY,aAAa,MAAM,OAAO,KAAK;AAAA,UAC3C,aAAa,aAAa,MAAM,OAAO,KAAK;AAAA,UAC5C,WAAW;AAAA,UACX,cAAc;AAAA,QAChB;AAAA,MACF;AAAA,MACA,mBAAmB;AAAA,QACjB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,QAC1C,qBAAqB,MAAM,MAAM;AAAA,QACjC,sBAAsB,MAAM,MAAM;AAAA,MACpC;AAAA,MACA,kBAAkB;AAAA,QAChB,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,QAC7C,wBAAwB,MAAM,MAAM;AAAA,QACpC,yBAAyB,MAAM,MAAM;AAAA,QACrC,oBAAoB;AAAA,UAClB,cAAc,aAAa,MAAM,OAAO,KAAK;AAAA,QAC/C;AAAA,MACF;AAAA,MACA,yBAAyB;AAAA,QACvB,YAAY;AAAA,QACZ,WAAW;AAAA,MACb;AAAA,MACA,cAAc;AAAA,QACZ,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,YAAY,MAAM,OAAO;AAAA,QACzB,GAAG,MAAM,WAAW;AAAA,QACpB,cAAc,MAAM,MAAM;AAAA,QAC1B,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,QAC3C,QAAQ;AAAA,QACR,oBAAoB;AAAA,UAClB,YAAY,MAAM,OAAO;AAAA,QAC3B;AAAA,QACA,cAAc;AAAA,UACZ,QAAQ;AAAA,UACR,OAAO,MAAM,OAAO;AAAA,UACpB,YAAY,MAAM,OAAO;AAAA,UACzB,QAAQ,aAAa,MAAM,OAAO,KAAK;AAAA,QACzC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/components/OverflowTooltip/OverflowTooltip.js

@@ -18,10 +18,7 @@ const HvOverflowTooltip = (props) => {
     placement = "top-start",
     tooltipsProps
   } = useDefaultProps("HvOverflowTooltip", props);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const {
     height = 0,
     width = 0,
@@ -33,7 +30,10 @@ const HvOverflowTooltip = (props) => {
     },
     handleHeight: false
   });
-  const isParag = useMemo(() => paragraphOverflow && isParagraph(data?.toString()), [data, paragraphOverflow]);
+  const isParag = useMemo(
+    () => paragraphOverflow && isParagraph(data?.toString()),
+    [data, paragraphOverflow]
+  );
   const isOverflowing = useMemo(() => {
     if (isParag) {
       const scrollHeight = ref.current?.scrollHeight || 0;
@@ -42,10 +42,31 @@ const HvOverflowTooltip = (props) => {
     const scrollWidth = ref.current?.scrollWidth || 0;
     return scrollWidth - width >= 1;
   }, [height, isParag, ref, width]);
-  const content = useMemo(() => /* @__PURE__ */ jsx("div", { ref, className: cx({
-    [classes.tooltipAnchor]: !isParag,
-    [classes.tooltipAnchorParagraph]: isParag
-  }, className), children: data }), [className, classes.tooltipAnchor, classes.tooltipAnchorParagraph, cx, data, isParag, ref]);
+  const content = useMemo(
+    () => /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cx(
+          {
+            [classes.tooltipAnchor]: !isParag,
+            [classes.tooltipAnchorParagraph]: isParag
+          },
+          className
+        ),
+        children: data
+      }
+    ),
+    [
+      className,
+      classes.tooltipAnchor,
+      classes.tooltipAnchorParagraph,
+      cx,
+      data,
+      isParag,
+      ref
+    ]
+  );
   return /* @__PURE__ */ jsx(
     HvTooltip,
     {

package/dist/esm/components/OverflowTooltip/OverflowTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowTooltip.js","sources":["../../../../src/components/OverflowTooltip/OverflowTooltip.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./OverflowTooltip.styles\";\n\nexport { staticClasses as overflowTooltipClasses };\nexport type HvOverflowTooltipClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvOverflowTooltipProps extends HvBaseProps {\n  /** The node that will be rendered inside the tooltip. */\n  data: React.ReactNode;\n  /** If true, the tooltip is shown. */\n  open?: boolean;\n  /** If `true`, the overflow tooltip will always use the paragraph overflow style. */\n  paragraphOverflow?: boolean;\n  /** Tooltip placement. */\n  placement?:\n    | \"bottom-end\"\n    | \"bottom-start\"\n    | \"bottom\"\n    | \"left-end\"\n    | \"left-start\"\n    | \"left\"\n    | \"right-end\"\n    | \"right-start\"\n    | \"right\"\n    | \"top-end\"\n    | \"top-start\"\n    | \"top\";\n  /** Extra properties to add to the tooltip. */\n  tooltipsProps?: Partial<HvTooltipProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvOverflowTooltipClasses;\n}\n\nconst isParagraph = (children = \"\") => /\\s/.test(children);\n\n/**\n * This component generates a tooltip whenever the text is overflowed.\n */\nexport const HvOverflowTooltip = (props: HvOverflowTooltipProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    data,\n    open,\n    paragraphOverflow,\n    placement = \"top-start\",\n    tooltipsProps,\n  } = useDefaultProps(\"HvOverflowTooltip\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    height = 0,\n    width = 0,\n    ref,\n  } = useResizeDetector({\n    refreshMode: \"debounce\",\n    refreshOptions: {\n      trailing: true,\n    },\n    handleHeight: false,\n  });\n\n  const isParag = useMemo(\n    () => paragraphOverflow && isParagraph(data?.toString()),\n    [data, paragraphOverflow]\n  );\n\n  // The difference should be higher than a pixel to be considered as overflowing\n  const isOverflowing = useMemo(() => {\n    if (isParag) {\n      const scrollHeight = ref.current?.scrollHeight || 0;\n\n      return scrollHeight - height >= 1;\n    }\n\n    const scrollWidth = ref.current?.scrollWidth || 0;\n\n    return scrollWidth - width >= 1;\n  }, [height, isParag, ref, width]);\n\n  const content = useMemo(\n    () => (\n      <div\n        ref={ref}\n        className={cx(\n          {\n            [classes.tooltipAnchor]: !isParag,\n            [classes.tooltipAnchorParagraph]: isParag,\n          },\n          className\n        )}\n      >\n        {data}\n      </div>\n    ),\n    [\n      className,\n      classes.tooltipAnchor,\n      classes.tooltipAnchorParagraph,\n      cx,\n      data,\n      isParag,\n      ref,\n    ]\n  );\n\n  return (\n    <HvTooltip\n      id={id}\n      disableHoverListener={!isOverflowing}\n      open={open}\n      placement={placement}\n      title={\n        <HvTypography className={classes.tooltipData} variant=\"body\">\n          {data}\n        </HvTypography>\n      }\n      // unset since `content` *is* the label\n      aria-label={null as any}\n      aria-labelledby={null as any}\n      {...tooltipsProps}\n    >\n      {content}\n    </HvTooltip>\n  );\n};\n"],"names":["isParagraph","children","test","HvOverflowTooltip","props","id","classes","classesProp","className","data","open","paragraphOverflow","placement","tooltipsProps","useDefaultProps","cx","useClasses","height","width","ref","useResizeDetector","refreshMode","refreshOptions","trailing","handleHeight","isParag","useMemo","toString","isOverflowing","scrollHeight","current","scrollWidth","content","tooltipAnchor","tooltipAnchorParagraph","tooltipData"],"mappings":";;;;;;;;AAyCA,MAAMA,cAAcA,CAACC,WAAW,OAAO,KAAKC,KAAKD,QAAQ;AAK5CE,MAAAA,oBAAoBA,CAACC,UAAkC;AAC5D,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,YAAY;AAAA,IACZC;AAAAA,EAAAA,IACEC,gBAAgB,qBAAqBV,KAAK;AAExC,QAAA;AAAA,IAAEE;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAExC,QAAA;AAAA,IACJU,SAAS;AAAA,IACTC,QAAQ;AAAA,IACRC;AAAAA,MACEC,kBAAkB;AAAA,IACpBC,aAAa;AAAA,IACbC,gBAAgB;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,IACAC,cAAc;AAAA,EAAA,CACf;AAED,QAAMC,UAAUC,QACd,MAAMf,qBAAqBX,YAAYS,MAAMkB,SAAS,CAAC,GACvD,CAAClB,MAAME,iBAAiB,CAC1B;AAGMiB,QAAAA,gBAAgBF,QAAQ,MAAM;AAClC,QAAID,SAAS;AACLI,YAAAA,eAAeV,IAAIW,SAASD,gBAAgB;AAElD,aAAOA,eAAeZ,UAAU;AAAA,IAClC;AAEMc,UAAAA,cAAcZ,IAAIW,SAASC,eAAe;AAEhD,WAAOA,cAAcb,SAAS;AAAA,KAC7B,CAACD,QAAQQ,SAASN,KAAKD,KAAK,CAAC;AAEhC,QAAMc,UAAUN,QACd,0BACG,OACC,EAAA,KACA,WAAWX,GACT;AAAA,IACE,CAACT,QAAQ2B,aAAa,GAAG,CAACR;AAAAA,IAC1B,CAACnB,QAAQ4B,sBAAsB,GAAGT;AAAAA,EAAAA,GAEpCjB,SACF,GAECC,UAAAA,KAAAA,CACH,GAEF,CACED,WACAF,QAAQ2B,eACR3B,QAAQ4B,wBACRnB,IACAN,MACAgB,SACAN,GAAG,CAEP;AAGE,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,sBAAsB,CAACS;AAAAA,MACvB;AAAA,MACA;AAAA,MACA,2BACG,cAAa,EAAA,WAAWtB,QAAQ6B,aAAa,SAAQ,QACnD1B,UACH,KAAA,CAAA;AAAA,MAGF,cAAY;AAAA,MACZ,mBAAiB;AAAA,MACjB,GAAII;AAAAA,MAEHmB,UAAAA;AAAAA,IAAAA;AAAAA,EAAAA;AAGP;"}
+{"version":3,"file":"OverflowTooltip.js","sources":["../../../../src/components/OverflowTooltip/OverflowTooltip.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"@core/components/Tooltip\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./OverflowTooltip.styles\";\n\nexport { staticClasses as overflowTooltipClasses };\nexport type HvOverflowTooltipClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvOverflowTooltipProps extends HvBaseProps {\n  /** The node that will be rendered inside the tooltip. */\n  data: React.ReactNode;\n  /** If true, the tooltip is shown. */\n  open?: boolean;\n  /** If `true`, the overflow tooltip will always use the paragraph overflow style. */\n  paragraphOverflow?: boolean;\n  /** Tooltip placement. */\n  placement?:\n    | \"bottom-end\"\n    | \"bottom-start\"\n    | \"bottom\"\n    | \"left-end\"\n    | \"left-start\"\n    | \"left\"\n    | \"right-end\"\n    | \"right-start\"\n    | \"right\"\n    | \"top-end\"\n    | \"top-start\"\n    | \"top\";\n  /** Extra properties to add to the tooltip. */\n  tooltipsProps?: Partial<HvTooltipProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvOverflowTooltipClasses;\n}\n\nconst isParagraph = (children = \"\") => /\\s/.test(children);\n\n/**\n * This component generates a tooltip whenever the text is overflowed.\n */\nexport const HvOverflowTooltip = (props: HvOverflowTooltipProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    data,\n    open,\n    paragraphOverflow,\n    placement = \"top-start\",\n    tooltipsProps,\n  } = useDefaultProps(\"HvOverflowTooltip\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const {\n    height = 0,\n    width = 0,\n    ref,\n  } = useResizeDetector({\n    refreshMode: \"debounce\",\n    refreshOptions: {\n      trailing: true,\n    },\n    handleHeight: false,\n  });\n\n  const isParag = useMemo(\n    () => paragraphOverflow && isParagraph(data?.toString()),\n    [data, paragraphOverflow]\n  );\n\n  // The difference should be higher than a pixel to be considered as overflowing\n  const isOverflowing = useMemo(() => {\n    if (isParag) {\n      const scrollHeight = ref.current?.scrollHeight || 0;\n\n      return scrollHeight - height >= 1;\n    }\n\n    const scrollWidth = ref.current?.scrollWidth || 0;\n\n    return scrollWidth - width >= 1;\n  }, [height, isParag, ref, width]);\n\n  const content = useMemo(\n    () => (\n      <div\n        ref={ref}\n        className={cx(\n          {\n            [classes.tooltipAnchor]: !isParag,\n            [classes.tooltipAnchorParagraph]: isParag,\n          },\n          className\n        )}\n      >\n        {data}\n      </div>\n    ),\n    [\n      className,\n      classes.tooltipAnchor,\n      classes.tooltipAnchorParagraph,\n      cx,\n      data,\n      isParag,\n      ref,\n    ]\n  );\n\n  return (\n    <HvTooltip\n      id={id}\n      disableHoverListener={!isOverflowing}\n      open={open}\n      placement={placement}\n      title={\n        <HvTypography className={classes.tooltipData} variant=\"body\">\n          {data}\n        </HvTypography>\n      }\n      // unset since `content` *is* the label\n      aria-label={null as any}\n      aria-labelledby={null as any}\n      {...tooltipsProps}\n    >\n      {content}\n    </HvTooltip>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AAyCA,MAAM,cAAc,CAAC,WAAW,OAAO,KAAK,KAAK,QAAQ;AAK5C,MAAA,oBAAoB,CAAC,UAAkC;AAC5D,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,EAAA,IACE,gBAAgB,qBAAqB,KAAK;AAE9C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,MACE,kBAAkB;AAAA,IACpB,aAAa;AAAA,IACb,gBAAgB;AAAA,MACd,UAAU;AAAA,IACZ;AAAA,IACA,cAAc;AAAA,EAAA,CACf;AAED,QAAM,UAAU;AAAA,IACd,MAAM,qBAAqB,YAAY,MAAM,UAAU;AAAA,IACvD,CAAC,MAAM,iBAAiB;AAAA,EAAA;AAIpB,QAAA,gBAAgB,QAAQ,MAAM;AAClC,QAAI,SAAS;AACL,YAAA,eAAe,IAAI,SAAS,gBAAgB;AAElD,aAAO,eAAe,UAAU;AAAA,IAClC;AAEM,UAAA,cAAc,IAAI,SAAS,eAAe;AAEhD,WAAO,cAAc,SAAS;AAAA,KAC7B,CAAC,QAAQ,SAAS,KAAK,KAAK,CAAC;AAEhC,QAAM,UAAU;AAAA,IACd,MACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,YACE,CAAC,QAAQ,aAAa,GAAG,CAAC;AAAA,YAC1B,CAAC,QAAQ,sBAAsB,GAAG;AAAA,UACpC;AAAA,UACA;AAAA,QACF;AAAA,QAEC,UAAA;AAAA,MAAA;AAAA,IACH;AAAA,IAEF;AAAA,MACE;AAAA,MACA,QAAQ;AAAA,MACR,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EAAA;AAIA,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,sBAAsB,CAAC;AAAA,MACvB;AAAA,MACA;AAAA,MACA,2BACG,cAAa,EAAA,WAAW,QAAQ,aAAa,SAAQ,QACnD,UACH,KAAA,CAAA;AAAA,MAGF,cAAY;AAAA,MACZ,mBAAiB;AAAA,MAChB,GAAG;AAAA,MAEH,UAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/components/OverflowTooltip/OverflowTooltip.styles.js

@@ -1,21 +1,21 @@
 import { createClasses } from "../../utils/classes.js";
-const {
-  staticClasses,
-  useClasses
-} = createClasses("HvOverflowTooltip", {
-  tooltipData: {},
-  tooltipAnchor: {
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis"
-  },
-  tooltipAnchorParagraph: {
-    overflow: "hidden",
-    display: "-webkit-box",
-    WebkitLineClamp: 3,
-    WebkitBoxOrient: "vertical"
+const { staticClasses, useClasses } = createClasses(
+  "HvOverflowTooltip",
+  {
+    tooltipData: {},
+    tooltipAnchor: {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    },
+    tooltipAnchorParagraph: {
+      overflow: "hidden",
+      display: "-webkit-box",
+      WebkitLineClamp: 3,
+      WebkitBoxOrient: "vertical"
+    }
   }
-});
+);
 export {
   staticClasses,
   useClasses

package/dist/esm/components/OverflowTooltip/OverflowTooltip.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowTooltip.styles.js","sources":["../../../../src/components/OverflowTooltip/OverflowTooltip.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvOverflowTooltip\",\n  {\n    tooltipData: {},\n    tooltipAnchor: {\n      whiteSpace: \"nowrap\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    tooltipAnchorParagraph: {\n      overflow: \"hidden\",\n      display: \"-webkit-box\",\n      WebkitLineClamp: 3,\n      WebkitBoxOrient: \"vertical\",\n    },\n  }\n);\n"],"names":["staticClasses","useClasses","createClasses","tooltipData","tooltipAnchor","whiteSpace","overflow","textOverflow","tooltipAnchorParagraph","display","WebkitLineClamp","WebkitBoxOrient"],"mappings":";AAEa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAC3C,qBACA;AAAA,EACEC,aAAa,CAAC;AAAA,EACdC,eAAe;AAAA,IACbC,YAAY;AAAA,IACZC,UAAU;AAAA,IACVC,cAAc;AAAA,EAChB;AAAA,EACAC,wBAAwB;AAAA,IACtBF,UAAU;AAAA,IACVG,SAAS;AAAA,IACTC,iBAAiB;AAAA,IACjBC,iBAAiB;AAAA,EACnB;AACF,CACF;"}
+{"version":3,"file":"OverflowTooltip.styles.js","sources":["../../../../src/components/OverflowTooltip/OverflowTooltip.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\n  \"HvOverflowTooltip\",\n  {\n    tooltipData: {},\n    tooltipAnchor: {\n      whiteSpace: \"nowrap\",\n      overflow: \"hidden\",\n      textOverflow: \"ellipsis\",\n    },\n    tooltipAnchorParagraph: {\n      overflow: \"hidden\",\n      display: \"-webkit-box\",\n      WebkitLineClamp: 3,\n      WebkitBoxOrient: \"vertical\",\n    },\n  }\n);\n"],"names":[],"mappings":";AAEa,MAAA,EAAE,eAAe,WAAA,IAAe;AAAA,EAC3C;AAAA,EACA;AAAA,IACE,aAAa,CAAC;AAAA,IACd,eAAe;AAAA,MACb,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,cAAc;AAAA,IAChB;AAAA,IACA,wBAAwB;AAAA,MACtB,UAAU;AAAA,MACV,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IACnB;AAAA,EACF;AACF;"}

package/dist/esm/components/Pagination/Pagination.js

@@ -52,15 +52,15 @@ const HvPagination = (props) => {
   } = useDefaultProps("HvPagination", props);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const [pageInput, handleInputChange] = usePageInput(page);
-  const {
-    classes,
-    cx
-  } = useClasses(classesProp);
-  const changePage = useCallback((newPage) => {
-    const safePage = getSafePage(newPage, page, pages);
-    onPageChange?.(safePage);
-    handleInputChange(null, safePage + 1);
-  }, [page, pages, onPageChange, handleInputChange]);
+  const { classes, cx } = useClasses(classesProp);
+  const changePage = useCallback(
+    (newPage) => {
+      const safePage = getSafePage(newPage, page, pages);
+      onPageChange?.(safePage);
+      handleInputChange(null, safePage + 1);
+    },
+    [page, pages, onPageChange, handleInputChange]
+  );
   useEffect(() => {
     if (page >= pages && pages > 0) {
       changePage(page);
@@ -71,33 +71,151 @@ const HvPagination = (props) => {
       handleInputChange(null, page + 1);
     }
   }, [handleInputChange, page]);
-  const renderPageJump = () => /* @__PURE__ */ jsx("div", { className: classes.pageJump, children: /* @__PURE__ */ jsx(HvInput, { id: setId(id, "currentPage"), labels, inputProps: {
-    "aria-label": labels?.paginationInputLabel,
-    // We really want the native number input
-    type: "number"
-  }, classes: {
-    root: classes?.pageSizeInputContainer,
-    input: classes?.pageSizeInput,
-    inputRoot: classes?.pageSizeInputRoot
-  }, onChange: (event, value) => handleInputChange(event, Number(value)), value: String(pageInput), onBlur: (evt, value) => changePage(Number(value) - 1), onKeyDown: (evt, value) => isKey(evt, "Enter") && changePage(Number(value) - 1), disabled: pageSize === 0, disableClear: true, ...currentPageInputProps }) });
+  const renderPageJump = () => /* @__PURE__ */ jsx("div", { className: classes.pageJump, children: /* @__PURE__ */ jsx(
+    HvInput,
+    {
+      id: setId(id, "currentPage"),
+      labels,
+      inputProps: {
+        "aria-label": labels?.paginationInputLabel,
+        // We really want the native number input
+        type: "number"
+      },
+      classes: {
+        root: classes?.pageSizeInputContainer,
+        input: classes?.pageSizeInput,
+        inputRoot: classes?.pageSizeInputRoot
+      },
+      onChange: (event, value) => handleInputChange(event, Number(value)),
+      value: String(pageInput),
+      onBlur: (evt, value) => changePage(Number(value) - 1),
+      onKeyDown: (evt, value) => isKey(evt, "Enter") && changePage(Number(value) - 1),
+      disabled: pageSize === 0,
+      disableClear: true,
+      ...currentPageInputProps
+    }
+  ) });
   return /* @__PURE__ */ jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
     /* @__PURE__ */ jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: showPageSizeOptions && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Hidden, { xsDown: true, children: /* @__PURE__ */ jsx(HvTypography, { component: "span", className: classes?.pageSizeTextContainer, children: labels?.pageSizePrev }) }),
-      /* @__PURE__ */ jsx(HvSelect, { id: setId(id, "pageSize"), disabled: pageSize === 0, className: classes.pageSizeOptionsSelect, "aria-label": labels?.pageSizeSelectorDescription, onChange: (_, val) => onPageSizeChange?.(val), value: pageSize, classes: {
-        header: classes.pageSizeHeader
-      }, children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(Option, { value: option, children: option }, option)) }),
-      /* @__PURE__ */ jsx(Hidden, { xsDown: true, children: /* @__PURE__ */ jsx(HvTypography, { component: "span", className: classes.pageSizeTextContainer, children: labels?.pageSizeEntryName }) })
+      /* @__PURE__ */ jsx(Hidden, { xsDown: true, children: /* @__PURE__ */ jsx(
+        HvTypography,
+        {
+          component: "span",
+          className: classes?.pageSizeTextContainer,
+          children: labels?.pageSizePrev
+        }
+      ) }),
+      /* @__PURE__ */ jsx(
+        HvSelect,
+        {
+          id: setId(id, "pageSize"),
+          disabled: pageSize === 0,
+          className: classes.pageSizeOptionsSelect,
+          "aria-label": labels?.pageSizeSelectorDescription,
+          onChange: (_, val) => onPageSizeChange?.(val),
+          value: pageSize,
+          classes: { header: classes.pageSizeHeader },
+          children: pageSizeOptions.map((option) => /* @__PURE__ */ jsx(Option, { value: option, children: option }, option))
+        }
+      ),
+      /* @__PURE__ */ jsx(Hidden, { xsDown: true, children: /* @__PURE__ */ jsx(
+        HvTypography,
+        {
+          component: "span",
+          className: classes.pageSizeTextContainer,
+          children: labels?.pageSizeEntryName
+        }
+      ) })
     ] }) }),
     /* @__PURE__ */ jsxs("div", { className: classes.pageNavigator, ...navigationProps, children: [
-      /* @__PURE__ */ jsx(IconButton, { id: setId(id, "firstPage-button"), className: classes.iconContainer, disabled: !canPrevious, onClick: () => changePage(0), title: labels?.firstPage || labels?.paginationFirstPageTitle, children: /* @__PURE__ */ jsx(Start, { role: "none", className: classes.icon, color: setColor(!canPrevious), iconSize: "XS" }) }),
-      /* @__PURE__ */ jsx(IconButton, { id: setId(id, "previousPage-button"), className: classes.iconContainer, disabled: !canPrevious, onClick: () => changePage(page - 1), title: labels?.previousPage || labels?.paginationPreviousPageTitle, children: /* @__PURE__ */ jsx(Backwards, { role: "none", className: classes.icon, color: setColor(!canPrevious), iconSize: "XS" }) }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          id: setId(id, "firstPage-button"),
+          className: classes.iconContainer,
+          disabled: !canPrevious,
+          onClick: () => changePage(0),
+          title: labels?.firstPage || labels?.paginationFirstPageTitle,
+          children: /* @__PURE__ */ jsx(
+            Start,
+            {
+              role: "none",
+              className: classes.icon,
+              color: setColor(!canPrevious),
+              iconSize: "XS"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          id: setId(id, "previousPage-button"),
+          className: classes.iconContainer,
+          disabled: !canPrevious,
+          onClick: () => changePage(page - 1),
+          title: labels?.previousPage || labels?.paginationPreviousPageTitle,
+          children: /* @__PURE__ */ jsx(
+            Backwards,
+            {
+              role: "none",
+              className: classes.icon,
+              color: setColor(!canPrevious),
+              iconSize: "XS"
+            }
+          )
+        }
+      ),
       /* @__PURE__ */ jsxs("div", { className: classes.pageInfo, children: [
         showPageJump ? renderPageJump() : /* @__PURE__ */ jsx(HvTypography, { variant: "caption2", component: "span", children: `${page + 1}` }),
         /* @__PURE__ */ jsx(HvTypography, { component: "span", children: `${labels?.pagesSeparator} ` }),
-        /* @__PURE__ */ jsx(HvTypography, { component: "span", id: setId(id, "totalPages"), className: classes.totalPagesTextContainer, children: pages })
+        /* @__PURE__ */ jsx(
+          HvTypography,
+          {
+            component: "span",
+            id: setId(id, "totalPages"),
+            className: classes.totalPagesTextContainer,
+            children: pages
+          }
+        )
       ] }),
-      /* @__PURE__ */ jsx(IconButton, { id: setId(id, "nextPage-button"), className: classes.iconContainer, disabled: !canNext, onClick: () => changePage(page + 1), title: labels?.nextPage || labels?.paginationNextPageTitle, children: /* @__PURE__ */ jsx(Forwards, { role: "none", className: classes.icon, color: setColor(!canNext), iconSize: "XS" }) }),
-      /* @__PURE__ */ jsx(IconButton, { id: setId(id, "lastPage-button"), className: classes.iconContainer, disabled: !canNext, onClick: () => changePage(pages - 1), title: labels?.lastPage || labels?.paginationLastPageTitle, children: /* @__PURE__ */ jsx(End, { className: classes.icon, color: setColor(!canNext), iconSize: "XS" }) })
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          id: setId(id, "nextPage-button"),
+          className: classes.iconContainer,
+          disabled: !canNext,
+          onClick: () => changePage(page + 1),
+          title: labels?.nextPage || labels?.paginationNextPageTitle,
+          children: /* @__PURE__ */ jsx(
+            Forwards,
+            {
+              role: "none",
+              className: classes.icon,
+              color: setColor(!canNext),
+              iconSize: "XS"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          id: setId(id, "lastPage-button"),
+          className: classes.iconContainer,
+          disabled: !canNext,
+          onClick: () => changePage(pages - 1),
+          title: labels?.lastPage || labels?.paginationLastPageTitle,
+          children: /* @__PURE__ */ jsx(
+            End,
+            {
+              className: classes.icon,
+              color: setColor(!canNext),
+              iconSize: "XS"
+            }
+          )
+        }
+      )
     ] })
   ] });
 };