@hitachivantara/uikit-react-core 5.27.5 → 5.27.7

package/dist/esm/components/Dialog/Dialog.js

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import React__default, { useCallback, useMemo } from "react";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import MuiDialog from "@mui/material/Dialog";
@@ -10,7 +11,6 @@ import { useTheme } from "../../hooks/useTheme.js";
 import { hexToRgbA } from "../../utils/hexToRgbA.js";
 import { useClasses } from "./Dialog.styles.js";
 import { staticClasses } from "./Dialog.styles.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvButton } from "../Button/Button.js";
 const HvDialog = (props) => {
   const {
@@ -48,66 +48,41 @@ const HvDialog = (props) => {
     const element = document.getElementById(firstFocusable);
     element == null ? void 0 : element.focus();
   }, [firstFocusable]);
-  const closeButtonDisplay = () => /* @__PURE__ */ jsx(Close, {
-    role: "presentation"
-  });
+  const closeButtonDisplay = () => /* @__PURE__ */ jsx(Close, { role: "presentation" });
   const CloseButtonTooltipWrapper = buttonTitle ? withTooltip(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
   const slots = useMemo(() => ({
-    backdrop: (backdropProps) => /* @__PURE__ */ jsx(MuiBackdrop, {
-      open,
-      onClick: wrappedClose,
-      ...backdropProps
-    })
+    backdrop: (backdropProps) => /* @__PURE__ */ jsx(MuiBackdrop, { open, onClick: wrappedClose, ...backdropProps })
   }), [open, wrappedClose]);
-  return /* @__PURE__ */ jsxs(MuiDialog, {
-    container: typeof window !== "undefined" ? (
-      // TODO: review
-      // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
-      document.getElementById(rootId || "") || document.body
-    ) : void 0,
-    className: cx(classes.root, className),
-    classes: {
-      container: css({
-        position: "relative"
-      })
-    },
-    id,
-    ref: measuredRef,
-    open,
-    fullScreen: fullscreen,
-    onClose: (event, reason) => wrappedClose(event, void 0, reason),
-    slots,
-    slotProps: {
-      backdrop: {
-        classes: {
-          root: cx(css({
-            background: hexToRgbA((colors == null ? void 0 : colors.atmo4) || theme.colors.atmo4, 0.8)
-          }), classes.background)
-        }
-      }
-    },
-    PaperProps: {
+  return /* @__PURE__ */ jsxs(MuiDialog, { container: typeof window !== "undefined" ? (
+    // TODO: review
+    // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
+    document.getElementById(rootId || "") || document.body
+  ) : void 0, className: cx(classes.root, className), classes: {
+    container: css({
+      position: "relative"
+    })
+  }, id, ref: measuredRef, open, fullScreen: fullscreen, onClose: (event, reason) => wrappedClose(event, void 0, reason), slots, slotProps: {
+    backdrop: {
       classes: {
         root: cx(css({
-          position: "absolute"
-        }), classes.paper, variant && cx(classes.statusBar, classes[variant]), {
-          [classes.fullscreen]: fullscreen
-        })
+          background: hexToRgbA((colors == null ? void 0 : colors.atmo4) || theme.colors.atmo4, 0.8)
+        }), classes.background)
       }
-    },
-    "aria-modal": true,
-    ...others,
-    children: [/* @__PURE__ */ jsx(HvButton, {
-      id: setId(id, "close"),
-      className: classes.closeButton,
-      variant: "secondaryGhost",
-      onClick: (event) => wrappedClose(event, true, void 0),
-      "aria-label": buttonTitle,
-      children: /* @__PURE__ */ jsx(CloseButtonTooltipWrapper, {})
-    }), children && typeof children === "object" ? React__default.Children.map(children, (c) => c && React__default.cloneElement(c, {
+    }
+  }, PaperProps: {
+    classes: {
+      root: cx(css({
+        position: "absolute"
+      }), classes.paper, variant && cx(classes.statusBar, classes[variant]), {
+        [classes.fullscreen]: fullscreen
+      })
+    }
+  }, "aria-modal": true, ...others, children: [
+    /* @__PURE__ */ jsx(HvButton, { id: setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: (event) => wrappedClose(event, true, void 0), "aria-label": buttonTitle, children: /* @__PURE__ */ jsx(CloseButtonTooltipWrapper, {}) }),
+    children && typeof children === "object" ? React__default.Children.map(children, (c) => c && React__default.cloneElement(c, {
       fullscreen
-    })) : children]
-  });
+    })) : children
+  ] });
 };
 export {
   HvDialog,

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport MuiBackdrop from \"@mui/material/Backdrop\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n    HvBaseProps {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Function executed on close. */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  delete (others as any).fullScreen;\n\n  const { rootId, colors } = useTheme();\n\n  // Because the `disableBackdropClick` property was deprecated in MUI5\n  // and we want to maintain that functionality to the user we're wrapping\n  // the onClose call here to make that check.\n  const wrappedClose = useCallback(\n    (\n      event: any,\n      bypassValidation: boolean = false,\n      reason?: \"escapeKeyDown\" | \"backdropClick\"\n    ) => {\n      if (bypassValidation || !disableBackdropClick) {\n        onClose?.(event, reason);\n      }\n    },\n    [onClose, disableBackdropClick]\n  );\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  const slots = useMemo<MuiDialogProps[\"slots\"]>(\n    () => ({\n      backdrop: (backdropProps) => (\n        <MuiBackdrop open={open} onClick={wrappedClose} {...backdropProps} />\n      ),\n    }),\n    [open, wrappedClose]\n  );\n\n  return (\n    <MuiDialog\n      container={\n        typeof window !== \"undefined\"\n          ? // TODO: review\n            // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc\n            document.getElementById(rootId || \"\") || document.body\n          : undefined\n      }\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n      slots={slots}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: cx(\n              css({\n                background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4, 0.8),\n              }),\n              classes.background\n            ),\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            }\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={(event) => wrappedClose(event, true, undefined)}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children && typeof children === \"object\"\n        ? React.Children.map(\n            children,\n            (c: React.ReactNode) =>\n              c && React.cloneElement(c as React.ReactElement, { fullscreen })\n          )\n        : children}\n    </MuiDialog>\n  );\n};\n"],"names":["HvDialog","props","variant","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","useDefaultProps","css","cx","useClasses","fullScreen","rootId","colors","useTheme","wrappedClose","useCallback","event","bypassValidation","reason","measuredRef","element","document","getElementById","focus","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","slots","useMemo","backdrop","backdropProps","MuiBackdrop","onClick","MuiDialog","container","window","body","undefined","root","position","ref","slotProps","background","hexToRgbA","atmo4","theme","PaperProps","paper","statusBar","HvButton","setId","closeButton","React","Children","map","c","cloneElement"],"mappings":";;;;;;;;;;;;;;AAyDaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,cAAc;AAAA,IACdC,aAAa;AAAA,IACbC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYd,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASa;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWd,WAAW;AACnD,SAAQU,OAAeK;AAEjB,QAAA;AAAA,IAAEC;AAAAA,IAAQC;AAAAA,MAAWC,SAAS;AAKpC,QAAMC,eAAeC,YACnB,CACEC,OACAC,mBAA4B,OAC5BC,WACG;AACCD,QAAAA,oBAAoB,CAACb,sBAAsB;AAC7CJ,yCAAUgB,OAAOE;AAAAA,IACnB;AAAA,EAAA,GAEF,CAAClB,SAASI,oBAAoB,CAChC;AAEMe,QAAAA,cAAcJ,YAAY,MAAM;AACpC,QAAI,CAACd;AAAgB;AAEfmB,UAAAA,UAAUC,SAASC,eAAerB,cAAc;AACtDmB,uCAASG;AAAAA,EAAM,GACd,CAACtB,cAAc,CAAC;AAEbuB,QAAAA,qBAAqBA,MAAMC,oBAACC,OAAK;AAAA,IAACC,MAAK;AAAA,EAAA,CAAgB;AAE7D,QAAMC,4BAA4B1B,cAC9B2B,YAAYL,oBAAoBtB,aAAa,KAAK,IAClDsB;AAEEM,QAAAA,QAAQC,QACZ,OAAO;AAAA,IACLC,UAAWC,CACTR,kBAAAA,oBAACS,aAAW;AAAA,MAACnC;AAAAA,MAAYoC,SAASrB;AAAAA,MAAa,GAAKmB;AAAAA,IAAAA,CAAgB;AAAA,EAGxE,IAAA,CAAClC,MAAMe,YAAY,CACrB;AAEA,8BACGsB,WAAS;AAAA,IACRC,WACE,OAAOC,WAAW;AAAA;AAAA;AAAA,MAGdjB,SAASC,eAAeX,UAAU,EAAE,KAAKU,SAASkB;AAAAA,QAClDC;AAAAA,IAEN5C,WAAWY,GAAGd,QAAQ+C,MAAM7C,SAAS;AAAA,IACrCF,SAAS;AAAA,MAAE2C,WAAW9B,IAAI;AAAA,QAAEmC,UAAU;AAAA,MAAA,CAAY;AAAA,IAAE;AAAA,IACpD7C;AAAAA,IACA8C,KAAKxB;AAAAA,IACLpB;AAAAA,IACAW,YAAYP;AAAAA,IACZH,SAASA,CAACgB,OAAOE,WAAWJ,aAAaE,OAAOwB,QAAWtB,MAAM;AAAA,IACjEY;AAAAA,IACAc,WAAW;AAAA,MACTZ,UAAU;AAAA,QACRtC,SAAS;AAAA,UACP+C,MAAMjC,GACJD,IAAI;AAAA,YACFsC,YAAYC,WAAUlC,iCAAQmC,UAASC,MAAMpC,OAAOmC,OAAO,GAAG;AAAA,UAAA,CAC/D,GACDrD,QAAQmD,UACV;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACAI,YAAY;AAAA,MACVvD,SAAS;AAAA,QACP+C,MAAMjC,GACJD,IAAI;AAAA,UAAEmC,UAAU;AAAA,QAAA,CAAY,GAC5BhD,QAAQwD,OACRzD,WAAWe,GAAGd,QAAQyD,WAAWzD,QAAQD,OAAO,CAAC,GACjD;AAAA,UACE,CAACC,QAAQS,UAAU,GAAGA;AAAAA,QAAAA,CAE1B;AAAA,MACF;AAAA,IACF;AAAA,IACA,cAAU;AAAA,IAAA,GACNE;AAAAA,IAAMP,UAAA,CAEV2B,oBAAC2B,UAAQ;AAAA,MACPvD,IAAIwD,MAAMxD,IAAI,OAAO;AAAA,MACrBD,WAAWF,QAAQ4D;AAAAA,MACnB7D,SAAQ;AAAA,MACR0C,SAAUnB,CAAAA,UAAUF,aAAaE,OAAO,MAAMwB,MAAS;AAAA,MACvD,cAAYtC;AAAAA,MAAYJ,UAExB2B,oBAACG,2BAA2B,EAAA;AAAA,IACpB,CAAA,GACT9B,YAAY,OAAOA,aAAa,WAC7ByD,eAAMC,SAASC,IACb3D,UACA,CAAC4D,MACCA,KAAKH,eAAMI,aAAaD,GAAyB;AAAA,MAAEvD;AAAAA,IAAAA,CAAY,CACnE,IACAL,QAAQ;AAAA,EAAA,CACH;AAEf;"}
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport MuiBackdrop from \"@mui/material/Backdrop\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n    HvBaseProps {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Function executed on close. */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  delete (others as any).fullScreen;\n\n  const { rootId, colors } = useTheme();\n\n  // Because the `disableBackdropClick` property was deprecated in MUI5\n  // and we want to maintain that functionality to the user we're wrapping\n  // the onClose call here to make that check.\n  const wrappedClose = useCallback(\n    (\n      event: any,\n      bypassValidation: boolean = false,\n      reason?: \"escapeKeyDown\" | \"backdropClick\"\n    ) => {\n      if (bypassValidation || !disableBackdropClick) {\n        onClose?.(event, reason);\n      }\n    },\n    [onClose, disableBackdropClick]\n  );\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  const slots = useMemo<MuiDialogProps[\"slots\"]>(\n    () => ({\n      backdrop: (backdropProps) => (\n        <MuiBackdrop open={open} onClick={wrappedClose} {...backdropProps} />\n      ),\n    }),\n    [open, wrappedClose]\n  );\n\n  return (\n    <MuiDialog\n      container={\n        typeof window !== \"undefined\"\n          ? // TODO: review\n            // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc\n            document.getElementById(rootId || \"\") || document.body\n          : undefined\n      }\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n      slots={slots}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: cx(\n              css({\n                background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4, 0.8),\n              }),\n              classes.background\n            ),\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            }\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={(event) => wrappedClose(event, true, undefined)}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children && typeof children === \"object\"\n        ? React.Children.map(\n            children,\n            (c: React.ReactNode) =>\n              c && React.cloneElement(c as React.ReactElement, { fullscreen })\n          )\n        : children}\n    </MuiDialog>\n  );\n};\n"],"names":["HvDialog","props","variant","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","useDefaultProps","css","cx","useClasses","fullScreen","rootId","colors","useTheme","wrappedClose","useCallback","event","bypassValidation","reason","measuredRef","element","document","getElementById","focus","closeButtonDisplay","CloseButtonTooltipWrapper","withTooltip","slots","useMemo","backdrop","backdropProps","window","body","undefined","root","container","position","background","hexToRgbA","atmo4","theme","paper","statusBar","setId","closeButton","React","Children","map","c","cloneElement"],"mappings":"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"}

package/dist/esm/components/Dialog/Title/Title.js

@@ -1,10 +1,10 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import MuiDialogTitle from "@mui/material/DialogTitle";
 import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
 import { iconVariant } from "../../../utils/iconVariant.js";
 import { useTheme } from "../../../hooks/useTheme.js";
 import { useClasses } from "./Title.styles.js";
 import { staticClasses } from "./Title.styles.js";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { HvTypography } from "../../Typography/Typography.js";
 const HvDialogTitle = (props) => {
   const {
@@ -30,26 +30,19 @@ const HvDialogTitle = (props) => {
   } = others;
   delete others.fullscreen;
   const icon = customIcon || showIcon && iconVariant(variant);
-  return /* @__PURE__ */ jsx(MuiDialogTitle, {
-    className: cx(!fullscreen && css({
-      flex: 1
-    }), classes.root, {
-      [classes.fullscreen]: fullscreen
-    }, className),
-    ...others,
-    children: /* @__PURE__ */ jsxs("div", {
-      className: classes.messageContainer,
-      children: [icon, /* @__PURE__ */ jsxs("div", {
-        className: cx({
-          [classes.textWithIcon]: !!icon
-        }),
-        children: [!isString && children, isString && /* @__PURE__ */ jsx(HvTypography, {
-          variant: activeTheme == null ? void 0 : activeTheme.dialog.titleVariant,
-          children
-        })]
-      })]
-    })
-  });
+  return /* @__PURE__ */ jsx(MuiDialogTitle, { className: cx(!fullscreen && css({
+    flex: 1
+  }), classes.root, {
+    [classes.fullscreen]: fullscreen
+  }, className), ...others, children: /* @__PURE__ */ jsxs("div", { className: classes.messageContainer, children: [
+    icon,
+    /* @__PURE__ */ jsxs("div", { className: cx({
+      [classes.textWithIcon]: !!icon
+    }), children: [
+      !isString && children,
+      isString && /* @__PURE__ */ jsx(HvTypography, { variant: activeTheme == null ? void 0 : activeTheme.dialog.titleVariant, children })
+    ] })
+  ] }) });
 };
 export {
   HvDialogTitle,

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

@@ -1 +1 @@
-{"version":3,"file":"Title.js","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n  DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { iconVariant } from \"@core/utils/iconVariant\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./Title.styles\";\n\nexport { staticClasses as dialogTitleClasses };\n\nexport type HvDialogTitleClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDialogTitleVariant =\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"default\";\n\nexport interface HvDialogTitleProps\n  extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\">,\n    HvBaseProps<HTMLSpanElement, \"color\"> {\n  /** Variant of the dialog title. */\n  variant?: HvDialogTitleVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogTitleClasses;\n}\n\nexport const HvDialogTitle = (props: HvDialogTitleProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    variant = \"default\",\n    showIcon = true,\n    customIcon = null,\n    ...others\n  } = useDefaultProps(\"HvDialogTitle\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const { activeTheme } = useTheme();\n\n  const isString = typeof children === \"string\";\n\n  const { fullscreen } = others as any;\n  delete (others as any).fullscreen;\n\n  const icon = customIcon || (showIcon && iconVariant(variant));\n\n  return (\n    <MuiDialogTitle\n      className={cx(\n        !fullscreen && css({ flex: 1 }),\n        classes.root,\n        {\n          [classes.fullscreen]: fullscreen,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.messageContainer}>\n        {icon}\n        <div className={cx({ [classes.textWithIcon]: !!icon })}>\n          {!isString && children}\n          {isString && (\n            <HvTypography variant={activeTheme?.dialog.titleVariant}>\n              {children}\n            </HvTypography>\n          )}\n        </div>\n      </div>\n    </MuiDialogTitle>\n  );\n};\n"],"names":["HvDialogTitle","props","classes","classesProp","className","children","variant","showIcon","customIcon","others","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","isString","fullscreen","icon","iconVariant","MuiDialogTitle","flex","root","messageContainer","_jsxs","textWithIcon","HvTypography","dialog","titleVariant"],"mappings":";;;;;;;;AAqCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAa;AAAA,IACb,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBT,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE7C,QAAA;AAAA,IAAEW;AAAAA,MAAgBC,SAAS;AAE3BC,QAAAA,WAAW,OAAOX,aAAa;AAE/B,QAAA;AAAA,IAAEY;AAAAA,EAAeR,IAAAA;AACvB,SAAQA,OAAeQ;AAEvB,QAAMC,OAAOV,cAAeD,YAAYY,YAAYb,OAAO;AAE3D,6BACGc,gBAAc;AAAA,IACbhB,WAAWQ,GACT,CAACK,cAAcN,IAAI;AAAA,MAAEU,MAAM;AAAA,IAAA,CAAG,GAC9BnB,QAAQoB,MACR;AAAA,MACE,CAACpB,QAAQe,UAAU,GAAGA;AAAAA,OAExBb,SACF;AAAA,IAAE,GACEK;AAAAA,IAAMJ,+BAEV,OAAA;AAAA,MAAKD,WAAWF,QAAQqB;AAAAA,MAAiBlB,UAAA,CACtCa,MACDM,qBAAA,OAAA;AAAA,QAAKpB,WAAWQ,GAAG;AAAA,UAAE,CAACV,QAAQuB,YAAY,GAAG,CAAC,CAACP;AAAAA,QAAAA,CAAM;AAAA,QAAEb,UAAA,CACpD,CAACW,YAAYX,UACbW,gCACEU,cAAY;AAAA,UAACpB,SAASQ,2CAAaa,OAAOC;AAAAA,UAAavB;AAAAA,QAAAA,CAE1C,CACf;AAAA,MAAA,CACE,CAAC;AAAA,IAAA,CACH;AAAA,EAAA,CACS;AAEpB;"}
+{"version":3,"file":"Title.js","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n  DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { iconVariant } from \"@core/utils/iconVariant\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./Title.styles\";\n\nexport { staticClasses as dialogTitleClasses };\n\nexport type HvDialogTitleClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDialogTitleVariant =\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"default\";\n\nexport interface HvDialogTitleProps\n  extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\">,\n    HvBaseProps<HTMLSpanElement, \"color\"> {\n  /** Variant of the dialog title. */\n  variant?: HvDialogTitleVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogTitleClasses;\n}\n\nexport const HvDialogTitle = (props: HvDialogTitleProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    variant = \"default\",\n    showIcon = true,\n    customIcon = null,\n    ...others\n  } = useDefaultProps(\"HvDialogTitle\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const { activeTheme } = useTheme();\n\n  const isString = typeof children === \"string\";\n\n  const { fullscreen } = others as any;\n  delete (others as any).fullscreen;\n\n  const icon = customIcon || (showIcon && iconVariant(variant));\n\n  return (\n    <MuiDialogTitle\n      className={cx(\n        !fullscreen && css({ flex: 1 }),\n        classes.root,\n        {\n          [classes.fullscreen]: fullscreen,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.messageContainer}>\n        {icon}\n        <div className={cx({ [classes.textWithIcon]: !!icon })}>\n          {!isString && children}\n          {isString && (\n            <HvTypography variant={activeTheme?.dialog.titleVariant}>\n              {children}\n            </HvTypography>\n          )}\n        </div>\n      </div>\n    </MuiDialogTitle>\n  );\n};\n"],"names":["HvDialogTitle","props","classes","classesProp","className","children","variant","showIcon","customIcon","others","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","isString","fullscreen","icon","iconVariant","flex","root","messageContainer","textWithIcon","dialog","titleVariant"],"mappings":";;;;;;;;AAqCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAa;AAAA,IACb,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBT,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE7C,QAAA;AAAA,IAAEW;AAAAA,MAAgBC,SAAS;AAE3BC,QAAAA,WAAW,OAAOX,aAAa;AAE/B,QAAA;AAAA,IAAEY;AAAAA,EAAeR,IAAAA;AACvB,SAAQA,OAAeQ;AAEvB,QAAMC,OAAOV,cAAeD,YAAYY,YAAYb,OAAO;AAE3D,6BACG,gBACC,EAAA,WAAWM,GACT,CAACK,cAAcN,IAAI;AAAA,IAAES,MAAM;AAAA,EAAA,CAAG,GAC9BlB,QAAQmB,MACR;AAAA,IACE,CAACnB,QAAQe,UAAU,GAAGA;AAAAA,EACxB,GACAb,SACF,GACA,GAAIK,QAEJ,UAAC,qBAAA,OAAA,EAAI,WAAWP,QAAQoB,kBACrBJ,UAAAA;AAAAA,IAAAA;AAAAA,IACD,qBAAC,OAAI,EAAA,WAAWN,GAAG;AAAA,MAAE,CAACV,QAAQqB,YAAY,GAAG,CAAC,CAACL;AAAAA,IAAM,CAAA,GAClD,UAAA;AAAA,MAAA,CAACF,YAAYX;AAAAA,MACbW,YACE,oBAAA,cAAA,EAAa,SAASF,2CAAaU,OAAOC,cACxCpB,UACH;AAAA,IAAA,GAEJ;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}

package/dist/esm/components/DotPagination/DotPagination.js

@@ -1,23 +1,17 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { OtherStep, CurrentStep } from "@hitachivantara/uikit-react-icons";
 import { cloneElement } from "react";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { useClasses } from "./DotPagination.styles.js";
 import { staticClasses } from "./DotPagination.styles.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { HvRadioGroup } from "../RadioGroup/RadioGroup.js";
 import { HvRadio } from "../Radio/Radio.js";
 const getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
   return {
-    radio: cloneElement(radioIcon || /* @__PURE__ */ jsx(OtherStep, {
-      width: 8,
-      height: 8
-    }), {
+    radio: cloneElement(radioIcon || /* @__PURE__ */ jsx(OtherStep, { width: 8, height: 8 }), {
       className: classes == null ? void 0 : classes.icon
     }),
-    radioChecked: cloneElement(radioCheckedIcon || /* @__PURE__ */ jsx(CurrentStep, {
-      width: 8,
-      height: 8
-    }), {
+    radioChecked: cloneElement(radioCheckedIcon || /* @__PURE__ */ jsx(CurrentStep, { width: 8, height: 8 }), {
       className: classes == null ? void 0 : classes.icon
     })
   };
@@ -40,26 +34,12 @@ const HvDotPagination = (props) => {
     cx
   } = useClasses(classesProp);
   const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);
-  return /* @__PURE__ */ jsx(HvRadioGroup, {
-    className: cx(classes.root, className),
-    classes: {
-      horizontal: classes.horizontal
-    },
-    orientation: "horizontal",
-    ...others,
-    children: range(pages).map((i) => /* @__PURE__ */ jsx(HvRadio, {
-      classes: {
-        radio: classes.radio,
-        root: classes.radioRoot
-      },
-      value: i,
-      checked: page === i,
-      onChange: (event) => onPageChange == null ? void 0 : onPageChange(event, i),
-      icon: icons.radio,
-      checkedIcon: icons.radioChecked,
-      "aria-label": getItemAriaLabel == null ? void 0 : getItemAriaLabel(i)
-    }, i))
-  });
+  return /* @__PURE__ */ jsx(HvRadioGroup, { className: cx(classes.root, className), classes: {
+    horizontal: classes.horizontal
+  }, orientation: "horizontal", ...others, children: range(pages).map((i) => /* @__PURE__ */ jsx(HvRadio, { classes: {
+    radio: classes.radio,
+    root: classes.radioRoot
+  }, value: i, checked: page === i, onChange: (event) => onPageChange == null ? void 0 : onPageChange(event, i), icon: icons.radio, checkedIcon: icons.radioChecked, "aria-label": getItemAriaLabel == null ? void 0 : getItemAriaLabel(i) }, i)) });
 };
 export {
   HvDotPagination,

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

@@ -1 +1 @@
-{"version":3,"file":"DotPagination.js","sources":["../../../../src/components/DotPagination/DotPagination.tsx"],"sourcesContent":["import { CurrentStep, OtherStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { cloneElement } from \"react\";\n\nimport { HvRadio } from \"@core/components/Radio\";\nimport { HvRadioGroup, HvRadioGroupProps } from \"@core/components/RadioGroup\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { staticClasses, useClasses } from \"./DotPagination.styles\";\n\nexport { staticClasses as dotPaginationClasses };\n\nexport type HvDotPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotPaginationProps\n  extends Omit<HvRadioGroupProps, \"classes\"> {\n  /**\n   * Icon to override the default one used for the unselected state.\n   *\n   * The default icon is `OtherStep`.\n   */\n  unselectedIcon?: React.ReactElement;\n  /**\n   * Icon to override the default one used for the selected state.\n   *\n   * The default icon is `CurrentStep`.\n   */\n  selectedIcon?: React.ReactElement;\n  /**\n   *  The number of pages the component has.\n   */\n  pages?: number;\n  /**\n   * The currently selected page.\n   */\n  page?: number;\n  /**\n   * The callback fired when the page value changes.\n   */\n  onPageChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    page: number\n  ) => void;\n  /**\n   * The callback fired to get the page aria label.\n   */\n  getItemAriaLabel?: (page: number) => string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDotPaginationClasses;\n}\n\nconst getSelectorIcons = (\n  radioIcon?: React.ReactElement,\n  radioCheckedIcon?: React.ReactElement,\n  classes?: HvDotPaginationClasses\n) => {\n  return {\n    radio: cloneElement(radioIcon || <OtherStep width={8} height={8} />, {\n      className: classes?.icon,\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <CurrentStep width={8} height={8} />,\n      {\n        className: classes?.icon,\n      }\n    ),\n  };\n};\n\nconst range = (n: number) => Array.from(Array(n), (_, i) => i);\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = (props: HvDotPaginationProps) => {\n  const {\n    className,\n    classes: classesProp,\n    unselectedIcon,\n    selectedIcon,\n    pages = 1,\n    page = 0,\n    onPageChange,\n    getItemAriaLabel,\n    ...others\n  } = useDefaultProps(\"HvDotPagination\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <HvRadioGroup\n      className={cx(classes.root, className)}\n      classes={{\n        horizontal: classes.horizontal,\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <HvRadio\n          classes={{\n            radio: classes.radio,\n            root: classes.radioRoot,\n          }}\n          key={i}\n          value={i}\n          checked={page === i}\n          onChange={(event) => onPageChange?.(event, i)}\n          icon={icons.radio}\n          checkedIcon={icons.radioChecked}\n          aria-label={getItemAriaLabel?.(i)}\n        />\n      ))}\n    </HvRadioGroup>\n  );\n};\n"],"names":["getSelectorIcons","radioIcon","radioCheckedIcon","classes","radio","cloneElement","_jsx","OtherStep","width","height","className","icon","radioChecked","CurrentStep","range","n","Array","from","_","i","HvDotPagination","props","classesProp","unselectedIcon","selectedIcon","pages","page","onPageChange","getItemAriaLabel","others","useDefaultProps","cx","useClasses","icons","HvRadioGroup","root","horizontal","orientation","children","map","HvRadio","radioRoot","value","checked","onChange","event","checkedIcon"],"mappings":";;;;;;;;AAsDA,MAAMA,mBAAmBA,CACvBC,WACAC,kBACAC,YACG;AACI,SAAA;AAAA,IACLC,OAAOC,aAAaJ,aAAaK,oBAACC,WAAS;AAAA,MAACC,OAAO;AAAA,MAAGC,QAAQ;AAAA,IAAA,CAAI,GAAG;AAAA,MACnEC,WAAWP,mCAASQ;AAAAA,IAAAA,CACrB;AAAA,IACDC,cAAcP,aACZH,oBAAoBI,oBAACO,aAAW;AAAA,MAACL,OAAO;AAAA,MAAGC,QAAQ;AAAA,IAAA,CAAI,GACvD;AAAA,MACEC,WAAWP,mCAASQ;AAAAA,IAAAA,CAExB;AAAA,EAAA;AAEJ;AAEA,MAAMG,QAAQA,CAACC,MAAcC,MAAMC,KAAKD,MAAMD,CAAC,GAAG,CAACG,GAAGC,MAAMA,CAAC;AAMhDC,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJX;AAAAA,IACAP,SAASmB;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmBT,KAAK;AAEtC,QAAA;AAAA,IAAElB;AAAAA,IAAS4B;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE9C,QAAMW,QAAQjC,iBAAiBuB,gBAAgBC,cAAcrB,OAAO;AAEpE,6BACG+B,cAAY;AAAA,IACXxB,WAAWqB,GAAG5B,QAAQgC,MAAMzB,SAAS;AAAA,IACrCP,SAAS;AAAA,MACPiC,YAAYjC,QAAQiC;AAAAA,IACtB;AAAA,IACAC,aAAY;AAAA,IAAY,GACpBR;AAAAA,IAAMS,UAETxB,MAAMW,KAAK,EAAEc,IAAKpB,CAAAA,0BAChBqB,SAAO;AAAA,MACNrC,SAAS;AAAA,QACPC,OAAOD,QAAQC;AAAAA,QACf+B,MAAMhC,QAAQsC;AAAAA,MAChB;AAAA,MAEAC,OAAOvB;AAAAA,MACPwB,SAASjB,SAASP;AAAAA,MAClByB,UAAWC,CAAAA,UAAUlB,6CAAekB,OAAO1B;AAAAA,MAC3CR,MAAMsB,MAAM7B;AAAAA,MACZ0C,aAAab,MAAMrB;AAAAA,MACnB,cAAYgB,qDAAmBT;AAAAA,IAAG,GAN7BA,CAON,CACF;AAAA,EAAA,CACW;AAElB;"}
+{"version":3,"file":"DotPagination.js","sources":["../../../../src/components/DotPagination/DotPagination.tsx"],"sourcesContent":["import { CurrentStep, OtherStep } from \"@hitachivantara/uikit-react-icons\";\n\nimport { cloneElement } from \"react\";\n\nimport { HvRadio } from \"@core/components/Radio\";\nimport { HvRadioGroup, HvRadioGroupProps } from \"@core/components/RadioGroup\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { staticClasses, useClasses } from \"./DotPagination.styles\";\n\nexport { staticClasses as dotPaginationClasses };\n\nexport type HvDotPaginationClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDotPaginationProps\n  extends Omit<HvRadioGroupProps, \"classes\"> {\n  /**\n   * Icon to override the default one used for the unselected state.\n   *\n   * The default icon is `OtherStep`.\n   */\n  unselectedIcon?: React.ReactElement;\n  /**\n   * Icon to override the default one used for the selected state.\n   *\n   * The default icon is `CurrentStep`.\n   */\n  selectedIcon?: React.ReactElement;\n  /**\n   *  The number of pages the component has.\n   */\n  pages?: number;\n  /**\n   * The currently selected page.\n   */\n  page?: number;\n  /**\n   * The callback fired when the page value changes.\n   */\n  onPageChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    page: number\n  ) => void;\n  /**\n   * The callback fired to get the page aria label.\n   */\n  getItemAriaLabel?: (page: number) => string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDotPaginationClasses;\n}\n\nconst getSelectorIcons = (\n  radioIcon?: React.ReactElement,\n  radioCheckedIcon?: React.ReactElement,\n  classes?: HvDotPaginationClasses\n) => {\n  return {\n    radio: cloneElement(radioIcon || <OtherStep width={8} height={8} />, {\n      className: classes?.icon,\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <CurrentStep width={8} height={8} />,\n      {\n        className: classes?.icon,\n      }\n    ),\n  };\n};\n\nconst range = (n: number) => Array.from(Array(n), (_, i) => i);\n\n/**\n * Pagination is the process of dividing a document into discrete pages. It relates to how users interact with structured content on a website or application.\n * This component uses Radio Buttons to represent each page.\n */\nexport const HvDotPagination = (props: HvDotPaginationProps) => {\n  const {\n    className,\n    classes: classesProp,\n    unselectedIcon,\n    selectedIcon,\n    pages = 1,\n    page = 0,\n    onPageChange,\n    getItemAriaLabel,\n    ...others\n  } = useDefaultProps(\"HvDotPagination\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <HvRadioGroup\n      className={cx(classes.root, className)}\n      classes={{\n        horizontal: classes.horizontal,\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <HvRadio\n          classes={{\n            radio: classes.radio,\n            root: classes.radioRoot,\n          }}\n          key={i}\n          value={i}\n          checked={page === i}\n          onChange={(event) => onPageChange?.(event, i)}\n          icon={icons.radio}\n          checkedIcon={icons.radioChecked}\n          aria-label={getItemAriaLabel?.(i)}\n        />\n      ))}\n    </HvRadioGroup>\n  );\n};\n"],"names":["getSelectorIcons","radioIcon","radioCheckedIcon","classes","radio","cloneElement","className","icon","radioChecked","range","n","Array","from","_","i","HvDotPagination","props","classesProp","unselectedIcon","selectedIcon","pages","page","onPageChange","getItemAriaLabel","others","useDefaultProps","cx","useClasses","icons","root","horizontal","map","radioRoot","event"],"mappings":";;;;;;;;AAsDA,MAAMA,mBAAmBA,CACvBC,WACAC,kBACAC,YACG;AACI,SAAA;AAAA,IACLC,OAAOC,aAAaJ,aAAa,oBAAC,aAAU,OAAO,GAAG,QAAQ,EAAA,IAAO;AAAA,MACnEK,WAAWH,mCAASI;AAAAA,IAAAA,CACrB;AAAA,IACDC,cAAcH,aACZH,oBAAoB,oBAAC,eAAY,OAAO,GAAG,QAAQ,EAAA,IACnD;AAAA,MACEI,WAAWH,mCAASI;AAAAA,IAAAA,CAExB;AAAA,EAAA;AAEJ;AAEA,MAAME,QAAQA,CAACC,MAAcC,MAAMC,KAAKD,MAAMD,CAAC,GAAG,CAACG,GAAGC,MAAMA,CAAC;AAMhDC,MAAAA,kBAAkBA,CAACC,UAAgC;AACxD,QAAA;AAAA,IACJV;AAAAA,IACAH,SAASc;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmBT,KAAK;AAEtC,QAAA;AAAA,IAAEb;AAAAA,IAASuB;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE9C,QAAMW,QAAQ5B,iBAAiBkB,gBAAgBC,cAAchB,OAAO;AAGlE,SAAA,oBAAC,gBACC,WAAWuB,GAAGvB,QAAQ0B,MAAMvB,SAAS,GACrC,SAAS;AAAA,IACPwB,YAAY3B,QAAQ2B;AAAAA,EAEtB,GAAA,aAAY,cACZ,GAAIN,QAEHf,UAAAA,MAAMW,KAAK,EAAEW,IAAKjB,CAAAA,MAChB,oBAAA,SAAA,EACC,SAAS;AAAA,IACPV,OAAOD,QAAQC;AAAAA,IACfyB,MAAM1B,QAAQ6B;AAAAA,EAChB,GAEA,OAAOlB,GACP,SAASO,SAASP,GAClB,UAAWmB,CAAAA,UAAUX,6CAAeW,OAAOnB,IAC3C,MAAMc,MAAMxB,OACZ,aAAawB,MAAMpB,cACnB,cAAYe,qDAAmBT,GAAC,GAN3BA,CAM6B,CAErC,EACH,CAAA;AAEJ;"}

package/dist/esm/components/Drawer/Drawer.js

@@ -1,3 +1,4 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useState, useEffect } from "react";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { Drawer } from "@mui/material";
@@ -11,7 +12,6 @@ import { getVarValue } from "../../utils/theme.js";
 import { useTheme } from "../../hooks/useTheme.js";
 import { useClasses } from "./Drawer.styles.js";
 import { staticClasses } from "./Drawer.styles.js";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { HvButton } from "../Button/Button.js";
 const getBackgroundColor = (color) => {
   return checkValidHexColorValue(color) ? hexToRgbA(color, 0.8) : color;
@@ -39,43 +39,27 @@ const HvDrawer = (props) => {
     rootId
   } = useTheme();
   const [backgroundColorValue, setBackgroundColorValue] = useState(getVarValue(theme.drawer.backDropBackgroundColor, rootId) || "");
-  const closeButtonDisplay = () => /* @__PURE__ */ jsx(Close, {
-    role: "presentation"
-  });
+  const closeButtonDisplay = () => /* @__PURE__ */ jsx(Close, { role: "none" });
   const CloseButtonTooltipWrapper = buttonTitle ? withTooltip(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
   const [backgroundColor, setBackgroundColor] = useState(getBackgroundColor(backgroundColorValue));
   useEffect(() => {
     setBackgroundColorValue(getVarValue(theme.drawer.backDropBackgroundColor, rootId) || (activeTheme == null ? void 0 : activeTheme.drawer.backDropBackgroundColor) || "");
     setBackgroundColor(getBackgroundColor(backgroundColorValue));
   }, [colors, backgroundColorValue, setBackgroundColor, rootId, activeTheme == null ? void 0 : activeTheme.drawer.backDropBackgroundColor]);
-  return /* @__PURE__ */ jsxs(Drawer, {
-    className: cx(classes.root, className),
-    id,
-    anchor,
-    open,
-    PaperProps: {
-      classes: {
-        root: classes.paper
-      }
-    },
-    BackdropProps: {
-      classes: {
-        root: cx(css({
-          backgroundColor
-        }), classes.background)
-      }
-    },
-    onClose,
-    ...others,
-    children: [/* @__PURE__ */ jsx(HvButton, {
-      id: setId(id, "close"),
-      className: classes.closeButton,
-      variant: "secondaryGhost",
-      onClick: onClose,
-      "aria-label": buttonTitle,
-      children: /* @__PURE__ */ jsx(CloseButtonTooltipWrapper, {})
-    }), children]
-  });
+  return /* @__PURE__ */ jsxs(Drawer, { className: cx(classes.root, className), id, anchor, open, PaperProps: {
+    classes: {
+      root: classes.paper
+    }
+  }, BackdropProps: {
+    classes: {
+      root: cx(css({
+        backgroundColor
+      }), classes.background)
+    }
+  }, onClose, ...others, children: [
+    /* @__PURE__ */ jsx(HvButton, { id: setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: onClose, "aria-label": buttonTitle, children: /* @__PURE__ */ jsx(CloseButtonTooltipWrapper, {}) }),
+    children
+  ] });
 };
 export {
   HvDrawer,

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { setId } from \"@core/utils/setId\";\nimport { checkValidHexColorValue } from \"@core/utils/checkValidHexColorValue\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getVarValue } from \"@core/utils/theme\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n  extends MuiDrawerProps,\n    Omit<MuiDrawerProps, \"classes\">,\n    HvBaseProps<HTMLDivElement> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n}\n\nconst getBackgroundColor = (color: string) => {\n  return checkValidHexColorValue(color) ? hexToRgbA(color, 0.8) : color;\n};\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { colors, activeTheme, rootId } = useTheme();\n\n  const [backgroundColorValue, setBackgroundColorValue] = useState<string>(\n    getVarValue(theme.drawer.backDropBackgroundColor, rootId) || \"\"\n  );\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  const [backgroundColor, setBackgroundColor] = useState(\n    getBackgroundColor(backgroundColorValue)\n  );\n\n  useEffect(() => {\n    setBackgroundColorValue(\n      getVarValue(theme.drawer.backDropBackgroundColor, rootId) ||\n        activeTheme?.drawer.backDropBackgroundColor ||\n        \"\"\n    );\n\n    setBackgroundColor(getBackgroundColor(backgroundColorValue));\n  }, [\n    colors,\n    backgroundColorValue,\n    setBackgroundColor,\n    rootId,\n    activeTheme?.drawer.backDropBackgroundColor,\n  ]);\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      BackdropProps={{\n        classes: {\n          root: cx(css({ backgroundColor }), classes.background),\n        },\n      }}\n      onClose={onClose}\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["getBackgroundColor","color","checkValidHexColorValue","hexToRgbA","HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","others","useDefaultProps","css","cx","useClasses","colors","activeTheme","rootId","useTheme","backgroundColorValue","setBackgroundColorValue","useState","getVarValue","theme","drawer","backDropBackgroundColor","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","backgroundColor","setBackgroundColor","useEffect","MuiDrawer","root","PaperProps","paper","BackdropProps","background","HvButton","setId","closeButton","variant","onClick"],"mappings":";;;;;;;;;;;;;;;AAsEA,MAAMA,qBAAqBA,CAACC,UAAkB;AAC5C,SAAOC,wBAAwBD,KAAK,IAAIE,UAAUF,OAAO,GAAG,IAAIA;AAClE;AAOaG,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACd,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYX,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AAC7C,QAAA;AAAA,IAAEY;AAAAA,IAAQC;AAAAA,IAAaC;AAAAA,MAAWC,SAAS;AAE3C,QAAA,CAACC,sBAAsBC,uBAAuB,IAAIC,SACtDC,YAAYC,MAAMC,OAAOC,yBAAyBR,MAAM,KAAK,EAC/D;AAEMS,QAAAA,qBAAqBA,MAAMC,oBAACC,OAAK;AAAA,IAACC,MAAK;AAAA,EAAA,CAAgB;AAE7D,QAAMC,4BAA4BrB,cAC9BsB,YAAYL,oBAAoBjB,aAAa,KAAK,IAClDiB;AAEJ,QAAM,CAACM,iBAAiBC,kBAAkB,IAAIZ,SAC5C1B,mBAAmBwB,oBAAoB,CACzC;AAEAe,YAAU,MAAM;AAEZZ,4BAAAA,YAAYC,MAAMC,OAAOC,yBAAyBR,MAAM,MACtDD,2CAAaQ,OAAOC,4BACpB,EACJ;AAEmB9B,uBAAAA,mBAAmBwB,oBAAoB,CAAC;AAAA,EAAA,GAC1D,CACDJ,QACAI,sBACAc,oBACAhB,QACAD,2CAAaQ,OAAOC,uBAAuB,CAC5C;AAED,8BACGU,QAAS;AAAA,IACRlC,WAAWY,GAAGX,QAAQkC,MAAMnC,SAAS;AAAA,IACrCG;AAAAA,IACAI;AAAAA,IACAF;AAAAA,IACA+B,YAAY;AAAA,MACVnC,SAAS;AAAA,QACPkC,MAAMlC,QAAQoC;AAAAA,MAChB;AAAA,IACF;AAAA,IACAC,eAAe;AAAA,MACbrC,SAAS;AAAA,QACPkC,MAAMvB,GAAGD,IAAI;AAAA,UAAEoB;AAAAA,QAAAA,CAAiB,GAAG9B,QAAQsC,UAAU;AAAA,MACvD;AAAA,IACF;AAAA,IACAjC;AAAAA,IAAiB,GACbG;AAAAA,IAAML,UAAA,CAEVsB,oBAACc,UAAQ;AAAA,MACPrC,IAAIsC,MAAMtC,IAAI,OAAO;AAAA,MACrBH,WAAWC,QAAQyC;AAAAA,MACnBC,SAAQ;AAAA,MACRC,SAAStC;AAAAA,MACT,cAAYE;AAAAA,MAAYJ,UAExBsB,oBAACG,2BAA2B,EAAA;AAAA,IACpB,CAAA,GACTzB,QAAQ;AAAA,EAAA,CACA;AAEf;"}
+{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { setId } from \"@core/utils/setId\";\nimport { checkValidHexColorValue } from \"@core/utils/checkValidHexColorValue\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getVarValue } from \"@core/utils/theme\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n  extends MuiDrawerProps,\n    Omit<MuiDrawerProps, \"classes\">,\n    HvBaseProps<HTMLDivElement> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\nconst getBackgroundColor = (color: string) => {\n  return checkValidHexColorValue(color) ? hexToRgbA(color, 0.8) : color;\n};\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { colors, activeTheme, rootId } = useTheme();\n\n  const [backgroundColorValue, setBackgroundColorValue] = useState<string>(\n    getVarValue(theme.drawer.backDropBackgroundColor, rootId) || \"\"\n  );\n\n  const closeButtonDisplay = () => <Close role=\"none\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  const [backgroundColor, setBackgroundColor] = useState(\n    getBackgroundColor(backgroundColorValue)\n  );\n\n  useEffect(() => {\n    setBackgroundColorValue(\n      getVarValue(theme.drawer.backDropBackgroundColor, rootId) ||\n        activeTheme?.drawer.backDropBackgroundColor ||\n        \"\"\n    );\n\n    setBackgroundColor(getBackgroundColor(backgroundColorValue));\n  }, [\n    colors,\n    backgroundColorValue,\n    setBackgroundColor,\n    rootId,\n    activeTheme?.drawer.backDropBackgroundColor,\n  ]);\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      BackdropProps={{\n        classes: {\n          root: cx(css({ backgroundColor }), classes.background),\n        },\n      }}\n      onClose={onClose}\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["getBackgroundColor","color","checkValidHexColorValue","hexToRgbA","HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","others","useDefaultProps","css","cx","useClasses","colors","activeTheme","rootId","useTheme","backgroundColorValue","setBackgroundColorValue","useState","getVarValue","theme","drawer","backDropBackgroundColor","closeButtonDisplay","CloseButtonTooltipWrapper","withTooltip","backgroundColor","setBackgroundColor","useEffect","MuiDrawer","root","paper","background","setId","closeButton"],"mappings":";;;;;;;;;;;;;;;AA0EA,MAAMA,qBAAqBA,CAACC,UAAkB;AAC5C,SAAOC,wBAAwBD,KAAK,IAAIE,UAAUF,OAAO,GAAG,IAAIA;AAClE;AAOaG,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACd,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYX,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AAC7C,QAAA;AAAA,IAAEY;AAAAA,IAAQC;AAAAA,IAAaC;AAAAA,MAAWC,SAAS;AAE3C,QAAA,CAACC,sBAAsBC,uBAAuB,IAAIC,SACtDC,YAAYC,MAAMC,OAAOC,yBAAyBR,MAAM,KAAK,EAC/D;AAEA,QAAMS,qBAAqBA,MAAO,oBAAA,OAAA,EAAM,MAAK,OAAS,CAAA;AAEtD,QAAMC,4BAA4BlB,cAC9BmB,YAAYF,oBAAoBjB,aAAa,KAAK,IAClDiB;AAEJ,QAAM,CAACG,iBAAiBC,kBAAkB,IAAIT,SAC5C1B,mBAAmBwB,oBAAoB,CACzC;AAEAY,YAAU,MAAM;AAEZT,4BAAAA,YAAYC,MAAMC,OAAOC,yBAAyBR,MAAM,MACtDD,2CAAaQ,OAAOC,4BACpB,EACJ;AAEmB9B,uBAAAA,mBAAmBwB,oBAAoB,CAAC;AAAA,EAAA,GAC1D,CACDJ,QACAI,sBACAW,oBACAb,QACAD,2CAAaQ,OAAOC,uBAAuB,CAC5C;AAGC,SAAA,qBAACO,QACC,EAAA,WAAWnB,GAAGX,QAAQ+B,MAAMhC,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,IACVC,SAAS;AAAA,MACP+B,MAAM/B,QAAQgC;AAAAA,IAChB;AAAA,KAEF,eAAe;AAAA,IACbhC,SAAS;AAAA,MACP+B,MAAMpB,GAAGD,IAAI;AAAA,QAAEiB;AAAAA,MAAAA,CAAiB,GAAG3B,QAAQiC,UAAU;AAAA,IACvD;AAAA,EAAA,GAEF,SACIzB,GAAAA,QAEJ,UAAA;AAAA,IAAA,oBAAC,YACC,IAAI0B,MAAMhC,IAAI,OAAO,GACrB,WAAWF,QAAQmC,aACnB,SAAQ,kBACR,SAAS9B,SACT,cAAYE,aAEZ,UAAA,oBAAC,4BAAyB,CAAA,GAC5B;AAAA,IACCJ;AAAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/DropDownMenu/DropDownMenu.js

@@ -1,3 +1,4 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import { useMemo } from "react";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { theme } from "@hitachivantara/uikit-styles";
@@ -9,7 +10,6 @@ import { setId } from "../../utils/setId.js";
 import { getPrevNextFocus } from "../../utils/focusableElementFinder.js";
 import { useClasses } from "./DropDownMenu.styles.js";
 import { staticClasses } from "./DropDownMenu.styles.js";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
 import { HvButton } from "../Button/Button.js";
 import { HvPanel } from "../Panel/Panel.js";
@@ -65,60 +65,21 @@ const HvDropDownMenu = (props) => {
       position: "relative"
     }
   };
-  return /* @__PURE__ */ jsx(HvBaseDropdown, {
-    id,
-    className: cx(classes.container, className),
-    classes: {
-      root: classes.root,
-      container: classes.baseContainer
-    },
-    expanded: open && !disabled,
-    component: /* @__PURE__ */ jsx(HvButton, {
-      icon: true,
-      variant: category,
-      id: setId(id, "icon-button"),
-      className: cx(classes.icon, {
-        [classes.iconSelected]: open
-      }),
-      "aria-expanded": open,
-      disabled,
-      "aria-label": "Dropdown menu",
-      "aria-haspopup": "menu",
-      children: icon || /* @__PURE__ */ jsx(MoreOptionsVertical, {
-        "aria-hidden": true,
-        color: disabled ? "secondary_60" : void 0
-      })
-    }),
-    placement,
-    variableWidth: true,
-    disablePortal,
-    onToggle: (e, s) => {
-      setOpen(s);
-      onToggle == null ? void 0 : onToggle(e, s);
-    },
-    disabled,
-    onContainerCreation: setFocusToContent,
-    popperProps: popperStyle,
-    ...others,
-    children: /* @__PURE__ */ jsx(HvPanel, {
-      className: classes.menuListRoot,
-      children: /* @__PURE__ */ jsx(HvList, {
-        id: listId,
-        values: dataList,
-        selectable: false,
-        condensed,
-        onClick: (event, item) => {
-          if (!keepOpened)
-            handleClose(event);
-          onClick == null ? void 0 : onClick(event, item);
-        },
-        onKeyDown: handleKeyDown,
-        classes: {
-          root: classes.menuList
-        }
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx(HvBaseDropdown, { id, className: cx(classes.container, className), classes: {
+    root: classes.root,
+    container: classes.baseContainer
+  }, expanded: open && !disabled, component: /* @__PURE__ */ jsx(HvButton, { icon: true, variant: category, id: setId(id, "icon-button"), className: cx(classes.icon, {
+    [classes.iconSelected]: open
+  }), "aria-expanded": open, disabled, "aria-label": "Dropdown menu", "aria-haspopup": "menu", children: icon || /* @__PURE__ */ jsx(MoreOptionsVertical, { "aria-hidden": true, color: disabled ? "secondary_60" : void 0 }) }), placement, variableWidth: true, disablePortal, onToggle: (e, s) => {
+    setOpen(s);
+    onToggle == null ? void 0 : onToggle(e, s);
+  }, disabled, onContainerCreation: setFocusToContent, popperProps: popperStyle, ...others, children: /* @__PURE__ */ jsx(HvPanel, { className: classes.menuListRoot, children: /* @__PURE__ */ jsx(HvList, { id: listId, values: dataList, selectable: false, condensed, onClick: (event, item) => {
+    if (!keepOpened)
+      handleClose(event);
+    onClick == null ? void 0 : onClick(event, item);
+  }, onKeyDown: handleKeyDown, classes: {
+    root: classes.menuList
+  } }) }) });
 };
 export {
   HvDropDownMenu,

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

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** The variant to be used in the header. */\n  category?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\",\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n    style: {\n      zIndex: theme.zIndices.tooltip,\n      width: \"auto\",\n      position: \"relative\",\n    },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={category}\n          id={setId(id, \"icon-button\")}\n          className={cx(classes.icon, { [classes.iconSelected]: open })}\n          aria-expanded={open}\n          disabled={disabled}\n          aria-label=\"Dropdown menu\"\n          aria-haspopup=\"menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              aria-hidden\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["HvDropDownMenu","props","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","useDefaultProps","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKey","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","HvBaseDropdown","container","root","baseContainer","component","HvButton","variant","iconSelected","children","_jsx","MoreOptionsVertical","color","undefined","variableWidth","e","s","onContainerCreation","popperProps","HvPanel","menuListRoot","HvList","values","selectable","item","onKeyDown","menuList"],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { ChangeEvent, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { isKey } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getPrevNextFocus } from \"@core/utils/focusableElementFinder\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvButton, HvButtonVariant } from \"@core/components/Button\";\nimport { HvList, HvListProps, HvListValue } from \"@core/components/List\";\nimport { HvPanel } from \"@core/components/Panel\";\n\nimport { staticClasses, useClasses } from \"./DropDownMenu.styles\";\n\nexport { staticClasses as dropDownMenuClasses };\n\nexport type HvDropDownMenuClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropDownMenuProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** Icon. */\n  icon?: React.ReactElement;\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - icon: The icon node to be rendered on the left.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   */\n  dataList: HvListValue[];\n  /** Placement of the dropdown. */\n  placement?: \"left\" | \"right\";\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Function executed on toggle of the dropdown. Should receive the open status. */\n  onToggle?: (event: Event, open: boolean) => void;\n  /** Function executed in each onClick. Should received the clicked element. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** Keep the Dropdown Menu opened after clicking one option */\n  keepOpened?: boolean;\n  /** Defines if the component is disabled. */\n  disabled?: boolean;\n  /** If true it should be displayed open. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** The variant to be used in the header. */\n  category?: HvButtonVariant;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDropDownMenuClasses;\n}\n\n/**\n * A drop-down menu is a graphical control element, similar to a list box, that allows the user to choose a value from a list.\n */\nexport const HvDropDownMenu = (props: HvDropDownMenuProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    className,\n    icon,\n    placement = \"right\",\n    dataList,\n    disablePortal = false,\n    onToggle,\n    onClick,\n    keepOpened = true,\n    disabled = false,\n    expanded,\n    defaultExpanded = false,\n    category = \"secondaryGhost\",\n    ...others\n  } = useDefaultProps(\"HvDropDownMenu\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const id = useUniqueId(idProp, \"dropdown-menu\");\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event: ChangeEvent) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event as any, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown: HvListProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Tab\")) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event as any);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle: HvBaseDropdownProps[\"popperProps\"] = {\n    style: {\n      zIndex: theme.zIndices.tooltip,\n      width: \"auto\",\n      position: \"relative\",\n    },\n  };\n\n  return (\n    <HvBaseDropdown\n      id={id}\n      className={cx(classes.container, className)}\n      classes={{\n        root: classes.root,\n        container: classes.baseContainer,\n      }}\n      expanded={open && !disabled}\n      component={\n        <HvButton\n          icon\n          variant={category}\n          id={setId(id, \"icon-button\")}\n          className={cx(classes.icon, { [classes.iconSelected]: open })}\n          aria-expanded={open}\n          disabled={disabled}\n          aria-label=\"Dropdown menu\"\n          aria-haspopup=\"menu\"\n        >\n          {icon || (\n            <MoreOptionsVertical\n              aria-hidden\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\n      placement={placement}\n      variableWidth\n      disablePortal={disablePortal}\n      onToggle={(e, s) => {\n        // this will only run if uncontrolled\n        setOpen(s);\n        onToggle?.(e, s);\n      }}\n      disabled={disabled}\n      onContainerCreation={setFocusToContent}\n      popperProps={popperStyle}\n      {...others}\n    >\n      <HvPanel className={classes.menuListRoot}>\n        <HvList\n          id={listId}\n          values={dataList}\n          selectable={false}\n          condensed={condensed}\n          onClick={(event, item) => {\n            if (!keepOpened) handleClose(event);\n            onClick?.(event, item);\n          }}\n          onKeyDown={handleKeyDown}\n          classes={{\n            root: classes.menuList,\n          }}\n        />\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n"],"names":["HvDropDownMenu","props","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","useDefaultProps","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKey","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","container","root","baseContainer","iconSelected","undefined","e","s","menuListRoot","item","menuList"],"mappings":"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"}