@hitachivantara/uikit-react-core 5.39.3 → 5.39.4

package/dist/cjs/MultiButton/MultiButton.cjs

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const MultiButton_styles = require("./MultiButton.styles.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const React__default = /* @__PURE__ */ _interopDefault(React);
+const HvMultiButton = (props) => {
+  const {
+    className,
+    children,
+    classes: classesProp,
+    disabled = false,
+    vertical = false,
+    variant = "secondarySubtle",
+    ...others
+  } = useDefaultProps.useDefaultProps("HvMultiButton", props);
+  const { classes, cx } = MultiButton_styles.useClasses(classesProp);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cx(
+        classes.root,
+        {
+          [classes.vertical]: vertical
+        },
+        className
+      ),
+      ...others,
+      children: React__default.default.Children.map(children, (child) => {
+        if (React__default.default.isValidElement(child)) {
+          const childIsSelected = !!child.props.selected;
+          return React.cloneElement(child, {
+            variant,
+            disabled: disabled || child.props.disabled,
+            className: cx(child.props.className, classes.button, {
+              [classes.selected]: childIsSelected
+            }),
+            "aria-pressed": childIsSelected
+          });
+        }
+      })
+    }
+  );
+};
+exports.multiButtonClasses = MultiButton_styles.staticClasses;
+exports.HvMultiButton = HvMultiButton;
+//# sourceMappingURL=MultiButton.cjs.map

package/dist/cjs/MultiButton/MultiButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiButton.cjs","sources":["../../../src/MultiButton/MultiButton.tsx"],"sourcesContent":["import React, { cloneElement } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvButtonVariant } from \"../Button\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../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":["useDefaultProps","useClasses","jsx","React","cloneElement"],"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,IACDA,gBAAgB,gBAAA,iBAAiB,KAAK;AAC1C,QAAM,EAAE,SAAS,GAAG,IAAIC,8BAAW,WAAW;AAG5C,SAAAC,2BAAA;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,UAAMC,eAAA,QAAA,SAAS,IAAI,UAAU,CAAC,UAAU;AACnC,YAAAA,eAAA,QAAM,eAAe,KAAK,GAAG;AAC/B,gBAAM,kBAAkB,CAAC,CAAC,MAAM,MAAM;AAEtC,iBAAOC,MAAAA,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/cjs/MultiButton/MultiButton.styles.cjs

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const uikitStyles = require("@hitachivantara/uikit-styles");
+const classes = require("../utils/classes.cjs");
+const { staticClasses, useClasses } = classes.createClasses("HvMultiButton", {
+  root: {
+    display: "flex",
+    height: 32,
+    alignItems: "center",
+    transition: "none",
+    background: uikitStyles.theme.colors.atmo2,
+    position: "relative",
+    zIndex: 0,
+    // prevent the focus ring to be hidden by sibling hover background
+    "&>.HvIsFocusVisible": {
+      zIndex: 5
+    },
+    "& button$button": {
+      height: 32,
+      width: "100%",
+      minWidth: 32,
+      maxWidth: 200,
+      padding: 0,
+      transition: "none",
+      flex: "1 0 0px",
+      borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+      borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+      borderLeft: "solid 1px transparent",
+      borderRight: "solid 1px transparent",
+      borderRadius: 0,
+      ...uikitStyles.theme.typography.body,
+      "&:active": {
+        backgroundColor: `${uikitStyles.theme.colors.atmo3}`
+      },
+      "&:disabled": {
+        color: uikitStyles.theme.colors.secondary_60,
+        borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+        borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+        "&:hover": {
+          borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+          borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+          borderLeft: "solid 1px transparent",
+          borderRight: "solid 1px transparent"
+        }
+      },
+      "&:first-of-type": {
+        borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+        borderTopLeftRadius: uikitStyles.theme.radii.base,
+        borderBottomLeftRadius: uikitStyles.theme.radii.base
+      },
+      "&:last-of-type": {
+        borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+        borderTopRightRadius: uikitStyles.theme.radii.base,
+        borderBottomRightRadius: uikitStyles.theme.radii.base,
+        "&:disabled:hover": {
+          borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4} !important`
+        }
+      },
+      "&:not(:first-of-type)": {
+        marginLeft: "-1px"
+      },
+      "&$selected": {
+        "&:hover": {
+          "&:not(:disabled)": {
+            border: `solid 1px ${uikitStyles.theme.colors.secondary}`
+          },
+          "&:disabled": {
+            border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+          }
+        },
+        "&:disabled": {
+          zIndex: 1,
+          color: uikitStyles.theme.colors.secondary_60,
+          background: uikitStyles.theme.colors.atmo1,
+          border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+        }
+      }
+    },
+    "& button$button$selected": {
+      background: uikitStyles.theme.colors.atmo1,
+      height: 34,
+      ...uikitStyles.theme.typography.label,
+      borderRadius: uikitStyles.theme.radii.base,
+      border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
+      zIndex: 2,
+      "&:hover": {
+        background: uikitStyles.theme.colors.atmo3
+      },
+      "&:first-of-type, &:last-of-type": {
+        border: `solid 1px ${uikitStyles.theme.colors.secondary}`
+      },
+      // prevent the focus ring to be hidden by sibling hover background
+      // even when selected
+      "&.HvIsFocusVisible": {
+        zIndex: 5
+      }
+    }
+  },
+  button: {},
+  selected: {},
+  // vertical button display Styling
+  vertical: {
+    flexDirection: "column",
+    height: "auto",
+    btnSecondary: {
+      flex: "1 1 20px"
+    },
+    "& button$button": {
+      width: "100%",
+      borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+      borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+      borderTop: "solid 1px transparent",
+      borderBottom: "solid 1px transparent",
+      "&:disabled": {
+        color: uikitStyles.theme.colors.secondary_60,
+        borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+        borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+        borderTop: "solid 1px transparent",
+        borderBottom: "solid 1px transparent",
+        "&:hover": {
+          borderLeft: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+          borderRight: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+          borderTop: "solid 1px transparent",
+          borderBottom: "solid 1px transparent"
+        }
+      },
+      "&:first-of-type": {
+        borderTop: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+        borderTopLeftRadius: uikitStyles.theme.radii.base,
+        borderTopRightRadius: uikitStyles.theme.radii.base
+      },
+      "&:last-of-type": {
+        borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4}`,
+        borderBottomLeftRadius: uikitStyles.theme.radii.base,
+        borderBottomRightRadius: uikitStyles.theme.radii.base,
+        "&:disabled:hover": {
+          borderBottom: `solid 1px ${uikitStyles.theme.colors.atmo4} !important`
+        }
+      },
+      "&:not(:first-of-type)": {
+        marginLeft: 0,
+        marginTop: -1
+      },
+      "&$selected": {
+        height: 32,
+        width: `calc(100% + 2px) !important`,
+        background: uikitStyles.theme.colors.atmo1,
+        ...uikitStyles.theme.typography.label,
+        borderRadius: uikitStyles.theme.radii.base,
+        border: `solid 1px ${uikitStyles.theme.colors.secondary}`,
+        zIndex: 2,
+        "&:hover, &:focus": {
+          background: uikitStyles.theme.colors.atmo3
+        },
+        "&:disabled": {
+          zIndex: 1,
+          color: uikitStyles.theme.colors.secondary_60,
+          background: uikitStyles.theme.colors.atmo1,
+          border: `solid 1px ${uikitStyles.theme.colors.atmo4}`
+        }
+      }
+    }
+  }
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=MultiButton.styles.cjs.map

package/dist/cjs/MultiButton/MultiButton.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiButton.styles.cjs","sources":["../../../src/MultiButton/MultiButton.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../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":["createClasses","theme"],"mappings":"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"}

package/dist/cjs/OverflowTooltip/OverflowTooltip.cjs

@@ -0,0 +1,88 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const reactResizeDetector = require("react-resize-detector");
+const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const OverflowTooltip_styles = require("./OverflowTooltip.styles.cjs");
+const Tooltip = require("../Tooltip/Tooltip.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const isParagraph = (children = "") => /\s/.test(children);
+const HvOverflowTooltip = (props) => {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    data,
+    open,
+    paragraphOverflow,
+    placement = "top-start",
+    tooltipsProps
+  } = useDefaultProps.useDefaultProps("HvOverflowTooltip", props);
+  const { classes, cx } = OverflowTooltip_styles.useClasses(classesProp);
+  const {
+    height = 0,
+    width = 0,
+    ref
+  } = reactResizeDetector.useResizeDetector({
+    refreshMode: "debounce",
+    refreshOptions: {
+      trailing: true
+    },
+    handleHeight: false
+  });
+  const isParag = React.useMemo(
+    () => paragraphOverflow && isParagraph(data?.toString()),
+    [data, paragraphOverflow]
+  );
+  const isOverflowing = React.useMemo(() => {
+    if (isParag) {
+      const scrollHeight = ref.current?.scrollHeight || 0;
+      return scrollHeight - height >= 1;
+    }
+    const scrollWidth = ref.current?.scrollWidth || 0;
+    return scrollWidth - width >= 1;
+  }, [height, isParag, ref, width]);
+  const content = React.useMemo(
+    () => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    Tooltip.HvTooltip,
+    {
+      id,
+      disableHoverListener: !isOverflowing,
+      open,
+      placement,
+      title: /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.tooltipData, variant: "body", children: data }),
+      "aria-label": null,
+      "aria-labelledby": null,
+      ...tooltipsProps,
+      children: content
+    }
+  );
+};
+exports.overflowTooltipClasses = OverflowTooltip_styles.staticClasses;
+exports.HvOverflowTooltip = HvOverflowTooltip;
+//# sourceMappingURL=OverflowTooltip.cjs.map

package/dist/cjs/OverflowTooltip/OverflowTooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowTooltip.cjs","sources":["../../../src/OverflowTooltip/OverflowTooltip.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTooltip, HvTooltipProps } from \"../Tooltip\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../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":["useDefaultProps","useClasses","useResizeDetector","useMemo","jsx","HvTooltip","HvTypography"],"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,IACEA,gBAAgB,gBAAA,qBAAqB,KAAK;AAE9C,QAAM,EAAE,SAAS,GAAG,IAAIC,kCAAW,WAAW;AAExC,QAAA;AAAA,IACJ,SAAS;AAAA,IACT,QAAQ;AAAA,IACR;AAAA,MACEC,sCAAkB;AAAA,IACpB,aAAa;AAAA,IACb,gBAAgB;AAAA,MACd,UAAU;AAAA,IACZ;AAAA,IACA,cAAc;AAAA,EAAA,CACf;AAED,QAAM,UAAUC,MAAA;AAAA,IACd,MAAM,qBAAqB,YAAY,MAAM,UAAU;AAAA,IACvD,CAAC,MAAM,iBAAiB;AAAA,EAAA;AAIpB,QAAA,gBAAgBA,MAAAA,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,UAAUA,MAAA;AAAA,IACd,MACEC,2BAAA;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,SAAAA,2BAAA;AAAA,IAACC,QAAA;AAAA,IAAA;AAAA,MACC;AAAA,MACA,sBAAsB,CAAC;AAAA,MACvB;AAAA,MACA;AAAA,MACA,sCACGC,yBAAa,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/cjs/OverflowTooltip/OverflowTooltip.styles.cjs

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classes = require("../utils/classes.cjs");
+const { staticClasses, useClasses } = classes.createClasses(
+  "HvOverflowTooltip",
+  {
+    tooltipData: {},
+    tooltipAnchor: {
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    },
+    tooltipAnchorParagraph: {
+      overflow: "hidden",
+      display: "-webkit-box",
+      WebkitLineClamp: 3,
+      WebkitBoxOrient: "vertical"
+    }
+  }
+);
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=OverflowTooltip.styles.cjs.map

package/dist/cjs/OverflowTooltip/OverflowTooltip.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowTooltip.styles.cjs","sources":["../../../src/OverflowTooltip/OverflowTooltip.styles.tsx"],"sourcesContent":["import { createClasses } from \"../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":["createClasses"],"mappings":";;;AAEa,MAAA,EAAE,eAAe,WAAA,IAAeA,QAAA;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/cjs/Pagination/Pagination.cjs

@@ -0,0 +1,227 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
+const React = require("react");
+const Hidden = require("@mui/material/Hidden");
+const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
+const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const setId = require("../utils/setId.cjs");
+const keyboardUtils = require("../utils/keyboardUtils.cjs");
+const IconButton = require("../utils/IconButton.cjs");
+const useLabels = require("../hooks/useLabels.cjs");
+const Select = require("./Select.cjs");
+const Pagination_styles = require("./Pagination.styles.cjs");
+const utils = require("./utils.cjs");
+const Typography = require("../Typography/Typography.cjs");
+const Input = require("../Input/Input.cjs");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const Hidden__default = /* @__PURE__ */ _interopDefault(Hidden);
+const DEFAULT_LABELS = {
+  pageSizePrev: "Show",
+  pageSizeEntryName: "rows",
+  pageSizeSelectorDescription: "Select how many to display",
+  pagesSeparator: "/",
+  paginationFirstPageTitle: "First page",
+  paginationPreviousPageTitle: "Previous page",
+  paginationNextPageTitle: "Next page",
+  paginationLastPageTitle: "Last page",
+  paginationInputLabel: "Current page",
+  firstPage: "First Page",
+  previousPage: "Previous Page",
+  nextPage: "Next Page",
+  lastPage: "Last Page"
+};
+const defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];
+const HvPagination = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    id,
+    pages = 1,
+    page = 0,
+    showPageSizeOptions = true,
+    pageSizeOptions = defaultPageSizeOptions,
+    pageSize = defaultPageSizeOptions[1],
+    showPageJump = true,
+    canPrevious = false,
+    canNext = false,
+    onPageChange,
+    onPageSizeChange,
+    labels: labelsProp,
+    showPageProps,
+    navigationProps,
+    currentPageInputProps,
+    ...others
+  } = useDefaultProps.useDefaultProps("HvPagination", props);
+  const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
+  const [pageInput, handleInputChange] = utils.usePageInput(page);
+  const { classes, cx } = Pagination_styles.useClasses(classesProp);
+  const changePage = React.useCallback(
+    (newPage) => {
+      const safePage = utils.getSafePage(newPage, page, pages);
+      onPageChange?.(safePage);
+      handleInputChange(null, safePage + 1);
+    },
+    [page, pages, onPageChange, handleInputChange]
+  );
+  React.useEffect(() => {
+    if (page >= pages && pages > 0) {
+      changePage(page);
+    }
+  }, [changePage, page, pages]);
+  React.useEffect(() => {
+    if (pageInput !== page + 1) {
+      handleInputChange(null, page + 1);
+    }
+  }, [handleInputChange, page]);
+  const renderPageJump = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageJump, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Input.HvInput,
+    {
+      id: setId.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) => keyboardUtils.isKey(evt, "Enter") && changePage(Number(value) - 1),
+      disabled: pageSize === 0,
+      disableClear: true,
+      ...currentPageInputProps
+    }
+  ) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: showPageSizeOptions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Hidden__default.default, { xsDown: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Typography.HvTypography,
+        {
+          component: "span",
+          className: classes?.pageSizeTextContainer,
+          children: labels?.pageSizePrev
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Select.default,
+        {
+          id: setId.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__ */ jsxRuntime.jsx(Select.Option, { value: option, children: option }, option))
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(Hidden__default.default, { xsDown: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+        Typography.HvTypography,
+        {
+          component: "span",
+          className: classes.pageSizeTextContainer,
+          children: labels?.pageSizeEntryName
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pageNavigator, ...navigationProps, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        IconButton.IconButton,
+        {
+          id: setId.setId(id, "firstPage-button"),
+          className: classes.iconContainer,
+          disabled: !canPrevious,
+          onClick: () => changePage(0),
+          title: labels?.firstPage || labels?.paginationFirstPageTitle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            uikitReactIcons.Start,
+            {
+              role: "none",
+              className: classes.icon,
+              color: utils.setColor(!canPrevious),
+              iconSize: "XS"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        IconButton.IconButton,
+        {
+          id: setId.setId(id, "previousPage-button"),
+          className: classes.iconContainer,
+          disabled: !canPrevious,
+          onClick: () => changePage(page - 1),
+          title: labels?.previousPage || labels?.paginationPreviousPageTitle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            uikitReactIcons.Backwards,
+            {
+              role: "none",
+              className: classes.icon,
+              color: utils.setColor(!canPrevious),
+              iconSize: "XS"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pageInfo, children: [
+        showPageJump ? renderPageJump() : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "caption2", component: "span", children: `${page + 1}` }),
+        /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", children: `${labels?.pagesSeparator} ` }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Typography.HvTypography,
+          {
+            component: "span",
+            id: setId.setId(id, "totalPages"),
+            className: classes.totalPagesTextContainer,
+            children: pages
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        IconButton.IconButton,
+        {
+          id: setId.setId(id, "nextPage-button"),
+          className: classes.iconContainer,
+          disabled: !canNext,
+          onClick: () => changePage(page + 1),
+          title: labels?.nextPage || labels?.paginationNextPageTitle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            uikitReactIcons.Forwards,
+            {
+              role: "none",
+              className: classes.icon,
+              color: utils.setColor(!canNext),
+              iconSize: "XS"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        IconButton.IconButton,
+        {
+          id: setId.setId(id, "lastPage-button"),
+          className: classes.iconContainer,
+          disabled: !canNext,
+          onClick: () => changePage(pages - 1),
+          title: labels?.lastPage || labels?.paginationLastPageTitle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            uikitReactIcons.End,
+            {
+              className: classes.icon,
+              color: utils.setColor(!canNext),
+              iconSize: "XS"
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+};
+exports.paginationClasses = Pagination_styles.staticClasses;
+exports.HvPagination = HvPagination;
+//# sourceMappingURL=Pagination.cjs.map

package/dist/cjs/Pagination/Pagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.cjs","sources":["../../../src/Pagination/Pagination.tsx"],"sourcesContent":["import { HTMLAttributes, useCallback, useEffect } from \"react\";\n\nimport Hidden from \"@mui/material/Hidden\";\n\nimport {\n  Start,\n  End,\n  Backwards,\n  Forwards,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvInput, HvInputProps } from \"../Input\";\nimport { HvTypography } from \"../Typography\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { IconButton } from \"../utils/IconButton\";\nimport { useLabels } from \"../hooks/useLabels\";\n\nimport HvSelect, { Option } from \"./Select\";\nimport { staticClasses, useClasses } from \"./Pagination.styles\";\nimport { usePageInput, getSafePage, setColor } from \"./utils\";\n\nexport { staticClasses as paginationClasses };\n\nexport type HvPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPaginationLabels {\n  /** The show label. */\n  pageSizePrev?: string;\n  /** Indicate the units of the page size selection. */\n  pageSizeEntryName?: string;\n  /** Used for the aria-label of the selection of number of unit.s */\n  pageSizeSelectorDescription?: string;\n  /** Separator of current page and total pages. */\n  pagesSeparator?: string;\n  /** Title of button `firstPage`. @deprecated Use `firstPage` instead. */\n  paginationFirstPageTitle?: string;\n  /** Title of button `previousPage`. @deprecated Use `previousPage` instead. */\n  paginationPreviousPageTitle?: string;\n  /** Title of button `nextPage`. @deprecated Use `nextPage` instead. */\n  paginationNextPageTitle?: string;\n  /** Title of button `lastPage`. @deprecated Use `lastPage` instead. */\n  paginationLastPageTitle?: string;\n  /** Aria-label passed to the page input. */\n  paginationInputLabel?: string;\n  /** Label of the first page button */\n  firstPage?: string;\n  /** Label of the previous page button */\n  previousPage?: string;\n  /** Label of the next page button */\n  nextPage?: string;\n  /** Label of the last page button */\n  lastPage?: string;\n}\n\nexport interface HvPaginationProps extends HvBaseProps {\n  /** The number of pages the component has. */\n  pages?: number;\n  /** The currently selected page (0-indexed). */\n  page?: number;\n  /** Controls whether the left page size mechanism should be visible. */\n  showPageSizeOptions?: boolean;\n  /** The array of possible page sizes for the dropdown. */\n  pageSizeOptions?: number[];\n  /** The currently selected page size. */\n  pageSize?: number;\n  /** Controls whether the central page changing mechanism should be visible. */\n  showPageJump?: boolean;\n  /** Controls whether the previous/first page buttons are enabled. */\n  canPrevious?: boolean;\n  /** Controls whether the next/last page buttons are enabled. */\n  canNext?: boolean;\n  /** Function called when the page changes. */\n  onPageChange?: (page: number) => void;\n  /** Function called when the page size changes. */\n  onPageSizeChange?: (pageSize: number) => void;\n  /** An object containing all the labels for the component. */\n  labels?: HvPaginationLabels;\n  /** Other props to show page component. */\n  showPageProps?: HTMLAttributes<HTMLDivElement>;\n  /** Other props to pagination component. */\n  navigationProps?: HTMLAttributes<HTMLDivElement>;\n  /** Extra properties passed to the input component representing the current pages. */\n  currentPageInputProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvPaginationClasses;\n}\n\nconst DEFAULT_LABELS: HvPaginationLabels = {\n  pageSizePrev: \"Show\",\n  pageSizeEntryName: \"rows\",\n  pageSizeSelectorDescription: \"Select how many to display\",\n  pagesSeparator: \"/\",\n  paginationFirstPageTitle: \"First page\",\n  paginationPreviousPageTitle: \"Previous page\",\n  paginationNextPageTitle: \"Next page\",\n  paginationLastPageTitle: \"Last page\",\n  paginationInputLabel: \"Current page\",\n  firstPage: \"First Page\",\n  previousPage: \"Previous Page\",\n  nextPage: \"Next Page\",\n  lastPage: \"Last Page\",\n};\n\nconst defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact\n * with structured content on a website or application.\n */\nexport const HvPagination = (props: HvPaginationProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    pages = 1,\n    page = 0,\n    showPageSizeOptions = true,\n    pageSizeOptions = defaultPageSizeOptions,\n    pageSize = defaultPageSizeOptions[1],\n    showPageJump = true,\n    canPrevious = false,\n    canNext = false,\n    onPageChange,\n    onPageSizeChange,\n    labels: labelsProp,\n    showPageProps,\n    navigationProps,\n    currentPageInputProps,\n    ...others\n  } = useDefaultProps(\"HvPagination\", props);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const [pageInput, handleInputChange] = usePageInput(page);\n  const { classes, cx } = useClasses(classesProp);\n\n  const changePage = useCallback(\n    (newPage: number) => {\n      const safePage: number = getSafePage(newPage, page, pages);\n\n      onPageChange?.(safePage);\n      handleInputChange(null, safePage + 1);\n    },\n    [page, pages, onPageChange, handleInputChange]\n  );\n\n  useEffect(() => {\n    if (page >= pages && pages > 0) {\n      changePage(page);\n    }\n  }, [changePage, page, pages]);\n\n  useEffect(() => {\n    if (pageInput !== page + 1) {\n      handleInputChange(null, page + 1);\n    }\n\n    // we only want to \"fix\" the input's display value when `page` property changed\n    // (either externally or when internally committed - onBlur or Enter),\n    // not while editing the input.\n    // breaking a rule of hooks isn't ideal and it's just a hack for fixing\n    // a bug preventing properly controlling of the `page` property.\n    // fixing it some other way would potentially introduce a breaking change.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [handleInputChange, page]);\n\n  const renderPageJump = () => (\n    <div className={classes.pageJump}>\n      <HvInput\n        id={setId(id, \"currentPage\")}\n        labels={labels}\n        inputProps={{\n          \"aria-label\": labels?.paginationInputLabel,\n          // We really want the native number input\n          type: \"number\",\n        }}\n        classes={{\n          root: classes?.pageSizeInputContainer,\n          input: classes?.pageSizeInput,\n          inputRoot: classes?.pageSizeInputRoot,\n        }}\n        onChange={(event, value) => handleInputChange(event, Number(value))}\n        value={String(pageInput)}\n        onBlur={(evt, value) => changePage(Number(value) - 1)}\n        onKeyDown={(evt, value) =>\n          isKey(evt, \"Enter\") && changePage(Number(value) - 1)\n        }\n        disabled={pageSize === 0}\n        disableClear\n        {...currentPageInputProps}\n      />\n    </div>\n  );\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <div className={classes.pageSizeOptions} {...showPageProps}>\n        {showPageSizeOptions && (\n          <>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes?.pageSizeTextContainer}\n              >\n                {labels?.pageSizePrev}\n              </HvTypography>\n            </Hidden>\n            <HvSelect\n              id={setId(id, \"pageSize\")}\n              disabled={pageSize === 0}\n              className={classes.pageSizeOptionsSelect}\n              aria-label={labels?.pageSizeSelectorDescription}\n              onChange={(_: any, val: number) => onPageSizeChange?.(val)}\n              value={pageSize}\n              classes={{ header: classes.pageSizeHeader }}\n            >\n              {pageSizeOptions.map((option) => (\n                <Option key={option} value={option}>\n                  {option}\n                </Option>\n              ))}\n            </HvSelect>\n            <Hidden xsDown>\n              <HvTypography\n                component=\"span\"\n                className={classes.pageSizeTextContainer}\n              >\n                {labels?.pageSizeEntryName}\n              </HvTypography>\n            </Hidden>\n          </>\n        )}\n      </div>\n      <div className={classes.pageNavigator} {...navigationProps}>\n        <IconButton\n          id={setId(id, \"firstPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(0)}\n          title={labels?.firstPage || labels?.paginationFirstPageTitle}\n        >\n          <Start\n            role=\"none\"\n            className={classes.icon}\n            color={setColor(!canPrevious)}\n            iconSize=\"XS\"\n          />\n        </IconButton>\n        <IconButton\n          id={setId(id, \"previousPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canPrevious}\n          onClick={() => changePage(page - 1)}\n          title={labels?.previousPage || labels?.paginationPreviousPageTitle}\n        >\n          <Backwards\n            role=\"none\"\n            className={classes.icon}\n            color={setColor(!canPrevious)}\n            iconSize=\"XS\"\n          />\n        </IconButton>\n        <div className={classes.pageInfo}>\n          {showPageJump ? (\n            renderPageJump()\n          ) : (\n            <HvTypography variant=\"caption2\" component=\"span\">{`${\n              page + 1\n            }`}</HvTypography>\n          )}\n          <HvTypography component=\"span\">{`${labels?.pagesSeparator} `}</HvTypography>\n          <HvTypography\n            component=\"span\"\n            id={setId(id, \"totalPages\")}\n            className={classes.totalPagesTextContainer}\n          >\n            {pages}\n          </HvTypography>\n        </div>\n        <IconButton\n          id={setId(id, \"nextPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(page + 1)}\n          title={labels?.nextPage || labels?.paginationNextPageTitle}\n        >\n          <Forwards\n            role=\"none\"\n            className={classes.icon}\n            color={setColor(!canNext)}\n            iconSize=\"XS\"\n          />\n        </IconButton>\n        <IconButton\n          id={setId(id, \"lastPage-button\")}\n          className={classes.iconContainer}\n          disabled={!canNext}\n          onClick={() => changePage(pages - 1)}\n          title={labels?.lastPage || labels?.paginationLastPageTitle}\n        >\n          <End\n            className={classes.icon}\n            color={setColor(!canNext)}\n            iconSize=\"XS\"\n          />\n        </IconButton>\n      </div>\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useLabels","usePageInput","useClasses","useCallback","getSafePage","useEffect","jsx","HvInput","setId","isKey","jsxs","Fragment","Hidden","HvTypography","HvSelect","Option","IconButton","Start","setColor","Backwards","Forwards","End"],"mappings":"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"}