@hitachivantara/uikit-react-core 5.84.3 → 5.85.0

package/dist/cjs/Badge/Badge.cjs

@@ -16,6 +16,7 @@ const HvBadge = React.forwardRef(function HvBadge2(props, ref) {
     icon,
     text,
     textVariant,
+    children: childrenProp,
     ...others
   } = uikitReactUtils.useDefaultProps("HvBadge", props);
   const { classes, cx } = Badge_styles.useClasses(classesProp);
@@ -23,7 +24,7 @@ const HvBadge = React.forwardRef(function HvBadge2(props, ref) {
   const countValue = count > maxCount ? `${maxCount}+` : count;
   const renderedCount = showCount && count > 0 ? countValue : "";
   const renderedCountOrLabel = label && typeof label !== "number" ? label : renderedCount;
-  const children = icon || text && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: textVariant, children: text });
+  const children = childrenProp || icon || text && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: textVariant, children: text });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
     children,
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: cx({ [classes.badgeContainer]: children }), children: /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/Dialog/Actions/Actions.cjs

@@ -16,14 +16,14 @@ const HvDialogActions = (props) => {
     ...others
   } = uikitReactUtils.useDefaultProps("HvDialogActions", props);
   const context$1 = context.useDialogContext();
-  const fullscreen = fullScreenProp ?? context$1.fullscreen;
+  const fullScreen = fullScreenProp ?? context$1.fullScreen;
   const { classes, cx } = Actions_styles.useClasses(classesProp);
   return /* @__PURE__ */ jsxRuntime.jsx(
     MuiDialogActions__default.default,
     {
       className,
       classes: {
-        root: cx(classes.root, { [classes.fullscreen]: fullscreen }),
+        root: cx(classes.root, { [classes.fullscreen]: fullScreen }),
         spacing: classes.spacing
       },
       ...others,

package/dist/cjs/Dialog/Actions/Actions.styles.cjs

@@ -4,12 +4,12 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDialog-Action", {
   root: {
-    margin: "0",
+    margin: 0,
     padding: uikitStyles.theme.space.sm,
+    backgroundColor: "inherit",
     borderTop: `3px solid ${uikitStyles.theme.colors.atmo2}`,
     height: 65,
-    maxHeight: 65,
-    flex: 1
+    maxHeight: 65
   },
   fullscreen: { position: "fixed", width: "100%", bottom: 0, left: 0 },
   spacing: {

package/dist/cjs/Dialog/Content/Content.styles.cjs

@@ -4,13 +4,11 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDialog-Content", {
   root: {
-    padding: `0 ${uikitStyles.theme.space.sm} ${uikitStyles.theme.space.sm} ${uikitStyles.theme.space.sm}`,
-    flex: "none"
+    padding: uikitStyles.theme.spacing(0, "sm", "sm")
   },
   textContent: {
     marginLeft: "42px",
     paddingRight: "62px",
-    flex: 1,
     overflowY: "auto"
   }
 });

package/dist/cjs/Dialog/Dialog.cjs

@@ -23,28 +23,37 @@ const HvDialog = (props) => {
     onClose,
     firstFocusable,
     buttonTitle = "Close",
-    fullscreen = false,
+    fullHeight,
+    fullscreen: fullScreen = false,
+    // TODO: rename to `fullScreen` in v6
     disableBackdropClick = false,
     ...others
   } = uikitReactUtils.useDefaultProps("HvDialog", props);
-  const { classes, css, cx } = Dialog_styles.useClasses(classesProp);
+  const { classes, cx } = Dialog_styles.useClasses(classesProp);
   const { rootId } = uikitReactUtils.useTheme();
   const measuredRef = React.useCallback(() => {
     if (!firstFocusable) return;
     const element = document.getElementById(firstFocusable);
     element?.focus();
   }, [firstFocusable]);
-  const contextValue = React.useMemo(() => ({ fullscreen }), [fullscreen]);
+  const contextValue = React.useMemo(() => ({ fullScreen }), [fullScreen]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     MuiDialog__default.default,
     {
       container: document$1.getElementById(rootId),
-      className: cx(classes.root, className),
-      classes: { container: css({ position: "relative" }) },
+      className,
+      classes: {
+        root: classes.root,
+        paper: cx(classes.paper, classes[variant], {
+          [classes.fullHeight]: fullHeight,
+          [classes.statusBar]: !!variant,
+          [classes.fullscreen]: fullScreen
+        })
+      },
       id,
       ref: measuredRef,
       open,
-      fullScreen: fullscreen,
+      fullScreen,
       onClose: (event, reason) => {
         if (disableBackdropClick) return;
         onClose?.(event, reason);
@@ -56,18 +65,6 @@ const HvDialog = (props) => {
           }
         }
       },
-      PaperProps: {
-        classes: {
-          root: cx(
-            css({ position: "absolute" }),
-            classes.paper,
-            variant && cx(classes.statusBar, classes[variant]),
-            {
-              [classes.fullscreen]: fullscreen
-            }
-          )
-        }
-      },
       ...others,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -8,10 +8,14 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDialog",
   paper: {
     color: uikitStyles.theme.colors.secondary,
     backgroundColor: uikitStyles.theme.colors.atmo1,
-    boxShadow: ["none", uikitStyles.theme.colors.shadow],
+    boxShadow: uikitStyles.theme.colors.shadow,
+    borderColor: uikitStyles.theme.colors.atmo4,
     borderRadius: uikitStyles.theme.radii.round
   },
   fullscreen: {},
+  fullHeight: {
+    height: "100%"
+  },
   closeButton: {
     padding: 0,
     minWidth: "auto",
@@ -24,17 +28,16 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDialog",
   statusBar: {
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
-    borderTopWidth: 4,
-    borderTopStyle: "solid"
+    borderTopWidth: 4
   },
   success: {
-    borderTopColor: uikitStyles.theme.colors.positive
+    borderColor: uikitStyles.theme.colors.positive
   },
   error: {
-    borderTopColor: uikitStyles.theme.colors.negative
+    borderColor: uikitStyles.theme.colors.negative
   },
   warning: {
-    borderTopColor: uikitStyles.theme.colors.warning
+    borderColor: uikitStyles.theme.colors.warning
   }
 });
 exports.staticClasses = staticClasses;

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

@@ -6,6 +6,7 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const iconVariant = require("../../utils/iconVariant.cjs");
 const context = require("../context.cjs");
 const Title_styles = require("./Title.styles.cjs");
+const Typography = require("../../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiDialogTitle__default = /* @__PURE__ */ _interopDefault(MuiDialogTitle);
 const HvDialogTitle = (props) => {
@@ -15,38 +16,32 @@ const HvDialogTitle = (props) => {
     children,
     variant = "default",
     showIcon = true,
-    customIcon = null,
+    customIcon,
     ...others
   } = uikitReactUtils.useDefaultProps("HvDialogTitle", props);
-  const { classes, css, cx } = Title_styles.useClasses(classesProp);
-  const { fullscreen } = context.useDialogContext();
-  const isString = typeof children === "string";
+  const { classes, cx } = Title_styles.useClasses(classesProp);
+  const { fullScreen } = context.useDialogContext();
   const icon = customIcon || showIcon && iconVariant.iconVariant(variant);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    MuiDialogTitle__default.default,
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Typography.HvTypography,
     {
+      component: MuiDialogTitle__default.default,
+      variant: "title4",
       className: cx(
-        !fullscreen && css({ flex: 1 }),
         classes.root,
+        classes.messageContainer,
         {
-          [classes.fullscreen]: fullscreen
+          [classes.fullscreen]: fullScreen,
+          [classes.textWithIcon]: icon,
+          [classes.titleText]: typeof children === "string"
         },
         className
       ),
       ...others,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.messageContainer, children: [
+      children: [
         icon,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: cx({
-              [classes.textWithIcon]: !!icon,
-              [classes.titleText]: isString
-            }),
-            children
-          }
-        )
-      ] })
+        children
+      ]
     }
   );
 };

package/dist/cjs/Dialog/Title/Title.styles.cjs

@@ -4,24 +4,21 @@ const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvDialog-Title", {
   root: {
-    fontFamily: uikitStyles.theme.fontFamily.body,
-    // override MUI font
     padding: uikitStyles.theme.space.sm,
-    margin: 0
-  },
-  fullscreen: {},
-  messageContainer: {
+    paddingRight: 32 + 16,
+    // close icon padding
+    backgroundColor: "inherit",
     display: "flex",
-    alignItems: "center"
+    alignItems: "center",
+    gap: uikitStyles.theme.space.xs
   },
-  textWithIcon: {
-    marginLeft: uikitStyles.theme.space.xs,
-    // 32px is the icon width
-    marginRight: `calc(32px + ${uikitStyles.theme.space.xs})`
-  },
-  titleText: {
-    ...uikitStyles.theme.typography.title4
-  }
+  fullscreen: {},
+  /** @deprecated use `classes.root` instead  */
+  messageContainer: {},
+  // TODO: consider deprecating
+  textWithIcon: {},
+  /** @deprecated use `classes.root` instead */
+  titleText: {}
 });
 exports.staticClasses = staticClasses;
 exports.useClasses = useClasses;

package/dist/cjs/Dialog/context.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
-const DialogContext = React.createContext({ fullscreen: false });
+const DialogContext = React.createContext({ fullScreen: false });
 const useDialogContext = () => React.useContext(DialogContext);
 exports.DialogContext = DialogContext;
 exports.useDialogContext = useDialogContext;

package/dist/cjs/Panel/Panel.styles.cjs

@@ -6,6 +6,7 @@ const { useClasses, staticClasses } = uikitReactUtils.createClasses("HvPanel", {
   root: {
     position: "relative",
     padding: uikitStyles.theme.space.sm,
+    borderColor: uikitStyles.theme.colors.atmo4,
     backgroundColor: uikitStyles.theme.colors.atmo1,
     overflow: "auto",
     borderRadius: "inherit"

package/dist/cjs/Section/Section.cjs

@@ -54,7 +54,7 @@ const HvSection = React.forwardRef(
                 "aria-label": isOpen ? "Collapse" : "Expand",
                 ...buttonProps,
                 ...expandButtonProps,
-                children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Down, { rotate: isOpen })
+                children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.DropDownXS, { rotate: isOpen })
               }
             ),
             title,

package/dist/cjs/Section/Section.styles.cjs

@@ -15,6 +15,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSection",
   header: {
     display: "flex",
     alignItems: "center",
+    borderColor: "inherit",
     position: "relative",
     minHeight: uikitStyles.theme.sizes.sm,
     padding: uikitStyles.theme.space.sm
@@ -37,6 +38,7 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvSection",
   raisedHeader: {
     "& $header": {
       zIndex: 1,
+      borderBottomWidth: 1,
       boxShadow: uikitStyles.theme.colors.shadow
     },
     "& $content": {

package/dist/cjs/TableSection/TableSection.styles.cjs

@@ -19,7 +19,6 @@ const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTableSect
   header: {
     // Only apply the border to divide the header and content when both are displayed
     "+ div": {
-      borderTop: `1px solid ${uikitStyles.theme.colors.atmo3}`,
       borderTopLeftRadius: 0,
       borderTopRightRadius: 0
     }

package/dist/cjs/{Tab → Tabs/Tab}/Tab.styles.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const focusUtils = require("../utils/focusUtils.cjs");
+const focusUtils = require("../../utils/focusUtils.cjs");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTab", {
   root: {
     marginTop: "3px",

package/dist/cjs/Tabs/Tabs.styles.cjs

@@ -3,13 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
 const { staticClasses, useClasses } = uikitReactUtils.createClasses("HvTabs", {
   root: {
-    minHeight: 0,
-    overflow: "visible"
+    minHeight: 0
   },
   indicator: {},
-  scroller: {
-    overflow: "visible !important"
-  },
+  scroller: {},
   flexContainer: {
     marginLeft: "3px"
   },

package/dist/cjs/index.cjs

@@ -231,8 +231,6 @@ const Stack_styles = require("./Stack/Stack.styles.cjs");
 const Stack = require("./Stack/Stack.cjs");
 const Switch_styles = require("./Switch/Switch.styles.cjs");
 const Switch = require("./Switch/Switch.cjs");
-const Tab_styles = require("./Tab/Tab.styles.cjs");
-const Tab = require("./Tab/Tab.cjs");
 const useHvTable = require("./Table/hooks/useHvTable.cjs");
 const Table_styles = require("./Table/Table.styles.cjs");
 const Table = require("./Table/Table.cjs");
@@ -267,6 +265,8 @@ const ProgressColumnCell = require("./Table/renderers/ProgressColumnCell.cjs");
 const SwitchColumnCell = require("./Table/renderers/SwitchColumnCell.cjs");
 const Tabs_styles = require("./Tabs/Tabs.styles.cjs");
 const Tabs = require("./Tabs/Tabs.cjs");
+const Tab_styles = require("./Tabs/Tab/Tab.styles.cjs");
+const Tab = require("./Tabs/Tab/Tab.cjs");
 const Tag_styles = require("./Tag/Tag.styles.cjs");
 const Tag = require("./Tag/Tag.cjs");
 const TagsInput_styles = require("./TagsInput/TagsInput.styles.cjs");
@@ -589,8 +589,6 @@ exports.stackClasses = Stack_styles.staticClasses;
 exports.HvStack = Stack.HvStack;
 exports.switchClasses = Switch_styles.staticClasses;
 exports.HvSwitch = Switch.HvSwitch;
-exports.tabClasses = Tab_styles.staticClasses;
-exports.HvTab = Tab.HvTab;
 exports.useHvData = useHvTable.useHvTable;
 exports.useHvTable = useHvTable.useHvTable;
 exports.tableClasses = Table_styles.staticClasses;
@@ -642,6 +640,8 @@ exports.normalizeProgressBar = ProgressColumnCell.normalizeProgressBar;
 exports.HvSwitchColumnCell = SwitchColumnCell.HvSwitchColumnCell;
 exports.tabsClasses = Tabs_styles.staticClasses;
 exports.HvTabs = Tabs.HvTabs;
+exports.tabClasses = Tab_styles.staticClasses;
+exports.HvTab = Tab.HvTab;
 exports.tagClasses = Tag_styles.staticClasses;
 exports.HvTag = Tag.HvTag;
 exports.tagsInputClasses = TagsInput_styles.staticClasses;

package/dist/esm/Badge/Badge.js

@@ -15,6 +15,7 @@ const HvBadge = forwardRef(function HvBadge2(props, ref) {
     icon,
     text,
     textVariant,
+    children: childrenProp,
     ...others
   } = useDefaultProps("HvBadge", props);
   const { classes, cx } = useClasses(classesProp);
@@ -22,7 +23,7 @@ const HvBadge = forwardRef(function HvBadge2(props, ref) {
   const countValue = count > maxCount ? `${maxCount}+` : count;
   const renderedCount = showCount && count > 0 ? countValue : "";
   const renderedCountOrLabel = label && typeof label !== "number" ? label : renderedCount;
-  const children = icon || text && /* @__PURE__ */ jsx(HvTypography, { variant: textVariant, children: text });
+  const children = childrenProp || icon || text && /* @__PURE__ */ jsx(HvTypography, { variant: textVariant, children: text });
   return /* @__PURE__ */ jsxs("div", { ref, className: cx(classes.root, className), ...others, children: [
     children,
     /* @__PURE__ */ jsx("div", { className: cx({ [classes.badgeContainer]: children }), children: /* @__PURE__ */ jsx(

package/dist/esm/Badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","sources":["../../../src/Badge/Badge.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Badge.styles\";\n\nexport { staticClasses as badgeClasses };\n\nexport type HvBadgeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBadgeProps extends HvBaseProps {\n  /**\n   * Count is the number of unread notifications.\n   * Note count and label are mutually exclusive.\n   * count is ignored when label is specified at the same time.\n   * @deprecated use numeric `label` instead\n   */\n  count?: number;\n  /**\n   * True if `count` should be displayed.\n   *\n   * NOTE: `showCount` is ignored when a **non-numeric** `label` is specified.\n   */\n  showCount?: boolean;\n  /** The maximum number of unread notifications to be displayed */\n  maxCount?: number;\n  /**\n   * Badge content to show in.\n   *\n   * If value is numeric, then `showCount` and `maxCount` will show or limit the value respectively.\n   */\n  label?: React.ReactNode;\n  /** Icon which the notification will be attached. */\n  icon?: React.ReactNode;\n  /** Text which the notification will be attached. */\n  text?: string;\n  /** Text variant. */\n  textVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBadgeClasses;\n}\n\n/**\n * The badge is a component used to notify the user that something has occurred, in the app context.\n */\nexport const HvBadge = forwardRef<\n  // no-indent\n  HTMLDivElement,\n  HvBadgeProps\n>(function HvBadge(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    showCount = false,\n    count: countProp = 0,\n    maxCount = 99,\n    label,\n    icon,\n    text,\n    textVariant,\n    ...others\n  } = useDefaultProps(\"HvBadge\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const count = typeof label === \"number\" ? label : countProp;\n  const countValue = count > maxCount ? `${maxCount}+` : count;\n  const renderedCount = showCount && count > 0 ? countValue : \"\";\n  // If label is specified and non-empty, render it.\n  // If showCount is specified and count > 0, render the count.\n  // Otherwise, render nothing on the badge.\n  // (Note count=0 should not be rendered to avoid ghosty 0.)\n  const renderedCountOrLabel =\n    label && typeof label !== \"number\" ? label : renderedCount;\n  const children =\n    icon || (text && <HvTypography variant={textVariant}>{text}</HvTypography>);\n\n  return (\n    <div ref={ref} className={cx(classes.root, className)} {...others}>\n      {children}\n      <div className={cx({ [classes.badgeContainer]: children })}>\n        <div\n          className={cx(classes.badgePosition, {\n            [classes.badgeHidden]: !(count > 0 || renderedCountOrLabel),\n            // TODO: remove unnecessary classes in v6 (hoist+rename `badge` to `badgePosition`)\n            [classes.badge]: !!(count > 0 || renderedCountOrLabel),\n            [classes.showCount]: !!(!label && renderedCountOrLabel),\n            [classes.showLabel]: !!label,\n            [classes.badgeIcon]: !!icon,\n            [classes.badgeOneDigit]: String(renderedCountOrLabel).length === 1,\n          })}\n        >\n          {renderedCountOrLabel}\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":["HvBadge"],"mappings":";;;;;;AAiDO,MAAM,UAAU,WAIrB,SAASA,SAAQ,OAAO,KAAK;AACvB,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,OAAO,YAAY;AAAA,IACnB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AAEpC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,QAAQ,OAAO,UAAU,WAAW,QAAQ;AAClD,QAAM,aAAa,QAAQ,WAAW,GAAG,QAAQ,MAAM;AACvD,QAAM,gBAAgB,aAAa,QAAQ,IAAI,aAAa;AAK5D,QAAM,uBACJ,SAAS,OAAO,UAAU,WAAW,QAAQ;AAC/C,QAAM,WACJ,QAAS,4BAAS,cAAa,EAAA,SAAS,aAAc,UAAK,MAAA;AAG3D,SAAA,qBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,UAAA;AAAA,IAAA;AAAA,IACD,oBAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,cAAc,GAAG,UAAU,GACvD,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,eAAe;AAAA,UACnC,CAAC,QAAQ,WAAW,GAAG,EAAE,QAAQ,KAAK;AAAA;AAAA,UAEtC,CAAC,QAAQ,KAAK,GAAG,CAAC,EAAE,QAAQ,KAAK;AAAA,UACjC,CAAC,QAAQ,SAAS,GAAG,CAAC,EAAE,CAAC,SAAS;AAAA,UAClC,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC;AAAA,UACvB,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC;AAAA,UACvB,CAAC,QAAQ,aAAa,GAAG,OAAO,oBAAoB,EAAE,WAAW;AAAA,QAAA,CAClE;AAAA,QAEA,UAAA;AAAA,MAAA;AAAA,IAAA,EAEL,CAAA;AAAA,EAAA,GACF;AAEJ,CAAC;"}
+{"version":3,"file":"Badge.js","sources":["../../../src/Badge/Badge.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography, HvTypographyVariants } from \"../Typography\";\nimport { staticClasses, useClasses } from \"./Badge.styles\";\n\nexport { staticClasses as badgeClasses };\n\nexport type HvBadgeClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBadgeProps extends HvBaseProps {\n  /**\n   * Count is the number of unread notifications.\n   * Note count and label are mutually exclusive.\n   * count is ignored when label is specified at the same time.\n   * @deprecated use numeric `label` instead\n   */\n  count?: number;\n  /**\n   * True if `count` should be displayed.\n   *\n   * NOTE: `showCount` is ignored when a **non-numeric** `label` is specified.\n   */\n  showCount?: boolean;\n  /** The maximum number of unread notifications to be displayed */\n  maxCount?: number;\n  /**\n   * Badge content to show in.\n   *\n   * If value is numeric, then `showCount` and `maxCount` will show or limit the value respectively.\n   */\n  label?: React.ReactNode;\n  /** Icon which the notification will be attached. */\n  icon?: React.ReactNode;\n  /** Text which the notification will be attached. @deprecated use `children` instead. */\n  text?: string;\n  /** Text variant. @deprecated use a `HvTypography` on `children` instead. */\n  textVariant?: HvTypographyVariants;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBadgeClasses;\n}\n\n/**\n * The badge is a component used to notify the user that something has occurred, in the app context.\n */\nexport const HvBadge = forwardRef<\n  // no-indent\n  HTMLDivElement,\n  HvBadgeProps\n>(function HvBadge(props, ref) {\n  const {\n    classes: classesProp,\n    className,\n    showCount = false,\n    count: countProp = 0,\n    maxCount = 99,\n    label,\n    icon,\n    text,\n    textVariant,\n    children: childrenProp,\n    ...others\n  } = useDefaultProps(\"HvBadge\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const count = typeof label === \"number\" ? label : countProp;\n  const countValue = count > maxCount ? `${maxCount}+` : count;\n  const renderedCount = showCount && count > 0 ? countValue : \"\";\n  // If label is specified and non-empty, render it.\n  // If showCount is specified and count > 0, render the count.\n  // Otherwise, render nothing on the badge.\n  // (Note count=0 should not be rendered to avoid ghosty 0.)\n  const renderedCountOrLabel =\n    label && typeof label !== \"number\" ? label : renderedCount;\n  const children =\n    childrenProp ||\n    icon ||\n    (text && <HvTypography variant={textVariant}>{text}</HvTypography>);\n\n  return (\n    <div ref={ref} className={cx(classes.root, className)} {...others}>\n      {children}\n      <div className={cx({ [classes.badgeContainer]: children })}>\n        <div\n          className={cx(classes.badgePosition, {\n            [classes.badgeHidden]: !(count > 0 || renderedCountOrLabel),\n            // TODO: remove unnecessary classes in v6 (hoist+rename `badge` to `badgePosition`)\n            [classes.badge]: !!(count > 0 || renderedCountOrLabel),\n            [classes.showCount]: !!(!label && renderedCountOrLabel),\n            [classes.showLabel]: !!label,\n            [classes.badgeIcon]: !!icon,\n            [classes.badgeOneDigit]: String(renderedCountOrLabel).length === 1,\n          })}\n        >\n          {renderedCountOrLabel}\n        </div>\n      </div>\n    </div>\n  );\n});\n"],"names":["HvBadge"],"mappings":";;;;;;AAiDO,MAAM,UAAU,WAIrB,SAASA,SAAQ,OAAO,KAAK;AACvB,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,YAAY;AAAA,IACZ,OAAO,YAAY;AAAA,IACnB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AAEpC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAE9C,QAAM,QAAQ,OAAO,UAAU,WAAW,QAAQ;AAClD,QAAM,aAAa,QAAQ,WAAW,GAAG,QAAQ,MAAM;AACvD,QAAM,gBAAgB,aAAa,QAAQ,IAAI,aAAa;AAK5D,QAAM,uBACJ,SAAS,OAAO,UAAU,WAAW,QAAQ;AACzC,QAAA,WACJ,gBACA,QACC,4BAAS,cAAa,EAAA,SAAS,aAAc,UAAK,KAAA,CAAA;AAGnD,SAAA,qBAAC,OAAI,EAAA,KAAU,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACxD,UAAA;AAAA,IAAA;AAAA,IACD,oBAAC,OAAI,EAAA,WAAW,GAAG,EAAE,CAAC,QAAQ,cAAc,GAAG,UAAU,GACvD,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,eAAe;AAAA,UACnC,CAAC,QAAQ,WAAW,GAAG,EAAE,QAAQ,KAAK;AAAA;AAAA,UAEtC,CAAC,QAAQ,KAAK,GAAG,CAAC,EAAE,QAAQ,KAAK;AAAA,UACjC,CAAC,QAAQ,SAAS,GAAG,CAAC,EAAE,CAAC,SAAS;AAAA,UAClC,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC;AAAA,UACvB,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC;AAAA,UACvB,CAAC,QAAQ,aAAa,GAAG,OAAO,oBAAoB,EAAE,WAAW;AAAA,QAAA,CAClE;AAAA,QAEA,UAAA;AAAA,MAAA;AAAA,IAAA,EAEL,CAAA;AAAA,EAAA,GACF;AAEJ,CAAC;"}

package/dist/esm/Dialog/Actions/Actions.js

@@ -13,14 +13,14 @@ const HvDialogActions = (props) => {
     ...others
   } = useDefaultProps("HvDialogActions", props);
   const context = useDialogContext();
-  const fullscreen = fullScreenProp ?? context.fullscreen;
+  const fullScreen = fullScreenProp ?? context.fullScreen;
   const { classes, cx } = useClasses(classesProp);
   return /* @__PURE__ */ jsx(
     MuiDialogActions,
     {
       className,
       classes: {
-        root: cx(classes.root, { [classes.fullscreen]: fullscreen }),
+        root: cx(classes.root, { [classes.fullscreen]: fullScreen }),
         spacing: classes.spacing
       },
       ...others,

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sources":["../../../../src/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n  DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useDialogContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./Actions.styles\";\n\nexport { staticClasses as dialogActionClasses };\n\nexport type HvDialogActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogActionsProps\n  extends Omit<MuiDialogActionsProps, \"classes\"> {\n  /** Set the dialog to fullscreen mode. @deprecated set `fullscreen` in `HvDialog` */\n  fullscreen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogActionClasses;\n}\n\nexport const HvDialogActions = (props: HvDialogActionsProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    fullscreen: fullScreenProp,\n    ...others\n  } = useDefaultProps(\"HvDialogActions\", props);\n  const context = useDialogContext();\n  const fullscreen = fullScreenProp ?? context.fullscreen;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <MuiDialogActions\n      className={className}\n      classes={{\n        root: cx(classes.root, { [classes.fullscreen]: fullscreen }),\n        spacing: classes.spacing,\n      }}\n      {...others}\n    >\n      {children}\n    </MuiDialogActions>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAC5C,QAAM,UAAU,iBAAiB;AAC3B,QAAA,aAAa,kBAAkB,QAAQ;AAE7C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,UAAU,GAAG,YAAY;AAAA,QAC3D,SAAS,QAAQ;AAAA,MACnB;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}
+{"version":3,"file":"Actions.js","sources":["../../../../src/Dialog/Actions/Actions.tsx"],"sourcesContent":["import MuiDialogActions, {\n  DialogActionsProps as MuiDialogActionsProps,\n} from \"@mui/material/DialogActions\";\nimport {\n  useDefaultProps,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { useDialogContext } from \"../context\";\nimport { staticClasses, useClasses } from \"./Actions.styles\";\n\nexport { staticClasses as dialogActionClasses };\n\nexport type HvDialogActionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDialogActionsProps\n  extends Omit<MuiDialogActionsProps, \"classes\"> {\n  /** Set the dialog to fullscreen mode. @deprecated set `fullscreen` in `HvDialog` */\n  fullscreen?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogActionClasses;\n}\n\nexport const HvDialogActions = (props: HvDialogActionsProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    fullscreen: fullScreenProp,\n    ...others\n  } = useDefaultProps(\"HvDialogActions\", props);\n  const context = useDialogContext();\n  const fullScreen = fullScreenProp ?? context.fullScreen;\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <MuiDialogActions\n      className={className}\n      classes={{\n        root: cx(classes.root, { [classes.fullscreen]: fullScreen }),\n        spacing: classes.spacing,\n      }}\n      {...others}\n    >\n      {children}\n    </MuiDialogActions>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuBa,MAAA,kBAAkB,CAAC,UAAgC;AACxD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,IACD,gBAAgB,mBAAmB,KAAK;AAC5C,QAAM,UAAU,iBAAiB;AAC3B,QAAA,aAAa,kBAAkB,QAAQ;AAE7C,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,GAAG,QAAQ,MAAM,EAAE,CAAC,QAAQ,UAAU,GAAG,YAAY;AAAA,QAC3D,SAAS,QAAQ;AAAA,MACnB;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EACH;AAEJ;"}

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

@@ -2,12 +2,12 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvDialog-Action", {
   root: {
-    margin: "0",
+    margin: 0,
     padding: theme.space.sm,
+    backgroundColor: "inherit",
     borderTop: `3px solid ${theme.colors.atmo2}`,
     height: 65,
-    maxHeight: 65,
-    flex: 1
+    maxHeight: 65
   },
   fullscreen: { position: "fixed", width: "100%", bottom: 0, left: 0 },
   spacing: {

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

@@ -1 +1 @@
-{"version":3,"file":"Actions.styles.js","sources":["../../../../src/Dialog/Actions/Actions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Action\", {\n  root: {\n    margin: \"0\",\n    padding: theme.space.sm,\n    borderTop: `3px solid ${theme.colors.atmo2}`,\n    height: 65,\n    maxHeight: 65,\n    flex: 1,\n  },\n  fullscreen: { position: \"fixed\", width: \"100%\", bottom: 0, left: 0 },\n  spacing: {\n    \"& > :not(:first-of-type)\": {\n      marginLeft: theme.space.xs,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS,MAAM,MAAM;AAAA,IACrB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,MAAM;AAAA,EACR;AAAA,EACA,YAAY,EAAE,UAAU,SAAS,OAAO,QAAQ,QAAQ,GAAG,MAAM,EAAE;AAAA,EACnE,SAAS;AAAA,IACP,4BAA4B;AAAA,MAC1B,YAAY,MAAM,MAAM;AAAA,IAAA;AAAA,EAC1B;AAEJ,CAAC;"}
+{"version":3,"file":"Actions.styles.js","sources":["../../../../src/Dialog/Actions/Actions.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Action\", {\n  root: {\n    margin: 0,\n    padding: theme.space.sm,\n    backgroundColor: \"inherit\",\n    borderTop: `3px solid ${theme.colors.atmo2}`,\n    height: 65,\n    maxHeight: 65,\n  },\n  fullscreen: { position: \"fixed\", width: \"100%\", bottom: 0, left: 0 },\n  spacing: {\n    \"& > :not(:first-of-type)\": {\n      marginLeft: theme.space.xs,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,mBAAmB;AAAA,EAC5E,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,SAAS,MAAM,MAAM;AAAA,IACrB,iBAAiB;AAAA,IACjB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,QAAQ;AAAA,IACR,WAAW;AAAA,EACb;AAAA,EACA,YAAY,EAAE,UAAU,SAAS,OAAO,QAAQ,QAAQ,GAAG,MAAM,EAAE;AAAA,EACnE,SAAS;AAAA,IACP,4BAA4B;AAAA,MAC1B,YAAY,MAAM,MAAM;AAAA,IAAA;AAAA,EAC1B;AAEJ,CAAC;"}

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

@@ -2,13 +2,11 @@ import { createClasses } from "@hitachivantara/uikit-react-utils";
 import { theme } from "@hitachivantara/uikit-styles";
 const { staticClasses, useClasses } = createClasses("HvDialog-Content", {
   root: {
-    padding: `0 ${theme.space.sm} ${theme.space.sm} ${theme.space.sm}`,
-    flex: "none"
+    padding: theme.spacing(0, "sm", "sm")
   },
   textContent: {
     marginLeft: "42px",
     paddingRight: "62px",
-    flex: 1,
     overflowY: "auto"
   }
 });

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

@@ -1 +1 @@
-{"version":3,"file":"Content.styles.js","sources":["../../../../src/Dialog/Content/Content.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Content\", {\n  root: {\n    padding: `0 ${theme.space.sm} ${theme.space.sm} ${theme.space.sm}`,\n    flex: \"none\",\n  },\n  textContent: {\n    marginLeft: \"42px\",\n    paddingRight: \"62px\",\n    flex: 1,\n    overflowY: \"auto\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,SAAS,KAAK,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE,IAAI,MAAM,MAAM,EAAE;AAAA,IAChE,MAAM;AAAA,EACR;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,MAAM;AAAA,IACN,WAAW;AAAA,EAAA;AAEf,CAAC;"}
+{"version":3,"file":"Content.styles.js","sources":["../../../../src/Dialog/Content/Content.styles.tsx"],"sourcesContent":["import { createClasses } from \"@hitachivantara/uikit-react-utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvDialog-Content\", {\n  root: {\n    padding: theme.spacing(0, \"sm\", \"sm\"),\n  },\n  textContent: {\n    marginLeft: \"42px\",\n    paddingRight: \"62px\",\n    overflowY: \"auto\",\n  },\n});\n"],"names":[],"mappings":";;AAGO,MAAM,EAAE,eAAe,eAAe,cAAc,oBAAoB;AAAA,EAC7E,MAAM;AAAA,IACJ,SAAS,MAAM,QAAQ,GAAG,MAAM,IAAI;AAAA,EACtC;AAAA,EACA,aAAa;AAAA,IACX,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,EAAA;AAEf,CAAC;"}

package/dist/esm/Dialog/Dialog.js

@@ -20,28 +20,37 @@ const HvDialog = (props) => {
     onClose,
     firstFocusable,
     buttonTitle = "Close",
-    fullscreen = false,
+    fullHeight,
+    fullscreen: fullScreen = false,
+    // TODO: rename to `fullScreen` in v6
     disableBackdropClick = false,
     ...others
   } = useDefaultProps("HvDialog", props);
-  const { classes, css, cx } = useClasses(classesProp);
+  const { classes, cx } = useClasses(classesProp);
   const { rootId } = useTheme();
   const measuredRef = useCallback(() => {
     if (!firstFocusable) return;
     const element = document.getElementById(firstFocusable);
     element?.focus();
   }, [firstFocusable]);
-  const contextValue = useMemo(() => ({ fullscreen }), [fullscreen]);
+  const contextValue = useMemo(() => ({ fullScreen }), [fullScreen]);
   return /* @__PURE__ */ jsxs(
     MuiDialog,
     {
       container: getElementById(rootId),
-      className: cx(classes.root, className),
-      classes: { container: css({ position: "relative" }) },
+      className,
+      classes: {
+        root: classes.root,
+        paper: cx(classes.paper, classes[variant], {
+          [classes.fullHeight]: fullHeight,
+          [classes.statusBar]: !!variant,
+          [classes.fullscreen]: fullScreen
+        })
+      },
       id,
       ref: measuredRef,
       open,
-      fullScreen: fullscreen,
+      fullScreen,
       onClose: (event, reason) => {
         if (disableBackdropClick) return;
         onClose?.(event, reason);
@@ -53,18 +62,6 @@ const HvDialog = (props) => {
           }
         }
       },
-      PaperProps: {
-        classes: {
-          root: cx(
-            css({ position: "absolute" }),
-            classes.paper,
-            variant && cx(classes.statusBar, classes[variant]),
-            {
-              [classes.fullscreen]: fullscreen
-            }
-          )
-        }
-      },
       ...others,
       children: [
         /* @__PURE__ */ jsx(

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvIconButton } from \"../IconButton\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\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  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (\n    event: React.MouseEvent<HTMLButtonElement> | {},\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  const { rootId } = 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={getElementById(rootId)}\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: classes.background,\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      {...others}\n    >\n      <HvIconButton\n        title={buttonTitle}\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        onClick={(event: React.MouseEvent<HTMLButtonElement>) =>\n          onClose?.(event, undefined)\n        }\n      >\n        <Close />\n      </HvIconButton>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAsDa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd,aAAa;AAAA,IACb,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,OAAO,IAAI,SAAS;AAEtB,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC,eAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,MACrC,SAAS,EAAE,WAAW,IAAI,EAAE,UAAU,WAAA,CAAY,EAAE;AAAA,MACpD;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,YAAY;AAAA,MACZ,SAAS,CAAC,OAAO,WAAW;AAG1B,YAAI,qBAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAAA;AAAA,QAChB;AAAA,MAEJ;AAAA,MACA,YAAY;AAAA,QACV,SAAS;AAAA,UACP,MAAM;AAAA,YACJ,IAAI,EAAE,UAAU,YAAY;AAAA,YAC5B,QAAQ;AAAA,YACR,WAAW,GAAG,QAAQ,WAAW,QAAQ,OAAO,CAAC;AAAA,YACjD;AAAA,cACE,CAAC,QAAQ,UAAU,GAAG;AAAA,YAAA;AAAA,UACxB;AAAA,QACF;AAAA,MAEJ;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,UACR,UAAU,OAAO,MAAS;AAAA,YAG5B,8BAAC,OAAM,CAAA,CAAA;AAAA,UAAA;AAAA,QACT;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,SACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"version":3,"file":"Dialog.js","sources":["../../../src/Dialog/Dialog.tsx"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport {\n  useDefaultProps,\n  useTheme,\n  type ExtractNames,\n} from \"@hitachivantara/uikit-react-utils\";\n\nimport { HvIconButton } from \"../IconButton\";\nimport { getElementById } from \"../utils/document\";\nimport { setId } from \"../utils/setId\";\nimport { DialogContext } from \"./context\";\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  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Callback fired when the component requests to be closed. */\n  onClose?: (\n    event: React.MouseEvent<HTMLButtonElement> | {},\n    reason?: \"escapeKeyDown\" | \"backdropClick\",\n  ) => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /** If true, the dialog stretches vertically, limited by the margins. @default false */\n  fullHeight?: boolean;\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    fullHeight,\n    fullscreen: fullScreen = false, // TODO: rename to `fullScreen` in v6\n    disableBackdropClick = false,\n    ...others\n  } = useDefaultProps(\"HvDialog\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n  const { rootId } = 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={getElementById(rootId)}\n      className={className}\n      classes={{\n        root: classes.root,\n        paper: cx(classes.paper, classes[variant!], {\n          [classes.fullHeight]: fullHeight,\n          [classes.statusBar]: !!variant,\n          [classes.fullscreen]: fullScreen,\n        }),\n      }}\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: classes.background,\n          },\n        },\n      }}\n      {...others}\n    >\n      <HvIconButton<\"button\">\n        title={buttonTitle}\n        id={setId(id, \"close\")}\n        className={classes.closeButton}\n        onClick={(event) => onClose?.(event, undefined)}\n      >\n        <Close />\n      </HvIconButton>\n      <DialogContext.Provider value={contextValue}>\n        {children}\n      </DialogContext.Provider>\n    </MuiDialog>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AAwDa,MAAA,WAAW,CAAC,UAAyB;AAC1C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,YAAY,aAAa;AAAA;AAAA,IACzB,uBAAuB;AAAA,IACvB,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AAErC,QAAM,EAAE,SAAS,OAAO,WAAW,WAAW;AACxC,QAAA,EAAE,OAAO,IAAI,SAAS;AAEtB,QAAA,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC,eAAgB;AAEf,UAAA,UAAU,SAAS,eAAe,cAAc;AACtD,aAAS,MAAM;AAAA,EAAA,GACd,CAAC,cAAc,CAAC;AAEb,QAAA,eAAe,QAAQ,OAAO,EAAE,eAAe,CAAC,UAAU,CAAC;AAG/D,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,eAAe,MAAM;AAAA,MAChC;AAAA,MACA,SAAS;AAAA,QACP,MAAM,QAAQ;AAAA,QACd,OAAO,GAAG,QAAQ,OAAO,QAAQ,OAAQ,GAAG;AAAA,UAC1C,CAAC,QAAQ,UAAU,GAAG;AAAA,UACtB,CAAC,QAAQ,SAAS,GAAG,CAAC,CAAC;AAAA,UACvB,CAAC,QAAQ,UAAU,GAAG;AAAA,QACvB,CAAA;AAAA,MACH;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,SAAS,CAAC,OAAO,WAAW;AAG1B,YAAI,qBAAsB;AAE1B,kBAAU,OAAO,MAAM;AAAA,MACzB;AAAA,MACA,WAAW;AAAA,QACT,UAAU;AAAA,UACR,SAAS;AAAA,YACP,MAAM,QAAQ;AAAA,UAAA;AAAA,QAChB;AAAA,MAEJ;AAAA,MACC,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,OAAO;AAAA,YACP,IAAI,MAAM,IAAI,OAAO;AAAA,YACrB,WAAW,QAAQ;AAAA,YACnB,SAAS,CAAC,UAAU,UAAU,OAAO,MAAS;AAAA,YAE9C,8BAAC,OAAM,CAAA,CAAA;AAAA,UAAA;AAAA,QACT;AAAA,4BACC,cAAc,UAAd,EAAuB,OAAO,cAC5B,SACH,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAEJ;"}