@hitachivantara/uikit-react-core 5.27.6 → 5.27.7

package/dist/cjs/components/Dialog/Dialog.cjs

@@ -1,5 +1,6 @@
 "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 MuiDialog = require("@mui/material/Dialog");
@@ -11,7 +12,6 @@ const withTooltip = require("../../hocs/withTooltip.cjs");
 const useTheme = require("../../hooks/useTheme.cjs");
 const hexToRgbA = require("../../utils/hexToRgbA.cjs");
 const Dialog_styles = require("./Dialog.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Button = require("../Button/Button.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
@@ -53,66 +53,41 @@ const HvDialog = (props) => {
     const element = document.getElementById(firstFocusable);
     element == null ? void 0 : element.focus();
   }, [firstFocusable]);
-  const closeButtonDisplay = () => /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {
-    role: "presentation"
-  });
+  const closeButtonDisplay = () => /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { role: "presentation" });
   const CloseButtonTooltipWrapper = buttonTitle ? withTooltip.withTooltip(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
   const slots = React.useMemo(() => ({
-    backdrop: (backdropProps) => /* @__PURE__ */ jsxRuntime.jsx(MuiBackdrop__default.default, {
-      open,
-      onClick: wrappedClose,
-      ...backdropProps
-    })
+    backdrop: (backdropProps) => /* @__PURE__ */ jsxRuntime.jsx(MuiBackdrop__default.default, { open, onClick: wrappedClose, ...backdropProps })
   }), [open, wrappedClose]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(MuiDialog__default.default, {
-    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.hexToRgbA((colors == null ? void 0 : colors.atmo4) || uikitStyles.theme.colors.atmo4, 0.8)
-          }), classes.background)
-        }
-      }
-    },
-    PaperProps: {
+  return /* @__PURE__ */ jsxRuntime.jsxs(MuiDialog__default.default, { 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.hexToRgbA((colors == null ? void 0 : colors.atmo4) || uikitStyles.theme.colors.atmo4, 0.8)
+        }), classes.background)
       }
-    },
-    "aria-modal": true,
-    ...others,
-    children: [/* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-      id: setId.setId(id, "close"),
-      className: classes.closeButton,
-      variant: "secondaryGhost",
-      onClick: (event) => wrappedClose(event, true, void 0),
-      "aria-label": buttonTitle,
-      children: /* @__PURE__ */ jsxRuntime.jsx(CloseButtonTooltipWrapper, {})
-    }), children && typeof children === "object" ? React__default.default.Children.map(children, (c) => c && React__default.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__ */ jsxRuntime.jsx(Button.HvButton, { id: setId.setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: (event) => wrappedClose(event, true, void 0), "aria-label": buttonTitle, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButtonTooltipWrapper, {}) }),
+    children && typeof children === "object" ? React__default.default.Children.map(children, (c) => c && React__default.default.cloneElement(c, {
       fullscreen
-    })) : children]
-  });
+    })) : children
+  ] });
 };
 exports.dialogClasses = Dialog_styles.staticClasses;
 exports.HvDialog = HvDialog;

package/dist/cjs/components/Dialog/Dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs","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","_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":"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"}
+{"version":3,"file":"Dialog.cjs","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","jsx","Close","CloseButtonTooltipWrapper","withTooltip","slots","useMemo","backdrop","backdropProps","MuiBackdrop","jsxs","MuiDialog","window","body","undefined","root","container","position","background","hexToRgbA","atmo4","theme","paper","statusBar","HvButton","setId","closeButton","React","Children","map","c","cloneElement"],"mappings":"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"}

package/dist/cjs/components/Dialog/Title/Title.cjs

@@ -1,11 +1,11 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const MuiDialogTitle = require("@mui/material/DialogTitle");
 const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
 const iconVariant = require("../../../utils/iconVariant.cjs");
 const useTheme = require("../../../hooks/useTheme.cjs");
 const Title_styles = require("./Title.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Typography = require("../../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiDialogTitle__default = /* @__PURE__ */ _interopDefault(MuiDialogTitle);
@@ -33,26 +33,19 @@ const HvDialogTitle = (props) => {
   } = others;
   delete others.fullscreen;
   const icon = customIcon || showIcon && iconVariant.iconVariant(variant);
-  return /* @__PURE__ */ jsxRuntime.jsx(MuiDialogTitle__default.default, {
-    className: cx(!fullscreen && css({
-      flex: 1
-    }), classes.root, {
-      [classes.fullscreen]: fullscreen
-    }, className),
-    ...others,
-    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: classes.messageContainer,
-      children: [icon, /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: cx({
-          [classes.textWithIcon]: !!icon
-        }),
-        children: [!isString && children, isString && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, {
-          variant: activeTheme == null ? void 0 : activeTheme.dialog.titleVariant,
-          children
-        })]
-      })]
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiDialogTitle__default.default, { className: cx(!fullscreen && css({
+    flex: 1
+  }), classes.root, {
+    [classes.fullscreen]: fullscreen
+  }, className), ...others, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.messageContainer, children: [
+    icon,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx({
+      [classes.textWithIcon]: !!icon
+    }), children: [
+      !isString && children,
+      isString && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: activeTheme == null ? void 0 : activeTheme.dialog.titleVariant, children })
+    ] })
+  ] }) });
 };
 exports.dialogTitleClasses = Title_styles.staticClasses;
 exports.HvDialogTitle = HvDialogTitle;

package/dist/cjs/components/Dialog/Title/Title.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Title.cjs","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,gBAAA,iBAAiBT,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,aAAAA,WAAWV,WAAW;AAE7C,QAAA;AAAA,IAAEW;AAAAA,MAAgBC,SAAS,SAAA;AAE3BC,QAAAA,WAAW,OAAOX,aAAa;AAE/B,QAAA;AAAA,IAAEY;AAAAA,EAAeR,IAAAA;AACvB,SAAQA,OAAeQ;AAEvB,QAAMC,OAAOV,cAAeD,YAAYY,YAAAA,YAAYb,OAAO;AAE3D,wCACGc,wBAAAA,SAAc;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,0CAEV,OAAA;AAAA,MAAKD,WAAWF,QAAQqB;AAAAA,MAAiBlB,UAAA,CACtCa,MACDM,2BAAAA,KAAA,OAAA;AAAA,QAAKpB,WAAWQ,GAAG;AAAA,UAAE,CAACV,QAAQuB,YAAY,GAAG,CAAC,CAACP;AAAAA,QAAAA,CAAM;AAAA,QAAEb,UAAA,CACpD,CAACW,YAAYX,UACbW,2CACEU,yBAAY;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.cjs","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","jsxs","messageContainer","textWithIcon","jsx","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,gBAAA,iBAAiBT,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,aAAAA,WAAWV,WAAW;AAE7C,QAAA;AAAA,IAAEW;AAAAA,MAAgBC,SAAS,SAAA;AAE3BC,QAAAA,WAAW,OAAOX,aAAa;AAE/B,QAAA;AAAA,IAAEY;AAAAA,EAAeR,IAAAA;AACvB,SAAQA,OAAeQ;AAEvB,QAAMC,OAAOV,cAAeD,YAAYY,YAAAA,YAAYb,OAAO;AAE3D,wCACGc,wBAAAA,SACC,EAAA,WAAWR,GACT,CAACK,cAAcN,IAAI;AAAA,IAAEU,MAAM;AAAA,EAAA,CAAG,GAC9BnB,QAAQoB,MACR;AAAA,IACE,CAACpB,QAAQe,UAAU,GAAGA;AAAAA,EACxB,GACAb,SACF,GACA,GAAIK,QAEJ,UAACc,2BAAAA,KAAA,OAAA,EAAI,WAAWrB,QAAQsB,kBACrBN,UAAAA;AAAAA,IAAAA;AAAAA,IACDK,2BAAAA,KAAC,OAAI,EAAA,WAAWX,GAAG;AAAA,MAAE,CAACV,QAAQuB,YAAY,GAAG,CAAC,CAACP;AAAAA,IAAM,CAAA,GAClD,UAAA;AAAA,MAAA,CAACF,YAAYX;AAAAA,MACbW,YACEU,2BAAAA,IAAAC,WAAAA,cAAA,EAAa,SAASb,2CAAac,OAAOC,cACxCxB,UACH;AAAA,IAAA,GAEJ;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;"}

package/dist/cjs/components/DotPagination/DotPagination.cjs

@@ -1,24 +1,18 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("@emotion/react/jsx-runtime");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const React = require("react");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const DotPagination_styles = require("./DotPagination.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const RadioGroup = require("../RadioGroup/RadioGroup.cjs");
 const Radio = require("../Radio/Radio.cjs");
 const getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
   return {
-    radio: React.cloneElement(radioIcon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.OtherStep, {
-      width: 8,
-      height: 8
-    }), {
+    radio: React.cloneElement(radioIcon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.OtherStep, { width: 8, height: 8 }), {
       className: classes == null ? void 0 : classes.icon
     }),
-    radioChecked: React.cloneElement(radioCheckedIcon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CurrentStep, {
-      width: 8,
-      height: 8
-    }), {
+    radioChecked: React.cloneElement(radioCheckedIcon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CurrentStep, { width: 8, height: 8 }), {
       className: classes == null ? void 0 : classes.icon
     })
   };
@@ -41,26 +35,12 @@ const HvDotPagination = (props) => {
     cx
   } = DotPagination_styles.useClasses(classesProp);
   const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);
-  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroup.HvRadioGroup, {
-    className: cx(classes.root, className),
-    classes: {
-      horizontal: classes.horizontal
-    },
-    orientation: "horizontal",
-    ...others,
-    children: range(pages).map((i) => /* @__PURE__ */ jsxRuntime.jsx(Radio.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__ */ jsxRuntime.jsx(RadioGroup.HvRadioGroup, { className: cx(classes.root, className), classes: {
+    horizontal: classes.horizontal
+  }, orientation: "horizontal", ...others, children: range(pages).map((i) => /* @__PURE__ */ jsxRuntime.jsx(Radio.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)) });
 };
 exports.dotPaginationClasses = DotPagination_styles.staticClasses;
 exports.HvDotPagination = HvDotPagination;

package/dist/cjs/components/DotPagination/DotPagination.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DotPagination.cjs","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,MAAAA,aAAaJ,aAAaK,2BAAAA,IAACC,gBAAAA,WAAS;AAAA,MAACC,OAAO;AAAA,MAAGC,QAAQ;AAAA,IAAA,CAAI,GAAG;AAAA,MACnEC,WAAWP,mCAASQ;AAAAA,IAAAA,CACrB;AAAA,IACDC,cAAcP,MAAAA,aACZH,oBAAoBI,2BAAAA,IAACO,gBAAAA,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,gBAAA,mBAAmBT,KAAK;AAEtC,QAAA;AAAA,IAAElB;AAAAA,IAAS4B;AAAAA,EAAAA,IAAOC,qBAAAA,WAAWV,WAAW;AAE9C,QAAMW,QAAQjC,iBAAiBuB,gBAAgBC,cAAcrB,OAAO;AAEpE,wCACG+B,WAAAA,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,qCAChBqB,eAAO;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.cjs","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","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","map","HvRadio","radioRoot","event"],"mappings":";;;;;;;;;AAsDA,MAAMA,mBAAmBA,CACvBC,WACAC,kBACAC,YACG;AACI,SAAA;AAAA,IACLC,OAAOC,mBAAaJ,aAAaK,2BAAAA,IAACC,6BAAU,OAAO,GAAG,QAAQ,EAAA,IAAO;AAAA,MACnEC,WAAWL,mCAASM;AAAAA,IAAAA,CACrB;AAAA,IACDC,cAAcL,mBACZH,oBAAoBI,2BAAAA,IAACK,+BAAY,OAAO,GAAG,QAAQ,EAAA,IACnD;AAAA,MACEH,WAAWL,mCAASM;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,IACAL,SAASiB;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,mBAAmBT,KAAK;AAEtC,QAAA;AAAA,IAAEhB;AAAAA,IAAS0B;AAAAA,EAAAA,IAAOC,qBAAAA,WAAWV,WAAW;AAE9C,QAAMW,QAAQ/B,iBAAiBqB,gBAAgBC,cAAcnB,OAAO;AAGlE,SAAAG,2BAAA,IAAC0B,2BACC,WAAWH,GAAG1B,QAAQ8B,MAAMzB,SAAS,GACrC,SAAS;AAAA,IACP0B,YAAY/B,QAAQ+B;AAAAA,EAEtB,GAAA,aAAY,cACZ,GAAIP,QAEHf,UAAAA,MAAMW,KAAK,EAAEY,IAAKlB,CAAAA,MAChBX,2BAAA,IAAA8B,MAAA,SAAA,EACC,SAAS;AAAA,IACPhC,OAAOD,QAAQC;AAAAA,IACf6B,MAAM9B,QAAQkC;AAAAA,EAChB,GAEA,OAAOpB,GACP,SAASO,SAASP,GAClB,UAAWqB,CAAAA,UAAUb,6CAAea,OAAOrB,IAC3C,MAAMc,MAAM3B,OACZ,aAAa2B,MAAMrB,cACnB,cAAYgB,qDAAmBT,GAAC,GAN3BA,CAM6B,CAErC,EACH,CAAA;AAEJ;;;"}

package/dist/cjs/components/Drawer/Drawer.cjs

@@ -1,5 +1,6 @@
 "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 material = require("@mui/material");
@@ -12,7 +13,6 @@ const checkValidHexColorValue = require("../../utils/checkValidHexColorValue.cjs
 const theme = require("../../utils/theme.cjs");
 const useTheme = require("../../hooks/useTheme.cjs");
 const Drawer_styles = require("./Drawer.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Button = require("../Button/Button.cjs");
 const getBackgroundColor = (color) => {
   return checkValidHexColorValue.checkValidHexColorValue(color) ? hexToRgbA.hexToRgbA(color, 0.8) : color;
@@ -40,43 +40,27 @@ const HvDrawer = (props) => {
     rootId
   } = useTheme.useTheme();
   const [backgroundColorValue, setBackgroundColorValue] = React.useState(theme.getVarValue(uikitStyles.theme.drawer.backDropBackgroundColor, rootId) || "");
-  const closeButtonDisplay = () => /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, {
-    role: "none"
-  });
+  const closeButtonDisplay = () => /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Close, { role: "none" });
   const CloseButtonTooltipWrapper = buttonTitle ? withTooltip.withTooltip(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
   const [backgroundColor, setBackgroundColor] = React.useState(getBackgroundColor(backgroundColorValue));
   React.useEffect(() => {
     setBackgroundColorValue(theme.getVarValue(uikitStyles.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__ */ jsxRuntime.jsxs(material.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__ */ jsxRuntime.jsx(Button.HvButton, {
-      id: setId.setId(id, "close"),
-      className: classes.closeButton,
-      variant: "secondaryGhost",
-      onClick: onClose,
-      "aria-label": buttonTitle,
-      children: /* @__PURE__ */ jsxRuntime.jsx(CloseButtonTooltipWrapper, {})
-    }), children]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.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__ */ jsxRuntime.jsx(Button.HvButton, { id: setId.setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: onClose, "aria-label": buttonTitle, children: /* @__PURE__ */ jsxRuntime.jsx(CloseButtonTooltipWrapper, {}) }),
+    children
+  ] });
 };
 exports.drawerClasses = Drawer_styles.staticClasses;
 exports.HvDrawer = HvDrawer;

package/dist/cjs/components/Drawer/Drawer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.cjs","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","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","backgroundColor","setBackgroundColor","useEffect","MuiDrawer","root","PaperProps","paper","BackdropProps","background","HvButton","setId","closeButton","variant","onClick"],"mappings":";;;;;;;;;;;;;;;;AA0EA,MAAMA,qBAAqBA,CAACC,UAAkB;AAC5C,SAAOC,wBAAAA,wBAAwBD,KAAK,IAAIE,UAAAA,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,gBAAA,YAAYX,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWX,WAAW;AAC7C,QAAA;AAAA,IAAEY;AAAAA,IAAQC;AAAAA,IAAaC;AAAAA,MAAWC,SAAS,SAAA;AAE3C,QAAA,CAACC,sBAAsBC,uBAAuB,IAAIC,MAAAA,SACtDC,MAAYC,YAAAA,kBAAMC,OAAOC,yBAAyBR,MAAM,KAAK,EAC/D;AAEMS,QAAAA,qBAAqBA,MAAMC,2BAAAA,IAACC,uBAAK;AAAA,IAACC,MAAK;AAAA,EAAA,CAAQ;AAErD,QAAMC,4BAA4BrB,cAC9BsB,YAAAA,YAAYL,oBAAoBjB,aAAa,KAAK,IAClDiB;AAEJ,QAAM,CAACM,iBAAiBC,kBAAkB,IAAIZ,MAC5C1B,SAAAA,mBAAmBwB,oBAAoB,CACzC;AAEAe,QAAAA,UAAU,MAAM;AAEZZ,4BAAAA,MAAAA,YAAYC,kBAAMC,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,yCACGU,SAAAA,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,2BAAAA,IAACc,iBAAQ;AAAA,MACPrC,IAAIsC,MAAAA,MAAMtC,IAAI,OAAO;AAAA,MACrBH,WAAWC,QAAQyC;AAAAA,MACnBC,SAAQ;AAAA,MACRC,SAAStC;AAAAA,MACT,cAAYE;AAAAA,MAAYJ,UAExBsB,2BAAAA,IAACG,2BAA2B,EAAA;AAAA,IACpB,CAAA,GACTzB,QAAQ;AAAA,EAAA,CACA;AAEf;;;"}
+{"version":3,"file":"Drawer.cjs","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","jsx","Close","CloseButtonTooltipWrapper","withTooltip","backgroundColor","setBackgroundColor","useEffect","jsxs","MuiDrawer","root","paper","background","HvButton","setId","closeButton"],"mappings":";;;;;;;;;;;;;;;;AA0EA,MAAMA,qBAAqBA,CAACC,UAAkB;AAC5C,SAAOC,wBAAAA,wBAAwBD,KAAK,IAAIE,UAAAA,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,gBAAA,YAAYX,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWX,WAAW;AAC7C,QAAA;AAAA,IAAEY;AAAAA,IAAQC;AAAAA,IAAaC;AAAAA,MAAWC,SAAS,SAAA;AAE3C,QAAA,CAACC,sBAAsBC,uBAAuB,IAAIC,MAAAA,SACtDC,MAAYC,YAAAA,kBAAMC,OAAOC,yBAAyBR,MAAM,KAAK,EAC/D;AAEA,QAAMS,qBAAqBA,MAAOC,+BAAAC,gBAAAA,OAAA,EAAM,MAAK,OAAS,CAAA;AAEtD,QAAMC,4BAA4BpB,cAC9BqB,YAAAA,YAAYJ,oBAAoBjB,aAAa,KAAK,IAClDiB;AAEJ,QAAM,CAACK,iBAAiBC,kBAAkB,IAAIX,MAC5C1B,SAAAA,mBAAmBwB,oBAAoB,CACzC;AAEAc,QAAAA,UAAU,MAAM;AAEZX,4BAAAA,MAAAA,YAAYC,kBAAMC,OAAOC,yBAAyBR,MAAM,MACtDD,2CAAaQ,OAAOC,4BACpB,EACJ;AAEmB9B,uBAAAA,mBAAmBwB,oBAAoB,CAAC;AAAA,EAAA,GAC1D,CACDJ,QACAI,sBACAa,oBACAf,QACAD,2CAAaQ,OAAOC,uBAAuB,CAC5C;AAGC,SAAAS,2BAAA,KAACC,SACC,QAAA,EAAA,WAAWtB,GAAGX,QAAQkC,MAAMnC,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,IACVC,SAAS;AAAA,MACPkC,MAAMlC,QAAQmC;AAAAA,IAChB;AAAA,KAEF,eAAe;AAAA,IACbnC,SAAS;AAAA,MACPkC,MAAMvB,GAAGD,IAAI;AAAA,QAAEmB;AAAAA,MAAAA,CAAiB,GAAG7B,QAAQoC,UAAU;AAAA,IACvD;AAAA,EAAA,GAEF,SACI5B,GAAAA,QAEJ,UAAA;AAAA,IAAAiB,+BAACY,OAAAA,YACC,IAAIC,MAAAA,MAAMpC,IAAI,OAAO,GACrB,WAAWF,QAAQuC,aACnB,SAAQ,kBACR,SAASlC,SACT,cAAYE,aAEZ,UAAAkB,+BAAC,4BAAyB,CAAA,GAC5B;AAAA,IACCtB;AAAAA,EACH,EAAA,CAAA;AAEJ;;;"}

package/dist/cjs/components/DropDownMenu/DropDownMenu.cjs

@@ -1,5 +1,6 @@
 "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 uikitStyles = require("@hitachivantara/uikit-styles");
@@ -10,7 +11,6 @@ const keyboardUtils = require("../../utils/keyboardUtils.cjs");
 const setId = require("../../utils/setId.cjs");
 const focusableElementFinder = require("../../utils/focusableElementFinder.cjs");
 const DropDownMenu_styles = require("./DropDownMenu.styles.cjs");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
 const BaseDropdown = require("../BaseDropdown/BaseDropdown.cjs");
 const Button = require("../Button/Button.cjs");
 const Panel = require("../Panel/Panel.cjs");
@@ -66,60 +66,21 @@ const HvDropDownMenu = (props) => {
       position: "relative"
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, {
-    id,
-    className: cx(classes.container, className),
-    classes: {
-      root: classes.root,
-      container: classes.baseContainer
-    },
-    expanded: open && !disabled,
-    component: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-      icon: true,
-      variant: category,
-      id: setId.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__ */ jsxRuntime.jsx(uikitReactIcons.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__ */ jsxRuntime.jsx(Panel.HvPanel, {
-      className: classes.menuListRoot,
-      children: /* @__PURE__ */ jsxRuntime.jsx(List.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__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, { id, className: cx(classes.container, className), classes: {
+    root: classes.root,
+    container: classes.baseContainer
+  }, expanded: open && !disabled, component: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, { icon: true, variant: category, id: setId.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__ */ jsxRuntime.jsx(uikitReactIcons.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__ */ jsxRuntime.jsx(Panel.HvPanel, { className: classes.menuListRoot, children: /* @__PURE__ */ jsxRuntime.jsx(List.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
+  } }) }) });
 };
 exports.dropDownMenuClasses = DropDownMenu_styles.staticClasses;
 exports.HvDropDownMenu = HvDropDownMenu;

package/dist/cjs/components/DropDownMenu/DropDownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.cjs","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.cjs","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","jsx","HvBaseDropdown","container","root","baseContainer","HvButton","iconSelected","MoreOptionsVertical","undefined","e","s","HvPanel","menuListRoot","HvList","item","menuList"],"mappings":"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"}