@hitachivantara/uikit-react-core 5.0.0-next.8 → 5.0.0-next.9

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, useContext, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { isNil } from \"lodash\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledBackdrop, StyledClose, StyledPaper } from \"./Dialog.styles\";\nimport { getFocusableList } from \"utils/focusableElementFinder\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { HvThemeContext } from \"providers\";\nimport { withTooltip } from \"hocs\";\nimport dialogClasses, { HvDialogClasses } from \"./dialogClasses\";\nimport { css } from \"@emotion/css\";\n\nexport type HvDialogProps = Omit<MuiDialogProps, \"fullScreen\" | \"classes\"> &\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    /** Element id that should be focus when the Dialog opens. */\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  };\n\nexport const HvDialog = ({\n  classes,\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}: HvDialogProps) => {\n  delete (others as any).fullScreen;\n\n  const { activeTheme, selectedMode, rootId } = useContext(HvThemeContext);\n\n  const focusableQueue = useRef<{\n    first?: HTMLElement;\n    last?: HTMLElement;\n  }>({ first: undefined, last: undefined });\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 = (\n    event,\n    bypassValidation: boolean = false,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => {\n    if (bypassValidation) {\n      onClose?.(event, reason);\n    } else if (!disableBackdropClick) {\n      onClose?.(event, reason);\n    }\n  };\n\n  const measuredRef = useCallback(\n    (node) => {\n      if (node) {\n        const focusableList = getFocusableList(node);\n        focusableQueue.current = {\n          first: focusableList[1],\n          last: focusableList[focusableList.length - 2],\n        };\n        if (isNil(firstFocusable)) focusableList[1].focus();\n        else {\n          const element =\n            firstFocusable && document.getElementById(firstFocusable);\n          if (element) element.focus();\n          else {\n            // eslint-disable-next-line no-console\n            console.warn(`firstFocusable element ${firstFocusable} not found.`);\n            focusableList[1].focus();\n          }\n        }\n      }\n    },\n    [firstFocusable]\n  );\n\n  const keyDownHandler = (event) => {\n    if (\n      isKeypress(event, keyboardCodes.Tab) &&\n      !isNil(event.target) &&\n      !isNil(focusableQueue)\n    ) {\n      if (event.shiftKey && event.target === focusableQueue.current.first) {\n        focusableQueue.current.last?.focus();\n        event.preventDefault();\n      }\n      if (!event.shiftKey && event.target === focusableQueue.current.last) {\n        focusableQueue.current.first?.focus();\n        event.preventDefault();\n      }\n    }\n    // Needed as this handler overrides the one in the material ui Modal.\n    else if (isKeypress(event, keyboardCodes.Esc)) {\n      if (\n        \"onEscapeKeyDown\" in others &&\n        typeof others.onEscapeKeyDown === \"function\"\n      ) {\n        others.onEscapeKeyDown(event);\n      }\n\n      if (!others.disableEscapeKeyDown) {\n        // Swallow the event, in case someone is listening for the escape key on the body.\n        event.stopPropagation();\n\n        wrappedClose(event, true, \"escapeKeyDown\");\n      }\n    }\n  };\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\", null, null, null)\n    : closeButtonDisplay;\n\n  return (\n    <MuiDialog\n      container={document.getElementById(rootId || \"\") || document.body}\n      className={clsx(dialogClasses.root, classes?.root, className)}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n      onKeyDown={keyDownHandler}\n      fullWidth\n      maxWidth={false}\n      slots={{\n        backdrop: (backdropProps) => (\n          <StyledBackdrop\n            open={open}\n            onClick={(event) => wrappedClose(event)}\n            $backColor={\n              activeTheme?.colors?.modes[selectedMode].atmo4 ||\n              theme.colors.atmo4\n            }\n            {...backdropProps}\n          />\n        ),\n      }}\n      classes={{ container: css({ position: \"relative\" }) }}\n      BackdropProps={{\n        classes: {\n          root: clsx(classes?.background, dialogClasses.background),\n        },\n      }}\n      PaperComponent={(paperProps) => (\n        <StyledPaper $fullscreen={fullscreen} {...paperProps} />\n      )}\n      PaperProps={{\n        classes: {\n          root: clsx(\n            css({ position: \"absolute\" }),\n            classes?.paper,\n            dialogClasses.paper,\n            fullscreen && clsx(dialogClasses.fullscreen, classes?.fullscreen)\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <StyledClose\n        id={setId(id, \"close\")}\n        className={clsx(dialogClasses.closeButton, classes?.closeButton)}\n        variant=\"secondaryGhost\"\n        onClick={(event) => wrappedClose(event, true, undefined)}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </StyledClose>\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","classes","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","fullScreen","activeTheme","selectedMode","rootId","useContext","HvThemeContext","focusableQueue","useRef","first","undefined","last","wrappedClose","event","bypassValidation","reason","measuredRef","useCallback","node","focusableList","getFocusableList","current","length","isNil","focus","element","document","getElementById","warn","keyDownHandler","isKeypress","keyboardCodes","Tab","target","shiftKey","preventDefault","Esc","onEscapeKeyDown","disableEscapeKeyDown","stopPropagation","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","MuiDialog","container","body","clsx","dialogClasses","root","ref","onKeyDown","fullWidth","maxWidth","slots","backdrop","backdropProps","StyledBackdrop","onClick","$backColor","colors","modes","atmo4","theme","css","process","env","NODE_ENV","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","BackdropProps","background","PaperComponent","paperProps","StyledPaper","$fullscreen","PaperProps","paper","StyledClose","setId","closeButton","variant","React","Children","c","cloneElement"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useContext, useRef } from \"react\";\nimport clsx from \"clsx\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { isNil } from \"lodash\";\nimport { HvBaseProps } from \"../../types\";\nimport { StyledBackdrop, StyledClose, StyledPaper } from \"./Dialog.styles\";\nimport { getFocusableList } from \"utils/focusableElementFinder\";\nimport { isKeypress, keyboardCodes, setId } from \"utils\";\nimport { HvThemeContext } from \"providers\";\nimport { withTooltip } from \"hocs\";\nimport dialogClasses, { HvDialogClasses } from \"./dialogClasses\";\nimport { css } from \"@emotion/css\";\n\nexport type HvDialogProps = Omit<MuiDialogProps, \"fullScreen\" | \"classes\"> &\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    /** Element id that should be focus when the Dialog opens. */\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  };\n\nexport const HvDialog = ({\n  classes,\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}: HvDialogProps) => {\n  delete (others as any).fullScreen;\n\n  const { activeTheme, selectedMode, rootId } = useContext(HvThemeContext);\n\n  const focusableQueue = useRef<{\n    first?: HTMLElement;\n    last?: HTMLElement;\n  }>({ first: undefined, last: undefined });\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 = (\n    event,\n    bypassValidation: boolean = false,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => {\n    if (bypassValidation) {\n      onClose?.(event, reason);\n    } else if (!disableBackdropClick) {\n      onClose?.(event, reason);\n    }\n  };\n\n  const measuredRef = useCallback(\n    (node) => {\n      if (node) {\n        const focusableList = getFocusableList(node);\n        focusableQueue.current = {\n          first: focusableList[1],\n          last: focusableList[focusableList.length - 2],\n        };\n        if (isNil(firstFocusable)) focusableList[1].focus();\n        else {\n          const element =\n            firstFocusable && document.getElementById(firstFocusable);\n          if (element) element.focus();\n          else {\n            // eslint-disable-next-line no-console\n            console.warn(`firstFocusable element ${firstFocusable} not found.`);\n            focusableList[1].focus();\n          }\n        }\n      }\n    },\n    [firstFocusable]\n  );\n\n  const keyDownHandler = (event) => {\n    if (\n      isKeypress(event, keyboardCodes.Tab) &&\n      !isNil(event.target) &&\n      !isNil(focusableQueue)\n    ) {\n      if (event.shiftKey && event.target === focusableQueue.current.first) {\n        focusableQueue.current.last?.focus();\n        event.preventDefault();\n      }\n      if (!event.shiftKey && event.target === focusableQueue.current.last) {\n        focusableQueue.current.first?.focus();\n        event.preventDefault();\n      }\n    }\n    // Needed as this handler overrides the one in the material ui Modal.\n    else if (isKeypress(event, keyboardCodes.Esc)) {\n      if (\n        \"onEscapeKeyDown\" in others &&\n        typeof others.onEscapeKeyDown === \"function\"\n      ) {\n        others.onEscapeKeyDown(event);\n      }\n\n      if (!others.disableEscapeKeyDown) {\n        // Swallow the event, in case someone is listening for the escape key on the body.\n        event.stopPropagation();\n\n        wrappedClose(event, true, \"escapeKeyDown\");\n      }\n    }\n  };\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\", null, null, null)\n    : closeButtonDisplay;\n\n  return (\n    <MuiDialog\n      container={document.getElementById(rootId || \"\") || document.body}\n      className={clsx(dialogClasses.root, classes?.root, className)}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n      onKeyDown={keyDownHandler}\n      fullWidth\n      maxWidth={false}\n      slots={{\n        backdrop: (backdropProps) => (\n          <StyledBackdrop\n            open={open}\n            onClick={(event) => wrappedClose(event)}\n            $backColor={\n              activeTheme?.colors?.modes[selectedMode].atmo4 ||\n              theme.colors.atmo4\n            }\n            {...backdropProps}\n          />\n        ),\n      }}\n      classes={{ container: css({ position: \"relative\" }) }}\n      BackdropProps={{\n        classes: {\n          root: clsx(classes?.background, dialogClasses.background),\n        },\n      }}\n      PaperComponent={(paperProps) => (\n        <StyledPaper $fullscreen={fullscreen} {...paperProps} />\n      )}\n      PaperProps={{\n        classes: {\n          root: clsx(\n            css({ position: \"absolute\" }),\n            classes?.paper,\n            dialogClasses.paper,\n            fullscreen && clsx(dialogClasses.fullscreen, classes?.fullscreen)\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <StyledClose\n        id={setId(id, \"close\")}\n        className={clsx(dialogClasses.closeButton, classes?.closeButton)}\n        variant=\"secondaryGhost\"\n        onClick={(event) => wrappedClose(event, true, undefined)}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </StyledClose>\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","classes","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","fullScreen","activeTheme","selectedMode","rootId","useContext","HvThemeContext","focusableQueue","useRef","first","undefined","last","wrappedClose","event","bypassValidation","reason","measuredRef","useCallback","node","focusableList","getFocusableList","current","length","isNil","focus","element","document","getElementById","warn","keyDownHandler","isKeypress","keyboardCodes","Tab","target","shiftKey","preventDefault","Esc","onEscapeKeyDown","disableEscapeKeyDown","stopPropagation","closeButtonDisplay","CloseButtonTooltipWrapper","withTooltip","body","clsx","dialogClasses","root","backdrop","backdropProps","colors","modes","atmo4","theme","container","css","process","env","NODE_ENV","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","background","paperProps","paper","setId","closeButton","React","Children","c","cloneElement"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
 import { StyledTitle, StyledMessageContainer, StyledTextWithIcon } from "./Title.styles.js";
 import dialogTitleClasses from "./titleClasses.js";
 import { useContext } from "react";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import iconVariant from "../../../utils/iconVariant.js";
 import { HvThemeContext } from "../../../providers/ThemeProvider.js";
 import { HvTypography } from "../../Typography/Typography.js";
@@ -24,22 +24,13 @@ const HvTitle = ({
   } = others;
   delete others.fullscreen;
   const icon = customIcon || showIcon && iconVariant(variant, "", "");
-  return /* @__PURE__ */ jsx(StyledTitle, {
-    className: clsx(dialogTitleClasses.root, classes == null ? void 0 : classes.root, className, fullscreen && clsx(dialogTitleClasses.fullscreen, classes == null ? void 0 : classes.fullscreen)),
-    $fullscreen: fullscreen,
-    ...others,
-    children: /* @__PURE__ */ jsxs(StyledMessageContainer, {
-      className: clsx(dialogTitleClasses.messageContainer, classes == null ? void 0 : classes.messageContainer),
-      children: [icon, /* @__PURE__ */ jsxs(StyledTextWithIcon, {
-        className: !!icon ? clsx(dialogTitleClasses.textWithIcon, classes == null ? void 0 : classes.textWithIcon) : void 0,
-        $hasIcon: !!icon,
-        children: [!isString && children, isString && /* @__PURE__ */ jsx(HvTypography, {
-          variant: activeTheme == null ? void 0 : activeTheme.dialog.titleVariant,
-          children
-        })]
-      })]
-    })
-  });
+  return /* @__PURE__ */ jsx(StyledTitle, { className: clsx(dialogTitleClasses.root, classes == null ? void 0 : classes.root, className, fullscreen && clsx(dialogTitleClasses.fullscreen, classes == null ? void 0 : classes.fullscreen)), $fullscreen: fullscreen, ...others, children: /* @__PURE__ */ jsxs(StyledMessageContainer, { className: clsx(dialogTitleClasses.messageContainer, classes == null ? void 0 : classes.messageContainer), children: [
+    icon,
+    /* @__PURE__ */ jsxs(StyledTextWithIcon, { className: !!icon ? clsx(dialogTitleClasses.textWithIcon, classes == null ? void 0 : classes.textWithIcon) : void 0, $hasIcon: !!icon, children: [
+      !isString && children,
+      isString && /* @__PURE__ */ jsx(HvTypography, { variant: activeTheme == null ? void 0 : activeTheme.dialog.titleVariant, children })
+    ] })
+  ] }) });
 };
 export {
   HvTitle

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 { DialogTitleProps as MuiDialogTitleProps } from \"@mui/material/DialogTitle\";\nimport clsx from \"clsx\";\nimport { HvTypography } from \"components\";\nimport { HvBaseProps } from \"../../../types\";\nimport { iconVariant } from \"utils\";\nimport {\n  StyledTitle,\n  StyledMessageContainer,\n  StyledTextWithIcon,\n} from \"./Title.styles\";\nimport dialogTitleClasses, { HvDialogTitleClasses } from \"./titleClasses\";\nimport { useContext } from \"react\";\nimport { HvThemeContext } from \"providers\";\n\nexport type HvDialogTitleVariant =\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"default\";\n\nexport type HvTitleProps = Omit<MuiDialogTitleProps, \"variant\" | \"classes\"> &\n  HvBaseProps & {\n    /** Variant of the Dialog. */\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    classes?: HvDialogTitleClasses;\n  };\n\nexport const HvTitle = ({\n  classes,\n  className,\n  children,\n  variant = \"default\",\n  showIcon = true,\n  customIcon = null,\n  ...others\n}: HvTitleProps) => {\n  const { activeTheme } = useContext(HvThemeContext);\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    <StyledTitle\n      className={clsx(\n        dialogTitleClasses.root,\n        classes?.root,\n        className,\n        fullscreen && clsx(dialogTitleClasses.fullscreen, classes?.fullscreen)\n      )}\n      $fullscreen={fullscreen}\n      {...others}\n    >\n      <StyledMessageContainer\n        className={clsx(\n          dialogTitleClasses.messageContainer,\n          classes?.messageContainer\n        )}\n      >\n        {icon}\n        <StyledTextWithIcon\n          className={\n            !!icon\n              ? clsx(dialogTitleClasses.textWithIcon, classes?.textWithIcon)\n              : undefined\n          }\n          $hasIcon={!!icon}\n        >\n          {!isString && children}\n          {isString && (\n            <HvTypography variant={activeTheme?.dialog.titleVariant}>\n              {children}\n            </HvTypography>\n          )}\n        </StyledTextWithIcon>\n      </StyledMessageContainer>\n    </StyledTitle>\n  );\n};\n"],"names":["HvTitle","classes","className","children","variant","showIcon","customIcon","others","activeTheme","useContext","HvThemeContext","isString","fullscreen","icon","iconVariant","StyledTitle","clsx","dialogTitleClasses","root","$fullscreen","StyledMessageContainer","messageContainer","_jsxs","StyledTextWithIcon","textWithIcon","undefined","$hasIcon","HvTypography","dialog","titleVariant"],"mappings":";;;;;;;;AAgCO,MAAMA,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,aAAa;AAAA,KACVC;AACS,MAAM;AACZ,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAgBC,WAAWC,cAAc;AAE3CC,QAAAA,WAAW,OAAOR,aAAa;AAE/B,QAAA;AAAA,IAAES;AAAAA,EAAeL,IAAAA;AACvB,SAAQA,OAAeK;AAEvB,QAAMC,OAAOP,cAAeD,YAAYS,YAAYV,SAAS,IAAI,EAAE;AAEnE,6BACGW,aAAW;AAAA,IACVb,WAAWc,KACTC,mBAAmBC,MACnBjB,mCAASiB,MACThB,WACAU,cAAcI,KAAKC,mBAAmBL,YAAYX,mCAASW,UAAU,CAAC;AAAA,IAExEO,aAAaP;AAAAA,IAAW,GACpBL;AAAAA,IAAMJ,+BAETiB,wBAAsB;AAAA,MACrBlB,WAAWc,KACTC,mBAAmBI,kBACnBpB,mCAASoB,gBAAgB;AAAA,MACzBlB,UAEDU,CAAAA,MACDS,qBAACC,oBAAkB;AAAA,QACjBrB,WACE,CAAC,CAACW,OACEG,KAAKC,mBAAmBO,cAAcvB,mCAASuB,YAAY,IAC3DC;AAAAA,QAENC,UAAU,CAAC,CAACb;AAAAA,QAAKV,UAAA,CAEhB,CAACQ,YAAYR,UACbQ,gCACEgB,cAAY;AAAA,UAACvB,SAASI,2CAAaoB,OAAOC;AAAAA,UAAa1B;AAAAA,QAAAA,CAGzD,CAAA;AAAA,MAAA,CACkB,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAEX;AAElB;"}
+{"version":3,"file":"Title.js","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import { DialogTitleProps as MuiDialogTitleProps } from \"@mui/material/DialogTitle\";\nimport clsx from \"clsx\";\nimport { HvTypography } from \"components\";\nimport { HvBaseProps } from \"../../../types\";\nimport { iconVariant } from \"utils\";\nimport {\n  StyledTitle,\n  StyledMessageContainer,\n  StyledTextWithIcon,\n} from \"./Title.styles\";\nimport dialogTitleClasses, { HvDialogTitleClasses } from \"./titleClasses\";\nimport { useContext } from \"react\";\nimport { HvThemeContext } from \"providers\";\n\nexport type HvDialogTitleVariant =\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"default\";\n\nexport type HvTitleProps = Omit<MuiDialogTitleProps, \"variant\" | \"classes\"> &\n  HvBaseProps & {\n    /** Variant of the Dialog. */\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    classes?: HvDialogTitleClasses;\n  };\n\nexport const HvTitle = ({\n  classes,\n  className,\n  children,\n  variant = \"default\",\n  showIcon = true,\n  customIcon = null,\n  ...others\n}: HvTitleProps) => {\n  const { activeTheme } = useContext(HvThemeContext);\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    <StyledTitle\n      className={clsx(\n        dialogTitleClasses.root,\n        classes?.root,\n        className,\n        fullscreen && clsx(dialogTitleClasses.fullscreen, classes?.fullscreen)\n      )}\n      $fullscreen={fullscreen}\n      {...others}\n    >\n      <StyledMessageContainer\n        className={clsx(\n          dialogTitleClasses.messageContainer,\n          classes?.messageContainer\n        )}\n      >\n        {icon}\n        <StyledTextWithIcon\n          className={\n            !!icon\n              ? clsx(dialogTitleClasses.textWithIcon, classes?.textWithIcon)\n              : undefined\n          }\n          $hasIcon={!!icon}\n        >\n          {!isString && children}\n          {isString && (\n            <HvTypography variant={activeTheme?.dialog.titleVariant}>\n              {children}\n            </HvTypography>\n          )}\n        </StyledTextWithIcon>\n      </StyledMessageContainer>\n    </StyledTitle>\n  );\n};\n"],"names":["HvTitle","classes","className","children","variant","showIcon","customIcon","others","activeTheme","useContext","HvThemeContext","isString","fullscreen","icon","iconVariant","clsx","dialogTitleClasses","root","messageContainer","textWithIcon","undefined","dialog","titleVariant"],"mappings":";;;;;;;;AAgCO,MAAMA,UAAUA,CAAC;AAAA,EACtBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,aAAa;AAAA,KACVC;AACS,MAAM;AACZ,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAgBC,WAAWC,cAAc;AAE3CC,QAAAA,WAAW,OAAOR,aAAa;AAE/B,QAAA;AAAA,IAAES;AAAAA,EAAeL,IAAAA;AACvB,SAAQA,OAAeK;AAEvB,QAAMC,OAAOP,cAAeD,YAAYS,YAAYV,SAAS,IAAI,EAAE;AAEnE,SACG,oBAAA,aAAA,EACC,WAAWW,KACTC,mBAAmBC,MACnBhB,mCAASgB,MACTf,WACAU,cAAcG,KAAKC,mBAAmBJ,YAAYX,mCAASW,UAAU,CAAC,GAExE,aAAaA,YACb,GAAIL,QAEJ,UAAA,qBAAC,wBACC,EAAA,WAAWQ,KACTC,mBAAmBE,kBACnBjB,mCAASiB,gBAAgB,GAG1BL,UAAAA;AAAAA,IAAAA;AAAAA,yBACA,oBACC,EAAA,WACE,CAAC,CAACA,OACEE,KAAKC,mBAAmBG,cAAclB,mCAASkB,YAAY,IAC3DC,QAEN,UAAU,CAAC,CAACP,MAEX,UAAA;AAAA,MAAA,CAACF,YAAYR;AAAAA,MACbQ,YACE,oBAAA,cAAA,EAAa,SAASH,2CAAaa,OAAOC,cACxCnB,UACH;AAAA,IAAA,GAEJ;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}

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

@@ -1,20 +1,14 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
 import dotPaginationClasses from "./dotPaginationClasses.js";
 import { StyledRadioGroup, StyledRadio, StyledOtherStep, StyledCurrentStep } from "./DotPagination.styles.js";
 import { cloneElement } from "react";
-import { jsx } from "@emotion/react/jsx-runtime";
 const getSelectorIcons = (radioIcon, radioCheckedIcon, classes) => {
   return {
-    radio: cloneElement(radioIcon || /* @__PURE__ */ jsx(StyledOtherStep, {
-      width: 8,
-      height: 8
-    }), {
+    radio: cloneElement(radioIcon || /* @__PURE__ */ jsx(StyledOtherStep, { width: 8, height: 8 }), {
       className: clsx(classes == null ? void 0 : classes.icon, dotPaginationClasses.icon)
     }),
-    radioChecked: cloneElement(radioCheckedIcon || /* @__PURE__ */ jsx(StyledCurrentStep, {
-      width: 8,
-      height: 8
-    }), {
+    radioChecked: cloneElement(radioCheckedIcon || /* @__PURE__ */ jsx(StyledCurrentStep, { width: 8, height: 8 }), {
       className: clsx(classes == null ? void 0 : classes.icon, dotPaginationClasses.icon)
     })
   };
@@ -32,26 +26,12 @@ const HvDotPagination = ({
 }) => {
   const range = (n) => Array.from(Array(n), (_, i) => i);
   const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);
-  return /* @__PURE__ */ jsx(StyledRadioGroup, {
-    className: clsx(className, classes == null ? void 0 : classes.root, dotPaginationClasses.root),
-    classes: {
-      horizontal: clsx(classes == null ? void 0 : classes.horizontal, dotPaginationClasses.horizontal)
-    },
-    orientation: "horizontal",
-    ...others,
-    children: range(pages).map((i) => /* @__PURE__ */ jsx(StyledRadio, {
-      classes: {
-        radio: clsx(classes == null ? void 0 : classes.radio, dotPaginationClasses.radio),
-        root: clsx(classes == null ? void 0 : classes.radioRoot, dotPaginationClasses.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(StyledRadioGroup, { className: clsx(className, classes == null ? void 0 : classes.root, dotPaginationClasses.root), classes: {
+    horizontal: clsx(classes == null ? void 0 : classes.horizontal, dotPaginationClasses.horizontal)
+  }, orientation: "horizontal", ...others, children: range(pages).map((i) => /* @__PURE__ */ jsx(StyledRadio, { classes: {
+    radio: clsx(classes == null ? void 0 : classes.radio, dotPaginationClasses.radio),
+    root: clsx(classes == null ? void 0 : classes.radioRoot, dotPaginationClasses.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 clsx from \"clsx\";\nimport { HvRadioGroupProps } from \"../RadioGroup\";\nimport dotPaginationClasses, {\n  HvDotPaginationClasses,\n} from \"./dotPaginationClasses\";\nimport {\n  StyledCurrentStep,\n  StyledOtherStep,\n  StyledRadio,\n  StyledRadioGroup,\n} from \"./DotPagination.styles\";\nimport { cloneElement } from \"react\";\n\nexport type HvDotPaginationProps = 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 || <StyledOtherStep width={8} height={8} />, {\n      className: clsx(classes?.icon, dotPaginationClasses.icon),\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <StyledCurrentStep width={8} height={8} />,\n      {\n        className: clsx(classes?.icon, dotPaginationClasses.icon),\n      }\n    ),\n  };\n};\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 = ({\n  className,\n  classes,\n  unselectedIcon,\n  selectedIcon,\n  pages = 1,\n  page = 0,\n  onPageChange,\n  getItemAriaLabel,\n  ...others\n}: HvDotPaginationProps) => {\n  const range = (n: number) => Array.from(Array(n), (_, i) => i);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <StyledRadioGroup\n      className={clsx(className, classes?.root, dotPaginationClasses.root)}\n      classes={{\n        horizontal: clsx(classes?.horizontal, dotPaginationClasses.horizontal),\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <StyledRadio\n          classes={{\n            radio: clsx(classes?.radio, dotPaginationClasses.radio),\n            root: clsx(classes?.radioRoot, dotPaginationClasses.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    </StyledRadioGroup>\n  );\n};\n"],"names":["getSelectorIcons","radioIcon","radioCheckedIcon","classes","radio","cloneElement","_jsx","StyledOtherStep","width","height","className","clsx","icon","dotPaginationClasses","radioChecked","StyledCurrentStep","HvDotPagination","unselectedIcon","selectedIcon","pages","page","onPageChange","getItemAriaLabel","others","range","n","Array","from","_","i","icons","StyledRadioGroup","root","horizontal","orientation","children","map","StyledRadio","radioRoot","value","checked","onChange","event","checkedIcon"],"mappings":";;;;;AAmDA,MAAMA,mBAAmBA,CACvBC,WACAC,kBACAC,YACG;AACI,SAAA;AAAA,IACLC,OAAOC,aAAaJ,aAAaK,oBAACC,iBAAe;AAAA,MAACC,OAAO;AAAA,MAAGC,QAAQ;AAAA,IAAA,CAAE,GAAK;AAAA,MACzEC,WAAWC,KAAKR,mCAASS,MAAMC,qBAAqBD,IAAI;AAAA,IAAA,CACzD;AAAA,IACDE,cAAcT,aACZH,oBAAoBI,oBAACS,mBAAiB;AAAA,MAACP,OAAO;AAAA,MAAGC,QAAQ;AAAA,IAAA,CAAE,GAC3D;AAAA,MACEC,WAAWC,KAAKR,mCAASS,MAAMC,qBAAqBD,IAAI;AAAA,IAAA,CACzD;AAAA,EAAA;AAGP;AAMO,MAAMI,kBAAkBA,CAAC;AAAA,EAC9BN;AAAAA,EACAP;AAAAA,EACAc;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,KACGC;AACiB,MAAM;AACpBC,QAAAA,QAAQA,CAACC,MAAcC,MAAMC,KAAKD,MAAMD,CAAC,GAAG,CAACG,GAAGC,MAAMA,CAAC;AAE7D,QAAMC,QAAQ9B,iBAAiBiB,gBAAgBC,cAAcf,OAAO;AAEpE,6BACG4B,kBAAgB;AAAA,IACfrB,WAAWC,KAAKD,WAAWP,mCAAS6B,MAAMnB,qBAAqBmB,IAAI;AAAA,IACnE7B,SAAS;AAAA,MACP8B,YAAYtB,KAAKR,mCAAS8B,YAAYpB,qBAAqBoB,UAAU;AAAA,IACvE;AAAA,IACAC,aAAY;AAAA,IAAY,GACpBX;AAAAA,IAAMY,UAETX,MAAML,KAAK,EAAEiB,IAAKP,CAAAA,0BAChBQ,aAAW;AAAA,MACVlC,SAAS;AAAA,QACPC,OAAOO,KAAKR,mCAASC,OAAOS,qBAAqBT,KAAK;AAAA,QACtD4B,MAAMrB,KAAKR,mCAASmC,WAAWzB,qBAAqByB,SAAS;AAAA,MAC/D;AAAA,MAEAC,OAAOV;AAAAA,MACPW,SAASpB,SAASS;AAAAA,MAClBY,UAAWC,CAAAA,UAAUrB,6CAAeqB,OAAOb;AAAAA,MAC3CjB,MAAMkB,MAAM1B;AAAAA,MACZuC,aAAab,MAAMhB;AAAAA,MACnB,cAAYQ,qDAAmBO;AAAAA,IAAG,GAN7BA,CAAC,CAQT;AAAA,EAAA,CACgB;AAEvB;"}
+{"version":3,"file":"DotPagination.js","sources":["../../../../src/components/DotPagination/DotPagination.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { HvRadioGroupProps } from \"../RadioGroup\";\nimport dotPaginationClasses, {\n  HvDotPaginationClasses,\n} from \"./dotPaginationClasses\";\nimport {\n  StyledCurrentStep,\n  StyledOtherStep,\n  StyledRadio,\n  StyledRadioGroup,\n} from \"./DotPagination.styles\";\nimport { cloneElement } from \"react\";\n\nexport type HvDotPaginationProps = 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 || <StyledOtherStep width={8} height={8} />, {\n      className: clsx(classes?.icon, dotPaginationClasses.icon),\n    }),\n    radioChecked: cloneElement(\n      radioCheckedIcon || <StyledCurrentStep width={8} height={8} />,\n      {\n        className: clsx(classes?.icon, dotPaginationClasses.icon),\n      }\n    ),\n  };\n};\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 = ({\n  className,\n  classes,\n  unselectedIcon,\n  selectedIcon,\n  pages = 1,\n  page = 0,\n  onPageChange,\n  getItemAriaLabel,\n  ...others\n}: HvDotPaginationProps) => {\n  const range = (n: number) => Array.from(Array(n), (_, i) => i);\n\n  const icons = getSelectorIcons(unselectedIcon, selectedIcon, classes);\n\n  return (\n    <StyledRadioGroup\n      className={clsx(className, classes?.root, dotPaginationClasses.root)}\n      classes={{\n        horizontal: clsx(classes?.horizontal, dotPaginationClasses.horizontal),\n      }}\n      orientation=\"horizontal\"\n      {...others}\n    >\n      {range(pages).map((i) => (\n        <StyledRadio\n          classes={{\n            radio: clsx(classes?.radio, dotPaginationClasses.radio),\n            root: clsx(classes?.radioRoot, dotPaginationClasses.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    </StyledRadioGroup>\n  );\n};\n"],"names":["getSelectorIcons","radioIcon","radioCheckedIcon","classes","radio","cloneElement","className","clsx","icon","dotPaginationClasses","radioChecked","HvDotPagination","unselectedIcon","selectedIcon","pages","page","onPageChange","getItemAriaLabel","others","range","n","Array","from","_","i","icons","root","horizontal","map","radioRoot","event"],"mappings":";;;;;AAmDA,MAAMA,mBAAmBA,CACvBC,WACAC,kBACAC,YACG;AACI,SAAA;AAAA,IACLC,OAAOC,aAAaJ,aAAa,oBAAC,mBAAgB,OAAO,GAAG,QAAQ,EAAA,IAAO;AAAA,MACzEK,WAAWC,KAAKJ,mCAASK,MAAMC,qBAAqBD,IAAI;AAAA,IAAA,CACzD;AAAA,IACDE,cAAcL,aACZH,oBAAoB,oBAAC,qBAAkB,OAAO,GAAG,QAAQ,EAAA,IACzD;AAAA,MACEI,WAAWC,KAAKJ,mCAASK,MAAMC,qBAAqBD,IAAI;AAAA,IAAA,CACzD;AAAA,EAAA;AAGP;AAMO,MAAMG,kBAAkBA,CAAC;AAAA,EAC9BL;AAAAA,EACAH;AAAAA,EACAS;AAAAA,EACAC;AAAAA,EACAC,QAAQ;AAAA,EACRC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,KACGC;AACiB,MAAM;AACpBC,QAAAA,QAAQA,CAACC,MAAcC,MAAMC,KAAKD,MAAMD,CAAC,GAAG,CAACG,GAAGC,MAAMA,CAAC;AAE7D,QAAMC,QAAQzB,iBAAiBY,gBAAgBC,cAAcV,OAAO;AAGlE,SAAA,oBAAC,kBACC,EAAA,WAAWI,KAAKD,WAAWH,mCAASuB,MAAMjB,qBAAqBiB,IAAI,GACnE,SAAS;AAAA,IACPC,YAAYpB,KAAKJ,mCAASwB,YAAYlB,qBAAqBkB,UAAU;AAAA,EAEvE,GAAA,aAAY,cACZ,GAAIT,QAEHC,UAAAA,MAAML,KAAK,EAAEc,IAAKJ,CAAAA,MAChB,oBAAA,aAAA,EACC,SAAS;AAAA,IACPpB,OAAOG,KAAKJ,mCAASC,OAAOK,qBAAqBL,KAAK;AAAA,IACtDsB,MAAMnB,KAAKJ,mCAAS0B,WAAWpB,qBAAqBoB,SAAS;AAAA,EAC/D,GAEA,OAAOL,GACP,SAAST,SAASS,GAClB,UAAWM,CAAAA,UAAUd,6CAAec,OAAON,IAC3C,MAAMC,MAAMrB,OACZ,aAAaqB,MAAMf,cACnB,cAAYO,qDAAmBO,GAAC,GAN3BA,CAM6B,CAErC,EACH,CAAA;AAEJ;"}

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

@@ -1,16 +1,14 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import _styled from "@emotion/styled/base";
 import { theme } from "@hitachivantara/uikit-styles";
 import dotPaginationClasses from "./dotPaginationClasses.js";
 import { OtherStep, CurrentStep } from "@hitachivantara/uikit-react-icons";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { HvRadioGroup } from "../RadioGroup/RadioGroup.js";
 import { HvRadio } from "../Radio/Radio.js";
 function _EMOTION_STRINGIFIED_CSS_ERROR__() {
   return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop).";
 }
-const StyledRadioGroup = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(HvRadioGroup, {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
+const StyledRadioGroup = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(HvRadioGroup, { ...props }), process.env.NODE_ENV === "production" ? {
   target: "e1buriah3"
 } : {
   target: "e1buriah3",
@@ -23,9 +21,7 @@ const StyledRadioGroup = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(
     width: "auto"
   }
 }, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRG90UGFnaW5hdGlvbi9Eb3RQYWdpbmF0aW9uLnN0eWxlcy50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTWdDIiwiZmlsZSI6Ii9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRG90UGFnaW5hdGlvbi9Eb3RQYWdpbmF0aW9uLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEh2UmFkaW8sIEh2UmFkaW9Hcm91cCB9IGZyb20gXCJjb21wb25lbnRzXCI7XG5pbXBvcnQgeyB0aGVtZSB9IGZyb20gXCJAaGl0YWNoaXZhbnRhcmEvdWlraXQtc3R5bGVzXCI7XG5pbXBvcnQgZG90UGFnaW5hdGlvbkNsYXNzZXMgZnJvbSBcIi4vZG90UGFnaW5hdGlvbkNsYXNzZXNcIjtcbmltcG9ydCB7IEN1cnJlbnRTdGVwLCBPdGhlclN0ZXAgfSBmcm9tIFwiQGhpdGFjaGl2YW50YXJhL3Vpa2l0LXJlYWN0LWljb25zXCI7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSYWRpb0dyb3VwID0gc3R5bGVkKChwcm9wcykgPT4gPEh2UmFkaW9Hcm91cCB7Li4ucHJvcHN9IC8+KSh7XG4gIGRpc3BsYXk6IFwiZmxleFwiLFxuICBqdXN0aWZ5Q29udGVudDogXCJjZW50ZXJcIixcblxuICBbYCYgLiR7ZG90UGFnaW5hdGlvbkNsYXNzZXMuaG9yaXpvbnRhbH1gXToge1xuICAgIG1hcmdpbkxlZnQ6IDAsXG4gICAgd2lkdGg6IFwiYXV0b1wiLFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRSYWRpbyA9IHN0eWxlZCgocHJvcHMpID0+IDxIdlJhZGlvIHsuLi5wcm9wc30gLz4pKHtcbiAgW2AmLiR7ZG90UGFnaW5hdGlvbkNsYXNzZXMucmFkaW9Sb290fWBdOiB7XG4gICAgbWFyZ2luTGVmdDogXCI4cHhcIixcbiAgfSxcblxuICBbYCYgLiR7ZG90UGFnaW5hdGlvbkNsYXNzZXMucmFkaW99YF06IHtcbiAgICBoZWlnaHQ6IFwiMTZweFwiLFxuXG4gICAgXCImOmhvdmVyXCI6IHtcbiAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUuY29sb3JzLnNlbWE3LFxuICAgICAgYm9yZGVyUmFkaXVzOiBcIjEwMCVcIixcbiAgICB9LFxuICB9LFxufSk7XG5cbmV4cG9ydCBjb25zdCBTdHlsZWRPdGhlclN0ZXAgPSBzdHlsZWQoT3RoZXJTdGVwKSh7XG4gIHdpZHRoOiBcIjE2cHhcIixcbiAgaGVpZ2h0OiBcIjE2cHhcIixcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ3VycmVudFN0ZXAgPSBzdHlsZWQoQ3VycmVudFN0ZXApKHtcbiAgd2lkdGg6IFwiMTZweFwiLFxuICBoZWlnaHQ6IFwiMTZweFwiLFxufSk7XG4iXX0= */");
-const StyledRadio = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(HvRadio, {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
+const StyledRadio = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(HvRadio, { ...props }), process.env.NODE_ENV === "production" ? {
   target: "e1buriah2"
 } : {
   target: "e1buriah2",

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

@@ -1 +1 @@
-{"version":3,"file":"DotPagination.styles.js","sources":["../../../../src/components/DotPagination/DotPagination.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvRadio, HvRadioGroup } from \"components\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport dotPaginationClasses from \"./dotPaginationClasses\";\nimport { CurrentStep, OtherStep } from \"@hitachivantara/uikit-react-icons\";\n\nexport const StyledRadioGroup = styled((props) => <HvRadioGroup {...props} />)({\n  display: \"flex\",\n  justifyContent: \"center\",\n\n  [`& .${dotPaginationClasses.horizontal}`]: {\n    marginLeft: 0,\n    width: \"auto\",\n  },\n});\n\nexport const StyledRadio = styled((props) => <HvRadio {...props} />)({\n  [`&.${dotPaginationClasses.radioRoot}`]: {\n    marginLeft: \"8px\",\n  },\n\n  [`& .${dotPaginationClasses.radio}`]: {\n    height: \"16px\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.sema7,\n      borderRadius: \"100%\",\n    },\n  },\n});\n\nexport const StyledOtherStep = styled(OtherStep)({\n  width: \"16px\",\n  height: \"16px\",\n});\n\nexport const StyledCurrentStep = styled(CurrentStep)({\n  width: \"16px\",\n  height: \"16px\",\n});\n"],"names":["StyledRadioGroup","_styled","props","_jsx","HvRadioGroup","process","env","NODE_ENV","target","label","display","justifyContent","dotPaginationClasses","horizontal","marginLeft","width","StyledRadio","HvRadio","radioRoot","radio","height","backgroundColor","theme","colors","sema7","borderRadius","StyledOtherStep","OtherStep","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledCurrentStep","CurrentStep"],"mappings":";;;;;;;;;;AAMO,MAAMA,mBAAmBC,wBAAQC,CAAUC,UAAAA,oBAACC,cAAY;AAAA,EAAA,GAAKF;AAAK,CAAA,GAAIG,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC7EC,SAAS;AAAA,EACTC,gBAAgB;AAAA,EAEhB,CAAE,MAAKC,qBAAqBC,eAAe;AAAA,IACzCC,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AACF,GAACV,QAAAC,IAAAC,aAAC,eAAA,KAAA,y4DAAA;AAEK,MAAMS,cAAcf,wBAAQC,CAAUC,UAAAA,oBAACc,SAAO;AAAA,EAAA,GAAKf;AAAK,CAAA,GAAIG,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACnE,CAAE,KAAIG,qBAAqBM,cAAc;AAAA,IACvCJ,YAAY;AAAA,EACd;AAAA,EAEA,CAAE,MAAKF,qBAAqBO,UAAU;AAAA,IACpCC,QAAQ;AAAA,IAER,WAAW;AAAA,MACTC,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9BC,cAAc;AAAA,IAChB;AAAA,EACF;AACF,GAACpB,QAAAC,IAAAC,aAAC,eAAA,KAAA,y4DAAA;AAEK,MAAMmB,kBAAyBC,wBAAAA,WAAStB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAqB,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAG9C;AAEK,MAAMC,oBAA2BC,wBAAAA,aAAW7B,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAqB,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAGlD;"}
+{"version":3,"file":"DotPagination.styles.js","sources":["../../../../src/components/DotPagination/DotPagination.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvRadio, HvRadioGroup } from \"components\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport dotPaginationClasses from \"./dotPaginationClasses\";\nimport { CurrentStep, OtherStep } from \"@hitachivantara/uikit-react-icons\";\n\nexport const StyledRadioGroup = styled((props) => <HvRadioGroup {...props} />)({\n  display: \"flex\",\n  justifyContent: \"center\",\n\n  [`& .${dotPaginationClasses.horizontal}`]: {\n    marginLeft: 0,\n    width: \"auto\",\n  },\n});\n\nexport const StyledRadio = styled((props) => <HvRadio {...props} />)({\n  [`&.${dotPaginationClasses.radioRoot}`]: {\n    marginLeft: \"8px\",\n  },\n\n  [`& .${dotPaginationClasses.radio}`]: {\n    height: \"16px\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.sema7,\n      borderRadius: \"100%\",\n    },\n  },\n});\n\nexport const StyledOtherStep = styled(OtherStep)({\n  width: \"16px\",\n  height: \"16px\",\n});\n\nexport const StyledCurrentStep = styled(CurrentStep)({\n  width: \"16px\",\n  height: \"16px\",\n});\n"],"names":["StyledRadioGroup","props","process","env","NODE_ENV","target","label","display","justifyContent","dotPaginationClasses","horizontal","marginLeft","width","StyledRadio","radioRoot","radio","height","backgroundColor","theme","colors","sema7","borderRadius","StyledOtherStep","OtherStep","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledCurrentStep","CurrentStep"],"mappings":";;;;;;;;;;AAMaA,MAAAA,mBAA2BC,wBAAAA,CAAAA,UAAW,oBAAA,cAAA,EAAiBA,GAAAA,MAAAA,CAAS,GAAAC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EAC7EC,SAAS;AAAA,EACTC,gBAAgB;AAAA,EAEhB,CAAE,MAAKC,qBAAqBC,eAAe;AAAA,IACzCC,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AACF,GAACV,QAAAC,IAAAC,aAAC,eAAA,KAAA,y4DAAA;AAEWS,MAAAA,cAAsBZ,wBAAAA,CAAAA,UAAW,oBAAA,SAAA,EAAYA,GAAAA,MAAAA,CAAS,GAAAC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACnE,CAAE,KAAIG,qBAAqBK,cAAc;AAAA,IACvCH,YAAY;AAAA,EACd;AAAA,EAEA,CAAE,MAAKF,qBAAqBM,UAAU;AAAA,IACpCC,QAAQ;AAAA,IAER,WAAW;AAAA,MACTC,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9BC,cAAc;AAAA,IAChB;AAAA,EACF;AACF,GAACnB,QAAAC,IAAAC,aAAC,eAAA,KAAA,y4DAAA;AAEK,MAAMkB,kBAAyBC,wBAAAA,WAASrB,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAoB,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAG9C;AAEK,MAAMC,oBAA2BC,wBAAAA,aAAW5B,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAoB,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAGlD;"}

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

@@ -1,3 +1,4 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import clsx from "clsx";
 import { StyledButton, StyledBaseDropDown, StyledPanel } from "./DropDownMenu.styles.js";
 import dropDownMenuClasses from "./dropDownMenuClasses.js";
@@ -6,7 +7,6 @@ import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
 import { useMemo } from "react";
 import { theme } from "@hitachivantara/uikit-styles";
 import { ClassNames } from "@emotion/react";
-import { jsx } from "@emotion/react/jsx-runtime";
 import withId from "../../hocs/withId.js";
 import { HvList } from "../List/List.js";
 import { useControlled } from "../../hooks/useControlled.js";
@@ -51,19 +51,7 @@ const HvDropDownMenu = ({
     var _a;
     (_a = containerRef == null ? void 0 : containerRef.getElementsByTagName("li")[0]) == null ? void 0 : _a.focus();
   };
-  const headerComponent = /* @__PURE__ */ jsx(StyledButton, {
-    icon: true,
-    variant: category,
-    id: setId(id, "icon-button"),
-    className: clsx(dropDownMenuClasses.icon, classes == null ? void 0 : classes.icon, open && clsx(dropDownMenuClasses.iconSelected, classes == null ? void 0 : classes.iconSelected)),
-    "aria-expanded": open,
-    disabled,
-    "aria-label": "Dropdown menu",
-    $open: open,
-    children: icon || /* @__PURE__ */ jsx(MoreOptionsVertical, {
-      color: disabled ? "atmo5" : void 0
-    })
-  });
+  const headerComponent = /* @__PURE__ */ jsx(StyledButton, { icon: true, variant: category, id: setId(id, "icon-button"), className: clsx(dropDownMenuClasses.icon, classes == null ? void 0 : classes.icon, open && clsx(dropDownMenuClasses.iconSelected, classes == null ? void 0 : classes.iconSelected)), "aria-expanded": open, disabled, "aria-label": "Dropdown menu", $open: open, children: icon || /* @__PURE__ */ jsx(MoreOptionsVertical, { color: disabled ? "atmo5" : void 0 }) });
   const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);
   const popperStyle = {
     style: {
@@ -72,55 +60,27 @@ const HvDropDownMenu = ({
       position: "relative"
     }
   };
-  return /* @__PURE__ */ jsx(ClassNames, {
-    children: ({
-      css
-    }) => /* @__PURE__ */ jsx(StyledBaseDropDown, {
-      id,
-      className: clsx(className, dropDownMenuClasses.container, classes == null ? void 0 : classes.container),
-      classes: {
-        root: clsx(dropDownMenuClasses.root, classes == null ? void 0 : classes.root, css({
-          display: "inline-block",
-          width: "auto",
-          "&.focus-visible $icon": {
-            ...outlineStyles
-          }
-        })),
-        container: clsx(dropDownMenuClasses.baseContainer, classes == null ? void 0 : classes.baseContainer)
-      },
-      expanded: open && !disabled,
-      component: headerComponent,
-      "aria-haspopup": "menu",
-      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(StyledPanel, {
-        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: clsx(dropDownMenuClasses.menuList, classes == null ? void 0 : classes.menuList)
-          }
-        })
-      })
-    })
-  });
+  return /* @__PURE__ */ jsx(ClassNames, { children: ({
+    css
+  }) => /* @__PURE__ */ jsx(StyledBaseDropDown, { id, className: clsx(className, dropDownMenuClasses.container, classes == null ? void 0 : classes.container), classes: {
+    root: clsx(dropDownMenuClasses.root, classes == null ? void 0 : classes.root, css({
+      display: "inline-block",
+      width: "auto",
+      "&.focus-visible $icon": {
+        ...outlineStyles
+      }
+    })),
+    container: clsx(dropDownMenuClasses.baseContainer, classes == null ? void 0 : classes.baseContainer)
+  }, expanded: open && !disabled, component: headerComponent, "aria-haspopup": "menu", 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(StyledPanel, { 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: clsx(dropDownMenuClasses.menuList, classes == null ? void 0 : classes.menuList)
+  } }) }) }) });
 };
 const HvDropDownMenu$1 = withId(HvDropDownMenu);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useControlled } from \"hooks\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledBaseDropDown,\n  StyledButton,\n  StyledPanel,\n} from \"./DropDownMenu.styles\";\nimport dropDownMenuClasses, {\n  HvDropDownMenuClasses,\n} from \"./dropDownMenuClasses\";\nimport { isKeypress, keyboardCodes, outlineStyles, setId } from \"utils\";\nimport getPrevNextFocus from \"utils/focusableElementFinder\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { HvButtonVariant, HvList, HvListValue } from \"components\";\nimport { useMemo } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { withId } from \"hocs\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport type HvDropDownMenuProps = 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 */\nconst HvDropDownMenu = ({\n  id,\n  classes,\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}: HvDropDownMenuProps) => {\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown = (event) => {\n    if (isKeypress(event, keyboardCodes.Tab)) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent = (containerRef) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const headerComponent = (\n    <StyledButton\n      icon\n      variant={category}\n      id={setId(id, \"icon-button\")}\n      className={clsx(\n        dropDownMenuClasses.icon,\n        classes?.icon,\n        open && clsx(dropDownMenuClasses.iconSelected, classes?.iconSelected)\n      )}\n      aria-expanded={open}\n      disabled={disabled}\n      aria-label=\"Dropdown menu\"\n      $open={open}\n    >\n      {icon || <MoreOptionsVertical color={disabled ? \"atmo5\" : undefined} />}\n    </StyledButton>\n  );\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle = {\n    style: {\n      zIndex: theme.zIndices.tooltip,\n      width: \"auto\",\n      position: \"relative\",\n    },\n  };\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <StyledBaseDropDown\n          id={id}\n          className={clsx(\n            className,\n            dropDownMenuClasses.container,\n            classes?.container\n          )}\n          classes={{\n            root: clsx(\n              dropDownMenuClasses.root,\n              classes?.root,\n              css({\n                display: \"inline-block\",\n                width: \"auto\",\n                \"&.focus-visible $icon\": {\n                  ...outlineStyles,\n                },\n              })\n            ),\n            container: clsx(\n              dropDownMenuClasses.baseContainer,\n              classes?.baseContainer\n            ),\n          }}\n          expanded={open && !disabled}\n          component={headerComponent}\n          aria-haspopup=\"menu\"\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          <StyledPanel>\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: clsx(dropDownMenuClasses.menuList, classes?.menuList),\n              }}\n            />\n          </StyledPanel>\n        </StyledBaseDropDown>\n      )}\n    </ClassNames>\n  );\n};\n\nexport default withId(HvDropDownMenu);\n"],"names":["HvDropDownMenu","id","classes","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","open","setOpen","useControlled","Boolean","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKeypress","keyboardCodes","Tab","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","headerComponent","StyledButton","variant","clsx","dropDownMenuClasses","iconSelected","$open","children","_jsx","MoreOptionsVertical","color","undefined","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","ClassNames","css","StyledBaseDropDown","container","root","display","outlineStyles","baseContainer","component","variableWidth","e","s","onContainerCreation","popperProps","StyledPanel","HvList","values","selectable","item","onKeyDown","menuList","withId"],"mappings":"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"}
+{"version":3,"file":"DropDownMenu.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useControlled } from \"hooks\";\nimport { HvBaseProps } from \"../../types\";\nimport {\n  StyledBaseDropDown,\n  StyledButton,\n  StyledPanel,\n} from \"./DropDownMenu.styles\";\nimport dropDownMenuClasses, {\n  HvDropDownMenuClasses,\n} from \"./dropDownMenuClasses\";\nimport { isKeypress, keyboardCodes, outlineStyles, setId } from \"utils\";\nimport getPrevNextFocus from \"utils/focusableElementFinder\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { HvButtonVariant, HvList, HvListValue } from \"components\";\nimport { useMemo } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { withId } from \"hocs\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport type HvDropDownMenuProps = 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 */\nconst HvDropDownMenu = ({\n  id,\n  classes,\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}: HvDropDownMenuProps) => {\n  const [open, setOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const focusNodes = getPrevNextFocus(setId(id, \"icon-button\"));\n\n  const listId = setId(id, \"list\");\n\n  const handleClose = (event) => {\n    // this will only run if uncontrolled\n    setOpen(false);\n    onToggle?.(event, false);\n  };\n\n  // If the ESCAPE key is pressed inside the list, the close handler must be called.\n  const handleKeyDown = (event) => {\n    if (isKeypress(event, keyboardCodes.Tab)) {\n      const node = event.shiftKey ? focusNodes.prevFocus : focusNodes.nextFocus;\n      if (node) setTimeout(() => node.focus(), 0);\n      handleClose(event);\n    }\n    event.preventDefault();\n  };\n\n  const setFocusToContent = (containerRef) => {\n    containerRef?.getElementsByTagName(\"li\")[0]?.focus();\n  };\n\n  const headerComponent = (\n    <StyledButton\n      icon\n      variant={category}\n      id={setId(id, \"icon-button\")}\n      className={clsx(\n        dropDownMenuClasses.icon,\n        classes?.icon,\n        open && clsx(dropDownMenuClasses.iconSelected, classes?.iconSelected)\n      )}\n      aria-expanded={open}\n      disabled={disabled}\n      aria-label=\"Dropdown menu\"\n      $open={open}\n    >\n      {icon || <MoreOptionsVertical color={disabled ? \"atmo5\" : undefined} />}\n    </StyledButton>\n  );\n\n  const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);\n  const popperStyle = {\n    style: {\n      zIndex: theme.zIndices.tooltip,\n      width: \"auto\",\n      position: \"relative\",\n    },\n  };\n\n  return (\n    <ClassNames>\n      {({ css }) => (\n        <StyledBaseDropDown\n          id={id}\n          className={clsx(\n            className,\n            dropDownMenuClasses.container,\n            classes?.container\n          )}\n          classes={{\n            root: clsx(\n              dropDownMenuClasses.root,\n              classes?.root,\n              css({\n                display: \"inline-block\",\n                width: \"auto\",\n                \"&.focus-visible $icon\": {\n                  ...outlineStyles,\n                },\n              })\n            ),\n            container: clsx(\n              dropDownMenuClasses.baseContainer,\n              classes?.baseContainer\n            ),\n          }}\n          expanded={open && !disabled}\n          component={headerComponent}\n          aria-haspopup=\"menu\"\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          <StyledPanel>\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: clsx(dropDownMenuClasses.menuList, classes?.menuList),\n              }}\n            />\n          </StyledPanel>\n        </StyledBaseDropDown>\n      )}\n    </ClassNames>\n  );\n};\n\nexport default withId(HvDropDownMenu);\n"],"names":["HvDropDownMenu","id","classes","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","open","setOpen","useControlled","Boolean","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKeypress","keyboardCodes","Tab","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","headerComponent","clsx","dropDownMenuClasses","iconSelected","undefined","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","css","container","root","display","outlineStyles","baseContainer","e","s","item","menuList","withId"],"mappings":"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"}

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

@@ -1,7 +1,7 @@
+import { jsx } from "@emotion/react/jsx-runtime";
 import _styled from "@emotion/styled/base";
 import { transientOptions } from "../../utils/transientOptions.js";
 import { theme } from "@hitachivantara/uikit-styles";
-import { jsx } from "@emotion/react/jsx-runtime";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
 import { HvPanel } from "../Panel/Panel.js";
 import { HvButton } from "../Button/Button.js";
@@ -22,9 +22,7 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
-const StyledBaseDropDown = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(HvBaseDropdown, {
-  ...props
-}), process.env.NODE_ENV === "production" ? {
+const StyledBaseDropDown = /* @__PURE__ */ _styled((props) => /* @__PURE__ */ jsx(HvBaseDropdown, { ...props }), process.env.NODE_ENV === "production" ? {
   target: "e13q7myz2"
 } : {
   target: "e13q7myz2",

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

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.styles.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvBaseDropdown, HvButton, HvPanel } from \"components\";\nimport { transientOptions } from \"utils/transientOptions\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const StyledBaseDropDown = styled((props) => (\n  <HvBaseDropdown {...props} />\n))({\n  width: 32,\n});\n\nexport const StyledButton = styled(\n  HvButton,\n  transientOptions\n)(({ $open }: { $open: boolean }) => ({\n  position: \"relative\",\n  boxSizing: \"content-box\",\n  padding: 0,\n\n  borderRadius: theme.dropDownMenu.borderRadius,\n  border: theme.dropDownMenu.borderClosed,\n  borderBottom: \"none\",\n\n  ...($open && {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.shadows[1],\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"& svg .color0\": {\n      fill: theme.colors.acce1,\n    },\n\n    borderRadius: \"2px 2px 0px 0px\",\n    border: theme.dropDownMenu.borderOpened,\n    borderBottom: \"none\",\n  }),\n}));\n\nexport const StyledPanel = styled(HvPanel)({\n  border: theme.dropDownMenu.borderOpened,\n  borderRadius: theme.dropDownMenu.borderRadius,\n});\n"],"names":["StyledBaseDropDown","_styled","props","_jsx","HvBaseDropdown","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledButton","HvButton","_extends","transientOptions","$open","position","boxSizing","padding","borderRadius","theme","dropDownMenu","border","borderClosed","borderBottom","backgroundColor","colors","atmo1","boxShadow","shadows","fill","acce1","borderOpened","StyledPanel","HvPanel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAMA,qBAAqBC,wBAAQC,CACxCC,UAAAA,oBAACC,gBAAc;AAAA,EAAA,GAAKF;AAAK,CAAA,GAC1BG,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAEA;AAEWC,MAAAA,uCACXC,UAAQX,QAAAC,IAAAC,4BAAAU,SAAA,IAAA;AAAA,EAAAT,QAAA;AAAA,GACRU,gBAAgB,IAAAD,SAAA,IAAA;AAAA,EAAAT,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBS,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEC;AAA0B,OAAO;AAAA,EACpCC,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,SAAS;AAAA,EAETC,cAAcC,MAAMC,aAAaF;AAAAA,EACjCG,QAAQF,MAAMC,aAAaE;AAAAA,EAC3BC,cAAc;AAAA,EAEd,GAAIT,SAAS;AAAA,IACXU,iBAAiBL,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,MAAMS,QAAQ;AAAA,IAEzB,WAAW;AAAA,MACTJ,iBAAiBL,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAc;AAAA,IACdG,QAAQF,MAAMC,aAAaW;AAAAA,IAC3BR,cAAc;AAAA,EAChB;AACF,IAAEvB,QAAAC,IAAAC,aAAC,eAAA,KAAA,igEAAA;AAEI,MAAM8B,cAAqBC,wBAAAA,SAAOjC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzCiB,QAAQF,MAAMC,aAAaW;AAAAA,EAC3Bb,cAAcC,MAAMC,aAAaF;AACnC,GAAClB,QAAAC,IAAAC,aAAC,eAAA,KAAA,igEAAA;"}
+{"version":3,"file":"DropDownMenu.styles.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { HvBaseDropdown, HvButton, HvPanel } from \"components\";\nimport { transientOptions } from \"utils/transientOptions\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const StyledBaseDropDown = styled((props) => (\n  <HvBaseDropdown {...props} />\n))({\n  width: 32,\n});\n\nexport const StyledButton = styled(\n  HvButton,\n  transientOptions\n)(({ $open }: { $open: boolean }) => ({\n  position: \"relative\",\n  boxSizing: \"content-box\",\n  padding: 0,\n\n  borderRadius: theme.dropDownMenu.borderRadius,\n  border: theme.dropDownMenu.borderClosed,\n  borderBottom: \"none\",\n\n  ...($open && {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.shadows[1],\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"& svg .color0\": {\n      fill: theme.colors.acce1,\n    },\n\n    borderRadius: \"2px 2px 0px 0px\",\n    border: theme.dropDownMenu.borderOpened,\n    borderBottom: \"none\",\n  }),\n}));\n\nexport const StyledPanel = styled(HvPanel)({\n  border: theme.dropDownMenu.borderOpened,\n  borderRadius: theme.dropDownMenu.borderRadius,\n});\n"],"names":["StyledBaseDropDown","props","process","env","NODE_ENV","target","label","name","styles","map","toString","_EMOTION_STRINGIFIED_CSS_ERROR__","StyledButton","HvButton","_extends","transientOptions","$open","position","boxSizing","padding","borderRadius","theme","dropDownMenu","border","borderClosed","borderBottom","backgroundColor","colors","atmo1","boxShadow","shadows","fill","acce1","borderOpened","StyledPanel","HvPanel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAKaA,MAAAA,qBAA6BC,wBAAAA,CAAAA,UACvC,oBAAA,gBAAA,EAAmBA,GAAAA,MAAAA,CACrB,GAAAC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAACJ,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAG,MAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAD,MAAA;AAAA,EAAAC,QAAA;AAAA,EAAAC,KAAA;AAAA,EAAAC,UAAAC;AAAA,CAEA;AAEWC,MAAAA,uCACXC,UAAQX,QAAAC,IAAAC,4BAAAU,SAAA,IAAA;AAAA,EAAAT,QAAA;AAAA,GACRU,gBAAgB,IAAAD,SAAA,IAAA;AAAA,EAAAT,QAAA;AAAA,EAAAC,OAAA;AAAA,GAAhBS,gBAAgB,CACjB,EAAC,CAAC;AAAA,EAAEC;AAA0B,OAAO;AAAA,EACpCC,UAAU;AAAA,EACVC,WAAW;AAAA,EACXC,SAAS;AAAA,EAETC,cAAcC,MAAMC,aAAaF;AAAAA,EACjCG,QAAQF,MAAMC,aAAaE;AAAAA,EAC3BC,cAAc;AAAA,EAEd,GAAIT,SAAS;AAAA,IACXU,iBAAiBL,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,MAAMS,QAAQ;AAAA,IAEzB,WAAW;AAAA,MACTJ,iBAAiBL,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAc;AAAA,IACdG,QAAQF,MAAMC,aAAaW;AAAAA,IAC3BR,cAAc;AAAA,EAChB;AACF,IAAEvB,QAAAC,IAAAC,aAAC,eAAA,KAAA,igEAAA;AAEI,MAAM8B,cAAqBC,wBAAAA,SAAOjC,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAC,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAC,OAAA;AAAA,CAAA,EAAE;AAAA,EACzCiB,QAAQF,MAAMC,aAAaW;AAAAA,EAC3Bb,cAAcC,MAAMC,aAAaF;AACnC,GAAClB,QAAAC,IAAAC,aAAC,eAAA,KAAA,igEAAA;"}