@hitachivantara/uikit-react-core 5.62.2 → 5.63.0

package/dist/cjs/AvatarGroup/AvatarGroup.cjs

@@ -35,6 +35,7 @@ const HvAvatarGroup = React.forwardRef(
       toBack = true,
       maxVisible = 3,
       overflowComponent,
+      highlight = false,
       ...others
     } = useDefaultProps.useDefaultProps("HvAvatarGroup", props);
     const { classes, cx } = AvatarGroup_styles.useClasses(classesProp);
@@ -52,13 +53,18 @@ const HvAvatarGroup = React.forwardRef(
           React.Children.map(children, (child, index) => {
             if (index < maxVisible) {
               return React.cloneElement(child, {
-                style: {
-                  zIndex: 100 + index * zIndexMultiplier
-                },
                 classes: {
                   container: css.css({
                     marginLeft: direction === "row" ? index !== 0 ? -spacingValue : 0 : 0,
                     marginTop: direction === "column" ? index !== 0 ? -spacingValue : 0 : 0
+                  }),
+                  root: css.css({
+                    zIndex: 100 + index * zIndexMultiplier,
+                    ...highlight && {
+                      "&:hover": {
+                        zIndex: 100 + totalChildren + 1
+                      }
+                    }
                   })
                 },
                 size

package/dist/cjs/BaseCheckBox/BaseCheckBox.styles.cjs

@@ -28,7 +28,8 @@ const { staticClasses, useClasses } = classes.createClasses("HvBaseCheckBox", {
       pointerEvents: "initial",
       "& svg": {
         color: uikitStyles.theme.colors.atmo3,
-        borderColor: uikitStyles.theme.colors.secondary_60
+        borderColor: uikitStyles.theme.colors.secondary_60,
+        backgroundColor: uikitStyles.theme.colors.atmo3
       }
     }
   },
@@ -46,8 +47,6 @@ const { staticClasses, useClasses } = classes.createClasses("HvBaseCheckBox", {
     },
     "&$disabled": {
       "& svg": {
-        backgroundColor: uikitStyles.theme.colors.atmo3,
-        borderColor: uikitStyles.theme.colors.atmo3,
         color: uikitStyles.theme.colors.secondary_60
       }
     }
@@ -58,8 +57,6 @@ const { staticClasses, useClasses } = classes.createClasses("HvBaseCheckBox", {
     },
     "&$disabled": {
       "& svg": {
-        backgroundColor: uikitStyles.theme.colors.atmo3,
-        borderColor: uikitStyles.theme.colors.secondary_60,
         color: uikitStyles.theme.colors.secondary_60
       }
     }

package/dist/cjs/BaseRadio/BaseRadio.styles.cjs

@@ -18,7 +18,8 @@ const { staticClasses, useClasses } = classes.createClasses("HvBaseRadio", {
       width: 16,
       height: 16,
       borderRadius: uikitStyles.theme.radii.circle,
-      border: `1px solid ${uikitStyles.theme.colors.secondary}`
+      border: `1px solid ${uikitStyles.theme.colors.secondary}`,
+      backgroundColor: uikitStyles.theme.colors.atmo1
     },
     borderRadius: 0
   },

package/dist/cjs/LoadingContainer/LoadingContainer.styles.cjs

@@ -5,11 +5,11 @@ const classes = require("../utils/classes.cjs");
 const { staticClasses, useClasses } = classes.createClasses("HvLoadingContainer", {
   root: {
     position: "relative",
-    height: "inherit",
-    userSelect: "none"
+    height: "inherit"
   },
   loading: {
     position: "absolute",
+    userSelect: "none",
     inset: 0,
     zIndex: uikitStyles.theme.zIndices.overlay,
     transition: "background-color .2s ease",

package/dist/cjs/Select/Select.cjs

@@ -7,6 +7,7 @@ const useSelect = require("@mui/base/useSelect");
 const utils = require("@mui/material/utils");
 const clsx = require("clsx");
 const useDefaultProps = require("../hooks/useDefaultProps.cjs");
+const useTheme = require("../hooks/useTheme.cjs");
 const useUniqueId = require("../hooks/useUniqueId.cjs");
 const generic = require("../types/generic.cjs");
 const setId = require("../utils/setId.cjs");
@@ -51,6 +52,8 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
     value: valueProp,
     defaultValue,
     placeholder,
+    inputProps,
+    enablePortal,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     description,
@@ -65,6 +68,7 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
     ...others
   } = useDefaultProps.useDefaultProps("HvSelect", props);
   const { classes, cx } = Select_styles.useClasses(classesProp);
+  const { rootId } = useTheme.useTheme();
   const [placement, setPlacement] = React.useState("bottom-start");
   const buttonRef = React.useRef(null);
   const handleButtonRef = utils.useForkRef(ref, buttonRef);
@@ -174,7 +178,8 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
           {
             open: isOpen,
             keepMounted: true,
-            disablePortal: true,
+            disablePortal: !enablePortal,
+            container: enablePortal ? document.getElementById(rootId || "") || document.body : void 0,
             anchorEl: buttonRef.current,
             className: classes.popper,
             placement,
@@ -200,7 +205,14 @@ const HvSelect = generic.fixedForwardRef(function HvSelect2(props, ref) {
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { ...getHiddenInputProps(), autoComplete }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ...getHiddenInputProps(),
+            autoComplete,
+            ...inputProps
+          }
+        ),
         canShowError && /* @__PURE__ */ jsxRuntime.jsx(
           WarningText.HvWarningText,
           {

package/dist/esm/AvatarGroup/AvatarGroup.js

@@ -34,6 +34,7 @@ const HvAvatarGroup = forwardRef(
       toBack = true,
       maxVisible = 3,
       overflowComponent,
+      highlight = false,
       ...others
     } = useDefaultProps("HvAvatarGroup", props);
     const { classes, cx } = useClasses(classesProp);
@@ -51,13 +52,18 @@ const HvAvatarGroup = forwardRef(
           Children.map(children, (child, index) => {
             if (index < maxVisible) {
               return cloneElement(child, {
-                style: {
-                  zIndex: 100 + index * zIndexMultiplier
-                },
                 classes: {
                   container: css({
                     marginLeft: direction === "row" ? index !== 0 ? -spacingValue : 0 : 0,
                     marginTop: direction === "column" ? index !== 0 ? -spacingValue : 0 : 0
+                  }),
+                  root: css({
+                    zIndex: 100 + index * zIndexMultiplier,
+                    ...highlight && {
+                      "&:hover": {
+                        zIndex: 100 + totalChildren + 1
+                      }
+                    }
                   })
                 },
                 size

package/dist/esm/AvatarGroup/AvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.js","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { Children, cloneElement, forwardRef } from \"react\";\nimport { css } from \"@emotion/css\";\nimport { HvSize, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../Avatar/Avatar\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./AvatarGroup.styles\";\n\nexport { staticClasses as avatarGroupClasses };\n\nexport type HvAvatarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAvatarGroupProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarGroupClasses;\n  /** The avatar size. */\n  size?: HvSize;\n  /** The spacing between avatars. */\n  spacing?: \"compact\" | \"loose\";\n  /** The direction of the group. */\n  direction?: \"row\" | \"column\";\n  /** Whether the avatars display behind the previous avatar or on top. */\n  toBack?: boolean;\n  /**\n   * The maximum number of visible avatars. If there are more avatars then the value of this property, an added avatar will\n   * be added to the end of the list, indicating the number of hidden avatars.\n   */\n  maxVisible?: number;\n  /**\n   * What to show as an overflow representation.\n   * If `undefined` a default `HvAvatar` will be displayed along with a HvTooltip with the count of overflowing items.\n   * */\n  overflowComponent?: (overflowCount: number) => React.ReactNode;\n}\n\nconst getSpacingValue = (\n  spacing: HvAvatarGroupProps[\"spacing\"],\n  size: HvAvatarGroupProps[\"size\"],\n) => {\n  switch (size) {\n    case \"xs\":\n      return spacing === \"compact\" ? 24 : 16;\n    case \"sm\":\n      return spacing === \"compact\" ? 30 : 18;\n    case \"md\":\n      return spacing === \"compact\" ? 36 : 20;\n    case \"lg\":\n      return spacing === \"compact\" ? 44 : 24;\n    case \"xl\":\n      return spacing === \"compact\" ? 72 : 34;\n    default:\n      return spacing === \"compact\" ? 30 : 18;\n  }\n};\n\n/**\n * The AvatarGroup component is used to group multiple avatars.\n */\nexport const HvAvatarGroup = forwardRef<HTMLDivElement, HvAvatarGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      classes: classesProp,\n      children,\n      size = \"sm\",\n      spacing = \"loose\",\n      direction = \"row\",\n      toBack = true,\n      maxVisible = 3,\n      overflowComponent,\n      ...others\n    } = useDefaultProps(\"HvAvatarGroup\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const spacingValue = getSpacingValue(spacing, size);\n\n    const totalChildren = Children.count(children);\n    const zIndexMultiplier = toBack ? -1 : 1;\n    const willOverflow = totalChildren > maxVisible;\n\n    return (\n      <div\n        className={cx(classes.root, classes[direction], className)}\n        ref={ref}\n        {...others}\n      >\n        {Children.map(children, (child: any, index: number) => {\n          if (index < maxVisible) {\n            return cloneElement(child, {\n              style: {\n                zIndex: 100 + index * zIndexMultiplier,\n              },\n              classes: {\n                container: css({\n                  marginLeft:\n                    direction === \"row\" ? (index !== 0 ? -spacingValue : 0) : 0,\n                  marginTop:\n                    direction === \"column\"\n                      ? index !== 0\n                        ? -spacingValue\n                        : 0\n                      : 0,\n                }),\n              },\n              size,\n            });\n          }\n        })}\n        {willOverflow && (\n          <div\n            style={{\n              marginLeft: direction === \"row\" ? -spacingValue : 0,\n              marginTop: direction === \"column\" ? -spacingValue : 0,\n              zIndex: 100 + maxVisible * zIndexMultiplier,\n            }}\n          >\n            {overflowComponent ? (\n              overflowComponent(totalChildren - maxVisible)\n            ) : (\n              <HvAvatar\n                size={size}\n                backgroundColor={theme.colors.atmo4}\n                classes={{\n                  avatar: css({\n                    [`&.HvAvatar-${size}`]: {\n                      fontSize: \"unset\",\n                    },\n                  }),\n                }}\n              >\n                +{totalChildren - maxVisible}\n              </HvAvatar>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;AAqCA,MAAM,kBAAkB,CACtB,SACA,SACG;AACH,UAAQ,MAAM;AAAA,IACZ,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC;AACS,aAAA,YAAY,YAAY,KAAK;AAAA,EACxC;AACF;AAKO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,aAAa;AAAA,MACb;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,gBAAgB,SAAS,IAAI;AAE5C,UAAA,gBAAgB,SAAS,MAAM,QAAQ;AACvC,UAAA,mBAAmB,SAAS,KAAK;AACvC,UAAM,eAAe,gBAAgB;AAGnC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,QAAQ,SAAS,GAAG,SAAS;AAAA,QACzD;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,SAAS,IAAI,UAAU,CAAC,OAAY,UAAkB;AACrD,gBAAI,QAAQ,YAAY;AACtB,qBAAO,aAAa,OAAO;AAAA,gBACzB,OAAO;AAAA,kBACL,QAAQ,MAAM,QAAQ;AAAA,gBACxB;AAAA,gBACA,SAAS;AAAA,kBACP,WAAW,IAAI;AAAA,oBACb,YACE,cAAc,QAAS,UAAU,IAAI,CAAC,eAAe,IAAK;AAAA,oBAC5D,WACE,cAAc,WACV,UAAU,IACR,CAAC,eACD,IACF;AAAA,kBAAA,CACP;AAAA,gBACH;AAAA,gBACA;AAAA,cAAA,CACD;AAAA,YACH;AAAA,UAAA,CACD;AAAA,UACA,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,YAAY,cAAc,QAAQ,CAAC,eAAe;AAAA,gBAClD,WAAW,cAAc,WAAW,CAAC,eAAe;AAAA,gBACpD,QAAQ,MAAM,aAAa;AAAA,cAC7B;AAAA,cAEC,UACC,oBAAA,kBAAkB,gBAAgB,UAAU,IAE5C;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA,iBAAiB,MAAM,OAAO;AAAA,kBAC9B,SAAS;AAAA,oBACP,QAAQ,IAAI;AAAA,sBACV,CAAC,cAAc,IAAI,EAAE,GAAG;AAAA,wBACtB,UAAU;AAAA,sBACZ;AAAA,oBAAA,CACD;AAAA,kBACH;AAAA,kBACD,UAAA;AAAA,oBAAA;AAAA,oBACG,gBAAgB;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACpB;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}
+{"version":3,"file":"AvatarGroup.js","sources":["../../../src/AvatarGroup/AvatarGroup.tsx"],"sourcesContent":["import { Children, cloneElement, forwardRef } from \"react\";\nimport { css } from \"@emotion/css\";\nimport { HvSize, theme } from \"@hitachivantara/uikit-styles\";\n\nimport { HvAvatar } from \"../Avatar/Avatar\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { staticClasses, useClasses } from \"./AvatarGroup.styles\";\n\nexport { staticClasses as avatarGroupClasses };\n\nexport type HvAvatarGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAvatarGroupProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvAvatarGroupClasses;\n  /** The avatar size. */\n  size?: HvSize;\n  /** The spacing between avatars. */\n  spacing?: \"compact\" | \"loose\";\n  /** The direction of the group. */\n  direction?: \"row\" | \"column\";\n  /** Whether the avatars display behind the previous avatar or on top. */\n  toBack?: boolean;\n  /**\n   * The maximum number of visible avatars. If there are more avatars then the value of this property, an added avatar will\n   * be added to the end of the list, indicating the number of hidden avatars.\n   */\n  maxVisible?: number;\n  /**\n   * What to show as an overflow representation.\n   * If `undefined` a default `HvAvatar` will be displayed along with a HvTooltip with the count of overflowing items.\n   * */\n  overflowComponent?: (overflowCount: number) => React.ReactNode;\n  /**\n   * If `true` the avatars will be brought to the front when hovered.\n   */\n  highlight?: boolean;\n}\n\nconst getSpacingValue = (\n  spacing: HvAvatarGroupProps[\"spacing\"],\n  size: HvAvatarGroupProps[\"size\"],\n) => {\n  switch (size) {\n    case \"xs\":\n      return spacing === \"compact\" ? 24 : 16;\n    case \"sm\":\n      return spacing === \"compact\" ? 30 : 18;\n    case \"md\":\n      return spacing === \"compact\" ? 36 : 20;\n    case \"lg\":\n      return spacing === \"compact\" ? 44 : 24;\n    case \"xl\":\n      return spacing === \"compact\" ? 72 : 34;\n    default:\n      return spacing === \"compact\" ? 30 : 18;\n  }\n};\n\n/**\n * The AvatarGroup component is used to group multiple avatars.\n */\nexport const HvAvatarGroup = forwardRef<HTMLDivElement, HvAvatarGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      classes: classesProp,\n      children,\n      size = \"sm\",\n      spacing = \"loose\",\n      direction = \"row\",\n      toBack = true,\n      maxVisible = 3,\n      overflowComponent,\n      highlight = false,\n      ...others\n    } = useDefaultProps(\"HvAvatarGroup\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const spacingValue = getSpacingValue(spacing, size);\n\n    const totalChildren = Children.count(children);\n    const zIndexMultiplier = toBack ? -1 : 1;\n    const willOverflow = totalChildren > maxVisible;\n\n    return (\n      <div\n        className={cx(classes.root, classes[direction], className)}\n        ref={ref}\n        {...others}\n      >\n        {Children.map(children, (child: any, index: number) => {\n          if (index < maxVisible) {\n            return cloneElement(child, {\n              classes: {\n                container: css({\n                  marginLeft:\n                    direction === \"row\" ? (index !== 0 ? -spacingValue : 0) : 0,\n                  marginTop:\n                    direction === \"column\"\n                      ? index !== 0\n                        ? -spacingValue\n                        : 0\n                      : 0,\n                }),\n                root: css({\n                  zIndex: 100 + index * zIndexMultiplier,\n                  ...(highlight && {\n                    \"&:hover\": {\n                      zIndex: 100 + totalChildren + 1,\n                    },\n                  }),\n                }),\n              },\n              size,\n            });\n          }\n        })}\n        {willOverflow && (\n          <div\n            style={{\n              marginLeft: direction === \"row\" ? -spacingValue : 0,\n              marginTop: direction === \"column\" ? -spacingValue : 0,\n              zIndex: 100 + maxVisible * zIndexMultiplier,\n            }}\n          >\n            {overflowComponent ? (\n              overflowComponent(totalChildren - maxVisible)\n            ) : (\n              <HvAvatar\n                size={size}\n                backgroundColor={theme.colors.atmo4}\n                classes={{\n                  avatar: css({\n                    [`&.HvAvatar-${size}`]: {\n                      fontSize: \"unset\",\n                    },\n                  }),\n                }}\n              >\n                +{totalChildren - maxVisible}\n              </HvAvatar>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":[],"mappings":";;;;;;;;AAyCA,MAAM,kBAAkB,CACtB,SACA,SACG;AACH,UAAQ,MAAM;AAAA,IACZ,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC,KAAK;AACI,aAAA,YAAY,YAAY,KAAK;AAAA,IACtC;AACS,aAAA,YAAY,YAAY,KAAK;AAAA,EACxC;AACF;AAKO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,aAAa;AAAA,MACb;AAAA,MACA,YAAY;AAAA,MACZ,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAC1C,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,eAAe,gBAAgB,SAAS,IAAI;AAE5C,UAAA,gBAAgB,SAAS,MAAM,QAAQ;AACvC,UAAA,mBAAmB,SAAS,KAAK;AACvC,UAAM,eAAe,gBAAgB;AAGnC,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,GAAG,QAAQ,MAAM,QAAQ,SAAS,GAAG,SAAS;AAAA,QACzD;AAAA,QACC,GAAG;AAAA,QAEH,UAAA;AAAA,UAAA,SAAS,IAAI,UAAU,CAAC,OAAY,UAAkB;AACrD,gBAAI,QAAQ,YAAY;AACtB,qBAAO,aAAa,OAAO;AAAA,gBACzB,SAAS;AAAA,kBACP,WAAW,IAAI;AAAA,oBACb,YACE,cAAc,QAAS,UAAU,IAAI,CAAC,eAAe,IAAK;AAAA,oBAC5D,WACE,cAAc,WACV,UAAU,IACR,CAAC,eACD,IACF;AAAA,kBAAA,CACP;AAAA,kBACD,MAAM,IAAI;AAAA,oBACR,QAAQ,MAAM,QAAQ;AAAA,oBACtB,GAAI,aAAa;AAAA,sBACf,WAAW;AAAA,wBACT,QAAQ,MAAM,gBAAgB;AAAA,sBAChC;AAAA,oBACF;AAAA,kBAAA,CACD;AAAA,gBACH;AAAA,gBACA;AAAA,cAAA,CACD;AAAA,YACH;AAAA,UAAA,CACD;AAAA,UACA,gBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,gBACL,YAAY,cAAc,QAAQ,CAAC,eAAe;AAAA,gBAClD,WAAW,cAAc,WAAW,CAAC,eAAe;AAAA,gBACpD,QAAQ,MAAM,aAAa;AAAA,cAC7B;AAAA,cAEC,UACC,oBAAA,kBAAkB,gBAAgB,UAAU,IAE5C;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC;AAAA,kBACA,iBAAiB,MAAM,OAAO;AAAA,kBAC9B,SAAS;AAAA,oBACP,QAAQ,IAAI;AAAA,sBACV,CAAC,cAAc,IAAI,EAAE,GAAG;AAAA,wBACtB,UAAU;AAAA,sBACZ;AAAA,oBAAA,CACD;AAAA,kBACH;AAAA,kBACD,UAAA;AAAA,oBAAA;AAAA,oBACG,gBAAgB;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACpB;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}

package/dist/esm/BaseCheckBox/BaseCheckBox.styles.js

@@ -26,7 +26,8 @@ const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
       pointerEvents: "initial",
       "& svg": {
         color: theme.colors.atmo3,
-        borderColor: theme.colors.secondary_60
+        borderColor: theme.colors.secondary_60,
+        backgroundColor: theme.colors.atmo3
       }
     }
   },
@@ -44,8 +45,6 @@ const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
     },
     "&$disabled": {
       "& svg": {
-        backgroundColor: theme.colors.atmo3,
-        borderColor: theme.colors.atmo3,
         color: theme.colors.secondary_60
       }
     }
@@ -56,8 +55,6 @@ const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
     },
     "&$disabled": {
       "& svg": {
-        backgroundColor: theme.colors.atmo3,
-        borderColor: theme.colors.secondary_60,
         color: theme.colors.secondary_60
       }
     }

package/dist/esm/BaseCheckBox/BaseCheckBox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.styles.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    borderRadius: theme.radii.base,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n\n    \"& svg\": {\n      width: 16,\n      height: 16,\n      color: theme.colors.atmo1,\n      borderRadius: theme.radii.none,\n      border: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  disabled: {\n    \"&$root\": {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n      \"& svg\": {\n        color: theme.colors.atmo3,\n        borderColor: theme.colors.secondary_60,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: theme.colors.secondary,\n      color: theme.colors.atmo1,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        backgroundColor: theme.colors.atmo3,\n        borderColor: theme.colors.atmo3,\n        color: theme.colors.secondary_60,\n      },\n    },\n  },\n  indeterminate: {\n    \"& svg\": {\n      color: theme.colors.secondary,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        backgroundColor: theme.colors.atmo3,\n        borderColor: theme.colors.secondary_60,\n        color: theme.colors.secondary_60,\n      },\n    },\n  },\n  semantic: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.base_dark}`,\n      color: theme.colors.base_light,\n      backgroundColor: theme.colors.base_dark,\n    },\n    \"&$indeterminate\": {\n      \"& svg\": {\n        color: theme.colors.base_dark,\n        backgroundColor: theme.colors.base_light,\n      },\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO,MAAM,OAAO;AAAA,MACpB,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,aAAa,MAAM,OAAO;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,iBAAiB,MAAM,OAAO;AAAA,QAC9B,aAAa,MAAM,OAAO;AAAA,QAC1B,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,SAAS;AAAA,MACP,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,iBAAiB,MAAM,OAAO;AAAA,QAC9B,aAAa,MAAM,OAAO;AAAA,QAC1B,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,OAAO,MAAM,OAAO;AAAA,MACpB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"BaseCheckBox.styles.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    borderRadius: theme.radii.base,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n    },\n\n    \"& svg\": {\n      width: 16,\n      height: 16,\n      color: theme.colors.atmo1,\n      borderRadius: theme.radii.none,\n      border: `1px solid ${theme.colors.secondary}`,\n    },\n  },\n  disabled: {\n    \"&$root\": {\n      cursor: \"not-allowed\",\n      pointerEvents: \"initial\",\n      \"& svg\": {\n        color: theme.colors.atmo3,\n        borderColor: theme.colors.secondary_60,\n        backgroundColor: theme.colors.atmo3,\n      },\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: theme.colors.secondary,\n      color: theme.colors.atmo1,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        color: theme.colors.secondary_60,\n      },\n    },\n  },\n  indeterminate: {\n    \"& svg\": {\n      color: theme.colors.secondary,\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        color: theme.colors.secondary_60,\n      },\n    },\n  },\n  semantic: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.base_dark}`,\n      color: theme.colors.base_light,\n      backgroundColor: theme.colors.base_dark,\n    },\n    \"&$indeterminate\": {\n      \"& svg\": {\n        color: theme.colors.base_dark,\n        backgroundColor: theme.colors.base_light,\n      },\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO,MAAM,OAAO;AAAA,MACpB,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,aAAa,MAAM,OAAO;AAAA,QAC1B,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,SAAS;AAAA,MACP,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,OAAO,MAAM,OAAO;AAAA,MACpB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/BaseRadio/BaseRadio.styles.js

@@ -16,7 +16,8 @@ const { staticClasses, useClasses } = createClasses("HvBaseRadio", {
       width: 16,
       height: 16,
       borderRadius: theme.radii.circle,
-      border: `1px solid ${theme.colors.secondary}`
+      border: `1px solid ${theme.colors.secondary}`,
+      backgroundColor: theme.colors.atmo1
     },
     borderRadius: 0
   },

package/dist/esm/BaseRadio/BaseRadio.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseRadio.styles.js","sources":["../../../src/BaseRadio/BaseRadio.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseRadio\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    cursor: \"pointer\",\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n    \"& svg\": {\n      width: 16,\n      height: 16,\n      borderRadius: theme.radii.circle,\n      border: `1px solid ${theme.colors.secondary}`,\n    },\n    borderRadius: 0,\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"initial\",\n    \"& svg\": {\n      border: `1px solid ${theme.colors.secondary_60}`,\n      backgroundColor: theme.colors.atmo3,\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      borderRadius: \"8px\",\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: theme.colors.secondary,\n      color: theme.colors.atmo2,\n    },\n    \"&$semantic\": {\n      \"& svg\": {\n        border: `1px solid ${theme.colors.base_dark}`,\n        backgroundColor: theme.colors.base_light,\n        color: theme.colors.base_dark,\n      },\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n        backgroundColor: theme.colors.secondary_60,\n        color: theme.colors.atmo3,\n      },\n    },\n  },\n  semantic: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.base_dark}`,\n      backgroundColor: theme.colors.base_light,\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC7C;AAAA,IACA,cAAc;AAAA,EAChB;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,cAAc;AAAA,MACd,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,QAC3C,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,QAC9C,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AACF,CAAC;"}
+{"version":3,"file":"BaseRadio.styles.js","sources":["../../../src/BaseRadio/BaseRadio.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\nimport { outlineStyles } from \"../utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseRadio\", {\n  root: {\n    padding: 0,\n    width: 32,\n    minWidth: 32,\n    height: 32,\n    cursor: \"pointer\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n    \"& svg\": {\n      width: 16,\n      height: 16,\n      borderRadius: theme.radii.circle,\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: theme.colors.atmo1,\n    },\n    borderRadius: 0,\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    pointerEvents: \"initial\",\n    \"& svg\": {\n      border: `1px solid ${theme.colors.secondary_60}`,\n      backgroundColor: theme.colors.atmo3,\n    },\n  },\n  focusVisible: {\n    \"& svg\": {\n      borderRadius: \"8px\",\n      ...outlineStyles,\n    },\n  },\n  icon: {},\n  checked: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.secondary}`,\n      backgroundColor: theme.colors.secondary,\n      color: theme.colors.atmo2,\n    },\n    \"&$semantic\": {\n      \"& svg\": {\n        border: `1px solid ${theme.colors.base_dark}`,\n        backgroundColor: theme.colors.base_light,\n        color: theme.colors.base_dark,\n      },\n    },\n    \"&$disabled\": {\n      \"& svg\": {\n        border: `1px solid ${theme.colors.secondary_60}`,\n        backgroundColor: theme.colors.secondary_60,\n        color: theme.colors.atmo3,\n      },\n    },\n  },\n  semantic: {\n    \"& svg\": {\n      border: `1px solid ${theme.colors.base_dark}`,\n      backgroundColor: theme.colors.base_light,\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,QAAQ;AAAA,IAER,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,MAC9B,cAAc,MAAM,MAAM;AAAA,IAC5B;AAAA,IACA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,cAAc;AAAA,EAChB;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,eAAe;AAAA,IACf,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,MAC9C,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,cAAc;AAAA,MACd,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,QAC3C,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,QAAQ,aAAa,MAAM,OAAO,YAAY;AAAA,QAC9C,iBAAiB,MAAM,OAAO;AAAA,QAC9B,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n  staticClasses as buttonClasses,\n  getColoringStyle,\n  getIconSizeStyles,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the button. */\n      variant?: HvButtonVariant;\n      /** Whether the button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: React.ReactNode;\n      /** Element placed after the children. */\n      endIcon?: React.ReactNode;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the button is selected or not. */\n      selected?: boolean;\n      /**\n       * Whether the button is focusable when disabled.\n       * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n       * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n       */\n      focusableWhenDisabled?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string,\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`,\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n  C extends React.ElementType = \"button\",\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    classes: classesProp,\n    children,\n    variant: variantProp, // TODO - should we split into two props (color and type) in v6?\n    disabled = false,\n    className,\n    startIcon,\n    endIcon,\n    icon = false,\n    size,\n    radius,\n    overrideIconColors = true,\n    component: Component = \"button\",\n    focusableWhenDisabled,\n    onClick: onClickProp,\n    onMouseDown: onMouseDownProp,\n    selected,\n    ...others\n  } = useDefaultProps(\"HvButton\", props);\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n  const variant = mapVariant(\n    variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n    activeTheme?.name,\n  );\n\n  const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n    if (disabled) return;\n    onClickProp?.(e);\n  };\n\n  const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n    if (disabled) return;\n    onMouseDownProp?.(e);\n  };\n\n  const [color, type] = useMemo(() => {\n    const result = variant.split(/(?=[A-Z])/);\n    if (\n      result[0] === \"ghost\" ||\n      result[0] === \"semantic\" ||\n      (result[0] === \"secondary\" && !result[1])\n    )\n      return [];\n    return result.map((x) => x.toLowerCase());\n  }, [variant]);\n\n  return (\n    <Component\n      ref={ref}\n      className={cx(\n        classes.root,\n        type && classes[type],\n        color && css(getColoringStyle(color, type)),\n        classes[variant], // Placed after type and color CSS for DS3 override\n        size && !icon && css(getSizeStyles(size)),\n        radius && css(getRadiusStyles(radius)),\n        overrideIconColors && css(getOverrideColors()),\n        {\n          [classes.icon]: icon,\n          [classes.disabled]: disabled,\n        },\n        size && icon && css(getIconSizeStyles(size)),\n        className,\n      )}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      {...(Component === \"button\" && { type: \"button\" })}\n      {...(disabled && {\n        disabled: !focusableWhenDisabled,\n        tabIndex: focusableWhenDisabled ? 0 : -1,\n        \"aria-disabled\": true,\n      })}\n      {...(selected && { \"aria-pressed\": selected })}\n      {...others}\n    >\n      {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n      {children}\n      {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n    </Component>\n  );\n});\n"],"names":["HvButton"],"mappings":";;;;;;;AAiEA,MAAM,aAAa,CACjB,SACA,UACoB;AACpB,MAAI,UAAU;AAAc,WAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgB;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AAC/C,QAAA;AAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AACvD,QAAA;AAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAGrB,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAGV,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,QAAQ,IAAI;AAAA,QACpB,SAAS,IAAI,iBAAiB,OAAO,IAAI,CAAC;AAAA,QAC1C,QAAQ,OAAO;AAAA;AAAA,QACf,QAAQ,CAAC,QAAQ,IAAI,cAAc,IAAI,CAAC;AAAA,QACxC,UAAU,IAAI,gBAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,QAAQ,QAAQ,IAAI,kBAAkB,IAAI,CAAC;AAAA,QAC3C;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,EAAE,gBAAgB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,iCAAc,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,+BAAY,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}
+{"version":3,"file":"Button.js","sources":["../../../src/Button/Button.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useTheme } from \"../hooks/useTheme\";\nimport {\n  fixedForwardRef,\n  PolymorphicComponentRef,\n  PolymorphicRef,\n} from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\nimport {\n  staticClasses as buttonClasses,\n  getColoringStyle,\n  getIconSizeStyles,\n  getOverrideColors,\n  getRadiusStyles,\n  getSizeStyles,\n  useClasses,\n} from \"./Button.styles\";\nimport { HvButtonRadius, HvButtonSize, HvButtonVariant } from \"./types\";\n\nexport { buttonClasses };\n\nexport type HvButtonClasses = ExtractNames<typeof useClasses>;\n\nexport type HvButtonProps<C extends React.ElementType = \"button\"> =\n  PolymorphicComponentRef<\n    C,\n    {\n      /** Use the variant prop to change the visual style of the button. */\n      variant?: HvButtonVariant;\n      /** Whether the button is an icon-only button. */\n      icon?: boolean;\n      /** Whether the button is disabled or not. */\n      disabled?: boolean;\n      /** Class names to be applied. */\n      className?: string;\n      /** Element placed before the children. */\n      startIcon?: React.ReactNode;\n      /** Element placed after the children. */\n      endIcon?: React.ReactNode;\n      /** Button size. */\n      size?: HvButtonSize;\n      /** Button border radius. */\n      radius?: HvButtonRadius;\n      /** Defines the default colors of the button are forced into the icon. */\n      overrideIconColors?: boolean;\n      /** A Jss Object used to override or extend the styles applied. */\n      classes?: HvButtonClasses;\n      /** Whether the button is selected or not. */\n      selected?: boolean;\n      /**\n       * Whether the button is focusable when disabled.\n       * Without this property, the accessibility of the button decreases when disabled since it's not read by screen readers.\n       * Set this property to `true` when you need the button to still be focusable when disabled for accessibility purposes.\n       */\n      focusableWhenDisabled?: boolean;\n    }\n  >;\n\n/**\n * Normalize the button variant. It's meant to give us some retro-compatibility with\n * the DS 3.6 API.\n * @returns the normalized variant in DS 5 API\n */\nconst mapVariant = (\n  variant: HvButtonVariant,\n  theme?: string,\n): HvButtonVariant => {\n  if (theme === \"ds3\") return variant;\n\n  const deprecatedVariantMap: Record<string, HvButtonVariant> = {\n    secondary: \"secondarySubtle\",\n    ghost: \"primaryGhost\",\n  };\n\n  const mappedVariant = deprecatedVariantMap[variant];\n\n  if (import.meta.env.DEV && mappedVariant) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      `Button variant '${variant}' is deprecated. Please use '${mappedVariant}'.`,\n    );\n  }\n\n  return mappedVariant || variant;\n};\n\n/**\n * Button component is used to trigger an action or event.\n */\nexport const HvButton = fixedForwardRef(function HvButton<\n  C extends React.ElementType = \"button\",\n>(props: HvButtonProps<C>, ref: PolymorphicRef<C>) {\n  const {\n    classes: classesProp,\n    children,\n    variant: variantProp, // TODO - should we split into two props (color and type) in v6?\n    disabled = false,\n    className,\n    startIcon,\n    endIcon,\n    icon = false,\n    size,\n    radius,\n    overrideIconColors = true,\n    component: Component = \"button\",\n    focusableWhenDisabled,\n    onClick: onClickProp,\n    onMouseDown: onMouseDownProp,\n    selected,\n    ...others\n  } = useDefaultProps(\"HvButton\", props);\n  const { classes, css, cx } = useClasses(classesProp);\n  const { activeTheme } = useTheme();\n  const variant = mapVariant(\n    variantProp ?? (icon ? \"secondaryGhost\" : \"primary\"),\n    activeTheme?.name,\n  );\n\n  const handleClick: HvButtonProps[\"onClick\"] = (e) => {\n    if (disabled) return;\n    onClickProp?.(e);\n  };\n\n  const handleMouseDown: HvButtonProps[\"onMouseDown\"] = (e) => {\n    if (disabled) return;\n    onMouseDownProp?.(e);\n  };\n\n  const [color, type] = useMemo(() => {\n    const result = variant.split(/(?=[A-Z])/);\n    if (\n      result[0] === \"ghost\" ||\n      result[0] === \"semantic\" ||\n      (result[0] === \"secondary\" && !result[1])\n    )\n      return [];\n    return result.map((x) => x.toLowerCase());\n  }, [variant]);\n\n  return (\n    <Component\n      ref={ref}\n      className={cx(\n        classes.root,\n        type && classes[type],\n        color && css(getColoringStyle(color, type)),\n        classes[variant], // Placed after type and color CSS for DS3 override\n        size && !icon && css(getSizeStyles(size)),\n        radius && css(getRadiusStyles(radius)),\n        overrideIconColors && css(getOverrideColors()),\n        {\n          [classes.icon]: icon,\n          [classes.disabled]: disabled,\n        },\n        size && icon && css(getIconSizeStyles(size)),\n        className,\n      )}\n      onClick={handleClick}\n      onMouseDown={handleMouseDown}\n      {...(Component === \"button\" && { type: \"button\" })}\n      {...(disabled && {\n        disabled: !focusableWhenDisabled,\n        tabIndex: focusableWhenDisabled ? 0 : -1,\n        \"aria-disabled\": true,\n      })}\n      {...(selected && { \"aria-pressed\": selected })}\n      {...others}\n    >\n      {startIcon && <span className={classes.startIcon}>{startIcon}</span>}\n      {children}\n      {endIcon && <span className={classes.endIcon}>{endIcon}</span>}\n    </Component>\n  );\n});\n"],"names":["HvButton"],"mappings":";;;;;;;AAiEA,MAAM,aAAa,CACjB,SACA,UACoB;AACpB,MAAI,UAAU;AAAc,WAAA;AAE5B,QAAM,uBAAwD;AAAA,IAC5D,WAAW;AAAA,IACX,OAAO;AAAA,EAAA;AAGH,QAAA,gBAAgB,qBAAqB,OAAO;AASlD,SAAO,iBAAiB;AAC1B;AAKO,MAAM,WAAW,gBAAgB,SAASA,UAE/C,OAAyB,KAAwB;AAC3C,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA,SAAS;AAAA;AAAA,IACT,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,WAAW,YAAY;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT,aAAa;AAAA,IACb;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,YAAY,KAAK;AACrC,QAAM,EAAE,SAAS,KAAK,GAAG,IAAI,WAAW,WAAW;AAC7C,QAAA,EAAE,gBAAgB;AACxB,QAAM,UAAU;AAAA,IACd,gBAAgB,OAAO,mBAAmB;AAAA,IAC1C,aAAa;AAAA,EAAA;AAGT,QAAA,cAAwC,CAAC,MAAM;AAC/C,QAAA;AAAU;AACd,kBAAc,CAAC;AAAA,EAAA;AAGX,QAAA,kBAAgD,CAAC,MAAM;AACvD,QAAA;AAAU;AACd,sBAAkB,CAAC;AAAA,EAAA;AAGrB,QAAM,CAAC,OAAO,IAAI,IAAI,QAAQ,MAAM;AAC5B,UAAA,SAAS,QAAQ,MAAM,WAAW;AACxC,QACE,OAAO,CAAC,MAAM,WACd,OAAO,CAAC,MAAM,cACb,OAAO,CAAC,MAAM,eAAe,CAAC,OAAO,CAAC;AAEvC,aAAO;AACT,WAAO,OAAO,IAAI,CAAC,MAAM,EAAE,aAAa;AAAA,EAAA,GACvC,CAAC,OAAO,CAAC;AAGV,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR,QAAQ,QAAQ,IAAI;AAAA,QACpB,SAAS,IAAI,iBAAiB,OAAO,IAAI,CAAC;AAAA,QAC1C,QAAQ,OAAO;AAAA;AAAA,QACf,QAAQ,CAAC,QAAQ,IAAI,cAAc,IAAI,CAAC;AAAA,QACxC,UAAU,IAAI,gBAAgB,MAAM,CAAC;AAAA,QACrC,sBAAsB,IAAI,mBAAmB;AAAA,QAC7C;AAAA,UACE,CAAC,QAAQ,IAAI,GAAG;AAAA,UAChB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA,QAAQ,QAAQ,IAAI,kBAAkB,IAAI,CAAC;AAAA,QAC3C;AAAA,MACF;AAAA,MACA,SAAS;AAAA,MACT,aAAa;AAAA,MACZ,GAAI,cAAc,YAAY,EAAE,MAAM,SAAS;AAAA,MAC/C,GAAI,YAAY;AAAA,QACf,UAAU,CAAC;AAAA,QACX,UAAU,wBAAwB,IAAI;AAAA,QACtC,iBAAiB;AAAA,MACnB;AAAA,MACC,GAAI,YAAY,EAAE,gBAAgB,SAAS;AAAA,MAC3C,GAAG;AAAA,MAEH,UAAA;AAAA,QAAA,aAAc,oBAAA,QAAA,EAAK,WAAW,QAAQ,WAAY,UAAU,WAAA;AAAA,QAC5D;AAAA,QACA,WAAY,oBAAA,QAAA,EAAK,WAAW,QAAQ,SAAU,UAAQ,SAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7D,CAAC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  isInvalid,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListValue } from \"../List\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { getSelected, getSelectionLabel } from \"./utils\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDropdownStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvDropdownProps\n  extends Omit<HvFormElementProps, \"value\" | \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"placement\"\n      | \"popperProps\"\n      | \"disablePortal\"\n      | \"variableWidth\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n    > {\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\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 will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabels;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\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?: Partial<HvBaseDropdownProps>;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: Partial<HvDropdownListProps>;\n}\n\nconst DEFAULT_LABELS = {\n  /** Label for overwrite the default header behavior. */\n  select: undefined as string | undefined,\n  /** Label used for the All checkbox action. */\n  selectAll: \"All\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** The label used in the middle of the multiSelection count. */\n  searchPlaceholder: \"Search\",\n  /** The label used in search. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvDropdownLabels = Partial<typeof DEFAULT_LABELS>;\n/** @deprecated use `HvDropdownLabels` instead */\nexport type HvDropdownLabelsProps = HvDropdownLabels;\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 = forwardRef<HTMLDivElement, HvDropdownProps>(\n  (props, ref) => {\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);\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded),\n    );\n    const [selectionLabel, setSelectionLabel] = useState(\n      getSelectionLabel(labels, placeholder, multiSelect, values),\n    );\n\n    const [internalValues, setInternalValues] = useState(values);\n\n    // Hack - Keeping track of internal values for validation purposes since useState is async\n    const internalValuesRef = useRef(values);\n\n    useEffect(() => {\n      setInternalValues(values);\n      internalValuesRef.current = values;\n    }, [values]);\n\n    useEffect(() => {\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, values),\n      );\n    }, [labels, multiSelect, placeholder, values]);\n\n    if (import.meta.env.DEV && virtualized && !height) {\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 {\n      ref: refProp,\n      dropdownHeaderRef: dropdownHeaderRefProp,\n      ...otherBaseDropdownProps\n    } = baseDropdownProps;\n    const headerForkedRef = useForkRef(\n      dropdownHeaderRefProp,\n      dropdownHeaderRef,\n    );\n\n    const dropdownForkedRef = useForkRef(ref, refProp);\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 =\n              getSelected(internalValuesRef.current).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        internalValuesRef.current = listValues;\n\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\n          ? [...containerRef.getElementsByTagName(\"li\")]\n          : [];\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          ref={dropdownForkedRef}\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={headerForkedRef}\n          {...otherBaseDropdownProps}\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);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n  isInvalid,\n} from \"../Forms\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { HvListValue } from \"../List\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { getSelected, getSelectionLabel } from \"./utils\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDropdownStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvDropdownProps\n  extends Omit<HvFormElementProps, \"value\" | \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"placement\"\n      | \"popperProps\"\n      | \"disablePortal\"\n      | \"variableWidth\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n    > {\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\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 will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabels;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\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?: Partial<HvBaseDropdownProps>;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: Partial<HvDropdownListProps>;\n}\n\nconst DEFAULT_LABELS = {\n  /** Label for overwrite the default header behavior. */\n  select: undefined as string | undefined,\n  /** Label used for the All checkbox action. */\n  selectAll: \"All\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** The label used in the middle of the multiSelection count. */\n  searchPlaceholder: \"Search\",\n  /** The label used in search. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvDropdownLabels = Partial<typeof DEFAULT_LABELS>;\n/** @deprecated use `HvDropdownLabels` instead */\nexport type HvDropdownLabelsProps = HvDropdownLabels;\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 = forwardRef<HTMLDivElement, HvDropdownProps>(\n  (props, ref) => {\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);\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\",\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded),\n    );\n    const [selectionLabel, setSelectionLabel] = useState(\n      getSelectionLabel(labels, placeholder, multiSelect, values),\n    );\n\n    const [internalValues, setInternalValues] = useState(values);\n\n    // Hack - Keeping track of internal values for validation purposes since useState is async\n    const internalValuesRef = useRef(values);\n\n    useEffect(() => {\n      setInternalValues(values);\n      internalValuesRef.current = values;\n    }, [values]);\n\n    useEffect(() => {\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, values),\n      );\n    }, [labels, multiSelect, placeholder, values]);\n\n    if (import.meta.env.DEV && virtualized && !height) {\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 {\n      ref: refProp,\n      dropdownHeaderRef: dropdownHeaderRefProp,\n      ...otherBaseDropdownProps\n    } = baseDropdownProps;\n    const headerForkedRef = useForkRef(\n      dropdownHeaderRefProp,\n      dropdownHeaderRef,\n    );\n\n    const dropdownForkedRef = useForkRef(ref, refProp);\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 =\n              getSelected(internalValuesRef.current).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        internalValuesRef.current = listValues;\n\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\n          ? [...containerRef.getElementsByTagName(\"li\")]\n          : [];\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          ref={dropdownForkedRef}\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={headerForkedRef}\n          {...otherBaseDropdownProps}\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);\n"],"names":[],"mappings":"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"}

package/dist/esm/LoadingContainer/LoadingContainer.styles.js

@@ -3,11 +3,11 @@ import { createClasses } from "../utils/classes.js";
 const { staticClasses, useClasses } = createClasses("HvLoadingContainer", {
   root: {
     position: "relative",
-    height: "inherit",
-    userSelect: "none"
+    height: "inherit"
   },
   loading: {
     position: "absolute",
+    userSelect: "none",
     inset: 0,
     zIndex: theme.zIndices.overlay,
     transition: "background-color .2s ease",

package/dist/esm/LoadingContainer/LoadingContainer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingContainer.styles.js","sources":["../../../src/LoadingContainer/LoadingContainer.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nconst { staticClasses, useClasses } = createClasses(\"HvLoadingContainer\", {\n  root: {\n    position: \"relative\",\n    height: \"inherit\",\n    userSelect: \"none\",\n  },\n  loading: {\n    position: \"absolute\",\n    inset: 0,\n    zIndex: theme.zIndices.overlay,\n    transition: \"background-color .2s ease\",\n    backgroundColor: theme.alpha(\"atmo1\", \"var(--opacity, 0.8)\"),\n  },\n});\n\nexport { staticClasses, useClasses };\n"],"names":[],"mappings":";;AAIA,MAAM,EAAE,eAAe,eAAe,cAAc,sBAAsB;AAAA,EACxE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,OAAO;AAAA,IACP,QAAQ,MAAM,SAAS;AAAA,IACvB,YAAY;AAAA,IACZ,iBAAiB,MAAM,MAAM,SAAS,qBAAqB;AAAA,EAC7D;AACF,CAAC;"}
+{"version":3,"file":"LoadingContainer.styles.js","sources":["../../../src/LoadingContainer/LoadingContainer.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nconst { staticClasses, useClasses } = createClasses(\"HvLoadingContainer\", {\n  root: {\n    position: \"relative\",\n    height: \"inherit\",\n  },\n  loading: {\n    position: \"absolute\",\n    userSelect: \"none\",\n    inset: 0,\n    zIndex: theme.zIndices.overlay,\n    transition: \"background-color .2s ease\",\n    backgroundColor: theme.alpha(\"atmo1\", \"var(--opacity, 0.8)\"),\n  },\n});\n\nexport { staticClasses, useClasses };\n"],"names":[],"mappings":";;AAIA,MAAM,EAAE,eAAe,eAAe,cAAc,sBAAsB;AAAA,EACxE,MAAM;AAAA,IACJ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,QAAQ,MAAM,SAAS;AAAA,IACvB,YAAY;AAAA,IACZ,iBAAiB,MAAM,MAAM,SAAS,qBAAqB;AAAA,EAC7D;AACF,CAAC;"}

package/dist/esm/QueryBuilder/QueryBuilder.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.js","sources":["../../../src/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import { useEffect, useMemo, useReducer, useRef, useState } from \"react\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isEqual } from \"../utils/helpers\";\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\nimport {\n  defaultCombinators,\n  defaultLabels,\n  defaultOperators,\n  HvQueryBuilderProvider,\n} from \"./Context\";\nimport { staticClasses, useClasses } from \"./QueryBuilder.styles\";\nimport { RuleGroup } from \"./RuleGroup\";\nimport {\n  AskAction,\n  defaultRendererKey,\n  HvQueryBuilderAttribute,\n  HvQueryBuilderLabels,\n  HvQueryBuilderQuery,\n  HvQueryBuilderQueryCombinator,\n  HvQueryBuilderQueryOperator,\n  HvQueryBuilderRenderers,\n} from \"./types\";\nimport { clearNodeIds, emptyGroup, setNodeIds } from \"./utils\";\nimport reducer from \"./utils/reducer\";\n\nexport { staticClasses as queryBuilderClasses };\n\nexport type HvQueryBuilderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvQueryBuilderProps {\n  /** The query attribute types. */\n  attributes?: Record<string, HvQueryBuilderAttribute>;\n  /** The query rules operators by attribute type and combinator. */\n  operators?: Record<string, HvQueryBuilderQueryOperator[]>;\n  /** The query combinators operands. */\n  combinators?: HvQueryBuilderQueryCombinator[];\n  /** The query when the component is controlled. */\n  value?: HvQueryBuilderQuery;\n  /** The initial query when the component is uncontrolled. */\n  defaultValue?: HvQueryBuilderQuery;\n  /**\n   * The initial query when the component is uncontrolled.\n   *\n   * @deprecated Use `defaultValue` instead.\n   * */\n  query?: HvQueryBuilderQuery; // TODO - remove in v6\n  /** Callback fired when the query changes. */\n  onChange?: (value: HvQueryBuilderQuery) => void;\n  /** Max depth of nested query groups. */\n  maxDepth?: number;\n  /** Object containing all the labels. */\n  labels?: HvQueryBuilderLabels;\n  /** Whether the query builder is in read-only mode. */\n  readOnly?: boolean;\n  /**\n   * Operators that should use the empty value renderer when selected.\n   *\n   * When one of the listed operators is selected, the rule value is reset and an empty component is rendered.\n   * This property takes priority over `renderers`.\n   *\n   * @default [\"Empty\", \"IsNotEmpty\"]\n   * */\n  emptyRenderer?: string[];\n  /** Custom renderers for the rules' value. */\n  renderers?: HvQueryBuilderRenderers;\n  /** Whether to opt-out of the confirmation dialogs shown before removing rules and rule groups. @default false. */\n  disableConfirmation?: boolean;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvQueryBuilderClasses;\n}\n\n// TODO - v6\n// - \"range\", \"Empty\", and \"IsNotEmpty\" operators with internal/built-in logic\n\n// Notes:\n// Deep clone is needed throughout the component to avoid undesired mutations in props, state, and ref values\n\n/**\n * This component allows you to create conditions and group them using logical operators.\n * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.\n *\n * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/widgets-query-builder-usage--docs) to learn more about this component.\n */\nexport const HvQueryBuilder = (props: HvQueryBuilderProps) => {\n  const {\n    attributes,\n    renderers,\n    query: queryProp, // TODO - remove in v6\n    value,\n    defaultValue,\n    onChange,\n    disableConfirmation = false,\n    operators = defaultOperators,\n    combinators = defaultCombinators,\n    maxDepth = 1,\n    labels = defaultLabels,\n    readOnly = false,\n    emptyRenderer = [\"Empty\", \"IsNotEmpty\"],\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilder\", props);\n\n  if (\n    import.meta.env.DEV &&\n    [\n      Object.values(attributes || {}).map(({ type }) => type),\n      Object.values(operators || {})\n        .map((ops) => ops.map(({ operator }) => operator))\n        .flat(),\n    ]\n      .flat()\n      ?.find((key) => key === defaultRendererKey)\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      `${defaultRendererKey} is a restricted key and shouldn't be used as an attribute or operator type. Update the key to avoid unexpected behaviors.`,\n    );\n  }\n\n  const { classes } = useClasses(classesProp);\n\n  const currentAttributes = useRef<HvQueryBuilderProps[\"attributes\"] | null>(\n    null,\n  );\n\n  const controlled = useRef(value != null);\n  const initialQuery = useRef(\n    value ?? defaultValue ?? queryProp ?? emptyGroup(),\n  );\n  const [query, setQuery] = useControlled(value, initialQuery.current);\n  const prevQuery = useRef(query);\n\n  const [pendingAction, setPendingAction] = useState<AskAction>();\n  const [initialState, setInitialState] = useState(true);\n\n  const [state, dispatchAction] = useReducer(\n    reducer,\n    setNodeIds(structuredClone(initialQuery.current)),\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      dispatchAction,\n      askAction: setPendingAction,\n      attributes,\n      operators,\n      combinators,\n      maxDepth,\n      labels,\n      initialTouched: initialState,\n      readOnly,\n      renderers,\n      disableConfirmation,\n      emptyRenderer,\n    }),\n    [\n      attributes,\n      operators,\n      combinators,\n      maxDepth,\n      labels,\n      readOnly,\n      initialState,\n      renderers,\n      disableConfirmation,\n      emptyRenderer,\n    ],\n  );\n\n  // Keep track of attributes\n  useEffect(() => {\n    if (currentAttributes.current == null) {\n      // First run, nothing to do\n      currentAttributes.current = attributes;\n    } else if (currentAttributes.current !== attributes) {\n      // Attributes changed. The existing query is almost certainly invalid, so reset it\n      currentAttributes.current = attributes;\n      dispatchAction({ type: \"reset-query\" });\n    }\n  }, [attributes]);\n\n  useEffect(() => {\n    // \"value\" prop was updated by user (when controlled)\n    if (!isEqual(prevQuery.current, query)) {\n      dispatchAction({\n        type: \"set-query\",\n        query: setNodeIds(structuredClone(query), state),\n      });\n      prevQuery.current = query;\n    } else if (\n      !isEqual(\n        clearNodeIds(structuredClone(state)),\n        clearNodeIds(structuredClone(query)),\n      )\n    ) {\n      setInitialState(false);\n\n      // TODO - remove \"true\" from clearNodeIds in v6 (only keep else statement)\n      // To avoid breaking changes, clearNodeIds will delete all ids provided by the user when uncontrolled\n      // In the future if the user provides ids, it doesn't make sense to remove them with onChange\n      if (!controlled.current) {\n        onChange?.(\n          clearNodeIds(structuredClone(state), true) as HvQueryBuilderQuery,\n        );\n      } else {\n        // When controlled, the ids provided by the user are not removed. Only the auto generated ones.\n        onChange?.(clearNodeIds(structuredClone(state)) as HvQueryBuilderQuery);\n      }\n\n      prevQuery.current = state;\n      // This will only run if uncontrolled\n      setQuery(state);\n    }\n  }, [onChange, query, setQuery, state]);\n\n  const handleConfirm = () => {\n    if (pendingAction) {\n      setPendingAction(undefined);\n      pendingAction.actions.forEach((action) => dispatchAction(action));\n    }\n  };\n\n  const handleCancel = () => {\n    setPendingAction(undefined);\n  };\n\n  return (\n    <HvQueryBuilderProvider value={contextValue}>\n      <RuleGroup\n        level={0}\n        id={state.id}\n        combinator={state.combinator}\n        rules={state.rules}\n        classes={classes}\n      />\n      <ConfirmationDialog\n        isOpen={pendingAction != null}\n        onConfirm={handleConfirm}\n        onCancel={handleCancel}\n        title={pendingAction?.dialog.dialogTitle}\n        message={pendingAction?.dialog.dialogMessage}\n        confirmButtonLabel={pendingAction?.dialog.dialogConfirm}\n        cancelButtonLabel={pendingAction?.dialog.dialogCancel}\n        closeButtonTooltip={pendingAction?.dialog.dialogCloseTooltip}\n      />\n    </HvQueryBuilderProvider>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"QueryBuilder.js","sources":["../../../src/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import { useEffect, useMemo, useReducer, useRef, useState } from \"react\";\n\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isEqual } from \"../utils/helpers\";\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\nimport {\n  defaultCombinators,\n  defaultLabels,\n  defaultOperators,\n  HvQueryBuilderProvider,\n} from \"./Context\";\nimport { staticClasses, useClasses } from \"./QueryBuilder.styles\";\nimport { RuleGroup } from \"./RuleGroup\";\nimport {\n  AskAction,\n  defaultRendererKey,\n  HvQueryBuilderAttribute,\n  HvQueryBuilderLabels,\n  HvQueryBuilderQuery,\n  HvQueryBuilderQueryCombinator,\n  HvQueryBuilderQueryOperator,\n  HvQueryBuilderRenderers,\n} from \"./types\";\nimport { clearNodeIds, emptyGroup, setNodeIds } from \"./utils\";\nimport reducer from \"./utils/reducer\";\n\nexport { staticClasses as queryBuilderClasses };\n\nexport type HvQueryBuilderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvQueryBuilderProps {\n  /** The query attribute types. */\n  attributes?: Record<string, HvQueryBuilderAttribute>;\n  /** The query rules operators by attribute type and combinator. */\n  operators?: Record<string, HvQueryBuilderQueryOperator[]>;\n  /** The query combinators operands. */\n  combinators?: HvQueryBuilderQueryCombinator[];\n  /** The query when the component is controlled. */\n  value?: HvQueryBuilderQuery;\n  /** The initial query when the component is uncontrolled. */\n  defaultValue?: HvQueryBuilderQuery;\n  /**\n   * The initial query when the component is uncontrolled.\n   *\n   * @deprecated Use `defaultValue` instead.\n   * */\n  query?: HvQueryBuilderQuery; // TODO - remove in v6\n  /** Callback fired when the query changes. */\n  onChange?: (value: HvQueryBuilderQuery) => void;\n  /** Max depth of nested query groups. */\n  maxDepth?: number;\n  /** Object containing all the labels. */\n  labels?: HvQueryBuilderLabels;\n  /** Whether the query builder is in read-only mode. */\n  readOnly?: boolean;\n  /**\n   * Operators that should use the empty value renderer when selected.\n   *\n   * When one of the listed operators is selected, the rule value is reset and an empty component is rendered.\n   * This property takes priority over `renderers`.\n   *\n   * @default [\"Empty\", \"IsNotEmpty\"]\n   * */\n  emptyRenderer?: string[];\n  /** Custom renderers for the rules' value. */\n  renderers?: HvQueryBuilderRenderers;\n  /** Whether to opt-out of the confirmation dialogs shown before removing rules and rule groups. @default false. */\n  disableConfirmation?: boolean;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvQueryBuilderClasses;\n}\n\n// TODO - v6\n// - \"range\", \"Empty\", and \"IsNotEmpty\" operators with internal/built-in logic\n\n// Notes:\n// Deep clone is needed throughout the component to avoid undesired mutations in props, state, and ref values\n\n/**\n * This component allows you to create conditions and group them using logical operators.\n * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.\n *\n * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/widgets-query-builder-usage--docs) to learn more about this component.\n */\nexport const HvQueryBuilder = (props: HvQueryBuilderProps) => {\n  const {\n    attributes,\n    renderers,\n    query: queryProp, // TODO - remove in v6\n    value,\n    defaultValue,\n    onChange,\n    disableConfirmation = false,\n    operators = defaultOperators,\n    combinators = defaultCombinators,\n    maxDepth = 1,\n    labels = defaultLabels,\n    readOnly = false,\n    emptyRenderer = [\"Empty\", \"IsNotEmpty\"],\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilder\", props);\n\n  if (\n    import.meta.env.DEV &&\n    [\n      Object.values(attributes || {}).map(({ type }) => type),\n      Object.values(operators || {})\n        .map((ops) => ops.map(({ operator }) => operator))\n        .flat(),\n    ]\n      .flat()\n      ?.find((key) => key === defaultRendererKey)\n  ) {\n    // eslint-disable-next-line no-console\n    console.error(\n      `${defaultRendererKey} is a restricted key and shouldn't be used as an attribute or operator type. Update the key to avoid unexpected behaviors.`,\n    );\n  }\n\n  const { classes } = useClasses(classesProp);\n\n  const currentAttributes = useRef<HvQueryBuilderProps[\"attributes\"] | null>(\n    null,\n  );\n\n  const controlled = useRef(value != null);\n  const initialQuery = useRef(\n    value ?? defaultValue ?? queryProp ?? emptyGroup(),\n  );\n  const [query, setQuery] = useControlled(value, initialQuery.current);\n  const prevQuery = useRef(query);\n\n  const [pendingAction, setPendingAction] = useState<AskAction>();\n  const [initialState, setInitialState] = useState(true);\n\n  const [state, dispatchAction] = useReducer(\n    reducer,\n    setNodeIds(structuredClone(initialQuery.current)),\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      dispatchAction,\n      askAction: setPendingAction,\n      attributes,\n      operators,\n      combinators,\n      maxDepth,\n      labels,\n      initialTouched: initialState,\n      readOnly,\n      renderers,\n      disableConfirmation,\n      emptyRenderer,\n    }),\n    [\n      attributes,\n      operators,\n      combinators,\n      maxDepth,\n      labels,\n      readOnly,\n      initialState,\n      renderers,\n      disableConfirmation,\n      emptyRenderer,\n    ],\n  );\n\n  // Keep track of attributes\n  useEffect(() => {\n    if (currentAttributes.current == null) {\n      // First run, nothing to do\n      currentAttributes.current = attributes;\n    } else if (currentAttributes.current !== attributes) {\n      // Attributes changed. The existing query is almost certainly invalid, so reset it\n      currentAttributes.current = attributes;\n      dispatchAction({ type: \"reset-query\" });\n    }\n  }, [attributes]);\n\n  useEffect(() => {\n    // \"value\" prop was updated by user (when controlled)\n    if (!isEqual(prevQuery.current, query)) {\n      dispatchAction({\n        type: \"set-query\",\n        query: setNodeIds(structuredClone(query), state),\n      });\n      prevQuery.current = query;\n    } else if (\n      !isEqual(\n        clearNodeIds(structuredClone(state)),\n        clearNodeIds(structuredClone(query)),\n      )\n    ) {\n      setInitialState(false);\n\n      // TODO - remove \"true\" from clearNodeIds in v6 (only keep else statement)\n      // To avoid breaking changes, clearNodeIds will delete all ids provided by the user when uncontrolled\n      // In the future if the user provides ids, it doesn't make sense to remove them with onChange\n      if (!controlled.current) {\n        onChange?.(\n          clearNodeIds(structuredClone(state), true) as HvQueryBuilderQuery,\n        );\n      } else {\n        // When controlled, the ids provided by the user are not removed. Only the auto generated ones.\n        onChange?.(clearNodeIds(structuredClone(state)) as HvQueryBuilderQuery);\n      }\n\n      prevQuery.current = state;\n      // This will only run if uncontrolled\n      setQuery(state);\n    }\n  }, [onChange, query, setQuery, state]);\n\n  const handleConfirm = () => {\n    if (pendingAction) {\n      setPendingAction(undefined);\n      pendingAction.actions.forEach((action) => dispatchAction(action));\n    }\n  };\n\n  const handleCancel = () => {\n    setPendingAction(undefined);\n  };\n\n  return (\n    <HvQueryBuilderProvider value={contextValue}>\n      <RuleGroup\n        level={0}\n        id={state.id}\n        combinator={state.combinator}\n        rules={state.rules}\n        classes={classes}\n      />\n      <ConfirmationDialog\n        isOpen={pendingAction != null}\n        onConfirm={handleConfirm}\n        onCancel={handleCancel}\n        title={pendingAction?.dialog.dialogTitle}\n        message={pendingAction?.dialog.dialogMessage}\n        confirmButtonLabel={pendingAction?.dialog.dialogConfirm}\n        cancelButtonLabel={pendingAction?.dialog.dialogCancel}\n        closeButtonTooltip={pendingAction?.dialog.dialogCloseTooltip}\n      />\n    </HvQueryBuilderProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AAsFa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,OAAO;AAAA;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA,sBAAsB;AAAA,IACtB,YAAY;AAAA,IACZ,cAAc;AAAA,IACd,WAAW;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,IACX,gBAAgB,CAAC,SAAS,YAAY;AAAA,IACtC,SAAS;AAAA,EAAA,IACP,gBAAgB,kBAAkB,KAAK;AAcjC,UACe,QAAA,IAAA,WAAA,WAAA;AACvB,QAAA,oBAAA;AAAA,IACF;AAAA,EAEA;AAEA,QAAM,aAAoB,OAAA,SAAA,IAAA;AACxB,QAAA,eAAA;AAAA,IACF,SAAA,gBAAA,aAAA,WAAA;AAAA,EAEA;AACA,QAAM,CAAe,OAAA,QAAA,IAAA,cAAA,OAAA,aAAA,OAAA;AACnB,QAAA,YAAyB,OAAA,KAAA;AAC3B,QAAA,CAAA,eAAA,gBAAA,IAAA,SAAA;AACA,QAAM,CAAC,cAAO,eAA0B,IAAA;AAClC,QAAA,CAAA,OAAA,cAAwB,IAAA;AAAA,IAE9B;AAAA,IACA,WAAO,gBAA6B,oBAAa,CAAI;AAAA,EAErD;AACE,QAAA,eAAA;AAAA,IACA,OAAW;AAAA,MACb;AAAA,MAEA,WAAqB;AAAA,MACZ;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEA;AAAA,MACA;AAAA,MACF;AAAA,MACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACA;AAAA,EAAA;AAEA,YAAA,MAAA;AACF,QAAA,kBAAA,WAAA,MAAA;AACF,wBAAA,UAAA;AAAA,IAGA,WAAgB,kBAAA,YAAA,YAAA;AACV,wBAAA;AAEF,qBAAA,EAAA,MAA4B,cAAA,CAAA;AAAA,IAC9B;AAAA,EAEE,GAAA,CAAA,UAAA,CAAA;AACe,YAAA,MAAA;AACjB,QAAA,CAAA,QAAA,UAAA,SAAA,KAAA,GAAA;AACE,qBAAW;AAAA,QAEf,MAAgB;AAAA,QAEV,OAAC,WAAkB,gBAAiB,KAAA,GAAA,KAAA;AAAA,MACtC,CAAe;AAAA,gBACP,UAAA;AAAA,IAAA,WACC,CAAA;AAAA,MACT,aAAC,gBAAA,KAAA,CAAA;AAAA,MACD,aAAoB,gBAAA,KAAA,CAAA;AAAA,IAAA;AAGlB,sBAA6B,KAAA;AAC7B,UAAA,CAAA,WAA6B,SAAA;AAE/B;AAAA,UACA,aAAqB,gBAAA,KAAA,GAAA,IAAA;AAAA,QAKrB;AAAA,MACE,OAAA;AAAA,mBACe,aAAA,gBAA4B,KAAA,CAAA,CAAA;AAAA,MAC3C;AACF,gBAAO,UAAA;AAEL,eAAA,KAAwB;AAAA,IAC1B;AAAA,EAEA,GAAA,CAAA,UAAU,OAAU,UAAA,KAAA,CAAA;AAEpB,QAAA,gBAAc,MAAA;AAChB,QAAA,eAAA;AACE,uBAAiB,MAAA;AAErB,4BAA4B,QAAA,CAAA,WAAA,eAAA,MAAA,CAAA;AAAA,IAC1B;AAAA,EACE;AACA,QAAA,qBAA8B;AAChC,qBAAA,MAAA;AAAA,EAAA;AAGF,SAA2B,qBAAA,wBAAA,EAAA,OAAA,cAAA,UAAA;AAAA,IACzB;AAAA,MACF;AAAA,MAGE;AAAA,QACE,OAAA;AAAA,QAAC,IAAA,MAAA;AAAA,QAAA,YAAA,MAAA;AAAA,QACC,OAAO,MAAA;AAAA,QACP;AAAA,MAAU;AAAA,IACQ;AAAA,IAElB;AAAA,MAAA;AAAA,MACF;AAAA,QACA,QAAA,iBAAA;AAAA,QAAC,WAAA;AAAA,QAAA,UAAA;AAAA,QACC,sBAAyB,OAAA;AAAA,QACzB,SAAW,eAAA,OAAA;AAAA,QACX,oBAAU,eAAA,OAAA;AAAA,QACV,kCAA6B,OAAA;AAAA,QAC7B,mCAA+B,OAAA;AAAA,MAC/B;AAAA,IACA;AAAA,EACA,EAAA,CAAA;AAA0C;"}

package/dist/esm/Select/Select.js

@@ -5,6 +5,7 @@ import { useSelect, SelectProvider } from "@mui/base/useSelect";
 import { useForkRef, useControlled } from "@mui/material/utils";
 import clsx from "clsx";
 import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useTheme } from "../hooks/useTheme.js";
 import { useUniqueId } from "../hooks/useUniqueId.js";
 import { fixedForwardRef } from "../types/generic.js";
 import { setId } from "../utils/setId.js";
@@ -48,6 +49,8 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
     value: valueProp,
     defaultValue,
     placeholder,
+    inputProps,
+    enablePortal,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
     description,
@@ -62,6 +65,7 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
     ...others
   } = useDefaultProps("HvSelect", props);
   const { classes, cx } = useClasses(classesProp);
+  const { rootId } = useTheme();
   const [placement, setPlacement] = useState("bottom-start");
   const buttonRef = useRef(null);
   const handleButtonRef = useForkRef(ref, buttonRef);
@@ -171,7 +175,8 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
           {
             open: isOpen,
             keepMounted: true,
-            disablePortal: true,
+            disablePortal: !enablePortal,
+            container: enablePortal ? document.getElementById(rootId || "") || document.body : void 0,
             anchorEl: buttonRef.current,
             className: classes.popper,
             placement,
@@ -197,7 +202,14 @@ const HvSelect = fixedForwardRef(function HvSelect2(props, ref) {
             )
           }
         ),
-        /* @__PURE__ */ jsx("input", { ...getHiddenInputProps(), autoComplete }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ...getHiddenInputProps(),
+            autoComplete,
+            ...inputProps
+          }
+        ),
         canShowError && /* @__PURE__ */ jsx(
           HvWarningText,
           {