@hitachivantara/uikit-react-core 5.17.0 → 5.18.1

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

@@ -1,14 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const react = require("@emotion/react");
 const MuiDialog = require("@mui/material/Dialog");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const dialogClasses = require("./dialogClasses.cjs");
 const Dialog_styles = require("./Dialog.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const withTooltip = require("../../hocs/withTooltip.cjs");
+const Button = require("../Button/Button.cjs");
 const useTheme = require("../../hooks/useTheme.cjs");
 const setId = require("../../utils/setId.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
@@ -26,7 +25,7 @@ const DialogBackdrop = (backdropProps) => {
   });
 };
 const HvDialog = ({
-  classes,
+  classes: classesProp,
   className,
   id,
   children,
@@ -38,6 +37,11 @@ const HvDialog = ({
   disableBackdropClick = false,
   ...others
 }) => {
+  const {
+    classes,
+    css,
+    cx
+  } = Dialog_styles.useClasses(classesProp);
   delete others.fullScreen;
   const {
     rootId
@@ -46,7 +50,7 @@ const HvDialog = ({
     if (bypassValidation || !disableBackdropClick) {
       onClose == null ? void 0 : onClose(event, reason);
     }
-  }, [onClose]);
+  }, [onClose, disableBackdropClick]);
   const measuredRef = React.useCallback(() => {
     if (!firstFocusable)
       return;
@@ -64,50 +68,49 @@ const HvDialog = ({
       ...backdropProps
     })
   }), [open, wrappedClose]);
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxRuntime.jsxs(MuiDialog__default.default, {
-      container: document.getElementById(rootId || "") || document.body,
-      className: cx(dialogClasses.default.root, className, classes == null ? void 0 : classes.root),
-      id,
-      ref: measuredRef,
-      open,
-      fullScreen: fullscreen,
-      onClose: (event, reason) => wrappedClose(event, void 0, reason),
-      slots,
+  return /* @__PURE__ */ jsxRuntime.jsxs(MuiDialog__default.default, {
+    container: document.getElementById(rootId || "") || document.body,
+    className: cx(className, classes.root),
+    id,
+    ref: measuredRef,
+    open,
+    fullScreen: fullscreen,
+    onClose: (event, reason) => wrappedClose(event, void 0, reason),
+    slots,
+    classes: {
+      container: css({
+        position: "relative"
+      })
+    },
+    BackdropProps: {
       classes: {
-        container: css({
-          position: "relative"
+        root: classes.background
+      }
+    },
+    PaperProps: {
+      classes: {
+        root: cx(css({
+          position: "absolute"
+        }), classes.paper, {
+          fullscreen,
+          [classes.fullscreen]: fullscreen
         })
-      },
-      BackdropProps: {
-        classes: {
-          root: cx(dialogClasses.default.background, classes == null ? void 0 : classes.background)
-        }
-      },
-      PaperProps: {
-        classes: {
-          root: cx(dialogClasses.default.paper, fullscreen && cx(dialogClasses.default.fullscreen, "fullscreen"), css(Dialog_styles.styles.paper), css({
-            position: "absolute"
-          }), classes == null ? void 0 : classes.paper, fullscreen && (classes == null ? void 0 : classes.fullscreen))
-        }
-      },
-      "aria-modal": true,
-      ...others,
-      children: [/* @__PURE__ */ jsxRuntime.jsx(Dialog_styles.StyledClose, {
-        id: setId.setId(id, "close"),
-        className: cx(dialogClasses.default.closeButton, classes == null ? void 0 : 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]
-    })
+      }
+    },
+    "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]
   });
 };
+exports.dialogClasses = Dialog_styles.staticClasses;
 exports.HvDialog = HvDialog;
 //# sourceMappingURL=Dialog.cjs.map

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 { ClassNames } from \"@emotion/react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { BackdropProps } from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils\";\nimport { withTooltip } from \"@core/hocs\";\nimport { useTheme } from \"@core/hooks\";\nimport dialogClasses, { HvDialogClasses } from \"./dialogClasses\";\nimport { StyledBackdrop, StyledClose, styles } from \"./Dialog.styles\";\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n    HvBaseProps {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Function executed on close. */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n}\n\nconst DialogBackdrop = (backdropProps: BackdropProps) => {\n  const { activeTheme, selectedMode } = useTheme();\n  return (\n    <StyledBackdrop\n      $backColor={\n        activeTheme?.colors?.modes[selectedMode].atmo4 || theme.colors.atmo4\n      }\n      {...backdropProps}\n    />\n  );\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 { rootId } = 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,\n      bypassValidation: boolean = false,\n      reason?: \"escapeKeyDown\" | \"backdropClick\"\n    ) => {\n      if (bypassValidation || !disableBackdropClick) {\n        onClose?.(event, reason);\n      }\n    },\n    [onClose]\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        <DialogBackdrop open={open} onClick={wrappedClose} {...backdropProps} />\n      ),\n    }),\n    [open, wrappedClose]\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <MuiDialog\n          container={document.getElementById(rootId || \"\") || document.body}\n          className={cx(dialogClasses.root, className, classes?.root)}\n          id={id}\n          ref={measuredRef}\n          open={open}\n          fullScreen={fullscreen}\n          onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n          slots={slots}\n          classes={{ container: css({ position: \"relative\" }) }}\n          BackdropProps={{\n            classes: {\n              root: cx(dialogClasses.background, classes?.background),\n            },\n          }}\n          PaperProps={{\n            classes: {\n              root: cx(\n                dialogClasses.paper,\n                fullscreen && cx(dialogClasses.fullscreen, \"fullscreen\"),\n                css(styles.paper),\n                css({ position: \"absolute\" }),\n                classes?.paper,\n                fullscreen && classes?.fullscreen\n              ),\n            },\n          }}\n          aria-modal\n          {...others}\n        >\n          <StyledClose\n            id={setId(id, \"close\")}\n            className={cx(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 &&\n                  React.cloneElement(c as React.ReactElement, { fullscreen })\n              )\n            : children}\n        </MuiDialog>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["DialogBackdrop","backdropProps","activeTheme","selectedMode","useTheme","StyledBackdrop","$backColor","colors","modes","atmo4","theme","HvDialog","classes","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","fullScreen","rootId","wrappedClose","useCallback","event","bypassValidation","reason","measuredRef","element","document","getElementById","focus","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","slots","useMemo","backdrop","onClick","ClassNames","css","cx","MuiDialog","container","body","dialogClasses","root","ref","undefined","position","BackdropProps","background","PaperProps","paper","styles","StyledClose","setId","closeButton","variant","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 MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { BackdropProps } from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { withTooltip } from \"@core/hocs\";\nimport { useTheme } from \"@core/hooks\";\nimport { StyledBackdrop, staticClasses, useClasses } from \"./Dialog.styles\";\nimport { HvButton } from \"..\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n    HvBaseProps {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Function executed on close. */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n}\n\nconst DialogBackdrop = (backdropProps: BackdropProps) => {\n  const { activeTheme, selectedMode } = useTheme();\n  return (\n    <StyledBackdrop\n      $backColor={\n        activeTheme?.colors?.modes[selectedMode].atmo4 || theme.colors.atmo4\n      }\n      {...backdropProps}\n    />\n  );\n};\n\nexport const HvDialog = ({\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}: HvDialogProps) => {\n  const { classes, css, cx } = useClasses(classesProp);\n  delete (others as any).fullScreen;\n\n  const { rootId } = 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,\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        <DialogBackdrop open={open} onClick={wrappedClose} {...backdropProps} />\n      ),\n    }),\n    [open, wrappedClose]\n  );\n\n  return (\n    <MuiDialog\n      container={document.getElementById(rootId || \"\") || document.body}\n      className={cx(className, classes.root)}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n      slots={slots}\n      classes={{ container: css({ position: \"relative\" }) }}\n      BackdropProps={{\n        classes: {\n          root: classes.background,\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(css({ position: \"absolute\" }), classes.paper, {\n            fullscreen,\n            [classes.fullscreen]: fullscreen,\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":["DialogBackdrop","backdropProps","activeTheme","selectedMode","useTheme","StyledBackdrop","$backColor","colors","modes","atmo4","theme","HvDialog","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","css","cx","useClasses","fullScreen","rootId","wrappedClose","useCallback","event","bypassValidation","reason","measuredRef","element","document","getElementById","focus","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","slots","useMemo","backdrop","onClick","MuiDialog","container","body","root","ref","undefined","position","BackdropProps","background","PaperProps","paper","HvButton","setId","closeButton","variant","React","Children","map","c","cloneElement"],"mappings":";;;;;;;;;;;;;;;AAiDA,MAAMA,iBAAiBA,CAACC,kBAAiC;;AACjD,QAAA;AAAA,IAAEC;AAAAA,IAAaC;AAAAA,MAAiBC,SAAS,SAAA;AAC/C,wCACGC,cAAAA,gBAAc;AAAA,IACbC,cACEJ,gDAAaK,WAAbL,mBAAqBM,MAAML,cAAcM,UAASC,kBAAMH,OAAOE;AAAAA,IAChE,GACGR;AAAAA,EAAAA,CACL;AAEL;AAEO,MAAMU,WAAWA,CAAC;AAAA,EACvBC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,OAAO;AAAA,EACPC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC,aAAa;AAAA,EACbC,uBAAuB;AAAA,EACvB,GAAGC;AACU,MAAM;AACb,QAAA;AAAA,IAAEX;AAAAA,IAASY;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,cAAAA,WAAWb,WAAW;AACnD,SAAQU,OAAeI;AAEjB,QAAA;AAAA,IAAEC;AAAAA,MAAWxB,SAAS,SAAA;AAK5B,QAAMyB,eAAeC,MAAAA,YACnB,CACEC,OACAC,mBAA4B,OAC5BC,WACG;AACCD,QAAAA,oBAAoB,CAACV,sBAAsB;AAC7CJ,yCAAUa,OAAOE;AAAAA,IACnB;AAAA,EAAA,GAEF,CAACf,SAASI,oBAAoB,CAChC;AAEMY,QAAAA,cAAcJ,MAAAA,YAAY,MAAM;AACpC,QAAI,CAACX;AAAgB;AAEfgB,UAAAA,UAAUC,SAASC,eAAelB,cAAc;AACtDgB,uCAASG;AAAAA,EAAM,GACd,CAACnB,cAAc,CAAC;AAEboB,QAAAA,qBAAqBA,MAAMC,2BAAAA,IAACC,uBAAK;AAAA,IAACC,MAAK;AAAA,EAAA,CAAgB;AAE7D,QAAMC,4BAA4BvB,cAC9BwB,YAAAA,QAAYL,oBAAoBnB,aAAa,KAAK,IAClDmB;AAEEM,QAAAA,QAAQC,MAAAA,QACZ,OAAO;AAAA,IACLC,UAAW9C,CACTuC,kBAAAA,2BAAAA,IAACxC,gBAAc;AAAA,MAACiB;AAAAA,MAAY+B,SAASnB;AAAAA,MAAa,GAAK5B;AAAAA,IAAAA,CAAgB;AAAA,EAG3E,IAAA,CAACgB,MAAMY,YAAY,CACrB;AAEA,yCACGoB,mBAAAA,SAAS;AAAA,IACRC,WAAWd,SAASC,eAAeT,UAAU,EAAE,KAAKQ,SAASe;AAAAA,IAC7DrC,WAAWW,GAAGX,WAAWF,QAAQwC,IAAI;AAAA,IACrCrC;AAAAA,IACAsC,KAAKnB;AAAAA,IACLjB;AAAAA,IACAU,YAAYN;AAAAA,IACZH,SAASA,CAACa,OAAOE,WAAWJ,aAAaE,OAAOuB,QAAWrB,MAAM;AAAA,IACjEY;AAAAA,IACAjC,SAAS;AAAA,MAAEsC,WAAW1B,IAAI;AAAA,QAAE+B,UAAU;AAAA,MAAA,CAAY;AAAA,IAAE;AAAA,IACpDC,eAAe;AAAA,MACb5C,SAAS;AAAA,QACPwC,MAAMxC,QAAQ6C;AAAAA,MAChB;AAAA,IACF;AAAA,IACAC,YAAY;AAAA,MACV9C,SAAS;AAAA,QACPwC,MAAM3B,GAAGD,IAAI;AAAA,UAAE+B,UAAU;AAAA,QAAA,CAAY,GAAG3C,QAAQ+C,OAAO;AAAA,UACrDtC;AAAAA,UACA,CAACT,QAAQS,UAAU,GAAGA;AAAAA,QAAAA,CACvB;AAAA,MACH;AAAA,IACF;AAAA,IACA,cAAU;AAAA,IAAA,GACNE;AAAAA,IAAMP,UAAA,CAEVwB,2BAAAA,IAACoB,iBAAQ;AAAA,MACP7C,IAAI8C,MAAAA,MAAM9C,IAAI,OAAO;AAAA,MACrBD,WAAWF,QAAQkD;AAAAA,MACnBC,SAAQ;AAAA,MACRf,SAAUjB,CAAAA,UAAUF,aAAaE,OAAO,MAAMuB,MAAS;AAAA,MACvD,cAAYlC;AAAAA,MAAYJ,UAExBwB,2BAAAA,IAACG,2BAA2B,EAAA;AAAA,IACpB,CAAA,GACT3B,YAAY,OAAOA,aAAa,WAC7BgD,eAAAA,QAAMC,SAASC,IACblD,UACA,CAACmD,MACCA,KAAKH,eAAAA,QAAMI,aAAaD,GAAyB;AAAA,MAAE9C;AAAAA,IAAAA,CAAY,CACnE,IACAL,QAAQ;AAAA,EAAA,CACH;AAEf;;;"}

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

@@ -5,9 +5,7 @@ const material = require("@mui/material");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const transientOptions = require("../../utils/transientOptions.cjs");
 const hexToRgbA = require("../../utils/hexToRgbA.cjs");
-const React = require("react");
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const Button = require("../Button/Button.cjs");
+const classes = require("../../utils/classes.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const _styled__default = /* @__PURE__ */ _interopDefault(_styled);
 function _extends() {
@@ -24,44 +22,40 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
-const styles = {
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvDialog", {
+  root: {},
+  background: {},
   paper: {
     color: uikitStyles.theme.colors.secondary,
     backgroundColor: uikitStyles.theme.colors.atmo1,
     boxShadow: ["none", uikitStyles.theme.colors.shadow],
     borderRadius: uikitStyles.theme.dialog.borderRadius
+  },
+  fullscreen: {},
+  closeButton: {
+    padding: 0,
+    minWidth: "auto",
+    position: "absolute",
+    top: uikitStyles.theme.space.sm,
+    right: uikitStyles.theme.space.sm,
+    width: 32,
+    height: 32
   }
-};
+});
 const StyledBackdrop = /* @__PURE__ */ _styled__default.default(material.Backdrop, process.env.NODE_ENV === "production" ? _extends({}, {
-  target: "e1x1ml1b1"
+  target: "e1x1ml1b0"
 }, transientOptions.transientOptions) : _extends({}, {
-  target: "e1x1ml1b1",
+  target: "e1x1ml1b0",
   label: "StyledBackdrop"
 }, transientOptions.transientOptions))(({
   $backColor
 }) => ({
   background: hexToRgbA.default($backColor, 0.8)
-}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9COEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9EaWFsb2cvRGlhbG9nLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEJhY2tkcm9wIGFzIE11aUJhY2tkcm9wIH0gZnJvbSBcIkBtdWkvbWF0ZXJpYWxcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IGZhZGUgZnJvbSBcIkBjb3JlL3V0aWxzL2hleFRvUmdiQVwiO1xuaW1wb3J0IHsgSHZCdXR0b24sIEh2QnV0dG9uUHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuaW1wb3J0IHsgZm9yd2FyZFJlZiB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgQ1NTSW50ZXJwb2xhdGlvbiB9IGZyb20gXCJAZW1vdGlvbi9zZXJpYWxpemVcIjtcbmltcG9ydCB7IFBvbHltb3JwaGljUmVmIH0gZnJvbSBcIkBjb3JlL3R5cGVzXCI7XG5pbXBvcnQgeyBIdkRpYWxvZ0NsYXNzZXMgfSBmcm9tIFwiLi9kaWFsb2dDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIHBhcGVyOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgYm94U2hhZG93OiBbXCJub25lXCIsIHRoZW1lLmNvbG9ycy5zaGFkb3ddLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUuZGlhbG9nLmJvcmRlclJhZGl1cyxcbiAgfSxcbn0gc2F0aXNmaWVzIFBhcnRpYWw8UmVjb3JkPGtleW9mIEh2RGlhbG9nQ2xhc3NlcywgQ1NTSW50ZXJwb2xhdGlvbj4+O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFja2Ryb3AgPSBzdHlsZWQoXG4gIE11aUJhY2tkcm9wLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRiYWNrQ29sb3IgfTogeyAkYmFja0NvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgYmFja2dyb3VuZDogZmFkZSgkYmFja0NvbG9yLCAwLjgpLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2xvc2UgPSBzdHlsZWQoXG4gIGZvcndhcmRSZWYoKHByb3BzOiBIdkJ1dHRvblByb3BzLCByZWY/OiBQb2x5bW9ycGhpY1JlZjxcImJ1dHRvblwiPikgPT4ge1xuICAgIHJldHVybiA8SHZCdXR0b24gey4uLnByb3BzfSByZWY9e3JlZn0gLz47XG4gIH0pXG4pKHtcbiAgcGFkZGluZzogMCxcbiAgbWluV2lkdGg6IFwiYXV0b1wiLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB0b3A6IHRoZW1lLnNwYWNlLnNtLFxuICByaWdodDogdGhlbWUuc3BhY2Uuc20sXG4gIHdpZHRoOiAzMixcbiAgaGVpZ2h0OiAzMixcbn0pO1xuIl19 */");
-const StyledClose = /* @__PURE__ */ _styled__default.default(React.forwardRef((props, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-    ...props,
-    ref
-  });
-}), process.env.NODE_ENV === "production" ? {
-  target: "e1x1ml1b0"
-} : {
-  target: "e1x1ml1b0",
-  label: "StyledClose"
-})({
-  padding: 0,
-  minWidth: "auto",
-  position: "absolute",
-  top: uikitStyles.theme.space.sm,
-  right: uikitStyles.theme.space.sm,
-  width: 32,
-  height: 32
-}, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJCMkIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9EaWFsb2cvRGlhbG9nLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEJhY2tkcm9wIGFzIE11aUJhY2tkcm9wIH0gZnJvbSBcIkBtdWkvbWF0ZXJpYWxcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IGZhZGUgZnJvbSBcIkBjb3JlL3V0aWxzL2hleFRvUmdiQVwiO1xuaW1wb3J0IHsgSHZCdXR0b24sIEh2QnV0dG9uUHJvcHMgfSBmcm9tIFwiQGNvcmUvY29tcG9uZW50c1wiO1xuaW1wb3J0IHsgZm9yd2FyZFJlZiB9IGZyb20gXCJyZWFjdFwiO1xuaW1wb3J0IHsgQ1NTSW50ZXJwb2xhdGlvbiB9IGZyb20gXCJAZW1vdGlvbi9zZXJpYWxpemVcIjtcbmltcG9ydCB7IFBvbHltb3JwaGljUmVmIH0gZnJvbSBcIkBjb3JlL3R5cGVzXCI7XG5pbXBvcnQgeyBIdkRpYWxvZ0NsYXNzZXMgfSBmcm9tIFwiLi9kaWFsb2dDbGFzc2VzXCI7XG5cbmV4cG9ydCBjb25zdCBzdHlsZXMgPSB7XG4gIHBhcGVyOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgYm94U2hhZG93OiBbXCJub25lXCIsIHRoZW1lLmNvbG9ycy5zaGFkb3ddLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUuZGlhbG9nLmJvcmRlclJhZGl1cyxcbiAgfSxcbn0gc2F0aXNmaWVzIFBhcnRpYWw8UmVjb3JkPGtleW9mIEh2RGlhbG9nQ2xhc3NlcywgQ1NTSW50ZXJwb2xhdGlvbj4+O1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFja2Ryb3AgPSBzdHlsZWQoXG4gIE11aUJhY2tkcm9wLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRiYWNrQ29sb3IgfTogeyAkYmFja0NvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgYmFja2dyb3VuZDogZmFkZSgkYmFja0NvbG9yLCAwLjgpLFxufSkpO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQ2xvc2UgPSBzdHlsZWQoXG4gIGZvcndhcmRSZWYoKHByb3BzOiBIdkJ1dHRvblByb3BzLCByZWY/OiBQb2x5bW9ycGhpY1JlZjxcImJ1dHRvblwiPikgPT4ge1xuICAgIHJldHVybiA8SHZCdXR0b24gey4uLnByb3BzfSByZWY9e3JlZn0gLz47XG4gIH0pXG4pKHtcbiAgcGFkZGluZzogMCxcbiAgbWluV2lkdGg6IFwiYXV0b1wiLFxuICBwb3NpdGlvbjogXCJhYnNvbHV0ZVwiLFxuICB0b3A6IHRoZW1lLnNwYWNlLnNtLFxuICByaWdodDogdGhlbWUuc3BhY2Uuc20sXG4gIHdpZHRoOiAzMixcbiAgaGVpZ2h0OiAzMixcbn0pO1xuIl19 */");
+}), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL2h2LXVpa2l0LXJlYWN0L2h2LXVpa2l0LXJlYWN0L3BhY2thZ2VzL2NvcmUvc3JjL2NvbXBvbmVudHMvRGlhbG9nL0RpYWxvZy5zdHlsZXMudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTRCOEIiLCJmaWxlIjoiL2hvbWUvcnVubmVyL3dvcmsvaHYtdWlraXQtcmVhY3QvaHYtdWlraXQtcmVhY3QvcGFja2FnZXMvY29yZS9zcmMvY29tcG9uZW50cy9EaWFsb2cvRGlhbG9nLnN0eWxlcy50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gXCJAZW1vdGlvbi9zdHlsZWRcIjtcbmltcG9ydCB7IEJhY2tkcm9wIGFzIE11aUJhY2tkcm9wIH0gZnJvbSBcIkBtdWkvbWF0ZXJpYWxcIjtcbmltcG9ydCB7IHRoZW1lIH0gZnJvbSBcIkBoaXRhY2hpdmFudGFyYS91aWtpdC1zdHlsZXNcIjtcbmltcG9ydCB7IHRyYW5zaWVudE9wdGlvbnMgfSBmcm9tIFwiQGNvcmUvdXRpbHMvdHJhbnNpZW50T3B0aW9uc1wiO1xuaW1wb3J0IGZhZGUgZnJvbSBcIkBjb3JlL3V0aWxzL2hleFRvUmdiQVwiO1xuaW1wb3J0IHsgY3JlYXRlQ2xhc3NlcyB9IGZyb20gXCJAY29yZS91dGlsc1wiO1xuXG5leHBvcnQgY29uc3QgeyBzdGF0aWNDbGFzc2VzLCB1c2VDbGFzc2VzIH0gPSBjcmVhdGVDbGFzc2VzKFwiSHZEaWFsb2dcIiwge1xuICByb290OiB7fSxcbiAgYmFja2dyb3VuZDoge30sXG4gIHBhcGVyOiB7XG4gICAgY29sb3I6IHRoZW1lLmNvbG9ycy5zZWNvbmRhcnksXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5jb2xvcnMuYXRtbzEsXG4gICAgYm94U2hhZG93OiBbXCJub25lXCIsIHRoZW1lLmNvbG9ycy5zaGFkb3ddLFxuICAgIGJvcmRlclJhZGl1czogdGhlbWUuZGlhbG9nLmJvcmRlclJhZGl1cyxcbiAgfSxcbiAgZnVsbHNjcmVlbjoge30sXG4gIGNsb3NlQnV0dG9uOiB7XG4gICAgcGFkZGluZzogMCxcbiAgICBtaW5XaWR0aDogXCJhdXRvXCIsXG4gICAgcG9zaXRpb246IFwiYWJzb2x1dGVcIixcbiAgICB0b3A6IHRoZW1lLnNwYWNlLnNtLFxuICAgIHJpZ2h0OiB0aGVtZS5zcGFjZS5zbSxcbiAgICB3aWR0aDogMzIsXG4gICAgaGVpZ2h0OiAzMixcbiAgfSxcbn0pO1xuXG5leHBvcnQgY29uc3QgU3R5bGVkQmFja2Ryb3AgPSBzdHlsZWQoXG4gIE11aUJhY2tkcm9wLFxuICB0cmFuc2llbnRPcHRpb25zXG4pKCh7ICRiYWNrQ29sb3IgfTogeyAkYmFja0NvbG9yOiBzdHJpbmcgfSkgPT4gKHtcbiAgYmFja2dyb3VuZDogZmFkZSgkYmFja0NvbG9yLCAwLjgpLFxufSkpO1xuIl19 */");
 exports.StyledBackdrop = StyledBackdrop;
-exports.StyledClose = StyledClose;
-exports.styles = styles;
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Dialog.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.styles.cjs","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Backdrop as MuiBackdrop } from \"@mui/material\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { HvButton, HvButtonProps } from \"@core/components\";\nimport { forwardRef } from \"react\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport { PolymorphicRef } from \"@core/types\";\nimport { HvDialogClasses } from \"./dialogClasses\";\n\nexport const styles = {\n  paper: {\n    color: theme.colors.secondary,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: [\"none\", theme.colors.shadow],\n    borderRadius: theme.dialog.borderRadius,\n  },\n} satisfies Partial<Record<keyof HvDialogClasses, CSSInterpolation>>;\n\nexport const StyledBackdrop = styled(\n  MuiBackdrop,\n  transientOptions\n)(({ $backColor }: { $backColor: string }) => ({\n  background: fade($backColor, 0.8),\n}));\n\nexport const StyledClose = styled(\n  forwardRef((props: HvButtonProps, ref?: PolymorphicRef<\"button\">) => {\n    return <HvButton {...props} ref={ref} />;\n  })\n)({\n  padding: 0,\n  minWidth: \"auto\",\n  position: \"absolute\",\n  top: theme.space.sm,\n  right: theme.space.sm,\n  width: 32,\n  height: 32,\n});\n"],"names":["styles","paper","color","theme","colors","secondary","backgroundColor","atmo1","boxShadow","shadow","borderRadius","dialog","StyledBackdrop","MuiBackdrop","process","env","NODE_ENV","_extends","target","transientOptions","label","$backColor","background","fade","StyledClose","_styled","forwardRef","props","ref","HvButton","padding","minWidth","position","top","space","sm","right","width","height"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAWO,MAAMA,SAAS;AAAA,EACpBC,OAAO;AAAA,IACLC,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,IACpBC,iBAAiBH,YAAAA,MAAMC,OAAOG;AAAAA,IAC9BC,WAAW,CAAC,QAAQL,kBAAMC,OAAOK,MAAM;AAAA,IACvCC,cAAcP,YAAAA,MAAMQ,OAAOD;AAAAA,EAC7B;AACF;AAEaE,MAAAA,0DACXC,SAAAA,UAAWC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACXC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAAmC,OAAO;AAAA,EAC7CC,YAAYC,UAAAA,QAAKF,YAAY,GAAG;AAClC,IAAEP,QAAAC,IAAAC,aAAC,eAAA,KAAA,qqEAAA;AAEI,MAAMQ,cAAcC,iCAAAA,QACzBC,MAAAA,WAAW,CAACC,OAAsBC,QAAmC;AACnE,wCAAQC,OAAAA,UAAQ;AAAA,IAAA,GAAKF;AAAAA,IAAOC;AAAAA,EAAAA,CAAW;AACzC,CAAC,GAACd,QAAAC,IAAAC,aAAA,eAAA;AAAA,EAAAE,QAAA;AAAA,IAAA;AAAA,EAAAA,QAAA;AAAA,EAAAE,OAAA;AAAA,CACJ,EAAE;AAAA,EACAU,SAAS;AAAA,EACTC,UAAU;AAAA,EACVC,UAAU;AAAA,EACVC,KAAK9B,YAAAA,MAAM+B,MAAMC;AAAAA,EACjBC,OAAOjC,YAAAA,MAAM+B,MAAMC;AAAAA,EACnBE,OAAO;AAAA,EACPC,QAAQ;AACV,GAACxB,QAAAC,IAAAC,aAAC,eAAA,KAAA,qqEAAA;;;;"}
+{"version":3,"file":"Dialog.styles.cjs","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import styled from \"@emotion/styled\";\nimport { Backdrop as MuiBackdrop } from \"@mui/material\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { transientOptions } from \"@core/utils/transientOptions\";\nimport fade from \"@core/utils/hexToRgbA\";\nimport { createClasses } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog\", {\n  root: {},\n  background: {},\n  paper: {\n    color: theme.colors.secondary,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: [\"none\", theme.colors.shadow],\n    borderRadius: theme.dialog.borderRadius,\n  },\n  fullscreen: {},\n  closeButton: {\n    padding: 0,\n    minWidth: \"auto\",\n    position: \"absolute\",\n    top: theme.space.sm,\n    right: theme.space.sm,\n    width: 32,\n    height: 32,\n  },\n});\n\nexport const StyledBackdrop = styled(\n  MuiBackdrop,\n  transientOptions\n)(({ $backColor }: { $backColor: string }) => ({\n  background: fade($backColor, 0.8),\n}));\n"],"names":["staticClasses","useClasses","createClasses","root","background","paper","color","theme","colors","secondary","backgroundColor","atmo1","boxShadow","shadow","borderRadius","dialog","fullscreen","closeButton","padding","minWidth","position","top","space","sm","right","width","height","StyledBackdrop","MuiBackdrop","process","env","NODE_ENV","_extends","target","transientOptions","label","$backColor","fade"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAOa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,YAAY;AAAA,EACrEC,MAAM,CAAC;AAAA,EACPC,YAAY,CAAC;AAAA,EACbC,OAAO;AAAA,IACLC,OAAOC,YAAAA,MAAMC,OAAOC;AAAAA,IACpBC,iBAAiBH,YAAAA,MAAMC,OAAOG;AAAAA,IAC9BC,WAAW,CAAC,QAAQL,kBAAMC,OAAOK,MAAM;AAAA,IACvCC,cAAcP,YAAAA,MAAMQ,OAAOD;AAAAA,EAC7B;AAAA,EACAE,YAAY,CAAC;AAAA,EACbC,aAAa;AAAA,IACXC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,KAAKd,YAAAA,MAAMe,MAAMC;AAAAA,IACjBC,OAAOjB,YAAAA,MAAMe,MAAMC;AAAAA,IACnBE,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AACF,CAAC;AAEYC,MAAAA,0DACXC,SAAAA,UAAWC,QAAAC,IAAAC,4BAAAC,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,GACXC,iBAAgB,gBAAA,IAAAF,SAAA,IAAA;AAAA,EAAAC,QAAA;AAAA,EAAAE,OAAA;AAAA,GAAhBD,iBAAAA,gBAAgB,CAClB,EAAE,CAAC;AAAA,EAAEE;AAAmC,OAAO;AAAA,EAC7ChC,YAAYiC,UAAAA,QAAKD,YAAY,GAAG;AAClC,IAAEP,QAAAC,IAAAC,aAAC,eAAA,KAAA,6vDAAA;;;;"}

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

@@ -1,11 +1,9 @@
 "use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const react = require("@emotion/react");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const DropDownMenu_styles = require("./DropDownMenu.styles.cjs");
-const dropDownMenuClasses = require("./dropDownMenuClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
 const focusableElementFinder = require("../../utils/focusableElementFinder.cjs");
@@ -19,7 +17,7 @@ const keyCheck = require("../../utils/keyboardUtils/keyCheck.cjs");
 const keyboardCodes = require("../../utils/keyboardUtils/keyboardCodes.cjs");
 const HvDropDownMenu = ({
   id: idProp,
-  classes,
+  classes: classesProp,
   className,
   icon,
   placement = "right",
@@ -34,6 +32,10 @@ const HvDropDownMenu = ({
   category = "secondaryGhost",
   ...others
 }) => {
+  const {
+    classes,
+    cx
+  } = DropDownMenu_styles.useClasses(classesProp);
   const [open, setOpen] = useControlled.useControlled(expanded, Boolean(defaultExpanded));
   const id = useUniqueId.default(idProp, "dropdown-menu");
   const focusNodes = focusableElementFinder.getPrevNextFocus(setId.setId(id, "icon-button"));
@@ -63,63 +65,60 @@ const HvDropDownMenu = ({
       position: "relative"
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, {
-      id,
-      className: cx(dropDownMenuClasses.default.container, css(DropDownMenu_styles.styles.container), className, classes == null ? void 0 : classes.container),
-      classes: {
-        root: cx(dropDownMenuClasses.default.root, css(DropDownMenu_styles.styles.root), classes == null ? void 0 : classes.root),
-        container: cx(dropDownMenuClasses.default.baseContainer, classes == null ? void 0 : classes.baseContainer)
-      },
-      expanded: open && !disabled,
-      component: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-        icon: true,
-        variant: category,
-        id: setId.setId(id, "icon-button"),
-        className: cx(dropDownMenuClasses.default.icon, open && dropDownMenuClasses.default.iconSelected, css(DropDownMenu_styles.styles.icon), open && css(DropDownMenu_styles.styles.iconSelected), classes == null ? void 0 : classes.icon, open && (classes == null ? void 0 : classes.iconSelected)),
-        "aria-expanded": open,
-        disabled,
-        "aria-label": "Dropdown menu",
-        children: icon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, {
-          color: disabled ? "secondary_60" : void 0
-        })
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseDropdown.HvBaseDropdown, {
+    id,
+    className: cx(className, classes.container),
+    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-haspopup": "menu",
-      placement,
-      variableWidth: true,
-      disablePortal,
-      onToggle: (e, s) => {
-        setOpen(s);
-        onToggle == null ? void 0 : onToggle(e, s);
-      },
+      "aria-expanded": open,
       disabled,
-      onContainerCreation: setFocusToContent,
-      popperProps: popperStyle,
-      ...others,
-      children: /* @__PURE__ */ jsxRuntime.jsx(Panel.HvPanel, {
-        className: cx(dropDownMenuClasses.default.menuListRoot, css(DropDownMenu_styles.styles.menuListRoot), classes == null ? void 0 : 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: cx(dropDownMenuClasses.default.menuList, classes == null ? void 0 : classes.menuList)
-          }
-        })
+      "aria-label": "Dropdown menu",
+      children: icon || /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.MoreOptionsVertical, {
+        color: disabled ? "secondary_60" : void 0
+      })
+    }),
+    "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__ */ 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
+        }
       })
     })
   });
 };
-const HvDropDownMenu$1 = HvDropDownMenu;
-exports.default = HvDropDownMenu$1;
+exports.dropDownMenuClasses = DropDownMenu_styles.staticClasses;
+exports.HvDropDownMenu = HvDropDownMenu;
 //# sourceMappingURL=DropDownMenu.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { useControlled, useUniqueId } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types\";\nimport {\n  isKeypress,\n  keyboardCodes,\n  setId,\n  getPrevNextFocus,\n} from \"@core/utils\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n  HvButton,\n  HvButtonVariant,\n  HvList,\n  HvListValue,\n  HvPanel,\n} from \"@core/components\";\nimport { styles } from \"./DropDownMenu.styles\";\nimport dropDownMenuClasses, {\n  HvDropDownMenuClasses,\n} from \"./dropDownMenuClasses\";\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 */\nconst HvDropDownMenu = ({\n  id: idProp,\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 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) => {\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 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    <ClassNames>\n      {({ css, cx }) => (\n        <HvBaseDropdown\n          id={id}\n          className={cx(\n            dropDownMenuClasses.container,\n            css(styles.container),\n            className,\n            classes?.container\n          )}\n          classes={{\n            root: cx(dropDownMenuClasses.root, css(styles.root), classes?.root),\n            container: cx(\n              dropDownMenuClasses.baseContainer,\n              classes?.baseContainer\n            ),\n          }}\n          expanded={open && !disabled}\n          component={\n            <HvButton\n              icon\n              variant={category}\n              id={setId(id, \"icon-button\")}\n              className={cx(\n                dropDownMenuClasses.icon,\n                open && dropDownMenuClasses.iconSelected,\n                css(styles.icon),\n                open && css(styles.iconSelected),\n                classes?.icon,\n                open && classes?.iconSelected\n              )}\n              aria-expanded={open}\n              disabled={disabled}\n              aria-label=\"Dropdown menu\"\n            >\n              {icon || (\n                <MoreOptionsVertical\n                  color={disabled ? \"secondary_60\" : undefined}\n                />\n              )}\n            </HvButton>\n          }\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          <HvPanel\n            className={cx(\n              dropDownMenuClasses.menuListRoot,\n              css(styles.menuListRoot),\n              classes?.menuListRoot\n            )}\n          >\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: cx(dropDownMenuClasses.menuList, classes?.menuList),\n              }}\n            />\n          </HvPanel>\n        </HvBaseDropdown>\n      )}\n    </ClassNames>\n  );\n};\n\nexport default HvDropDownMenu;\n"],"names":["HvDropDownMenu","id","idProp","classes","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKeypress","keyboardCodes","Tab","node","shiftKey","prevFocus","nextFocus","setTimeout","focus","preventDefault","setFocusToContent","containerRef","getElementsByTagName","condensed","useMemo","every","el","popperStyle","style","zIndex","theme","zIndices","tooltip","width","position","ClassNames","children","css","cx","HvBaseDropdown","dropDownMenuClasses","container","styles","root","baseContainer","component","HvButton","variant","iconSelected","_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 { useMemo } from \"react\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { MoreOptionsVertical } from \"@hitachivantara/uikit-react-icons\";\nimport { useControlled, useUniqueId } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types\";\nimport {\n  isKeypress,\n  keyboardCodes,\n  setId,\n  getPrevNextFocus,\n  ExtractNames,\n} from \"@core/utils\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n  HvButton,\n  HvButtonVariant,\n  HvList,\n  HvListValue,\n  HvPanel,\n} from \"@core/components\";\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 = ({\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}: HvDropDownMenuProps) => {\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) => {\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 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(className, classes.container)}\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        >\n          {icon || (\n            <MoreOptionsVertical\n              color={disabled ? \"secondary_60\" : undefined}\n            />\n          )}\n        </HvButton>\n      }\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      <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","id","idProp","classes","classesProp","className","icon","placement","dataList","disablePortal","onToggle","onClick","keepOpened","disabled","expanded","defaultExpanded","category","others","cx","useClasses","open","setOpen","useControlled","Boolean","useUniqueId","focusNodes","getPrevNextFocus","setId","listId","handleClose","event","handleKeyDown","isKeypress","keyboardCodes","Tab","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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"}

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

@@ -1,19 +1,27 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const dropDownMenuClasses = require("./dropDownMenuClasses.cjs");
+const classes = require("../../utils/classes.cjs");
 const focusUtils = require("../../utils/focusUtils.cjs");
-const styles = {
+const {
+  staticClasses,
+  useClasses
+} = classes.createClasses("HvDropDownMenu", {
+  /** Styles applied to the container. */
   container: {
     width: 32
   },
+  /** Styles applied to the BaseDropdown container. */
+  baseContainer: {},
+  /** Styles applied to the root. */
   root: {
     display: "inline-block",
     width: "auto",
-    [`&.focus-visible .${dropDownMenuClasses.default.icon}`]: {
+    "&.focus-visible $icon": {
       ...focusUtils.outlineStyles
     }
   },
+  /** Styles applied to the icon. */
   icon: {
     position: "relative",
     width: 32,
@@ -22,6 +30,7 @@ const styles = {
     borderRadius: uikitStyles.theme.dropDownMenu.borderRadius,
     border: uikitStyles.theme.dropDownMenu.borderClosed
   },
+  /** Styles applied to the icon when selected. */
   iconSelected: {
     backgroundColor: uikitStyles.theme.colors.atmo1,
     boxShadow: uikitStyles.theme.colors.shadow,
@@ -34,7 +43,11 @@ const styles = {
     borderRadius: `${uikitStyles.theme.radii.base} ${uikitStyles.theme.radii.base} 0px 0px`,
     border: uikitStyles.theme.dropDownMenu.borderOpened
   },
-  menuListRoot: {}
-};
-exports.styles = styles;
+  /** Styles applied to the list root. */
+  menuListRoot: {},
+  /** Styles applied to the list. */
+  menuList: {}
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=DropDownMenu.styles.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropDownMenu.styles.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { outlineStyles } from \"@core/utils\";\nimport { CSSInterpolation } from \"@emotion/serialize\";\nimport dropDownMenuClasses, {\n  HvDropDownMenuClasses,\n} from \"./dropDownMenuClasses\";\n\nexport const styles: Partial<\n  Record<keyof HvDropDownMenuClasses, CSSInterpolation>\n> = {\n  container: {\n    width: 32,\n  },\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n    [`&.focus-visible .${dropDownMenuClasses.icon}`]: {\n      ...outlineStyles,\n    },\n  },\n  icon: {\n    position: \"relative\",\n    width: 32,\n    boxSizing: \"border-box\",\n    padding: 0,\n    borderRadius: theme.dropDownMenu.borderRadius,\n    border: theme.dropDownMenu.borderClosed,\n  },\n  iconSelected: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"& svg .color0\": {\n      fill: theme.colors.secondary,\n    },\n\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n    border: theme.dropDownMenu.borderOpened,\n  },\n  menuListRoot: {},\n};\n"],"names":["styles","container","width","root","display","dropDownMenuClasses","icon","outlineStyles","position","boxSizing","padding","borderRadius","theme","dropDownMenu","border","borderClosed","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","radii","base","borderOpened","menuListRoot"],"mappings":";;;;;AAOO,MAAMA,SAET;AAAA,EACFC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA,EACAC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTF,OAAO;AAAA,IACP,CAAE,oBAAmBG,4BAAoBC,MAAM,GAAG;AAAA,MAChD,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAD,MAAM;AAAA,IACJE,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,YAAAA,MAAMC,aAAaF;AAAAA,IACjCG,QAAQF,YAAAA,MAAMC,aAAaE;AAAAA,EAC7B;AAAA,EACAC,cAAc;AAAA,IACZC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,YAAAA,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,YAAAA,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,YAAAA,MAAMY,MAAMC,QAAQb,kBAAMY,MAAMC;AAAAA,IACjDX,QAAQF,YAAAA,MAAMC,aAAaa;AAAAA,EAC7B;AAAA,EACAC,cAAc,CAAC;AACjB;;"}
+{"version":3,"file":"DropDownMenu.styles.cjs","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\nimport { createClasses, outlineStyles } from \"@core/utils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDropDownMenu\", {\n  /** Styles applied to the container. */\n  container: {\n    width: 32,\n  },\n  /** Styles applied to the BaseDropdown container. */\n  baseContainer: {},\n  /** Styles applied to the root. */\n  root: {\n    display: \"inline-block\",\n    width: \"auto\",\n    \"&.focus-visible $icon\": {\n      ...outlineStyles,\n    },\n  },\n  /** Styles applied to the icon. */\n  icon: {\n    position: \"relative\",\n    width: 32,\n    boxSizing: \"border-box\",\n    padding: 0,\n    borderRadius: theme.dropDownMenu.borderRadius,\n    border: theme.dropDownMenu.borderClosed,\n  },\n  /** Styles applied to the icon when selected. */\n  iconSelected: {\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: theme.colors.shadow,\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.atmo1,\n    },\n\n    \"& svg .color0\": {\n      fill: theme.colors.secondary,\n    },\n\n    borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,\n    border: theme.dropDownMenu.borderOpened,\n  },\n  /** Styles applied to the list root. */\n  menuListRoot: {},\n  /** Styles applied to the list. */\n  menuList: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","container","width","baseContainer","root","display","outlineStyles","icon","position","boxSizing","padding","borderRadius","theme","dropDownMenu","border","borderClosed","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","radii","base","borderOpened","menuListRoot","menuList"],"mappings":";;;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,WAAW;AAAA,IACTC,OAAO;AAAA,EACT;AAAA;AAAA,EAEAC,eAAe,CAAC;AAAA;AAAA,EAEhBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTH,OAAO;AAAA,IACP,yBAAyB;AAAA,MACvB,GAAGI,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,YAAAA,MAAMC,aAAaF;AAAAA,IACjCG,QAAQF,YAAAA,MAAMC,aAAaE;AAAAA,EAC7B;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,YAAAA,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,YAAAA,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,YAAAA,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,YAAAA,MAAMY,MAAMC,QAAQb,kBAAMY,MAAMC;AAAAA,IACjDX,QAAQF,YAAAA,MAAMC,aAAaa;AAAAA,EAC7B;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;;;"}

package/dist/cjs/components/Dropdown/List/List.cjs

@@ -70,7 +70,7 @@ const HvDropdownList = ({
     if (notifyChangesOnFirstRender) {
       onChange == null ? void 0 : onChange(values, false, false, true);
     }
-  }, [values]);
+  }, [values, notifyChangesOnFirstRender, onChange]);
   const handleSearch = (str) => {
     const results = list ? list.filter(({
       searchValue,