@hitachivantara/uikit-react-core 5.28.1 → 5.30.0

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

@@ -1,16 +1,16 @@
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
-import React__default, { useCallback, useMemo } from "react";
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useCallback, useMemo } from "react";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import MuiDialog from "@mui/material/Dialog";
-import MuiBackdrop from "@mui/material/Backdrop";
 import { Close } from "@hitachivantara/uikit-react-icons";
 import { theme } from "@hitachivantara/uikit-styles";
 import { setId } from "../../utils/setId.js";
-import { withTooltip } from "../../hocs/withTooltip.js";
 import { useTheme } from "../../hooks/useTheme.js";
 import { hexToRgbA } from "../../utils/hexToRgbA.js";
 import { useClasses } from "./Dialog.styles.js";
 import { staticClasses } from "./Dialog.styles.js";
+import { DialogContext } from "./context.js";
+import { HvTooltip } from "../Tooltip/Tooltip.js";
 import { HvButton } from "../Button/Button.js";
 const HvDialog = (props) => {
   const {
@@ -32,27 +32,19 @@ const HvDialog = (props) => {
     css,
     cx
   } = useClasses(classesProp);
-  delete others.fullScreen;
   const {
     rootId,
     colors
   } = useTheme();
-  const wrappedClose = useCallback((event, bypassValidation = false, reason) => {
-    if (bypassValidation || !disableBackdropClick) {
-      onClose == null ? void 0 : onClose(event, reason);
-    }
-  }, [onClose, disableBackdropClick]);
   const measuredRef = useCallback(() => {
     if (!firstFocusable)
       return;
     const element = document.getElementById(firstFocusable);
     element == null ? void 0 : element.focus();
   }, [firstFocusable]);
-  const closeButtonDisplay = () => /* @__PURE__ */ jsx(Close, { role: "presentation" });
-  const CloseButtonTooltipWrapper = buttonTitle ? withTooltip(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
-  const slots = useMemo(() => ({
-    backdrop: (backdropProps) => /* @__PURE__ */ jsx(MuiBackdrop, { open, onClick: wrappedClose, ...backdropProps })
-  }), [open, wrappedClose]);
+  const contextValue = useMemo(() => ({
+    fullscreen
+  }), [fullscreen]);
   return /* @__PURE__ */ jsxs(MuiDialog, { container: typeof window !== "undefined" ? (
     // TODO: review
     // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc
@@ -61,7 +53,11 @@ const HvDialog = (props) => {
     container: css({
       position: "relative"
     })
-  }, id, ref: measuredRef, open, fullScreen: fullscreen, onClose: (event, reason) => wrappedClose(event, void 0, reason), slots, slotProps: {
+  }, id, ref: measuredRef, open, fullScreen: fullscreen, onClose: (event, reason) => {
+    if (disableBackdropClick)
+      return;
+    onClose == null ? void 0 : onClose(event, reason);
+  }, slotProps: {
     backdrop: {
       classes: {
         root: cx(css({
@@ -78,10 +74,8 @@ const HvDialog = (props) => {
       })
     }
   }, "aria-modal": true, ...others, children: [
-    /* @__PURE__ */ jsx(HvButton, { id: setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: (event) => wrappedClose(event, true, void 0), "aria-label": buttonTitle, children: /* @__PURE__ */ jsx(CloseButtonTooltipWrapper, {}) }),
-    children && typeof children === "object" ? React__default.Children.map(children, (c) => c && React__default.cloneElement(c, {
-      fullscreen
-    })) : children
+    /* @__PURE__ */ jsx(HvTooltip, { placement: "top", title: buttonTitle, children: /* @__PURE__ */ jsx(HvButton, { id: setId(id, "close"), className: classes.closeButton, variant: "secondaryGhost", onClick: (event) => onClose == null ? void 0 : onClose(event, void 0), children: /* @__PURE__ */ jsx(Close, { role: "none" }) }) }),
+    /* @__PURE__ */ jsx(DialogContext.Provider, { value: contextValue, children })
   ] });
 };
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport MuiBackdrop from \"@mui/material/Backdrop\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n    HvBaseProps {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Function executed on close. */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  delete (others as any).fullScreen;\n\n  const { rootId, colors } = useTheme();\n\n  // Because the `disableBackdropClick` property was deprecated in MUI5\n  // and we want to maintain that functionality to the user we're wrapping\n  // the onClose call here to make that check.\n  const wrappedClose = useCallback(\n    (\n      event: any,\n      bypassValidation: boolean = false,\n      reason?: \"escapeKeyDown\" | \"backdropClick\"\n    ) => {\n      if (bypassValidation || !disableBackdropClick) {\n        onClose?.(event, reason);\n      }\n    },\n    [onClose, disableBackdropClick]\n  );\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  const slots = useMemo<MuiDialogProps[\"slots\"]>(\n    () => ({\n      backdrop: (backdropProps) => (\n        <MuiBackdrop open={open} onClick={wrappedClose} {...backdropProps} />\n      ),\n    }),\n    [open, wrappedClose]\n  );\n\n  return (\n    <MuiDialog\n      container={\n        typeof window !== \"undefined\"\n          ? // TODO: review\n            // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc\n            document.getElementById(rootId || \"\") || document.body\n          : undefined\n      }\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n      slots={slots}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: cx(\n              css({\n                background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4, 0.8),\n              }),\n              classes.background\n            ),\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            }\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={(event) => wrappedClose(event, true, undefined)}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children && typeof children === \"object\"\n        ? React.Children.map(\n            children,\n            (c: React.ReactNode) =>\n              c && React.cloneElement(c as React.ReactElement, { fullscreen })\n          )\n        : children}\n    </MuiDialog>\n  );\n};\n"],"names":["HvDialog","props","variant","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","useDefaultProps","css","cx","useClasses","fullScreen","rootId","colors","useTheme","wrappedClose","useCallback","event","bypassValidation","reason","measuredRef","element","document","getElementById","focus","closeButtonDisplay","CloseButtonTooltipWrapper","withTooltip","slots","useMemo","backdrop","backdropProps","window","body","undefined","root","container","position","background","hexToRgbA","atmo4","theme","paper","statusBar","setId","closeButton","React","Children","map","c","cloneElement"],"mappings":"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"}
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { HvTooltip } from \"@core/components/Tooltip\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\n\nimport { staticClasses, useClasses } from \"./Dialog.styles\";\nimport { DialogContext } from \"./context\";\n\nexport { staticClasses as dialogClasses };\n\nexport type HvDialogClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n    HvBaseProps {\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (event: any, reason?: \"escapeKeyDown\" | \"backdropClick\") => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /**\n   * Element id that should be focus when the Dialog opens.\n   * Auto-focusing elements can cause usability issues, so this should be avoided.\n   * @deprecated Use `autoFocus` on the element instead, if auto-focusing is required.\n   */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n  /** Variant of the dialog. Adds a status bar to the top of the dialog. If not provided, no status bar is added. */\n  variant?: \"success\" | \"error\" | \"warning\";\n  /** @ignore */\n  ref?: MuiDialogProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDialogProps[\"component\"];\n}\n\nexport const HvDialog = (props: HvDialogProps) => {\n  const {\n    variant,\n    classes: classesProp,\n    className,\n    id,\n    children,\n    open = false,\n    onClose,\n    firstFocusable,\n    buttonTitle = \"Close\",\n    fullscreen = false,\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { rootId, colors } = useTheme();\n\n  const measuredRef = useCallback(() => {\n    if (!firstFocusable) return;\n\n    const element = document.getElementById(firstFocusable);\n    element?.focus();\n  }, [firstFocusable]);\n\n  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);\n\n  return (\n    <MuiDialog\n      container={\n        typeof window !== \"undefined\"\n          ? // TODO: review\n            // eslint-disable-next-line ssr-friendly/no-dom-globals-in-react-fc\n            document.getElementById(rootId || \"\") || document.body\n          : undefined\n      }\n      className={cx(classes.root, className)}\n      classes={{ container: css({ position: \"relative\" }) }}\n      id={id}\n      ref={measuredRef}\n      open={open}\n      fullScreen={fullscreen}\n      onClose={(event, reason) => {\n        // `disableBackdropClick` property was removed in MUI5\n        // and we want to maintain that functionality\n        if (disableBackdropClick) return;\n\n        onClose?.(event, reason);\n      }}\n      slotProps={{\n        backdrop: {\n          classes: {\n            root: cx(\n              css({\n                background: hexToRgbA(colors?.atmo4 || theme.colors.atmo4, 0.8),\n              }),\n              classes.background\n            ),\n          },\n        },\n      }}\n      PaperProps={{\n        classes: {\n          root: cx(\n            css({ position: \"absolute\" }),\n            classes.paper,\n            variant && cx(classes.statusBar, classes[variant]),\n            {\n              [classes.fullscreen]: fullscreen,\n            }\n          ),\n        },\n      }}\n      aria-modal\n      {...others}\n    >\n      <HvTooltip placement=\"top\" title={buttonTitle}>\n        <HvButton\n          id={setId(id, \"close\")}\n          className={classes.closeButton}\n          variant=\"secondaryGhost\"\n          onClick={(event) => onClose?.(event, undefined)}\n        >\n          <Close role=\"none\" />\n        </HvButton>\n      </HvTooltip>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":["HvDialog","props","variant","classes","classesProp","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","useDefaultProps","css","cx","useClasses","rootId","colors","useTheme","measuredRef","useCallback","element","document","getElementById","focus","contextValue","useMemo","window","body","undefined","root","container","position","event","reason","backdrop","background","hexToRgbA","atmo4","theme","paper","statusBar","setId","closeButton"],"mappings":";;;;;;;;;;;;;;AAwDaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,OAAO;AAAA,IACPC;AAAAA,IACAC;AAAAA,IACAC,cAAc;AAAA,IACdC,aAAa;AAAA,IACbC,uBAAuB;AAAA,IACvB,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYd,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASa;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWd,WAAW;AAC7C,QAAA;AAAA,IAAEe;AAAAA,IAAQC;AAAAA,MAAWC,SAAS;AAE9BC,QAAAA,cAAcC,YAAY,MAAM;AACpC,QAAI,CAACb;AAAgB;AAEfc,UAAAA,UAAUC,SAASC,eAAehB,cAAc;AACtDc,uCAASG;AAAAA,EAAM,GACd,CAACjB,cAAc,CAAC;AAEbkB,QAAAA,eAAeC,QAAQ,OAAO;AAAA,IAAEjB;AAAAA,EAAAA,IAAe,CAACA,UAAU,CAAC;AAEjE,SACG,qBAAA,WAAA,EACC,WACE,OAAOkB,WAAW;AAAA;AAAA;AAAA,IAGdL,SAASC,eAAeP,UAAU,EAAE,KAAKM,SAASM;AAAAA,MAClDC,QAEN,WAAWf,GAAGd,QAAQ8B,MAAM5B,SAAS,GACrC,SAAS;AAAA,IAAE6B,WAAWlB,IAAI;AAAA,MAAEmB,UAAU;AAAA,IAAA,CAAY;AAAA,EAAA,GAClD,IACA,KAAKb,aACL,MACA,YAAYV,YACZ,SAAS,CAACwB,OAAOC,WAAW;AAGtBxB,QAAAA;AAAsB;AAE1BJ,uCAAU2B,OAAOC;AAAAA,KAEnB,WAAW;AAAA,IACTC,UAAU;AAAA,MACRnC,SAAS;AAAA,QACP8B,MAAMhB,GACJD,IAAI;AAAA,UACFuB,YAAYC,WAAUpB,iCAAQqB,UAASC,MAAMtB,OAAOqB,OAAO,GAAG;AAAA,QAAA,CAC/D,GACDtC,QAAQoC,UACV;AAAA,MACF;AAAA,IACF;AAAA,KAEF,YAAY;AAAA,IACVpC,SAAS;AAAA,MACP8B,MAAMhB,GACJD,IAAI;AAAA,QAAEmB,UAAU;AAAA,MAAA,CAAY,GAC5BhC,QAAQwC,OACRzC,WAAWe,GAAGd,QAAQyC,WAAWzC,QAAQD,OAAO,CAAC,GACjD;AAAA,QACE,CAACC,QAAQS,UAAU,GAAGA;AAAAA,MAAAA,CAE1B;AAAA,IACF;AAAA,EAEF,GAAA,cAAU,MACV,GAAIE,QAEJ,UAAA;AAAA,IAAA,oBAAC,WAAU,EAAA,WAAU,OAAM,OAAOH,aAChC,UAAA,oBAAC,UACC,EAAA,IAAIkC,MAAMvC,IAAI,OAAO,GACrB,WAAWH,QAAQ2C,aACnB,SAAQ,kBACR,SAAUV,CAAU3B,UAAAA,mCAAU2B,OAAOJ,SAErC,UAAA,oBAAC,OAAM,EAAA,MAAK,OAAM,CAAA,EACpB,CAAA,GACF;AAAA,wBACC,cAAc,UAAd,EAAuB,OAAOJ,cAC5BrB,UACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

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

@@ -10,7 +10,7 @@ const {
     color: theme.colors.secondary,
     backgroundColor: theme.colors.atmo1,
     boxShadow: ["none", theme.colors.shadow],
-    borderRadius: theme.dialog.borderRadius
+    borderRadius: theme.radii.round
   },
   fullscreen: {},
   closeButton: {

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.styles.js","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\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  statusBar: {\n    borderTopLeftRadius: 0,\n    borderTopRightRadius: 0,\n    borderTopWidth: 4,\n    borderTopStyle: \"solid\",\n  },\n  success: {\n    borderTopColor: theme.colors.positive,\n  },\n  error: {\n    borderTopColor: theme.colors.negative,\n  },\n  warning: {\n    borderTopColor: theme.colors.warning,\n  },\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","statusBar","borderTopLeftRadius","borderTopRightRadius","borderTopWidth","borderTopStyle","success","borderTopColor","positive","error","negative","warning"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM,CAAC;AAAA,EACPC,YAAY,CAAC;AAAA,EACbC,OAAO;AAAA,IACLC,OAAOC,MAAMC,OAAOC;AAAAA,IACpBC,iBAAiBH,MAAMC,OAAOG;AAAAA,IAC9BC,WAAW,CAAC,QAAQL,MAAMC,OAAOK,MAAM;AAAA,IACvCC,cAAcP,MAAMQ,OAAOD;AAAAA,EAC7B;AAAA,EACAE,YAAY,CAAC;AAAA,EACbC,aAAa;AAAA,IACXC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,KAAKd,MAAMe,MAAMC;AAAAA,IACjBC,OAAOjB,MAAMe,MAAMC;AAAAA,IACnBE,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AAAA,EACAC,WAAW;AAAA,IACTC,qBAAqB;AAAA,IACrBC,sBAAsB;AAAA,IACtBC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,EAClB;AAAA,EACAC,SAAS;AAAA,IACPC,gBAAgB1B,MAAMC,OAAO0B;AAAAA,EAC/B;AAAA,EACAC,OAAO;AAAA,IACLF,gBAAgB1B,MAAMC,OAAO4B;AAAAA,EAC/B;AAAA,EACAC,SAAS;AAAA,IACPJ,gBAAgB1B,MAAMC,OAAO6B;AAAAA,EAC/B;AACF,CAAC;"}
+{"version":3,"file":"Dialog.styles.js","sources":["../../../../src/components/Dialog/Dialog.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\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.radii.round,\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  statusBar: {\n    borderTopLeftRadius: 0,\n    borderTopRightRadius: 0,\n    borderTopWidth: 4,\n    borderTopStyle: \"solid\",\n  },\n  success: {\n    borderTopColor: theme.colors.positive,\n  },\n  error: {\n    borderTopColor: theme.colors.negative,\n  },\n  warning: {\n    borderTopColor: theme.colors.warning,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","background","paper","color","theme","colors","secondary","backgroundColor","atmo1","boxShadow","shadow","borderRadius","radii","round","fullscreen","closeButton","padding","minWidth","position","top","space","sm","right","width","height","statusBar","borderTopLeftRadius","borderTopRightRadius","borderTopWidth","borderTopStyle","success","borderTopColor","positive","error","negative","warning"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,YAAY;AAAA,EACrEC,MAAM,CAAC;AAAA,EACPC,YAAY,CAAC;AAAA,EACbC,OAAO;AAAA,IACLC,OAAOC,MAAMC,OAAOC;AAAAA,IACpBC,iBAAiBH,MAAMC,OAAOG;AAAAA,IAC9BC,WAAW,CAAC,QAAQL,MAAMC,OAAOK,MAAM;AAAA,IACvCC,cAAcP,MAAMQ,MAAMC;AAAAA,EAC5B;AAAA,EACAC,YAAY,CAAC;AAAA,EACbC,aAAa;AAAA,IACXC,SAAS;AAAA,IACTC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,KAAKf,MAAMgB,MAAMC;AAAAA,IACjBC,OAAOlB,MAAMgB,MAAMC;AAAAA,IACnBE,OAAO;AAAA,IACPC,QAAQ;AAAA,EACV;AAAA,EACAC,WAAW;AAAA,IACTC,qBAAqB;AAAA,IACrBC,sBAAsB;AAAA,IACtBC,gBAAgB;AAAA,IAChBC,gBAAgB;AAAA,EAClB;AAAA,EACAC,SAAS;AAAA,IACPC,gBAAgB3B,MAAMC,OAAO2B;AAAAA,EAC/B;AAAA,EACAC,OAAO;AAAA,IACLF,gBAAgB3B,MAAMC,OAAO6B;AAAAA,EAC/B;AAAA,EACAC,SAAS;AAAA,IACPJ,gBAAgB3B,MAAMC,OAAO8B;AAAAA,EAC/B;AACF,CAAC;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Title.js","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n  DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { iconVariant } from \"@core/utils/iconVariant\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./Title.styles\";\n\nexport { staticClasses as dialogTitleClasses };\n\nexport type HvDialogTitleClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDialogTitleVariant =\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"default\";\n\nexport interface HvDialogTitleProps\n  extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\">,\n    HvBaseProps<HTMLSpanElement, \"color\"> {\n  /** Variant of the dialog title. */\n  variant?: HvDialogTitleVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogTitleClasses;\n}\n\nexport const HvDialogTitle = (props: HvDialogTitleProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    variant = \"default\",\n    showIcon = true,\n    customIcon = null,\n    ...others\n  } = useDefaultProps(\"HvDialogTitle\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n\n  const { activeTheme } = useTheme();\n\n  const isString = typeof children === \"string\";\n\n  const { fullscreen } = others as any;\n  delete (others as any).fullscreen;\n\n  const icon = customIcon || (showIcon && iconVariant(variant));\n\n  return (\n    <MuiDialogTitle\n      className={cx(\n        !fullscreen && css({ flex: 1 }),\n        classes.root,\n        {\n          [classes.fullscreen]: fullscreen,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.messageContainer}>\n        {icon}\n        <div className={cx({ [classes.textWithIcon]: !!icon })}>\n          {!isString && children}\n          {isString && (\n            <HvTypography variant={activeTheme?.dialog.titleVariant}>\n              {children}\n            </HvTypography>\n          )}\n        </div>\n      </div>\n    </MuiDialogTitle>\n  );\n};\n"],"names":["HvDialogTitle","props","classes","classesProp","className","children","variant","showIcon","customIcon","others","useDefaultProps","css","cx","useClasses","activeTheme","useTheme","isString","fullscreen","icon","iconVariant","flex","root","messageContainer","textWithIcon","dialog","titleVariant"],"mappings":";;;;;;;;AAqCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAa;AAAA,IACb,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBT,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE7C,QAAA;AAAA,IAAEW;AAAAA,MAAgBC,SAAS;AAE3BC,QAAAA,WAAW,OAAOX,aAAa;AAE/B,QAAA;AAAA,IAAEY;AAAAA,EAAeR,IAAAA;AACvB,SAAQA,OAAeQ;AAEvB,QAAMC,OAAOV,cAAeD,YAAYY,YAAYb,OAAO;AAE3D,6BACG,gBACC,EAAA,WAAWM,GACT,CAACK,cAAcN,IAAI;AAAA,IAAES,MAAM;AAAA,EAAA,CAAG,GAC9BlB,QAAQmB,MACR;AAAA,IACE,CAACnB,QAAQe,UAAU,GAAGA;AAAAA,EACxB,GACAb,SACF,GACA,GAAIK,QAEJ,UAAC,qBAAA,OAAA,EAAI,WAAWP,QAAQoB,kBACrBJ,UAAAA;AAAAA,IAAAA;AAAAA,IACD,qBAAC,OAAI,EAAA,WAAWN,GAAG;AAAA,MAAE,CAACV,QAAQqB,YAAY,GAAG,CAAC,CAACL;AAAAA,IAAM,CAAA,GAClD,UAAA;AAAA,MAAA,CAACF,YAAYX;AAAAA,MACbW,YACE,oBAAA,cAAA,EAAa,SAASF,2CAAaU,OAAOC,cACxCpB,UACH;AAAA,IAAA,GAEJ;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"Title.js","sources":["../../../../../src/components/Dialog/Title/Title.tsx"],"sourcesContent":["import MuiDialogTitle, {\n  DialogTitleProps as MuiDialogTitleProps,\n} from \"@mui/material/DialogTitle\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { iconVariant } from \"@core/utils/iconVariant\";\n\nimport { staticClasses, useClasses } from \"./Title.styles\";\nimport { useDialogContext } from \"../context\";\n\nexport { staticClasses as dialogTitleClasses };\n\nexport type HvDialogTitleClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDialogTitleVariant =\n  | \"success\"\n  | \"warning\"\n  | \"error\"\n  | \"info\"\n  | \"default\";\n\nexport interface HvDialogTitleProps\n  extends Omit<MuiDialogTitleProps, \"variant\" | \"classes\"> {\n  /** Variant of the dialog title. */\n  variant?: HvDialogTitleVariant;\n  /** Controls if the associated icon to the variant should be shown. */\n  showIcon?: boolean;\n  /** Custom icon to replace the variant default. */\n  customIcon?: React.ReactNode;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogTitleClasses;\n}\n\nexport const HvDialogTitle = (props: HvDialogTitleProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    variant = \"default\",\n    showIcon = true,\n    customIcon = null,\n    ...others\n  } = useDefaultProps(\"HvDialogTitle\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { fullscreen } = useDialogContext();\n\n  const isString = typeof children === \"string\";\n\n  const icon = customIcon || (showIcon && iconVariant(variant));\n\n  return (\n    <MuiDialogTitle\n      className={cx(\n        !fullscreen && css({ flex: 1 }),\n        classes.root,\n        {\n          [classes.fullscreen]: fullscreen,\n        },\n        className\n      )}\n      {...others}\n    >\n      <div className={classes.messageContainer}>\n        {icon}\n        <div className={cx({ [classes.textWithIcon]: !!icon })}>\n          {!isString ? (\n            children\n          ) : (\n            <HvTypography variant=\"title4\" className={classes.titleText}>\n              {children}\n            </HvTypography>\n          )}\n        </div>\n      </div>\n    </MuiDialogTitle>\n  );\n};\n"],"names":["HvDialogTitle","props","classes","classesProp","className","children","variant","showIcon","customIcon","others","useDefaultProps","css","cx","useClasses","fullscreen","useDialogContext","isString","icon","iconVariant","flex","root","messageContainer","textWithIcon","titleText"],"mappings":";;;;;;;;AAmCaA,MAAAA,gBAAgBA,CAACC,UAA8B;AACpD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,UAAU;AAAA,IACVC,WAAW;AAAA,IACXC,aAAa;AAAA,IACb,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,iBAAiBT,KAAK;AAEpC,QAAA;AAAA,IAAEC;AAAAA,IAASS;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAC7C,QAAA;AAAA,IAAEW;AAAAA,MAAeC,iBAAiB;AAElCC,QAAAA,WAAW,OAAOX,aAAa;AAErC,QAAMY,OAAOT,cAAeD,YAAYW,YAAYZ,OAAO;AAE3D,6BACG,gBACC,EAAA,WAAWM,GACT,CAACE,cAAcH,IAAI;AAAA,IAAEQ,MAAM;AAAA,EAAA,CAAG,GAC9BjB,QAAQkB,MACR;AAAA,IACE,CAAClB,QAAQY,UAAU,GAAGA;AAAAA,EACxB,GACAV,SACF,GACA,GAAIK,QAEJ,UAAC,qBAAA,OAAA,EAAI,WAAWP,QAAQmB,kBACrBJ,UAAAA;AAAAA,IAAAA;AAAAA,IACD,oBAAC,OAAI,EAAA,WAAWL,GAAG;AAAA,MAAE,CAACV,QAAQoB,YAAY,GAAG,CAAC,CAACL;AAAAA,IAAAA,CAAM,GAClD,UAACD,CAAAA,WACAX,WAEA,oBAAC,cAAa,EAAA,SAAQ,UAAS,WAAWH,QAAQqB,WAC/ClB,UACH,EAEJ,CAAA;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}

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

@@ -17,7 +17,8 @@ const {
     marginLeft: theme.space.xs,
     // 32px is the icon width
     marginRight: `calc(32px + ${theme.space.xs})`
-  }
+  },
+  titleText: {}
 });
 export {
   staticClasses,

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

@@ -1 +1 @@
-{"version":3,"file":"Title.styles.js","sources":["../../../../../src/components/Dialog/Title/Title.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Title\", {\n  root: { padding: theme.space.sm, margin: 0 },\n  fullscreen: {},\n  messageContainer: { display: \"flex\", alignItems: \"center\" },\n  textWithIcon: {\n    marginLeft: theme.space.xs,\n    // 32px is the icon width\n    marginRight: `calc(32px + ${theme.space.xs})`,\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","space","sm","margin","fullscreen","messageContainer","display","alignItems","textWithIcon","marginLeft","xs","marginRight"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IAAEC,SAASC,MAAMC,MAAMC;AAAAA,IAAIC,QAAQ;AAAA,EAAE;AAAA,EAC3CC,YAAY,CAAC;AAAA,EACbC,kBAAkB;AAAA,IAAEC,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAS;AAAA,EAC1DC,cAAc;AAAA,IACZC,YAAYT,MAAMC,MAAMS;AAAAA;AAAAA,IAExBC,aAAc,eAAcX,MAAMC,MAAMS,EAAG;AAAA,EAC7C;AACF,CAAC;"}
+{"version":3,"file":"Title.styles.js","sources":["../../../../../src/components/Dialog/Title/Title.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Title\", {\n  root: { padding: theme.space.sm, margin: 0 },\n  fullscreen: {},\n  messageContainer: { display: \"flex\", alignItems: \"center\" },\n  textWithIcon: {\n    marginLeft: theme.space.xs,\n    // 32px is the icon width\n    marginRight: `calc(32px + ${theme.space.xs})`,\n  },\n  titleText: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","padding","theme","space","sm","margin","fullscreen","messageContainer","display","alignItems","textWithIcon","marginLeft","xs","marginRight","titleText"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,kBAAkB;AAAA,EAC3EC,MAAM;AAAA,IAAEC,SAASC,MAAMC,MAAMC;AAAAA,IAAIC,QAAQ;AAAA,EAAE;AAAA,EAC3CC,YAAY,CAAC;AAAA,EACbC,kBAAkB;AAAA,IAAEC,SAAS;AAAA,IAAQC,YAAY;AAAA,EAAS;AAAA,EAC1DC,cAAc;AAAA,IACZC,YAAYT,MAAMC,MAAMS;AAAAA;AAAAA,IAExBC,aAAc,eAAcX,MAAMC,MAAMS,EAAG;AAAA,EAC7C;AAAA,EACAE,WAAW,CAAC;AACd,CAAC;"}

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

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+const DialogContext = createContext({
+  fullscreen: false
+});
+const useDialogContext = () => useContext(DialogContext);
+export {
+  DialogContext,
+  useDialogContext
+};
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../../src/components/Dialog/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport const DialogContext = createContext({ fullscreen: false });\n\nexport const useDialogContext = () => useContext(DialogContext);\n"],"names":["DialogContext","createContext","fullscreen","useDialogContext","useContext"],"mappings":";AAEO,MAAMA,gBAAgBC,cAAc;AAAA,EAAEC,YAAY;AAAM,CAAC;AAEnDC,MAAAA,mBAAmBA,MAAMC,WAAWJ,aAAa;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { hexToRgbA } from \"@core/utils/hexToRgbA\";\nimport { setId } from \"@core/utils/setId\";\nimport { checkValidHexColorValue } from \"@core/utils/checkValidHexColorValue\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { getVarValue } from \"@core/utils/theme\";\nimport { HvButton } from \"@core/components/Button\";\nimport { useTheme } from \"@core/hooks/useTheme\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n  extends MuiDrawerProps,\n    Omit<MuiDrawerProps, \"classes\">,\n    HvBaseProps<HTMLDivElement> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\nconst getBackgroundColor = (color: string) => {\n  return checkValidHexColorValue(color) ? hexToRgbA(color, 0.8) : color;\n};\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, css, cx } = useClasses(classesProp);\n  const { colors, activeTheme, rootId } = useTheme();\n\n  const [backgroundColorValue, setBackgroundColorValue] = useState<string>(\n    getVarValue(theme.drawer.backDropBackgroundColor, rootId) || \"\"\n  );\n\n  const closeButtonDisplay = () => <Close role=\"none\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  const [backgroundColor, setBackgroundColor] = useState(\n    getBackgroundColor(backgroundColorValue)\n  );\n\n  useEffect(() => {\n    setBackgroundColorValue(\n      getVarValue(theme.drawer.backDropBackgroundColor, rootId) ||\n        activeTheme?.drawer.backDropBackgroundColor ||\n        \"\"\n    );\n\n    setBackgroundColor(getBackgroundColor(backgroundColorValue));\n  }, [\n    colors,\n    backgroundColorValue,\n    setBackgroundColor,\n    rootId,\n    activeTheme?.drawer.backDropBackgroundColor,\n  ]);\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      BackdropProps={{\n        classes: {\n          root: cx(css({ backgroundColor }), classes.background),\n        },\n      }}\n      onClose={onClose}\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["getBackgroundColor","color","checkValidHexColorValue","hexToRgbA","HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","others","useDefaultProps","css","cx","useClasses","colors","activeTheme","rootId","useTheme","backgroundColorValue","setBackgroundColorValue","useState","getVarValue","theme","drawer","backDropBackgroundColor","closeButtonDisplay","CloseButtonTooltipWrapper","withTooltip","backgroundColor","setBackgroundColor","useEffect","MuiDrawer","root","paper","background","setId","closeButton"],"mappings":";;;;;;;;;;;;;;;AA0EA,MAAMA,qBAAqBA,CAACC,UAAkB;AAC5C,SAAOC,wBAAwBD,KAAK,IAAIE,UAAUF,OAAO,GAAG,IAAIA;AAClE;AAOaG,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACd,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYX,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASU;AAAAA,IAAKC;AAAAA,EAAAA,IAAOC,WAAWX,WAAW;AAC7C,QAAA;AAAA,IAAEY;AAAAA,IAAQC;AAAAA,IAAaC;AAAAA,MAAWC,SAAS;AAE3C,QAAA,CAACC,sBAAsBC,uBAAuB,IAAIC,SACtDC,YAAYC,MAAMC,OAAOC,yBAAyBR,MAAM,KAAK,EAC/D;AAEA,QAAMS,qBAAqBA,MAAO,oBAAA,OAAA,EAAM,MAAK,OAAS,CAAA;AAEtD,QAAMC,4BAA4BlB,cAC9BmB,YAAYF,oBAAoBjB,aAAa,KAAK,IAClDiB;AAEJ,QAAM,CAACG,iBAAiBC,kBAAkB,IAAIT,SAC5C1B,mBAAmBwB,oBAAoB,CACzC;AAEAY,YAAU,MAAM;AAEZT,4BAAAA,YAAYC,MAAMC,OAAOC,yBAAyBR,MAAM,MACtDD,2CAAaQ,OAAOC,4BACpB,EACJ;AAEmB9B,uBAAAA,mBAAmBwB,oBAAoB,CAAC;AAAA,EAAA,GAC1D,CACDJ,QACAI,sBACAW,oBACAb,QACAD,2CAAaQ,OAAOC,uBAAuB,CAC5C;AAGC,SAAA,qBAACO,QACC,EAAA,WAAWnB,GAAGX,QAAQ+B,MAAMhC,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,IACVC,SAAS;AAAA,MACP+B,MAAM/B,QAAQgC;AAAAA,IAChB;AAAA,KAEF,eAAe;AAAA,IACbhC,SAAS;AAAA,MACP+B,MAAMpB,GAAGD,IAAI;AAAA,QAAEiB;AAAAA,MAAAA,CAAiB,GAAG3B,QAAQiC,UAAU;AAAA,IACvD;AAAA,EAAA,GAEF,SACIzB,GAAAA,QAEJ,UAAA;AAAA,IAAA,oBAAC,YACC,IAAI0B,MAAMhC,IAAI,OAAO,GACrB,WAAWF,QAAQmC,aACnB,SAAQ,kBACR,SAAS9B,SACT,cAAYE,aAEZ,UAAA,oBAAC,4BAAyB,CAAA,GAC5B;AAAA,IACCJ;AAAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Drawer.js","sources":["../../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["import { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  Drawer as MuiDrawer,\n  DrawerProps as MuiDrawerProps,\n} from \"@mui/material\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\nimport { setId } from \"@core/utils/setId\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvButton } from \"@core/components/Button\";\n\nimport { staticClasses, useClasses } from \"./Drawer.styles\";\n\nexport { staticClasses as drawerClasses };\n\nexport type HvDrawerClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDrawerProps\n  extends MuiDrawerProps,\n    Omit<MuiDrawerProps, \"classes\">,\n    HvBaseProps<HTMLDivElement> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvDrawerClasses;\n  /**\n   * Components of the Drawer.\n   */\n  children?: React.ReactNode;\n  /**\n   * Current state of the Drawer.\n   */\n  open?: boolean;\n  /**\n   * Function executed on close.\n   * Extended from Modal from material-ui\n   *\n   */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /**\n   * The side the drawer opens from.\n   */\n  anchor?: \"left\" | \"top\" | \"right\" | \"bottom\";\n  /**\n   * Title for the button close.\n   */\n  buttonTitle?: string;\n  /** @ignore */\n  ref?: MuiDrawerProps[\"ref\"];\n  /** @ignore */\n  component?: MuiDrawerProps[\"component\"];\n}\n\n/**\n * The Drawer component provides a foundation to create a sliding pane.\n * It only provides the pane with a close button, the rest of the\n * content can be customized.\n */\nexport const HvDrawer = (props: HvDrawerProps) => {\n  const {\n    className,\n    classes: classesProp,\n    id,\n    children,\n    open,\n    onClose,\n    anchor = \"right\",\n    buttonTitle = \"Close\",\n    ...others\n  } = useDefaultProps(\"HvDrawer\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const closeButtonDisplay = () => <Close role=\"none\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  return (\n    <MuiDrawer\n      className={cx(classes.root, className)}\n      id={id}\n      anchor={anchor}\n      open={open}\n      PaperProps={{\n        classes: {\n          root: classes.paper,\n        },\n      }}\n      onClose={onClose}\n      {...others}\n    >\n      <HvButton\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        variant=\"secondaryGhost\"\n        onClick={onClose}\n        aria-label={buttonTitle}\n      >\n        <CloseButtonTooltipWrapper />\n      </HvButton>\n      {children}\n    </MuiDrawer>\n  );\n};\n"],"names":["HvDrawer","props","className","classes","classesProp","id","children","open","onClose","anchor","buttonTitle","others","useDefaultProps","cx","useClasses","closeButtonDisplay","CloseButtonTooltipWrapper","withTooltip","MuiDrawer","root","paper","setId","closeButton"],"mappings":";;;;;;;;;AAyEaA,MAAAA,WAAWA,CAACC,UAAyB;AAC1C,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAAS;AAAA,IACTC,cAAc;AAAA,IACd,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,YAAYX,KAAK;AAE/B,QAAA;AAAA,IAAEE;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE9C,QAAMW,qBAAqBA,MAAO,oBAAA,OAAA,EAAM,MAAK,OAAS,CAAA;AAEtD,QAAMC,4BAA4BN,cAC9BO,YAAYF,oBAAoBL,aAAa,KAAK,IAClDK;AAGF,SAAA,qBAACG,QACC,EAAA,WAAWL,GAAGV,QAAQgB,MAAMjB,SAAS,GACrC,IACA,QACA,MACA,YAAY;AAAA,IACVC,SAAS;AAAA,MACPgB,MAAMhB,QAAQiB;AAAAA,IAChB;AAAA,EAAA,GAEF,SACIT,GAAAA,QAEJ,UAAA;AAAA,IAAA,oBAAC,YACC,IAAIU,MAAMhB,IAAI,OAAO,GACrB,WAAWF,QAAQmB,aACnB,SAAQ,kBACR,SAASd,SACT,cAAYE,aAEZ,UAAA,oBAAC,4BAAyB,CAAA,GAC5B;AAAA,IACCJ;AAAAA,EACH,EAAA,CAAA;AAEJ;"}

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

@@ -26,8 +26,8 @@ const {
     height: 32,
     boxSizing: "border-box",
     padding: 0,
-    borderRadius: theme.dropDownMenu.borderRadius,
-    border: theme.dropDownMenu.borderClosed
+    borderRadius: theme.radii.base,
+    border: "1px solid transparent"
   },
   /** Styles applied to the icon when selected. */
   iconSelected: {
@@ -40,7 +40,7 @@ const {
       fill: theme.colors.secondary
     },
     borderRadius: `${theme.radii.base} ${theme.radii.base} 0px 0px`,
-    border: theme.dropDownMenu.borderOpened
+    border: `1px solid ${theme.colors.secondary_80}`
   },
   /** Styles applied to the list root. */
   menuListRoot: {},

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 { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\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    height: 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","height","boxSizing","padding","borderRadius","theme","dropDownMenu","border","borderClosed","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","radii","base","borderOpened","menuListRoot","menuList"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,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;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,MAAMC,aAAaF;AAAAA,IACjCG,QAAQF,MAAMC,aAAaE;AAAAA,EAC7B;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,MAAMY,MAAMC,IAAK,IAAGb,MAAMY,MAAMC,IAAK;AAAA,IACtDX,QAAQF,MAAMC,aAAaa;AAAAA,EAC7B;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;"}
+{"version":3,"file":"DropDownMenu.styles.js","sources":["../../../../src/components/DropDownMenu/DropDownMenu.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\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    height: 32,\n    boxSizing: \"border-box\",\n    padding: 0,\n    borderRadius: theme.radii.base,\n    border: \"1px solid transparent\",\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: `1px solid ${theme.colors.secondary_80}`,\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","height","boxSizing","padding","borderRadius","theme","radii","base","border","iconSelected","backgroundColor","colors","atmo1","boxShadow","shadow","fill","secondary","secondary_80","menuListRoot","menuList"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,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;AAAAA,IACL;AAAA,EACF;AAAA;AAAA,EAEAC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVN,OAAO;AAAA,IACPO,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,SAAS;AAAA,IACTC,cAAcC,MAAMC,MAAMC;AAAAA,IAC1BC,QAAQ;AAAA,EACV;AAAA;AAAA,EAEAC,cAAc;AAAA,IACZC,iBAAiBL,MAAMM,OAAOC;AAAAA,IAC9BC,WAAWR,MAAMM,OAAOG;AAAAA,IAExB,WAAW;AAAA,MACTJ,iBAAiBL,MAAMM,OAAOC;AAAAA,IAChC;AAAA,IAEA,iBAAiB;AAAA,MACfG,MAAMV,MAAMM,OAAOK;AAAAA,IACrB;AAAA,IAEAZ,cAAe,GAAEC,MAAMC,MAAMC,IAAK,IAAGF,MAAMC,MAAMC,IAAK;AAAA,IACtDC,QAAS,aAAYH,MAAMM,OAAOM,YAAa;AAAA,EACjD;AAAA;AAAA,EAEAC,cAAc,CAAC;AAAA;AAAA,EAEfC,UAAU,CAAC;AACb,CAAC;"}

package/dist/esm/components/Dropdown/Dropdown.js

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from "@emotion/react/jsx-runtime";
 import { useState, useEffect, useRef } from "react";
-import { theme } from "@hitachivantara/uikit-styles";
 import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { setId } from "../../utils/setId.js";
 import { getSelectionLabel, getSelected } from "./utils.js";
-import { useClasses, staticClasses } from "./Dropdown.styles.js";
+import { useClasses } from "./Dropdown.styles.js";
+import { staticClasses } from "./Dropdown.styles.js";
 import { useLabels } from "../../hooks/useLabels.js";
 import { useUniqueId } from "../../hooks/useUniqueId.js";
 import { useControlled } from "../../hooks/useControlled.js";
@@ -70,8 +70,7 @@ const HvDropdown = (props) => {
   } = useDefaultProps("HvDropdown", props);
   const {
     classes,
-    cx,
-    css
+    cx
   } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
   const elementId = useUniqueId(id, "hvdropdown");
@@ -157,10 +156,9 @@ const HvDropdown = (props) => {
   const buildHeaderLabel = () => {
     const hasSelection = getSelected(internalValues).length > 0;
     return (labels == null ? void 0 : labels.select) || !multiSelect ? /* @__PURE__ */ jsx(HvTypography, { component: "div", variant: "body", className: cx(classes.placeholder, {
-      [classes.selectionDisabled]: disabled
-    }, !(isOpen || hasSelection) && css({
-      color: theme.dropdown.placeholderColor
-    })), children: selectionLabel.selected }) : /* @__PURE__ */ jsxs(HvTypography, { component: "div", className: cx(classes.placeholder, {
+      [classes.selectionDisabled]: disabled,
+      [classes.placeholderClosed]: !(isOpen || hasSelection)
+    }), children: selectionLabel.selected }) : /* @__PURE__ */ jsxs(HvTypography, { component: "div", className: cx(classes.placeholder, {
       [classes.selectionDisabled]: disabled
     }), variant: "body", children: [
       /* @__PURE__ */ jsx("b", { children: selectionLabel.selected }),
@@ -175,20 +173,17 @@ const HvDropdown = (props) => {
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId(elementId, "error") : ariaErrorMessage;
   }
-  return /* @__PURE__ */ jsxs(HvFormElement, { id, name, status: validationState, disabled, readOnly, required, className: cx(classes.root, disabled && css({
-    color: theme.dropdown.disabledColor
-  }), className), ...others, children: [
+  return /* @__PURE__ */ jsxs(HvFormElement, { id, name, status: validationState, disabled, readOnly, required, className: cx(classes.root, {
+    [classes.disabled]: disabled
+  }, className), ...others, children: [
     (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
       hasLabel && /* @__PURE__ */ jsx(HvLabel, { id: setId(elementId, "label"), label, className: classes.label }),
       hasDescription && /* @__PURE__ */ jsx(HvInfoMessage, { id: setId(elementId, "description"), className: classes.description, children: description })
     ] }),
     /* @__PURE__ */ jsx(HvBaseDropdown, { id: setId(id, "dropdown"), classes: {
-      root: cx(classes.dropdown, readOnly && css({
-        [`& .${staticClasses.dropdownHeader}`]: {
-          border: theme.dropdown.readOnlyBorder,
-          backgroundColor: theme.dropdown.readOnlyBackgroundColor
-        }
-      })),
+      root: cx(classes.dropdown, {
+        [classes.readOnly]: readOnly
+      }),
       arrow: classes.arrow,
       header: cx(classes.dropdownHeader, {
         [classes.dropdownHeaderInvalid]: isStateInvalid

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { PopperProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n  isInvalid,\n  HvInfoMessage,\n  HvWarningText,\n  HvFormElement,\n  HvLabel,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: any;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: any;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is in read only mode.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDropdownStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: HvListValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: boolean;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps>;\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n  /**\n   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: HvBaseDropdownProps;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n  select: undefined,\n  selectAll: \"All\",\n  cancelLabel: \"Cancel\",\n  applyLabel: \"Apply\",\n  searchPlaceholder: \"Search\",\n  multiSelectionConjunction: \"/\",\n};\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = (props: HvDropdownProps) => {\n  const {\n    classes: classesProp,\n    className,\n\n    id,\n    name,\n\n    required = false,\n    disabled = false,\n    readOnly = false,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n\n    placeholder = \"Select...\",\n\n    onChange,\n\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    onCancel,\n    onToggle,\n    onClickOutside,\n\n    onFocus,\n    onBlur,\n\n    values,\n    multiSelect = false,\n    showSearch = false,\n    expanded,\n    defaultExpanded = false,\n    notifyChangesOnFirstRender = false,\n    labels: labelsProp,\n    hasTooltips = false,\n    disablePortal = false,\n    singleSelectionToggle = true,\n    placement,\n    variableWidth = false,\n    popperProps = {},\n    height,\n    maxHeight,\n    virtualized = false,\n    baseDropdownProps = {},\n    listProps = {},\n    ...others\n  } = useDefaultProps(\"HvDropdown\", props);\n\n  const { classes, cx, css } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id, \"hvdropdown\");\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [selectionLabel, setSelectionLabel] = useState(\n    getSelectionLabel(labels, placeholder, multiSelect, values)\n  );\n  const [internalValues, setInternalValues] = useState(values);\n\n  useEffect(() => {\n    setInternalValues(values);\n  }, [values]);\n\n  useEffect(() => {\n    setSelectionLabel(\n      getSelectionLabel(labels, placeholder, multiSelect, values)\n    );\n  }, [labels, multiSelect, placeholder, values]);\n\n  if (virtualized && !height && process.env.NODE_ENV !== \"production\") {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n    );\n  }\n\n  const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n    onToggle?.(event, open);\n\n    setIsOpen(open);\n\n    if (!open) {\n      // also run built-in validation when closing without changes\n      // as the user \"touched\" the input\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required) {\n          const hasSelection = getSelected(internalValues).length > 0;\n\n          if (!hasSelection) {\n            return \"invalid\";\n          }\n        }\n\n        return \"valid\";\n      });\n    }\n  };\n\n  /** Applies the selected values to the state */\n  const handleSelection: HvDropdownListProps[\"onChange\"] = (\n    listValues,\n    commitChanges,\n    toggle,\n    notifyChanges = true\n  ) => {\n    const selected = getSelected(listValues);\n\n    if (commitChanges) {\n      setInternalValues(listValues);\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, listValues)\n      );\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && selected.length === 0) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n    }\n    if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n    if (toggle) {\n      handleToggle(undefined as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    }\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n    onCancel?.(evt as any);\n\n    handleToggle(evt as any, false);\n\n    // focus-ring won't be visible even if using the keyboard:\n    // https://github.com/WICG/focus-visible/issues/88\n    dropdownHeaderRef.current?.focus({ preventScroll: true });\n  };\n\n  const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n    onClickOutside?.(evt);\n    onCancel?.(evt);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n      return;\n    }\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  const buildHeaderLabel = () => {\n    const hasSelection = getSelected(internalValues).length > 0;\n    return labels?.select || !multiSelect ? (\n      <HvTypography\n        component=\"div\"\n        variant=\"body\"\n        className={cx(\n          classes.placeholder,\n          {\n            [classes.selectionDisabled]: disabled,\n          },\n          !(isOpen || hasSelection) &&\n            css({ color: theme.dropdown.placeholderColor })\n        )}\n      >\n        {selectionLabel.selected}\n      </HvTypography>\n    ) : (\n      <HvTypography\n        component=\"div\"\n        className={cx(classes.placeholder, {\n          [classes.selectionDisabled]: disabled,\n        })}\n        variant=\"body\"\n      >\n        <b>{selectionLabel.selected}</b>\n        {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n      </HvTypography>\n    );\n  };\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      className={cx(\n        classes.root,\n        disabled && css({ color: theme.dropdown.disabledColor }),\n        className\n      )}\n      {...others}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              label={label}\n              className={classes.label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseDropdown\n        id={setId(id, \"dropdown\")}\n        classes={{\n          root: cx(\n            classes.dropdown,\n            readOnly &&\n              css({\n                [`& .${staticClasses.dropdownHeader}`]: {\n                  border: theme.dropdown.readOnlyBorder,\n                  backgroundColor: theme.dropdown.readOnlyBackgroundColor,\n                },\n              })\n          ),\n          arrow: classes.arrow,\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        expanded={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        disablePortal={disablePortal}\n        placement={placement}\n        popperProps={popperProps}\n        placeholder={buildHeaderLabel()}\n        onToggle={handleToggle}\n        onClickOutside={handleClickOutside}\n        onContainerCreation={setFocusToContent}\n        role=\"combobox\"\n        variableWidth={variableWidth}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        onFocus={onFocus}\n        onBlur={onBlur}\n        dropdownHeaderRef={dropdownHeaderRef}\n        {...baseDropdownProps}\n      >\n        <HvDropdownList\n          id={setId(elementId, \"values\")}\n          classes={{\n            rootList: classes.rootList,\n            dropdownListContainer: classes.dropdownListContainer,\n          }}\n          values={internalValues}\n          multiSelect={multiSelect}\n          showSearch={showSearch}\n          onChange={handleSelection}\n          onCancel={handleCancel}\n          labels={labels}\n          notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n          hasTooltips={hasTooltips}\n          singleSelectionToggle={singleSelectionToggle}\n          aria-label={ariaLabel}\n          aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n          height={height}\n          maxHeight={maxHeight}\n          virtualized={virtualized}\n          {...listProps}\n        />\n      </HvBaseDropdown>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","props","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","placeholder","onChange","status","statusMessage","ariaErrorMessage","onCancel","onToggle","onClickOutside","onFocus","onBlur","values","multiSelect","showSearch","expanded","defaultExpanded","notifyChangesOnFirstRender","labels","labelsProp","hasTooltips","disablePortal","singleSelectionToggle","placement","variableWidth","popperProps","height","maxHeight","virtualized","baseDropdownProps","listProps","others","useDefaultProps","cx","css","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","useState","getSelectionLabel","internalValues","setInternalValues","useEffect","process","env","NODE_ENV","console","error","dropdownHeaderRef","useRef","handleToggle","event","open","hasSelection","getSelected","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","current","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","selectionDisabled","color","theme","dropdown","placeholderColor","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","root","disabledColor","labelContainer","staticClasses","dropdownHeader","border","readOnlyBorder","backgroundColor","readOnlyBackgroundColor","arrow","header","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","join","trim","rootList","dropdownListContainer"],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { PopperProps } from \"@mui/material\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { setId } from \"@core/utils/setId\";\nimport { useLabels, useUniqueId, useControlled } from \"@core/hooks\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport { HvListValue } from \"@core/components/List\";\nimport {\n  isInvalid,\n  HvInfoMessage,\n  HvWarningText,\n  HvFormElement,\n  HvLabel,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownLabelsProps, HvDropdownStatus } from \"./types\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: any;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: any;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n  /**\n   * Indicates that the form element is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is in read only mode.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDropdownStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: HvListValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: boolean;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabelsProps;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps>;\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n  /**\n   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: HvBaseDropdownProps;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: HvDropdownListProps;\n}\n\nconst DEFAULT_LABELS: HvDropdownLabelsProps = {\n  select: undefined,\n  selectAll: \"All\",\n  cancelLabel: \"Cancel\",\n  applyLabel: \"Apply\",\n  searchPlaceholder: \"Search\",\n  multiSelectionConjunction: \"/\",\n};\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = (props: HvDropdownProps) => {\n  const {\n    classes: classesProp,\n    className,\n\n    id,\n    name,\n\n    required = false,\n    disabled = false,\n    readOnly = false,\n\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n\n    placeholder = \"Select...\",\n\n    onChange,\n\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n\n    onCancel,\n    onToggle,\n    onClickOutside,\n\n    onFocus,\n    onBlur,\n\n    values,\n    multiSelect = false,\n    showSearch = false,\n    expanded,\n    defaultExpanded = false,\n    notifyChangesOnFirstRender = false,\n    labels: labelsProp,\n    hasTooltips = false,\n    disablePortal = false,\n    singleSelectionToggle = true,\n    placement,\n    variableWidth = false,\n    popperProps = {},\n    height,\n    maxHeight,\n    virtualized = false,\n    baseDropdownProps = {},\n    listProps = {},\n    ...others\n  } = useDefaultProps(\"HvDropdown\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const elementId = useUniqueId(id, \"hvdropdown\");\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [selectionLabel, setSelectionLabel] = useState(\n    getSelectionLabel(labels, placeholder, multiSelect, values)\n  );\n  const [internalValues, setInternalValues] = useState(values);\n\n  useEffect(() => {\n    setInternalValues(values);\n  }, [values]);\n\n  useEffect(() => {\n    setSelectionLabel(\n      getSelectionLabel(labels, placeholder, multiSelect, values)\n    );\n  }, [labels, multiSelect, placeholder, values]);\n\n  if (virtualized && !height && process.env.NODE_ENV !== \"production\") {\n    // eslint-disable-next-line no-console\n    console.error(\n      \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n    );\n  }\n\n  const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n    onToggle?.(event, open);\n\n    setIsOpen(open);\n\n    if (!open) {\n      // also run built-in validation when closing without changes\n      // as the user \"touched\" the input\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required) {\n          const hasSelection = getSelected(internalValues).length > 0;\n\n          if (!hasSelection) {\n            return \"invalid\";\n          }\n        }\n\n        return \"valid\";\n      });\n    }\n  };\n\n  /** Applies the selected values to the state */\n  const handleSelection: HvDropdownListProps[\"onChange\"] = (\n    listValues,\n    commitChanges,\n    toggle,\n    notifyChanges = true\n  ) => {\n    const selected = getSelected(listValues);\n\n    if (commitChanges) {\n      setInternalValues(listValues);\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, listValues)\n      );\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (required && selected.length === 0) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n    }\n    if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n    if (toggle) {\n      handleToggle(undefined as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    }\n  };\n\n  /**\n   * Handles the `Cancel` action. Both single and ranged modes are handled here.\n   */\n  const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n    onCancel?.(evt as any);\n\n    handleToggle(evt as any, false);\n\n    // focus-ring won't be visible even if using the keyboard:\n    // https://github.com/WICG/focus-visible/issues/88\n    dropdownHeaderRef.current?.focus({ preventScroll: true });\n  };\n\n  const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n    onClickOutside?.(evt);\n    onCancel?.(evt);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n      return;\n    }\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  const buildHeaderLabel = () => {\n    const hasSelection = getSelected(internalValues).length > 0;\n    return labels?.select || !multiSelect ? (\n      <HvTypography\n        component=\"div\"\n        variant=\"body\"\n        className={cx(classes.placeholder, {\n          [classes.selectionDisabled]: disabled,\n          [classes.placeholderClosed]: !(isOpen || hasSelection),\n        })}\n      >\n        {selectionLabel.selected}\n      </HvTypography>\n    ) : (\n      <HvTypography\n        component=\"div\"\n        className={cx(classes.placeholder, {\n          [classes.selectionDisabled]: disabled,\n        })}\n        variant=\"body\"\n      >\n        <b>{selectionLabel.selected}</b>\n        {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n      </HvTypography>\n    );\n  };\n\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  // the error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  let errorMessageId;\n  if (isStateInvalid) {\n    errorMessageId = canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage;\n  }\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      readOnly={readOnly}\n      required={required}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n        },\n        className\n      )}\n      {...others}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              label={label}\n              className={classes.label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseDropdown\n        id={setId(id, \"dropdown\")}\n        classes={{\n          root: cx(classes.dropdown, {\n            [classes.readOnly]: readOnly,\n          }),\n          arrow: classes.arrow,\n          header: cx(classes.dropdownHeader, {\n            [classes.dropdownHeaderInvalid]: isStateInvalid,\n          }),\n          headerOpen: classes.dropdownHeaderOpen,\n        }}\n        expanded={isOpen}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        disablePortal={disablePortal}\n        placement={placement}\n        popperProps={popperProps}\n        placeholder={buildHeaderLabel()}\n        onToggle={handleToggle}\n        onClickOutside={handleClickOutside}\n        onContainerCreation={setFocusToContent}\n        role=\"combobox\"\n        variableWidth={variableWidth}\n        aria-label={ariaLabel}\n        aria-labelledby={\n          [label && setId(elementId, \"label\"), ariaLabelledBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        aria-invalid={isStateInvalid ? true : undefined}\n        aria-errormessage={errorMessageId}\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        onFocus={onFocus}\n        onBlur={onBlur}\n        dropdownHeaderRef={dropdownHeaderRef}\n        {...baseDropdownProps}\n      >\n        <HvDropdownList\n          id={setId(elementId, \"values\")}\n          classes={{\n            rootList: classes.rootList,\n            dropdownListContainer: classes.dropdownListContainer,\n          }}\n          values={internalValues}\n          multiSelect={multiSelect}\n          showSearch={showSearch}\n          onChange={handleSelection}\n          onCancel={handleCancel}\n          labels={labels}\n          notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n          hasTooltips={hasTooltips}\n          singleSelectionToggle={singleSelectionToggle}\n          aria-label={ariaLabel}\n          aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n          height={height}\n          maxHeight={maxHeight}\n          virtualized={virtualized}\n          {...listProps}\n        />\n      </HvBaseDropdown>\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n};\n"],"names":["DEFAULT_LABELS","select","undefined","selectAll","cancelLabel","applyLabel","searchPlaceholder","multiSelectionConjunction","HvDropdown","props","classes","classesProp","className","id","name","required","disabled","readOnly","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","placeholder","onChange","status","statusMessage","ariaErrorMessage","onCancel","onToggle","onClickOutside","onFocus","onBlur","values","multiSelect","showSearch","expanded","defaultExpanded","notifyChangesOnFirstRender","labels","labelsProp","hasTooltips","disablePortal","singleSelectionToggle","placement","variableWidth","popperProps","height","maxHeight","virtualized","baseDropdownProps","listProps","others","useDefaultProps","cx","useClasses","useLabels","elementId","useUniqueId","validationState","setValidationState","useControlled","validationMessage","isOpen","setIsOpen","Boolean","selectionLabel","setSelectionLabel","useState","getSelectionLabel","internalValues","setInternalValues","useEffect","process","env","NODE_ENV","console","error","dropdownHeaderRef","useRef","handleToggle","event","open","hasSelection","getSelected","length","handleSelection","listValues","commitChanges","toggle","notifyChanges","selected","current","focus","preventScroll","handleCancel","evt","handleClickOutside","setFocusToContent","containerRef","inputs","getElementsByTagName","listItems","every","listItem","tabIndex","buildHeaderLabel","selectionDisabled","placeholderClosed","total","hasLabel","hasDescription","canShowError","isStateInvalid","isInvalid","errorMessageId","setId","root","labelContainer","dropdown","arrow","header","dropdownHeader","dropdownHeaderInvalid","headerOpen","dropdownHeaderOpen","join","trim","rootList","dropdownListContainer"],"mappings":"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"}