@hitachivantara/uikit-react-core 5.30.1 → 5.32.0

package/dist/cjs/components/ActionBar/ActionBar.styles.cjs

@@ -9,7 +9,7 @@ const {
   root: {
     width: "100%",
     padding: uikitStyles.theme.space.sm,
-    borderTop: `1px solid ${uikitStyles.theme.colors.atmo3}`,
+    borderTop: `1px solid ${uikitStyles.theme.colors.atmo4}`,
     display: "flex",
     alignItems: "center",
     justifyContent: "flex-end"

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

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.styles.cjs","sources":["../../../../src/components/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo3}`,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","padding","theme","space","sm","borderTop","colors","atmo3","display","alignItems","justifyContent"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IACrBC,WAAY,aAAYH,YAAMI,MAAAA,OAAOC,KAAM;AAAA,IAC3CC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,EAClB;AACF,CAAC;;;"}
+{"version":3,"file":"ActionBar.styles.cjs","sources":["../../../../src/components/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","width","padding","theme","space","sm","borderTop","colors","atmo4","display","alignItems","justifyContent"],"mappings":";;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,eAAe;AAAA,EACxEC,MAAM;AAAA,IACJC,OAAO;AAAA,IACPC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IACrBC,WAAY,aAAYH,YAAMI,MAAAA,OAAOC,KAAM;AAAA,IAC3CC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,gBAAgB;AAAA,EAClB;AACF,CAAC;;;"}

package/dist/cjs/components/BaseCheckBox/BaseCheckBox.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
+const MuiCheckbox = require("@mui/material/Checkbox");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
-const MuiCheckbox = require("@mui/material/Checkbox");
 const BaseCheckBox_styles = require("./BaseCheckBox.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiCheckbox__default = /* @__PURE__ */ _interopDefault(MuiCheckbox);
@@ -21,7 +21,7 @@ const getSelectorIcons = (options, classes) => {
     checkboxChecked: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CheckboxCheck, { color: checkedColor, className: classes.icon })
   };
 };
-const HvBaseCheckBox = (props) => {
+const HvBaseCheckBox = React.forwardRef((props, ref) => {
   const {
     id,
     classes: classesProp,
@@ -64,11 +64,11 @@ const HvBaseCheckBox = (props) => {
     setFocusVisible(true);
     onFocusVisible == null ? void 0 : onFocusVisible(event);
   }, [onFocusVisible]);
-  return /* @__PURE__ */ jsxRuntime.jsx(MuiCheckbox__default.default, { id, name, value, className: cx(classes.root, {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiCheckbox__default.default, { ref, id, name, value, className: cx(classes.root, {
     [classes.disabled]: disabled,
     [classes.focusVisible]: focusVisible
   }, className), icon: icons.checkbox, indeterminateIcon: icons.checkboxPartial, checkedIcon: icons.checkboxChecked, disabled, required, readOnly, checked, defaultChecked, indeterminate, inputProps, onChange: onChangeCallback, onFocusVisible: onFocusVisibleCallback, onBlur: onBlurCallback, color: "default", disableRipple: true, ...others });
-};
+});
 exports.baseCheckBoxClasses = BaseCheckBox_styles.staticClasses;
 exports.HvBaseCheckBox = HvBaseCheckBox;
 //# sourceMappingURL=BaseCheckBox.cjs.map

package/dist/cjs/components/BaseCheckBox/BaseCheckBox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseCheckBox.cjs","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import React, { useCallback, useState } from \"react\";\n\nimport {\n  CheckboxCheck as CheckboxCheckIcon,\n  CheckboxPartial as CheckboxPartialIcon,\n  Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = (\n  options: {\n    disabled: boolean;\n    semantic: boolean;\n  },\n  classes: HvBaseCheckBoxClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  // Default colors: [\"atmo1\",\"secondary\"]\n  return {\n    checkbox: <CheckboxIcon color={color} className={classes.icon} />,\n    checkboxPartial: (\n      <CheckboxPartialIcon color={color} className={classes.icon} />\n    ),\n    checkboxChecked: (\n      <CheckboxCheckIcon color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = (props: HvBaseCheckBoxProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    name,\n    inputProps,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    checked,\n    indeterminate,\n    defaultChecked,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    ...others\n  } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible]\n  );\n\n  return (\n    <MuiCheckbox\n      id={id}\n      name={name}\n      value={value}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },\n        className\n      )}\n      icon={icons.checkbox}\n      indeterminateIcon={icons.checkboxPartial}\n      checkedIcon={icons.checkboxChecked}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      disableRipple\n      {...others}\n    />\n  );\n};\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","checkbox","jsx","CheckboxIcon","icon","checkboxPartial","CheckboxPartialIcon","checkboxChecked","CheckboxCheckIcon","HvBaseCheckBox","props","id","classesProp","className","name","inputProps","onChange","onFocusVisible","onBlur","checked","indeterminate","defaultChecked","value","required","readOnly","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","icons","onChangeCallback","useCallback","event","target","onBlurCallback","onFocusVisibleCallback","MuiCheckbox","root"],"mappings":";;;;;;;;;;AA+FA,MAAMA,mBAAmBA,CACvBC,SAIAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,cAAc,WAAW,KACvCE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,aAAa,YAAY,KACvCE;AAGK,SAAA;AAAA,IACLE,UAAWC,2BAAA,IAAAC,0BAAA,EAAa,OAAc,WAAWR,QAAQS,MAAQ;AAAA,IACjEC,iBACGH,2BAAA,IAAAI,iCAAA,EAAoB,OAAc,WAAWX,QAAQS,MACvD;AAAA,IACDG,iBACGL,2BAAAA,IAAAM,gBAAAA,eAAA,EAAkB,OAAOR,cAAc,WAAWL,QAAQS,MAAK;AAAA,EAAA;AAGtE;AAQaK,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC;AAAAA,IACAhB,SAASiB;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACX5B,WAAW;AAAA,IACXC,WAAW;AAAA,IACX,GAAG4B;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,kBAAkBhB,KAAK;AAErC,QAAA;AAAA,IAAEf;AAAAA,IAASgC;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWhB,WAAW;AAE9C,QAAM,CAACiB,cAAcC,eAAe,IAAIC,eAAkB,KAAK;AAE/D,QAAMC,QAAQvC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDsC,QAAAA,mBAAmBC,kBACvB,CAACC,UAA+C;AAC9C,QAAIX,UAAU;AACZ;AAAA,IACF;AAEAR,yCAAWmB,OAAOA,MAAMC,OAAOjB,SAASG;AAAAA,EAE1C,GAAA,CAACN,UAAUQ,UAAUF,KAAK,CAC5B;AAEMe,QAAAA,iBAAiBH,kBACrB,CAACC,UAA+C;AAC9CL,oBAAgB,KAAK;AACrBZ,qCAASiB;AAAAA,EAAK,GAEhB,CAACjB,MAAM,CACT;AAEMoB,QAAAA,yBAAyBJ,kBAC7B,CAACC,UAAiC;AAChCL,oBAAgB,IAAI;AACpBb,qDAAiBkB;AAAAA,EAAK,GAExB,CAAClB,cAAc,CACjB;AAGE,SAAAf,2BAAA,IAACqC,gCACC,IACA,MACA,OACA,WAAWZ,GACThC,QAAQ6C,MACR;AAAA,IAAE,CAAC7C,QAAQC,QAAQ,GAAGA;AAAAA,IAAU,CAACD,QAAQkC,YAAY,GAAGA;AAAAA,EAAAA,GACxDhB,SACF,GACA,MAAMmB,MAAM/B,UACZ,mBAAmB+B,MAAM3B,iBACzB,aAAa2B,MAAMzB,iBACnB,UACA,UACA,UACA,SACA,gBACA,eACA,YACA,UAAU0B,kBACV,gBAAgBK,wBAChB,QAAQD,gBACR,OAAM,WACN,eAAa,MACb,GAAIZ,OACJ,CAAA;AAEN;;;"}
+{"version":3,"file":"BaseCheckBox.cjs","sources":["../../../../src/components/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\n\nimport MuiCheckbox, {\n  CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport {\n  CheckboxCheck as CheckboxCheckIcon,\n  CheckboxPartial as CheckboxPartialIcon,\n  Checkbox as CheckboxIcon,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n  extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n   *\n   * When defined the checkbox state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * If `true` the checkbox visually shows the indeterminate state.\n   */\n  indeterminate?: boolean;\n  /**\n   * The callback fired when the checkbox is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * Callback fired when the component is blurred.\n   */\n  onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n  /**\n   * A Jss Object used to override or extend the styles applied to the checkbox.\n   */\n  classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = (\n  options: {\n    disabled: boolean;\n    semantic: boolean;\n  },\n  classes: HvBaseCheckBoxClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  // Default colors: [\"atmo1\",\"secondary\"]\n  return {\n    checkbox: <CheckboxIcon color={color} className={classes.icon} />,\n    checkboxPartial: (\n      <CheckboxPartialIcon color={color} className={classes.icon} />\n    ),\n    checkboxChecked: (\n      <CheckboxCheckIcon color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = forwardRef<\n  HTMLButtonElement,\n  HvBaseCheckBoxProps\n>((props, ref) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    name,\n    inputProps,\n    onChange,\n    onFocusVisible,\n    onBlur,\n    checked,\n    indeterminate,\n    defaultChecked,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    semantic = false,\n    ...others\n  } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onChangeCallback = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(event, event.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  const onBlurCallback = useCallback(\n    (event: React.FocusEvent<HTMLButtonElement>) => {\n      setFocusVisible(false);\n      onBlur?.(event);\n    },\n    [onBlur]\n  );\n\n  const onFocusVisibleCallback = useCallback(\n    (event: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(event);\n    },\n    [onFocusVisible]\n  );\n\n  return (\n    <MuiCheckbox\n      ref={ref}\n      id={id}\n      name={name}\n      value={value}\n      className={cx(\n        classes.root,\n        { [classes.disabled]: disabled, [classes.focusVisible]: focusVisible },\n        className\n      )}\n      icon={icons.checkbox}\n      indeterminateIcon={icons.checkboxPartial}\n      checkedIcon={icons.checkboxChecked}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      indeterminate={indeterminate}\n      inputProps={inputProps}\n      onChange={onChangeCallback}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      color=\"default\"\n      disableRipple\n      {...others}\n    />\n  );\n});\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","checkbox","jsx","CheckboxIcon","icon","checkboxPartial","CheckboxPartialIcon","checkboxChecked","CheckboxCheckIcon","HvBaseCheckBox","forwardRef","props","ref","id","classesProp","className","name","inputProps","onChange","onFocusVisible","onBlur","checked","indeterminate","defaultChecked","value","required","readOnly","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","icons","onChangeCallback","useCallback","event","target","onBlurCallback","onFocusVisibleCallback","MuiCheckbox","root"],"mappings":";;;;;;;;;;AA+FA,MAAMA,mBAAmBA,CACvBC,SAIAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,cAAc,WAAW,KACvCE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,aAAa,YAAY,KACvCE;AAGK,SAAA;AAAA,IACLE,UAAWC,2BAAA,IAAAC,0BAAA,EAAa,OAAc,WAAWR,QAAQS,MAAQ;AAAA,IACjEC,iBACGH,2BAAA,IAAAI,iCAAA,EAAoB,OAAc,WAAWX,QAAQS,MACvD;AAAA,IACDG,iBACGL,2BAAAA,IAAAM,gBAAAA,eAAA,EAAkB,OAAOR,cAAc,WAAWL,QAAQS,MAAK;AAAA,EAAA;AAGtE;AAQO,MAAMK,iBAAiBC,MAAAA,WAG5B,CAACC,OAAOC,QAAQ;AACV,QAAA;AAAA,IACJC;AAAAA,IACAlB,SAASmB;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACX9B,WAAW;AAAA,IACXC,WAAW;AAAA,IACX,GAAG8B;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,kBAAkBjB,KAAK;AAErC,QAAA;AAAA,IAAEhB;AAAAA,IAASkC;AAAAA,EAAAA,IAAOC,oBAAAA,WAAWhB,WAAW;AAE9C,QAAM,CAACiB,cAAcC,eAAe,IAAIC,eAAkB,KAAK;AAE/D,QAAMC,QAAQzC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDwC,QAAAA,mBAAmBC,kBACvB,CAACC,UAA+C;AAC9C,QAAIX,UAAU;AACZ;AAAA,IACF;AAEAR,yCAAWmB,OAAOA,MAAMC,OAAOjB,SAASG;AAAAA,EAE1C,GAAA,CAACN,UAAUQ,UAAUF,KAAK,CAC5B;AAEMe,QAAAA,iBAAiBH,kBACrB,CAACC,UAA+C;AAC9CL,oBAAgB,KAAK;AACrBZ,qCAASiB;AAAAA,EAAK,GAEhB,CAACjB,MAAM,CACT;AAEMoB,QAAAA,yBAAyBJ,kBAC7B,CAACC,UAAiC;AAChCL,oBAAgB,IAAI;AACpBb,qDAAiBkB;AAAAA,EAAK,GAExB,CAAClB,cAAc,CACjB;AAGE,SAAAjB,+BAACuC,qBAAAA,WACC,KACA,IACA,MACA,OACA,WAAWZ,GACTlC,QAAQ+C,MACR;AAAA,IAAE,CAAC/C,QAAQC,QAAQ,GAAGA;AAAAA,IAAU,CAACD,QAAQoC,YAAY,GAAGA;AAAAA,EAAAA,GACxDhB,SACF,GACA,MAAMmB,MAAMjC,UACZ,mBAAmBiC,MAAM7B,iBACzB,aAAa6B,MAAM3B,iBACnB,UACA,UACA,UACA,SACA,gBACA,eACA,YACA,UAAU4B,kBACV,gBAAgBK,wBAChB,QAAQD,gBACR,OAAM,WACN,eAAa,MACb,GAAIZ,OACJ,CAAA;AAEN,CAAC;;;"}

package/dist/cjs/components/BaseDropdown/BaseDropdown.cjs

@@ -20,7 +20,7 @@ const BaseDropdownContext = require("./BaseDropdownContext/BaseDropdownContext.c
 const Typography = require("../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
-const HvBaseDropdown = (props) => {
+const HvBaseDropdown = React.forwardRef((props, ref) => {
   var _a;
   const {
     id: idProp,
@@ -263,6 +263,7 @@ const HvBaseDropdown = (props) => {
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        ref,
         id,
         className: cx(classes.anchor, {
           [classes.rootDisabled]: disabled
@@ -283,7 +284,7 @@ const HvBaseDropdown = (props) => {
     ),
     isOpen && containerComponent
   ] });
-};
+});
 exports.baseDropdownClasses = BaseDropdown_styles.staticClasses;
 exports.HvBaseDropdown = HvBaseDropdown;
 //# sourceMappingURL=BaseDropdown.cjs.map

package/dist/cjs/components/BaseDropdown/BaseDropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseDropdown.cjs","sources":["../../../../src/components/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useState,\n  useCallback,\n  KeyboardEventHandler,\n  AriaAttributes,\n} from \"react\";\n\nimport { createPortal } from \"react-dom\";\n\nimport {\n  ClickAwayListener,\n  ClickAwayListenerProps,\n  PopperPlacementType,\n  PopperProps,\n} from \"@mui/material\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { usePopper } from \"react-popper\";\nimport { detectOverflow, ModifierArguments, Options } from \"@popperjs/core\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey, isOneOfKeys } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getFirstAndLastFocus } from \"@core/utils/focusableElementFinder\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"placeholder\"> {\n  /**\n   * The role of the element that triggers the popup.\n   *\n   * Defaults to \"combobox\" if `component` and the default\n   * \"textbox\" header is used, undefined otherwise.\n   */\n  role?: string;\n  /**\n   * Header placeholder.\n   */\n  placeholder?: React.ReactNode;\n  /**\n   * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the dropdown will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps>;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * Replacement for the header component.\n   */\n  component?: React.ReactNode;\n  /**\n   * Adornment to replace the default arrows.\n   */\n  adornment?: React.ReactNode;\n  /**\n   * When dropdown changes the expanded state.\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * When user click outside the open container.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * Callback called when the dropdown is opened and ready,\n   * commonly used to set focus to the content.\n   */\n  onContainerCreation?: (container: HTMLElement | null) => void;\n  /**\n   * Attributes applied to the dropdown header element.\n   */\n  dropdownHeaderProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n  /**\n   * Pass a ref to the dropdown header element.\n   */\n  dropdownHeaderRef?: React.Ref<any>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvBaseDropdownClasses;\n}\n\nexport const HvBaseDropdown = (props: HvBaseDropdownProps) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    children,\n    role,\n    placeholder,\n    component,\n    adornment,\n    expanded,\n    dropdownHeaderProps,\n    defaultExpanded,\n    disabled,\n    readOnly,\n    required,\n    disablePortal,\n    variableWidth,\n    placement: placementProp = \"right\",\n    \"aria-expanded\": ariaExpandedProp,\n    \"aria-label\": ariaLabelProp,\n    \"aria-labelledby\": ariaLabelledByProp,\n    popperProps = {},\n    dropdownHeaderRef: dropdownHeaderRefProp,\n    onToggle,\n    onClickOutside,\n    onContainerCreation,\n    ...others\n  } = useDefaultProps(\"HvBaseDropdown\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const { rootId } = useTheme();\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(\n    null\n  );\n  const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);\n  const [popperMaxSize, setPopperMaxSize] = useState<{\n    width?: number;\n    height?: number;\n  }>({});\n\n  const handleDropdownHeaderRefProp = useForkRef(\n    dropdownHeaderRefProp,\n    dropdownHeaderProps?.ref\n  );\n  const handleDropdownHeaderRef = useForkRef(\n    setReferenceElement,\n    handleDropdownHeaderRefProp\n  );\n\n  const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n  const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n  const id = useUniqueId(idProp, \"hvbasedropdown\");\n  const containerId = setId(id, \"children-container\");\n\n  const headerControlArias = {\n    \"aria-required\": required ?? undefined,\n    \"aria-readonly\": readOnly ?? undefined,\n\n    \"aria-expanded\": ariaExpanded,\n    \"aria-owns\": isOpen ? containerId : undefined,\n    \"aria-controls\": isOpen ? containerId : undefined,\n  } satisfies AriaAttributes;\n\n  const headerAriaLabels = {\n    \"aria-label\": ariaLabelProp,\n    \"aria-labelledby\": ariaLabelledByProp,\n  } satisfies AriaAttributes;\n\n  const placement: PopperPlacementType = `bottom-${\n    placementProp === \"right\" ? \"start\" : \"end\"\n  }`;\n\n  const extensionWidth = referenceElement\n    ? referenceElement?.offsetWidth\n    : \"inherit\";\n\n  const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n    popperProps;\n\n  const onFirstUpdate = useCallback(() => {\n    onContainerCreation?.(popperElement);\n  }, [onContainerCreation, popperElement]);\n\n  const widthCalculator = useCallback(\n    ({ state }: ModifierArguments<Options>) => {\n      state.styles.popper.width = `${state.rects.reference.width}px`;\n    },\n    []\n  );\n\n  const widthCalculatorEffect = useCallback(\n    ({ state }: ModifierArguments<Options>) => {\n      state.elements.popper.style.width = `${\n        (state.elements.reference as any).offsetWidth\n      }px`;\n    },\n    []\n  );\n\n  const applyMaxSizeCalculator = useCallback(\n    ({ state }: ModifierArguments<Options>) => {\n      // The `maxSize` modifier provides this data\n      const { width, height } = state.modifiersData.maxSize;\n      if (width !== popperMaxSize?.width || height !== popperMaxSize?.height) {\n        setPopperMaxSize({ width, height });\n      }\n\n      state.styles.popper = {\n        ...state.styles.popper,\n        maxWidth: `${width}px`,\n        maxHeight: `${height}px`,\n      };\n    },\n    [popperMaxSize]\n  );\n\n  const maxSizeCalculator = useCallback(\n    ({ state, name, options }: ModifierArguments<Options>) => {\n      const overflow = detectOverflow(state, options);\n\n      const x = state.modifiersData.preventOverflow?.x || 0;\n      const y = state.modifiersData.preventOverflow?.y || 0;\n\n      const popperWidth = state.rects.popper.width;\n      const popperHeight = state.rects.popper.height;\n\n      const basePlacement = state.placement.split(\"-\")[0];\n\n      const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n      const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n      state.modifiersData[name] = {\n        width: popperWidth - overflow[widthProp] - x,\n        height: popperHeight - overflow[heightProp] - y,\n      };\n    },\n    []\n  );\n\n  const modifiers = useMemo<PopperProps[\"modifiers\"]>(\n    () => [\n      {\n        name: \"variableWidth\",\n        enabled: !variableWidth,\n        phase: \"beforeWrite\",\n        requires: [\"computeStyles\"],\n        fn: widthCalculator,\n        effect: widthCalculatorEffect,\n      },\n      {\n        name: \"maxSize\",\n        enabled: true,\n        phase: \"main\",\n        requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n        fn: maxSizeCalculator,\n      },\n      {\n        name: \"applyMaxSize\",\n        enabled: true,\n        phase: \"beforeWrite\",\n        requires: [\"maxSize\"],\n        fn: applyMaxSizeCalculator,\n      },\n      ...popperPropsModifiers,\n    ],\n    [\n      maxSizeCalculator,\n      applyMaxSizeCalculator,\n      popperPropsModifiers,\n      variableWidth,\n      widthCalculator,\n      widthCalculatorEffect,\n    ]\n  );\n\n  const { styles: popperStyles, attributes } = usePopper(\n    referenceElement,\n    popperElement,\n    {\n      placement,\n      modifiers,\n      onFirstUpdate,\n      ...otherPopperProps,\n    }\n  );\n\n  const popperPlacement =\n    attributes.popper?.[\"data-popper-placement\"] ?? \"bottom\";\n\n  const handleToggle = useCallback(\n    (event) => {\n      if (event && !isKey(event, \"Tab\")) {\n        event.preventDefault();\n      }\n\n      const notControlKey =\n        !!event?.code &&\n        !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n      const ignoredCombinations =\n        (isKey(event, \"Esc\") && !isOpen) ||\n        (isKey(event, \"ArrowDown\") && isOpen) ||\n        (isKey(event, \"Tab\") && !isOpen);\n\n      if (disabled || notControlKey || ignoredCombinations) return;\n\n      const newOpen = !isOpen;\n\n      /* If about to close focus on the header component. */\n      setIsOpen(() => {\n        if (!newOpen) {\n          // Focus-ring won't be visible even if using the keyboard:\n          // https://github.com/WICG/focus-visible/issues/88\n          referenceElement?.focus({ preventScroll: true });\n        }\n\n        return newOpen;\n      });\n\n      onToggle?.(event, newOpen);\n    },\n    [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n  );\n\n  const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n  const defaultHeaderElement = (\n    <div\n      id={setId(id, \"header\")}\n      className={cx(classes.header, {\n        [classes.headerDisabled]: disabled,\n        [classes.headerReadOnly]: readOnly,\n        [classes.headerOpen]: isOpen,\n        [classes.headerOpenUp]: isOpen && popperPlacement.includes(\"top\"),\n        [classes.headerOpenDown]: isOpen && popperPlacement.includes(\"bottom\"),\n      })}\n      // TODO: review \"textbox\" role\n      role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n      {...headerAriaLabels}\n      style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n      // Removes the element from the navigation sequence for keyboard focus if disabled\n      tabIndex={disabled ? -1 : 0}\n      ref={handleDropdownHeaderRef}\n      {...dropdownHeaderProps}\n    >\n      <div className={classes.selection}>\n        {placeholder && typeof placeholder === \"string\" ? (\n          <HvTypography\n            className={cx(classes.placeholder, {\n              [classes.selectionDisabled]: disabled,\n            })}\n            variant=\"body\"\n          >\n            {placeholder}\n          </HvTypography>\n        ) : (\n          placeholder\n        )}\n      </div>\n      <div className={classes.arrowContainer}>\n        {adornment || (\n          <ExpanderComponent\n            iconSize=\"XS\"\n            color={disabled ? \"secondary_60\" : undefined}\n            className={classes.arrow}\n          />\n        )}\n      </div>\n    </div>\n  );\n\n  const headerElement =\n    component && React.isValidElement(component)\n      ? React.cloneElement(component as React.ReactElement, {\n          ref: handleDropdownHeaderRef,\n          ...headerControlArias,\n        })\n      : defaultHeaderElement;\n\n  const containerComponent = (() => {\n    /**\n     *  Handle keyboard inside children container.\n     */\n    const handleContainerKeyDown: KeyboardEventHandler = (event) => {\n      if (isKey(event, \"Esc\")) {\n        handleToggle(event);\n      }\n      if (isKey(event, \"Tab\") && !event.shiftKey) {\n        const focusList = getFirstAndLastFocus(popperElement);\n        if (document.activeElement === focusList?.last) {\n          event.preventDefault();\n          focusList?.first?.focus();\n        }\n      }\n    };\n\n    const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n      const isButtonClick = referenceElement?.contains(event.target as any);\n      if (!isButtonClick) {\n        onClickOutside?.(event);\n        setIsOpen(false);\n        onToggle?.(event, false);\n      }\n    };\n\n    const container = (\n      <div\n        ref={setPopperElement}\n        className={classes.container}\n        style={popperStyles.popper}\n        {...attributes.popper}\n      >\n        <ClickAwayListener onClickAway={handleOutside}>\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n          <div onKeyDown={handleContainerKeyDown}>\n            {popperPlacement.includes(\"bottom\") && (\n              <div\n                style={{ width: extensionWidth }}\n                className={cx(classes.inputExtensionOpen, {\n                  [classes.inputExtensionLeftPosition]:\n                    popperPlacement.includes(\"end\"),\n                })}\n              />\n            )}\n            <BaseDropdownContext.Provider value={popperMaxSize}>\n              <div\n                id={containerId}\n                className={cx(classes.panel, {\n                  [classes.panelOpenedUp]: popperPlacement.includes(\"top\"),\n                  [classes.panelOpenedDown]: popperPlacement.includes(\"bottom\"),\n                })}\n              >\n                {children}\n              </div>\n            </BaseDropdownContext.Provider>\n            {popperPlacement.includes(\"top\") && (\n              <div\n                style={{ width: extensionWidth }}\n                className={cx(\n                  classes.inputExtensionOpen,\n                  classes.inputExtensionOpenShadow,\n                  {\n                    [classes.inputExtensionFloatRight]:\n                      popperPlacement.includes(\"end\"),\n                    [classes.inputExtensionFloatLeft]:\n                      popperPlacement.includes(\"start\"),\n                  }\n                )}\n              />\n            )}\n          </div>\n        </ClickAwayListener>\n      </div>\n    );\n\n    if (disablePortal) return container;\n\n    return createPortal(\n      container,\n      document.getElementById(rootId || \"\") || document.body\n    );\n  })();\n\n  return (\n    <div className={classes.root}>\n      <div\n        id={id}\n        className={cx(\n          classes.anchor,\n          { [classes.rootDisabled]: disabled },\n          className\n        )}\n        {...(!readOnly && {\n          onKeyDown: handleToggle,\n          onClick: handleToggle,\n        })}\n        {...(ariaRole && {\n          role: ariaRole,\n          ...headerAriaLabels,\n          ...headerControlArias,\n        })}\n        // Removes the element from the navigation sequence for keyboard focus\n        tabIndex={-1}\n        {...others}\n      >\n        {headerElement}\n      </div>\n      {isOpen && containerComponent}\n    </div>\n  );\n};\n"],"names":["HvBaseDropdown","props","id","idProp","className","classes","classesProp","children","role","placeholder","component","adornment","expanded","dropdownHeaderProps","defaultExpanded","disabled","readOnly","required","disablePortal","variableWidth","placement","placementProp","ariaExpandedProp","ariaLabelProp","ariaLabelledByProp","popperProps","dropdownHeaderRef","dropdownHeaderRefProp","onToggle","onClickOutside","onContainerCreation","others","useDefaultProps","cx","useClasses","rootId","useTheme","isOpen","setIsOpen","useControlled","Boolean","referenceElement","setReferenceElement","useState","popperElement","setPopperElement","popperMaxSize","setPopperMaxSize","handleDropdownHeaderRefProp","useForkRef","ref","handleDropdownHeaderRef","ariaRole","undefined","ariaExpanded","useUniqueId","containerId","setId","headerControlArias","headerAriaLabels","extensionWidth","offsetWidth","modifiers","popperPropsModifiers","otherPopperProps","onFirstUpdate","useCallback","widthCalculator","state","styles","popper","width","rects","reference","widthCalculatorEffect","elements","style","applyMaxSizeCalculator","height","modifiersData","maxSize","maxWidth","maxHeight","maxSizeCalculator","name","options","overflow","detectOverflow","x","preventOverflow","y","popperWidth","popperHeight","basePlacement","split","widthProp","heightProp","useMemo","enabled","phase","requires","fn","effect","requiresIfExists","popperStyles","attributes","usePopper","popperPlacement","handleToggle","event","isKey","preventDefault","notControlKey","code","isOneOfKeys","ignoredCombinations","newOpen","focus","preventScroll","ExpanderComponent","DropUpXS","DropDownXS","defaultHeaderElement","jsxs","header","headerDisabled","headerReadOnly","headerOpen","headerOpenUp","includes","headerOpenDown","pointerEvents","jsx","selection","HvTypography","selectionDisabled","arrowContainer","arrow","headerElement","React","isValidElement","cloneElement","containerComponent","handleContainerKeyDown","shiftKey","focusList","getFirstAndLastFocus","document","activeElement","last","first","handleOutside","isButtonClick","contains","target","container","ClickAwayListener","inputExtensionOpen","inputExtensionLeftPosition","BaseDropdownContext","panel","panelOpenedUp","panelOpenedDown","inputExtensionOpenShadow","inputExtensionFloatRight","inputExtensionFloatLeft","createPortal","getElementById","body","root","anchor","rootDisabled","onKeyDown","onClick"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAkIaA,MAAAA,iBAAiBA,CAACC,UAA+B;;AACtD,QAAA;AAAA,IACJC,IAAIC;AAAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,WAAWC,gBAAgB;AAAA,IAC3B,iBAAiBC;AAAAA,IACjB,cAAcC;AAAAA,IACd,mBAAmBC;AAAAA,IACnBC,cAAc,CAAC;AAAA,IACfC,mBAAmBC;AAAAA,IACnBC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,kBAAkB/B,KAAK;AACrC,QAAA;AAAA,IAAEI;AAAAA,IAAS4B;AAAAA,EAAAA,IAAOC,oBAAAA,WAAW5B,WAAW;AAExC,QAAA;AAAA,IAAE6B;AAAAA,MAAWC,SAAS,SAAA;AAEtB,QAAA,CAACC,QAAQC,SAAS,IAAIC,cAAAA,cAAc3B,UAAU4B,QAAQ1B,eAAe,CAAC;AAE5E,QAAM,CAAC2B,kBAAkBC,mBAAmB,IAAIC,eAC9C,IACF;AACA,QAAM,CAACC,eAAeC,gBAAgB,IAAIF,eAA6B,IAAI;AAC3E,QAAM,CAACG,eAAeC,gBAAgB,IAAIJ,MAAAA,SAGvC,CAAE,CAAA;AAEL,QAAMK,8BAA8BC,WAAAA,WAClCtB,uBACAd,2DAAqBqC,GACvB;AACMC,QAAAA,0BAA0BF,WAAAA,WAC9BP,qBACAM,2BACF;AAEA,QAAMI,WAAW5C,SAASE,aAAa,OAAO,aAAa2C;AAE3D,QAAMC,eAAehC,qBAAqB8B,WAAW,CAAC,CAACf,SAASgB;AAE1DnD,QAAAA,KAAKqD,YAAAA,YAAYpD,QAAQ,gBAAgB;AACzCqD,QAAAA,cAAcC,MAAAA,MAAMvD,IAAI,oBAAoB;AAElD,QAAMwD,qBAAqB;AAAA,IACzB,iBAAiBzC,YAAYoC;AAAAA,IAC7B,iBAAiBrC,YAAYqC;AAAAA,IAE7B,iBAAiBC;AAAAA,IACjB,aAAajB,SAASmB,cAAcH;AAAAA,IACpC,iBAAiBhB,SAASmB,cAAcH;AAAAA,EAAAA;AAG1C,QAAMM,mBAAmB;AAAA,IACvB,cAAcpC;AAAAA,IACd,mBAAmBC;AAAAA,EAAAA;AAGrB,QAAMJ,YAAkC,UACtCC,kBAAkB,UAAU,UAAU,KACvC;AAEKuC,QAAAA,iBAAiBnB,mBACnBA,qDAAkBoB,cAClB;AAEE,QAAA;AAAA,IAAEC,WAAWC,uBAAuB,CAAE;AAAA,IAAE,GAAGC;AAAAA,EAC/CvC,IAAAA;AAEIwC,QAAAA,gBAAgBC,MAAAA,YAAY,MAAM;AACtCpC,+DAAsBc;AAAAA,EAAa,GAClC,CAACd,qBAAqBc,aAAa,CAAC;AAEjCuB,QAAAA,kBAAkBD,MAAAA,YACtB,CAAC;AAAA,IAAEE;AAAAA,EAAAA,MAAwC;AACzCA,UAAMC,OAAOC,OAAOC,QAAS,GAAEH,MAAMI,MAAMC,UAAUF,KAAM;AAAA,EAC7D,GACA,CACF,CAAA;AAEMG,QAAAA,wBAAwBR,MAAAA,YAC5B,CAAC;AAAA,IAAEE;AAAAA,EAAAA,MAAwC;AACnCO,UAAAA,SAASL,OAAOM,MAAML,QAAS,GAClCH,MAAMO,SAASF,UAAkBZ,WACnC;AAAA,EACH,GACA,CACF,CAAA;AAEMgB,QAAAA,yBAAyBX,MAAAA,YAC7B,CAAC;AAAA,IAAEE;AAAAA,EAAAA,MAAwC;AAEnC,UAAA;AAAA,MAAEG;AAAAA,MAAOO;AAAAA,IAAAA,IAAWV,MAAMW,cAAcC;AAC9C,QAAIT,WAAUzB,+CAAeyB,UAASO,YAAWhC,+CAAegC,SAAQ;AACrD,uBAAA;AAAA,QAAEP;AAAAA,QAAOO;AAAAA,MAAAA,CAAQ;AAAA,IACpC;AAEAV,UAAMC,OAAOC,SAAS;AAAA,MACpB,GAAGF,MAAMC,OAAOC;AAAAA,MAChBW,UAAW,GAAEV,KAAM;AAAA,MACnBW,WAAY,GAAEJ,MAAO;AAAA,IAAA;AAAA,EACvB,GAEF,CAAChC,aAAa,CAChB;AAEMqC,QAAAA,oBAAoBjB,MAAAA,YACxB,CAAC;AAAA,IAAEE;AAAAA,IAAOgB;AAAAA,IAAMC;AAAAA,EAAAA,MAA0C;;AAClDC,UAAAA,WAAWC,KAAAA,eAAenB,OAAOiB,OAAO;AAE9C,UAAMG,MAAIpB,MAAAA,MAAMW,cAAcU,oBAApBrB,gBAAAA,IAAqCoB,MAAK;AACpD,UAAME,MAAItB,WAAMW,cAAcU,oBAApBrB,mBAAqCsB,MAAK;AAE9CC,UAAAA,cAAcvB,MAAMI,MAAMF,OAAOC;AACjCqB,UAAAA,eAAexB,MAAMI,MAAMF,OAAOQ;AAExC,UAAMe,gBAAgBzB,MAAMhD,UAAU0E,MAAM,GAAG,EAAE,CAAC;AAE5CC,UAAAA,YAAYF,kBAAkB,SAAS,SAAS;AAChDG,UAAAA,aAAaH,kBAAkB,QAAQ,QAAQ;AAE/Cd,UAAAA,cAAcK,IAAI,IAAI;AAAA,MAC1Bb,OAAOoB,cAAcL,SAASS,SAAS,IAAIP;AAAAA,MAC3CV,QAAQc,eAAeN,SAASU,UAAU,IAAIN;AAAAA,IAAAA;AAAAA,EAElD,GACA,CACF,CAAA;AAEM5B,QAAAA,YAAYmC,MAChB,QAAA,MAAM,CACJ;AAAA,IACEb,MAAM;AAAA,IACNc,SAAS,CAAC/E;AAAAA,IACVgF,OAAO;AAAA,IACPC,UAAU,CAAC,eAAe;AAAA,IAC1BC,IAAIlC;AAAAA,IACJmC,QAAQ5B;AAAAA,EAAAA,GAEV;AAAA,IACEU,MAAM;AAAA,IACNc,SAAS;AAAA,IACTC,OAAO;AAAA,IACPI,kBAAkB,CAAC,UAAU,mBAAmB,MAAM;AAAA,IACtDF,IAAIlB;AAAAA,EAAAA,GAEN;AAAA,IACEC,MAAM;AAAA,IACNc,SAAS;AAAA,IACTC,OAAO;AAAA,IACPC,UAAU,CAAC,SAAS;AAAA,IACpBC,IAAIxB;AAAAA,EAAAA,GAEN,GAAGd,oBAAoB,GAEzB,CACEoB,mBACAN,wBACAd,sBACA5C,eACAgD,iBACAO,qBAAqB,CAEzB;AAEM,QAAA;AAAA,IAAEL,QAAQmC;AAAAA,IAAcC;AAAAA,EAAAA,IAAeC,YAC3CjE,UAAAA,kBACAG,eACA;AAAA,IACExB;AAAAA,IACA0C;AAAAA,IACAG;AAAAA,IACA,GAAGD;AAAAA,EAAAA,CAEP;AAEA,QAAM2C,oBACJF,gBAAWnC,WAAXmC,mBAAoB,6BAA4B;AAE5CG,QAAAA,eAAe1C,kBAClB2C,CAAU,UAAA;AACT,QAAIA,SAAS,CAACC,cAAAA,MAAMD,OAAO,KAAK,GAAG;AACjCA,YAAME,eAAe;AAAA,IACvB;AAEA,UAAMC,gBACJ,CAAC,EAACH,+BAAOI,SACT,CAACC,cAAAA,YAAYL,OAAO,CAAC,OAAO,SAAS,OAAO,aAAa,OAAO,CAAC;AAEnE,UAAMM,sBACHL,cAAAA,MAAMD,OAAO,KAAK,KAAK,CAACxE,UACxByE,cAAAA,MAAMD,OAAO,WAAW,KAAKxE,UAC7ByE,cAAAA,MAAMD,OAAO,KAAK,KAAK,CAACxE;AAE3B,QAAItB,YAAYiG,iBAAiBG;AAAqB;AAEtD,UAAMC,UAAU,CAAC/E;AAGjBC,cAAU,MAAM;AACd,UAAI,CAAC8E,SAAS;AAGZ3E,6DAAkB4E,MAAM;AAAA,UAAEC,eAAe;AAAA,QAAA;AAAA,MAC3C;AAEOF,aAAAA;AAAAA,IAAAA,CACR;AAEDxF,yCAAWiF,OAAOO;AAAAA,EAAO,GAE3B,CAAC/E,QAAQtB,UAAUuB,WAAWV,UAAUa,gBAAgB,CAC1D;AAEM8E,QAAAA,oBAAoBlF,SAASmF,gBAAWC,WAAAA;AAE9C,QAAMC,uBACJC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAIlE,MAAAA,MAAMvD,IAAI,QAAQ;AAAA,MACtB,WAAW+B,GAAG5B,QAAQuH,QAAQ;AAAA,QAC5B,CAACvH,QAAQwH,cAAc,GAAG9G;AAAAA,QAC1B,CAACV,QAAQyH,cAAc,GAAG9G;AAAAA,QAC1B,CAACX,QAAQ0H,UAAU,GAAG1F;AAAAA,QACtB,CAAChC,QAAQ2H,YAAY,GAAG3F,UAAUsE,gBAAgBsB,SAAS,KAAK;AAAA,QAChE,CAAC5H,QAAQ6H,cAAc,GAAG7F,UAAUsE,gBAAgBsB,SAAS,QAAQ;AAAA,MAAA,CACtE;AAAA,MAED,MAAM7E,aAAa,aAAa,YAAYC;AAAAA,MACxCM,GAAAA;AAAAA,MACJ,OAAO5C,YAAYC,WAAW;AAAA,QAAEmH,eAAe;AAAA,MAAW9E,IAAAA;AAAAA,MAE1D,UAAUtC,WAAW,KAAK;AAAA,MAC1B,KAAKoC;AAAAA,MACL,GAAItC;AAAAA,MAEJ,UAAA;AAAA,QAAAuH,2BAAA,IAAC,OAAI,EAAA,WAAW/H,QAAQgI,WACrB5H,UAAe,eAAA,OAAOA,gBAAgB,WACpC2H,2BAAA,IAAAE,yBAAA,EACC,WAAWrG,GAAG5B,QAAQI,aAAa;AAAA,UACjC,CAACJ,QAAQkI,iBAAiB,GAAGxH;AAAAA,QAAAA,CAC9B,GACD,SAAQ,QAEPN,UAAAA,YACH,CAAA,IAEAA,aAEJ;AAAA,uCACC,OAAI,EAAA,WAAWJ,QAAQmI,gBACrB7H,uBACEyH,2BAAA,IAAA,mBAAA,EACC,UAAS,MACT,OAAOrH,WAAW,iBAAiBsC,QACnC,WAAWhD,QAAQoI,MAEtB,CAAA,GACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIEC,QAAAA,gBACJhI,aAAaiI,uBAAMC,eAAelI,SAAS,IACvCiI,eAAAA,QAAME,aAAanI,WAAiC;AAAA,IAClDwC,KAAKC;AAAAA,IACL,GAAGO;AAAAA,EACJ,CAAA,IACDgE;AAEN,QAAMoB,sBAAsB,MAAM;AAIhC,UAAMC,yBAAgDlC,CAAU,UAAA;;AAC1DC,UAAAA,cAAAA,MAAMD,OAAO,KAAK,GAAG;AACvBD,qBAAaC,KAAK;AAAA,MACpB;AACA,UAAIC,cAAAA,MAAMD,OAAO,KAAK,KAAK,CAACA,MAAMmC,UAAU;AACpCC,cAAAA,YAAYC,4CAAqBtG,aAAa;AAChDuG,YAAAA,SAASC,mBAAkBH,uCAAWI,OAAM;AAC9CxC,gBAAME,eAAe;AACrBkC,WAAAA,MAAAA,uCAAWK,UAAXL,gBAAAA,IAAkB5B;AAAAA,QACpB;AAAA,MACF;AAAA,IAAA;AAGF,UAAMkC,gBAAwD1C,CAAU,UAAA;AACtE,YAAM2C,gBAAgB/G,qDAAkBgH,SAAS5C,MAAM6C;AACvD,UAAI,CAACF,eAAe;AAClB3H,yDAAiBgF;AACjBvE,kBAAU,KAAK;AACfV,6CAAWiF,OAAO;AAAA,MACpB;AAAA,IAAA;AAGI8C,UAAAA,2CACH,OACC,EAAA,KAAK9G,kBACL,WAAWxC,QAAQsJ,WACnB,OAAOnD,aAAalC,QACpB,GAAImC,WAAWnC,QAEf,UAAC8D,2BAAA,IAAAwB,4BAAA,EAAkB,aAAaL,eAE9B,UAAA5B,2BAAAA,KAAC,OAAI,EAAA,WAAWoB,wBACbpC,UAAAA;AAAAA,MAAAA,gBAAgBsB,SAAS,QAAQ,KAChCG,2BAAAA,IAAC,SACC,OAAO;AAAA,QAAE7D,OAAOX;AAAAA,MAChB,GAAA,WAAW3B,GAAG5B,QAAQwJ,oBAAoB;AAAA,QACxC,CAACxJ,QAAQyJ,0BAA0B,GACjCnD,gBAAgBsB,SAAS,KAAK;AAAA,MACjC,CAAA,GAEJ;AAAA,MACAG,2BAAA,IAAA2B,oBAAA,QAAoB,UAApB,EAA6B,OAAOjH,eACnC,UAACsF,2BAAAA,IAAA,OAAA,EACC,IAAI5E,aACJ,WAAWvB,GAAG5B,QAAQ2J,OAAO;AAAA,QAC3B,CAAC3J,QAAQ4J,aAAa,GAAGtD,gBAAgBsB,SAAS,KAAK;AAAA,QACvD,CAAC5H,QAAQ6J,eAAe,GAAGvD,gBAAgBsB,SAAS,QAAQ;AAAA,MAAA,CAC7D,GAEA1H,SACH,CAAA,GACF;AAAA,MACCoG,gBAAgBsB,SAAS,KAAK,KAC7BG,2BAAAA,IAAC,SACC,OAAO;AAAA,QAAE7D,OAAOX;AAAAA,MAAAA,GAChB,WAAW3B,GACT5B,QAAQwJ,oBACRxJ,QAAQ8J,0BACR;AAAA,QACE,CAAC9J,QAAQ+J,wBAAwB,GAC/BzD,gBAAgBsB,SAAS,KAAK;AAAA,QAChC,CAAC5H,QAAQgK,uBAAuB,GAC9B1D,gBAAgBsB,SAAS,OAAO;AAAA,MAEtC,CAAA,GAEH;AAAA,IAAA,GACH,GACF,EACF,CAAA;AAGE/G,QAAAA;AAAsByI,aAAAA;AAEnBW,WAAAA,SAAAA,aACLX,WACAR,SAASoB,eAAepI,UAAU,EAAE,KAAKgH,SAASqB,IACpD;AAAA,EAAA;AAGF,SACG7C,2BAAAA,KAAA,OAAA,EAAI,WAAWtH,QAAQoK,MACtB,UAAA;AAAA,IAAArC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWnG,GACT5B,QAAQqK,QACR;AAAA,UAAE,CAACrK,QAAQsK,YAAY,GAAG5J;AAAAA,WAC1BX,SACF;AAAA,QACK,GAAA,CAACY,YAAY;AAAA,UAChB4J,WAAWhE;AAAAA,UACXiE,SAASjE;AAAAA,QACX;AAAA,QACKxD,GAAAA,YAAY;AAAA,UACf5C,MAAM4C;AAAAA,UACN,GAAGO;AAAAA,UACH,GAAGD;AAAAA,QACL;AAAA,QAEA,UAAU;AAAA,QACV,GAAI3B;AAAAA,QAEH2G,UAAAA;AAAAA,MAAAA;AAAAA,IACH;AAAA,IACCrG,UAAUyG;AAAAA,EACb,EAAA,CAAA;AAEJ;;;"}
+{"version":3,"file":"BaseDropdown.cjs","sources":["../../../../src/components/BaseDropdown/BaseDropdown.tsx"],"sourcesContent":["import React, {\n  useMemo,\n  useState,\n  useCallback,\n  KeyboardEventHandler,\n  AriaAttributes,\n  forwardRef,\n} from \"react\";\n\nimport { createPortal } from \"react-dom\";\n\nimport {\n  ClickAwayListener,\n  ClickAwayListenerProps,\n  PopperPlacementType,\n  PopperProps,\n} from \"@mui/material\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { usePopper } from \"react-popper\";\nimport { detectOverflow, ModifierArguments, Options } from \"@popperjs/core\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { useForkRef } from \"@core/hooks/useForkRef\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { isKey, isOneOfKeys } from \"@core/utils/keyboardUtils\";\nimport { setId } from \"@core/utils/setId\";\nimport { getFirstAndLastFocus } from \"@core/utils/focusableElementFinder\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseDropdown.styles\";\nimport BaseDropdownContext from \"./BaseDropdownContext\";\n\nexport { staticClasses as baseDropdownClasses };\n\nexport type HvBaseDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseDropdownProps\n  extends HvBaseProps<HTMLDivElement, \"placeholder\"> {\n  /**\n   * The role of the element that triggers the popup.\n   *\n   * Defaults to \"combobox\" if `component` and the default\n   * \"textbox\" header is used, undefined otherwise.\n   */\n  role?: string;\n  /**\n   * Header placeholder.\n   */\n  placeholder?: React.ReactNode;\n  /**\n   * If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the dropdown will be in read only mode, unable to be interacted.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.\n   * Defaults to `false`.\n   */\n  variableWidth?: boolean;\n  /**\n   * If `true` the dropdown starts opened if `false` it starts closed.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be wired to the popper component.\n   */\n  popperProps?: Partial<PopperProps>;\n  /**\n   * Placement of the dropdown.\n   */\n  placement?: \"left\" | \"right\";\n  /**\n   * Replacement for the header component.\n   */\n  component?: React.ReactNode;\n  /**\n   * Adornment to replace the default arrows.\n   */\n  adornment?: React.ReactNode;\n  /**\n   * When dropdown changes the expanded state.\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * When user click outside the open container.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * Callback called when the dropdown is opened and ready,\n   * commonly used to set focus to the content.\n   */\n  onContainerCreation?: (container: HTMLElement | null) => void;\n  /**\n   * Attributes applied to the dropdown header element.\n   */\n  dropdownHeaderProps?: React.DetailedHTMLProps<\n    React.HTMLAttributes<HTMLDivElement>,\n    HTMLDivElement\n  >;\n  /**\n   * Pass a ref to the dropdown header element.\n   */\n  dropdownHeaderRef?: React.Ref<HTMLDivElement>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvBaseDropdownClasses;\n  /** @ignore */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\nexport const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(\n  (props, ref) => {\n    const {\n      id: idProp,\n      className,\n      classes: classesProp,\n      children,\n      role,\n      placeholder,\n      component,\n      adornment,\n      expanded,\n      dropdownHeaderProps,\n      defaultExpanded,\n      disabled,\n      readOnly,\n      required,\n      disablePortal,\n      variableWidth,\n      placement: placementProp = \"right\",\n      \"aria-expanded\": ariaExpandedProp,\n      \"aria-label\": ariaLabelProp,\n      \"aria-labelledby\": ariaLabelledByProp,\n      popperProps = {},\n      dropdownHeaderRef: dropdownHeaderRefProp,\n      onToggle,\n      onClickOutside,\n      onContainerCreation,\n      ...others\n    } = useDefaultProps(\"HvBaseDropdown\", props);\n    const { classes, cx } = useClasses(classesProp);\n\n    const { rootId } = useTheme();\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n\n    const [referenceElement, setReferenceElement] =\n      useState<HTMLElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(\n      null\n    );\n    const [popperMaxSize, setPopperMaxSize] = useState<{\n      width?: number;\n      height?: number;\n    }>({});\n\n    const handleDropdownHeaderRefProp = useForkRef(\n      dropdownHeaderRefProp,\n      dropdownHeaderProps?.ref\n    );\n    const handleDropdownHeaderRef = useForkRef(\n      setReferenceElement,\n      handleDropdownHeaderRefProp\n    );\n\n    const ariaRole = role || (component == null ? \"combobox\" : undefined);\n\n    const ariaExpanded = ariaExpandedProp ?? (ariaRole ? !!isOpen : undefined);\n\n    const id = useUniqueId(idProp, \"hvbasedropdown\");\n    const containerId = setId(id, \"children-container\");\n\n    const headerControlArias = {\n      \"aria-required\": required ?? undefined,\n      \"aria-readonly\": readOnly ?? undefined,\n\n      \"aria-expanded\": ariaExpanded,\n      \"aria-owns\": isOpen ? containerId : undefined,\n      \"aria-controls\": isOpen ? containerId : undefined,\n    } satisfies AriaAttributes;\n\n    const headerAriaLabels = {\n      \"aria-label\": ariaLabelProp,\n      \"aria-labelledby\": ariaLabelledByProp,\n    } satisfies AriaAttributes;\n\n    const placement: PopperPlacementType = `bottom-${\n      placementProp === \"right\" ? \"start\" : \"end\"\n    }`;\n\n    const extensionWidth = referenceElement\n      ? referenceElement?.offsetWidth\n      : \"inherit\";\n\n    const { modifiers: popperPropsModifiers = [], ...otherPopperProps } =\n      popperProps;\n\n    const onFirstUpdate = useCallback(() => {\n      onContainerCreation?.(popperElement);\n    }, [onContainerCreation, popperElement]);\n\n    const widthCalculator = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        state.styles.popper.width = `${state.rects.reference.width}px`;\n      },\n      []\n    );\n\n    const widthCalculatorEffect = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        state.elements.popper.style.width = `${\n          (state.elements.reference as any).offsetWidth\n        }px`;\n      },\n      []\n    );\n\n    const applyMaxSizeCalculator = useCallback(\n      ({ state }: ModifierArguments<Options>) => {\n        // The `maxSize` modifier provides this data\n        const { width, height } = state.modifiersData.maxSize;\n        if (\n          width !== popperMaxSize?.width ||\n          height !== popperMaxSize?.height\n        ) {\n          setPopperMaxSize({ width, height });\n        }\n\n        state.styles.popper = {\n          ...state.styles.popper,\n          maxWidth: `${width}px`,\n          maxHeight: `${height}px`,\n        };\n      },\n      [popperMaxSize]\n    );\n\n    const maxSizeCalculator = useCallback(\n      ({ state, name, options }: ModifierArguments<Options>) => {\n        const overflow = detectOverflow(state, options);\n\n        const x = state.modifiersData.preventOverflow?.x || 0;\n        const y = state.modifiersData.preventOverflow?.y || 0;\n\n        const popperWidth = state.rects.popper.width;\n        const popperHeight = state.rects.popper.height;\n\n        const basePlacement = state.placement.split(\"-\")[0];\n\n        const widthProp = basePlacement === \"left\" ? \"left\" : \"right\";\n        const heightProp = basePlacement === \"top\" ? \"top\" : \"bottom\";\n\n        state.modifiersData[name] = {\n          width: popperWidth - overflow[widthProp] - x,\n          height: popperHeight - overflow[heightProp] - y,\n        };\n      },\n      []\n    );\n\n    const modifiers = useMemo<PopperProps[\"modifiers\"]>(\n      () => [\n        {\n          name: \"variableWidth\",\n          enabled: !variableWidth,\n          phase: \"beforeWrite\",\n          requires: [\"computeStyles\"],\n          fn: widthCalculator,\n          effect: widthCalculatorEffect,\n        },\n        {\n          name: \"maxSize\",\n          enabled: true,\n          phase: \"main\",\n          requiresIfExists: [\"offset\", \"preventOverflow\", \"flip\"],\n          fn: maxSizeCalculator,\n        },\n        {\n          name: \"applyMaxSize\",\n          enabled: true,\n          phase: \"beforeWrite\",\n          requires: [\"maxSize\"],\n          fn: applyMaxSizeCalculator,\n        },\n        ...popperPropsModifiers,\n      ],\n      [\n        maxSizeCalculator,\n        applyMaxSizeCalculator,\n        popperPropsModifiers,\n        variableWidth,\n        widthCalculator,\n        widthCalculatorEffect,\n      ]\n    );\n\n    const { styles: popperStyles, attributes } = usePopper(\n      referenceElement,\n      popperElement,\n      {\n        placement,\n        modifiers,\n        onFirstUpdate,\n        ...otherPopperProps,\n      }\n    );\n\n    const popperPlacement =\n      attributes.popper?.[\"data-popper-placement\"] ?? \"bottom\";\n\n    const handleToggle = useCallback(\n      (event) => {\n        if (event && !isKey(event, \"Tab\")) {\n          event.preventDefault();\n        }\n\n        const notControlKey =\n          !!event?.code &&\n          !isOneOfKeys(event, [\"Tab\", \"Enter\", \"Esc\", \"ArrowDown\", \"Space\"]);\n\n        const ignoredCombinations =\n          (isKey(event, \"Esc\") && !isOpen) ||\n          (isKey(event, \"ArrowDown\") && isOpen) ||\n          (isKey(event, \"Tab\") && !isOpen);\n\n        if (disabled || notControlKey || ignoredCombinations) return;\n\n        const newOpen = !isOpen;\n\n        /* If about to close focus on the header component. */\n        setIsOpen(() => {\n          if (!newOpen) {\n            // Focus-ring won't be visible even if using the keyboard:\n            // https://github.com/WICG/focus-visible/issues/88\n            referenceElement?.focus({ preventScroll: true });\n          }\n\n          return newOpen;\n        });\n\n        onToggle?.(event, newOpen);\n      },\n      [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n    );\n\n    const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n    const defaultHeaderElement = (\n      <div\n        id={setId(id, \"header\")}\n        className={cx(classes.header, {\n          [classes.headerDisabled]: disabled,\n          [classes.headerReadOnly]: readOnly,\n          [classes.headerOpen]: isOpen,\n          [classes.headerOpenUp]: isOpen && popperPlacement.includes(\"top\"),\n          [classes.headerOpenDown]:\n            isOpen && popperPlacement.includes(\"bottom\"),\n        })}\n        // TODO: review \"textbox\" role\n        role={ariaRole === \"combobox\" ? \"textbox\" : undefined}\n        {...headerAriaLabels}\n        style={disabled || readOnly ? { pointerEvents: \"none\" } : undefined}\n        // Removes the element from the navigation sequence for keyboard focus if disabled\n        tabIndex={disabled ? -1 : 0}\n        ref={handleDropdownHeaderRef}\n        {...dropdownHeaderProps}\n      >\n        <div className={classes.selection}>\n          {placeholder && typeof placeholder === \"string\" ? (\n            <HvTypography\n              className={cx(classes.placeholder, {\n                [classes.selectionDisabled]: disabled,\n              })}\n              variant=\"body\"\n            >\n              {placeholder}\n            </HvTypography>\n          ) : (\n            placeholder\n          )}\n        </div>\n        <div className={classes.arrowContainer}>\n          {adornment || (\n            <ExpanderComponent\n              iconSize=\"XS\"\n              color={disabled ? \"secondary_60\" : undefined}\n              className={classes.arrow}\n            />\n          )}\n        </div>\n      </div>\n    );\n\n    const headerElement =\n      component && React.isValidElement(component)\n        ? React.cloneElement(component as React.ReactElement, {\n            ref: handleDropdownHeaderRef,\n            ...headerControlArias,\n          })\n        : defaultHeaderElement;\n\n    const containerComponent = (() => {\n      /**\n       *  Handle keyboard inside children container.\n       */\n      const handleContainerKeyDown: KeyboardEventHandler = (event) => {\n        if (isKey(event, \"Esc\")) {\n          handleToggle(event);\n        }\n        if (isKey(event, \"Tab\") && !event.shiftKey) {\n          const focusList = getFirstAndLastFocus(popperElement);\n          if (document.activeElement === focusList?.last) {\n            event.preventDefault();\n            focusList?.first?.focus();\n          }\n        }\n      };\n\n      const handleOutside: ClickAwayListenerProps[\"onClickAway\"] = (event) => {\n        const isButtonClick = referenceElement?.contains(event.target as any);\n        if (!isButtonClick) {\n          onClickOutside?.(event);\n          setIsOpen(false);\n          onToggle?.(event, false);\n        }\n      };\n\n      const container = (\n        <div\n          ref={setPopperElement}\n          className={classes.container}\n          style={popperStyles.popper}\n          {...attributes.popper}\n        >\n          <ClickAwayListener onClickAway={handleOutside}>\n            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}\n            <div onKeyDown={handleContainerKeyDown}>\n              {popperPlacement.includes(\"bottom\") && (\n                <div\n                  style={{ width: extensionWidth }}\n                  className={cx(classes.inputExtensionOpen, {\n                    [classes.inputExtensionLeftPosition]:\n                      popperPlacement.includes(\"end\"),\n                  })}\n                />\n              )}\n              <BaseDropdownContext.Provider value={popperMaxSize}>\n                <div\n                  id={containerId}\n                  className={cx(classes.panel, {\n                    [classes.panelOpenedUp]: popperPlacement.includes(\"top\"),\n                    [classes.panelOpenedDown]:\n                      popperPlacement.includes(\"bottom\"),\n                  })}\n                >\n                  {children}\n                </div>\n              </BaseDropdownContext.Provider>\n              {popperPlacement.includes(\"top\") && (\n                <div\n                  style={{ width: extensionWidth }}\n                  className={cx(\n                    classes.inputExtensionOpen,\n                    classes.inputExtensionOpenShadow,\n                    {\n                      [classes.inputExtensionFloatRight]:\n                        popperPlacement.includes(\"end\"),\n                      [classes.inputExtensionFloatLeft]:\n                        popperPlacement.includes(\"start\"),\n                    }\n                  )}\n                />\n              )}\n            </div>\n          </ClickAwayListener>\n        </div>\n      );\n\n      if (disablePortal) return container;\n\n      return createPortal(\n        container,\n        document.getElementById(rootId || \"\") || document.body\n      );\n    })();\n\n    return (\n      <div className={classes.root}>\n        <div\n          ref={ref}\n          id={id}\n          className={cx(\n            classes.anchor,\n            { [classes.rootDisabled]: disabled },\n            className\n          )}\n          {...(!readOnly && {\n            onKeyDown: handleToggle,\n            onClick: handleToggle,\n          })}\n          {...(ariaRole && {\n            role: ariaRole,\n            ...headerAriaLabels,\n            ...headerControlArias,\n          })}\n          // Removes the element from the navigation sequence for keyboard focus\n          tabIndex={-1}\n          {...others}\n        >\n          {headerElement}\n        </div>\n        {isOpen && containerComponent}\n      </div>\n    );\n  }\n);\n"],"names":["HvBaseDropdown","forwardRef","props","ref","id","idProp","className","classes","classesProp","children","role","placeholder","component","adornment","expanded","dropdownHeaderProps","defaultExpanded","disabled","readOnly","required","disablePortal","variableWidth","placement","placementProp","ariaExpandedProp","ariaLabelProp","ariaLabelledByProp","popperProps","dropdownHeaderRef","dropdownHeaderRefProp","onToggle","onClickOutside","onContainerCreation","others","useDefaultProps","cx","useClasses","rootId","useTheme","isOpen","setIsOpen","useControlled","Boolean","referenceElement","setReferenceElement","useState","popperElement","setPopperElement","popperMaxSize","setPopperMaxSize","handleDropdownHeaderRefProp","useForkRef","handleDropdownHeaderRef","ariaRole","undefined","ariaExpanded","useUniqueId","containerId","setId","headerControlArias","headerAriaLabels","extensionWidth","offsetWidth","modifiers","popperPropsModifiers","otherPopperProps","onFirstUpdate","useCallback","widthCalculator","state","styles","popper","width","rects","reference","widthCalculatorEffect","elements","style","applyMaxSizeCalculator","height","modifiersData","maxSize","maxWidth","maxHeight","maxSizeCalculator","name","options","overflow","detectOverflow","x","preventOverflow","y","popperWidth","popperHeight","basePlacement","split","widthProp","heightProp","useMemo","enabled","phase","requires","fn","effect","requiresIfExists","popperStyles","attributes","usePopper","popperPlacement","handleToggle","event","isKey","preventDefault","notControlKey","code","isOneOfKeys","ignoredCombinations","newOpen","focus","preventScroll","ExpanderComponent","DropUpXS","DropDownXS","defaultHeaderElement","jsxs","header","headerDisabled","headerReadOnly","headerOpen","headerOpenUp","includes","headerOpenDown","pointerEvents","jsx","selection","HvTypography","selectionDisabled","arrowContainer","arrow","headerElement","React","isValidElement","cloneElement","containerComponent","handleContainerKeyDown","shiftKey","focusList","getFirstAndLastFocus","document","activeElement","last","first","handleOutside","isButtonClick","contains","target","container","ClickAwayListener","inputExtensionOpen","inputExtensionLeftPosition","BaseDropdownContext","panel","panelOpenedUp","panelOpenedDown","inputExtensionOpenShadow","inputExtensionFloatRight","inputExtensionFloatLeft","createPortal","getElementById","body","root","anchor","rootDisabled","onKeyDown","onClick"],"mappings":"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"}

package/dist/cjs/components/BaseRadio/BaseRadio.cjs

@@ -20,7 +20,7 @@ const getSelectorIcons = (options, classes) => {
     radioChecked: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.RadioButtonSelected, { color: checkedColor, className: classes.icon })
   };
 };
-const HvBaseRadio = (props) => {
+const HvBaseRadio = React.forwardRef((props, ref) => {
   const {
     classes: classesProp,
     className,
@@ -62,11 +62,11 @@ const HvBaseRadio = (props) => {
     }
     onChange == null ? void 0 : onChange(evt, evt.target.checked, value);
   }, [onChange, readOnly, value]);
-  return /* @__PURE__ */ jsxRuntime.jsx(MuiRadio__default.default, { id, name, className: cx(classes.root, {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiRadio__default.default, { ref, id, name, className: cx(classes.root, {
     [classes.disabled]: disabled,
     [classes.focusVisible]: focusVisible
   }, className), icon: icons.radio, checkedIcon: icons.radioChecked, color: "default", disabled, required, readOnly, disableRipple: true, onChange: onLocalChange, value, checked, defaultChecked, inputProps, onFocusVisible: onFocusVisibleCallback, onBlur: onBlurCallback, ...others });
-};
+});
 exports.baseRadioClasses = BaseRadio_styles.staticClasses;
 exports.HvBaseRadio = HvBaseRadio;
 exports.getSelectorIcons = getSelectorIcons;

package/dist/cjs/components/BaseRadio/BaseRadio.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseRadio.cjs","sources":["../../../../src/components/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import React, { useState, useCallback } from \"react\";\n\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\n\nimport {\n  RadioButtonUnselected,\n  RadioButtonSelected,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvBaseRadioClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\nexport const getSelectorIcons = (\n  options: { disabled: boolean; semantic: boolean },\n  classes: HvBaseRadioClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  return {\n    radio: <RadioButtonUnselected color={color} className={classes.icon} />,\n    radioChecked: (\n      <RadioButtonSelected color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = (props: HvBaseRadioProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value = \"on\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    checked,\n    defaultChecked,\n    onChange,\n    semantic = false,\n    inputProps,\n    onFocusVisible,\n    onBlur,\n    ...others\n  } = useDefaultProps(\"HvBaseRadio\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt: React.FocusEvent<any>) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n  const onLocalChange = useCallback(\n    (evt: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(evt, evt.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  return (\n    <MuiRadio\n      id={id}\n      name={name}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n          [classes.focusVisible]: focusVisible,\n        },\n        className\n      )}\n      icon={icons.radio}\n      checkedIcon={icons.radioChecked}\n      color=\"default\"\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      disableRipple\n      onChange={onLocalChange}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      inputProps={inputProps}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n};\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","radio","jsx","RadioButtonUnselected","icon","radioChecked","RadioButtonSelected","HvBaseRadio","props","classesProp","className","id","name","value","required","readOnly","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","icons","onLocalChange","target","MuiRadio","root"],"mappings":";;;;;;;;;;AA6FaA,MAAAA,mBAAmBA,CAC9BC,SACAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,cAAc,WAAW,KACvCE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,aAAa,YAAY,KACvCE;AAEK,SAAA;AAAA,IACLE,OAAQC,2BAAA,IAAAC,uCAAA,EAAsB,OAAc,WAAWR,QAAQS,MAAQ;AAAA,IACvEC,cACGH,2BAAAA,IAAAI,gBAAAA,qBAAA,EAAoB,OAAON,cAAc,WAAWL,QAAQS,MAAK;AAAA,EAAA;AAGxE;AAQaG,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJb,SAASc;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXnB,WAAW;AAAA,IACXoB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACArB,WAAW;AAAA,IACXsB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,eAAef,KAAK;AAElC,QAAA;AAAA,IAAEb;AAAAA,IAAS6B;AAAAA,EAAAA,IAAOC,iBAAAA,WAAWhB,WAAW;AAE9C,QAAM,CAACiB,cAAcC,eAAe,IAAIC,eAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,kBAC7B,CAACC,QAA+B;AAC9BJ,oBAAgB,IAAI;AACpBP,qDAAiBW;AAAAA,EAAG,GAEtB,CAACX,cAAc,CACjB;AAEMY,QAAAA,iBAAiBF,kBACrB,CAACC,QAA+B;AAC9BJ,oBAAgB,KAAK;AACrBN,qCAASU;AAAAA,EAAG,GAEd,CAACV,MAAM,CACT;AAEA,QAAMY,QAAQxC,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDuC,QAAAA,gBAAgBJ,kBACpB,CAACC,QAA6C;AAC5C,QAAIhB,UAAU;AACZ;AAAA,IACF;AAEAG,yCAAWa,KAAKA,IAAII,OAAOnB,SAASH;AAAAA,EAEtC,GAAA,CAACK,UAAUH,UAAUF,KAAK,CAC5B;AAEA,wCACGuB,kBACC,SAAA,EAAA,IACA,MACA,WAAWZ,GACT7B,QAAQ0C,MACR;AAAA,IACE,CAAC1C,QAAQC,QAAQ,GAAGA;AAAAA,IACpB,CAACD,QAAQ+B,YAAY,GAAGA;AAAAA,EAC1B,GACAhB,SACF,GACA,MAAMuB,MAAMhC,OACZ,aAAagC,MAAM5B,cACnB,OAAM,WACN,UACA,UACA,UACA,eAAa,MACb,UAAU6B,eACV,OACA,SACA,gBACA,YACA,gBAAgBL,wBAChB,QAAQG,gBACJV,GAAAA,OACJ,CAAA;AAEN;;;;"}
+{"version":3,"file":"BaseRadio.cjs","sources":["../../../../src/components/BaseRadio/BaseRadio.tsx"],"sourcesContent":["import React, { useState, useCallback, forwardRef } from \"react\";\n\nimport MuiRadio, { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\n\nimport {\n  RadioButtonUnselected,\n  RadioButtonSelected,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./BaseRadio.styles\";\n\nexport { staticClasses as baseRadioClasses };\n\nexport type HvBaseRadioClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvBaseRadioClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the radio button is selected, if set to `false` the radio button is not selected.\n   *\n   * When defined the radio button state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the radio button is pressed.\n   */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    checked: boolean,\n    value: any\n  ) => void;\n  /**\n   * Whether the selector should use semantic colors.\n   */\n  semantic?: boolean;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\nexport const getSelectorIcons = (\n  options: { disabled: boolean; semantic: boolean },\n  classes: HvBaseRadioClasses\n) => {\n  const { disabled, semantic } = options;\n  const color =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_light\", \"base_dark\"]) ||\n    undefined;\n  const checkedColor =\n    (disabled && [\"atmo3\", \"secondary_60\"]) ||\n    (semantic && [\"base_dark\", \"base_light\"]) ||\n    undefined;\n\n  return {\n    radio: <RadioButtonUnselected color={color} className={classes.icon} />,\n    radioChecked: (\n      <RadioButtonSelected color={checkedColor} className={classes.icon} />\n    ),\n  };\n};\n\n/**\n * A Radio Button is a mechanism that allows user to select one or more options.\n *\n * The Base Radio Button is a building block of the Radio Button form element. Don't\n * use unless implementing a custom use case not covered by the Radio Button form element.\n */\nexport const HvBaseRadio = forwardRef<HTMLButtonElement, HvBaseRadioProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n      id,\n      name,\n      value = \"on\",\n      required = false,\n      readOnly = false,\n      disabled = false,\n      checked,\n      defaultChecked,\n      onChange,\n      semantic = false,\n      inputProps,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvBaseRadio\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const onFocusVisibleCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible]\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur]\n    );\n\n    const icons = getSelectorIcons({ disabled, semantic }, classes);\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        if (readOnly) {\n          return;\n        }\n\n        onChange?.(evt, evt.target.checked, value);\n      },\n      [onChange, readOnly, value]\n    );\n\n    return (\n      <MuiRadio\n        ref={ref}\n        id={id}\n        name={name}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.focusVisible]: focusVisible,\n          },\n          className\n        )}\n        icon={icons.radio}\n        checkedIcon={icons.radioChecked}\n        color=\"default\"\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        disableRipple\n        onChange={onLocalChange}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        inputProps={inputProps}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["getSelectorIcons","options","classes","disabled","semantic","color","undefined","checkedColor","radio","jsx","RadioButtonUnselected","icon","radioChecked","RadioButtonSelected","HvBaseRadio","forwardRef","props","ref","classesProp","className","id","name","value","required","readOnly","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","icons","onLocalChange","target","MuiRadio","root"],"mappings":";;;;;;;;;;AA6FaA,MAAAA,mBAAmBA,CAC9BC,SACAC,YACG;AACG,QAAA;AAAA,IAAEC;AAAAA,IAAUC;AAAAA,EAAaH,IAAAA;AACzBI,QAAAA,QACHF,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,cAAc,WAAW,KACvCE;AACIC,QAAAA,eACHJ,YAAY,CAAC,SAAS,cAAc,KACpCC,YAAY,CAAC,aAAa,YAAY,KACvCE;AAEK,SAAA;AAAA,IACLE,OAAQC,2BAAA,IAAAC,uCAAA,EAAsB,OAAc,WAAWR,QAAQS,MAAQ;AAAA,IACvEC,cACGH,2BAAAA,IAAAI,gBAAAA,qBAAA,EAAoB,OAAON,cAAc,WAAWL,QAAQS,MAAK;AAAA,EAAA;AAGxE;AAQO,MAAMG,cAAcC,MAAAA,WACzB,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJf,SAASgB;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IACRC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXrB,WAAW;AAAA,IACXsB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAvB,WAAW;AAAA,IACXwB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,eAAehB,KAAK;AAElC,QAAA;AAAA,IAAEd;AAAAA,IAAS+B;AAAAA,EAAAA,IAAOC,iBAAAA,WAAWhB,WAAW;AAE9C,QAAM,CAACiB,cAAcC,eAAe,IAAIC,eAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,kBAC7B,CAACC,QAA+B;AAC9BJ,oBAAgB,IAAI;AACpBP,qDAAiBW;AAAAA,EAAG,GAEtB,CAACX,cAAc,CACjB;AAEMY,QAAAA,iBAAiBF,kBACrB,CAACC,QAA+B;AAC9BJ,oBAAgB,KAAK;AACrBN,qCAASU;AAAAA,EAAG,GAEd,CAACV,MAAM,CACT;AAEA,QAAMY,QAAQ1C,iBAAiB;AAAA,IAAEG;AAAAA,IAAUC;AAAAA,KAAYF,OAAO;AAExDyC,QAAAA,gBAAgBJ,kBACpB,CAACC,QAA6C;AAC5C,QAAIhB,UAAU;AACZ;AAAA,IACF;AAEAG,yCAAWa,KAAKA,IAAII,OAAOnB,SAASH;AAAAA,EAEtC,GAAA,CAACK,UAAUH,UAAUF,KAAK,CAC5B;AAGE,SAAAb,2BAAA,IAACoC,6BACC,KACA,IACA,MACA,WAAWZ,GACT/B,QAAQ4C,MACR;AAAA,IACE,CAAC5C,QAAQC,QAAQ,GAAGA;AAAAA,IACpB,CAACD,QAAQiC,YAAY,GAAGA;AAAAA,EAC1B,GACAhB,SACF,GACA,MAAMuB,MAAMlC,OACZ,aAAakC,MAAM9B,cACnB,OAAM,WACN,UACA,UACA,UACA,eAAa,MACb,UAAU+B,eACV,OACA,SACA,gBACA,YACA,gBAAgBL,wBAChB,QAAQG,gBACJV,GAAAA,OACJ,CAAA;AAEN,CACF;;;;"}

package/dist/cjs/components/BaseSwitch/BaseSwitch.cjs

@@ -7,7 +7,7 @@ const useDefaultProps = require("../../hooks/useDefaultProps.cjs");
 const BaseSwitch_styles = require("./BaseSwitch.styles.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const MuiSwitch__default = /* @__PURE__ */ _interopDefault(MuiSwitch);
-const HvBaseSwitch = (props) => {
+const HvBaseSwitch = React.forwardRef((props, ref) => {
   const {
     classes: classesProp,
     className,
@@ -44,7 +44,7 @@ const HvBaseSwitch = (props) => {
     }
     onChange == null ? void 0 : onChange(evt, evt.target.checked, value);
   }, [onChange, readOnly, value]);
-  return /* @__PURE__ */ jsxRuntime.jsx(MuiSwitch__default.default, { id, name, className: cx(classes.root, {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiSwitch__default.default, { ref, id, name, className: cx(classes.root, {
     [classes.disabled]: disabled,
     [classes.readOnly]: readOnly,
     [classes.focusVisible]: focusVisible
@@ -56,7 +56,7 @@ const HvBaseSwitch = (props) => {
     thumb: classes.thumb,
     disabled: classes.disabled
   }, inputProps, onFocusVisible: onFocusVisibleCallback, onBlur: onBlurCallback, ...others });
-};
+});
 exports.baseSwitchClasses = BaseSwitch_styles.staticClasses;
 exports.HvBaseSwitch = HvBaseSwitch;
 //# sourceMappingURL=BaseSwitch.cjs.map

package/dist/cjs/components/BaseSwitch/BaseSwitch.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSwitch.cjs","sources":["../../../../src/components/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import React, { useState, useCallback } from \"react\";\n\nimport MuiSwitch, { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./BaseSwitch.styles\";\n\nexport { staticClasses as baseSwitchClasses };\n\nexport type HvBaseSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseSwitchProps\n  extends Omit<MuiSwitchProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the switch.\n   */\n  classes?: HvBaseSwitchClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nexport const HvBaseSwitch = (props: HvBaseSwitchProps) => {\n  const {\n    classes: classesProp,\n    className,\n\n    id,\n    name,\n    value = \"on\",\n\n    required = false,\n    readOnly = false,\n    disabled = false,\n\n    checked,\n    defaultChecked,\n\n    onChange,\n\n    inputProps,\n\n    onFocusVisible,\n    onBlur,\n\n    ...others\n  } = useDefaultProps(\"HvBaseSwitch\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [focusVisible, setFocusVisible] = useState(false);\n\n  const onFocusVisibleCallback = useCallback(\n    (evt: React.FocusEvent<any, Element>) => {\n      setFocusVisible(true);\n      onFocusVisible?.(evt);\n    },\n    [onFocusVisible]\n  );\n\n  const onBlurCallback = useCallback(\n    (evt: React.FocusEvent<any, Element>) => {\n      setFocusVisible(false);\n      onBlur?.(evt);\n    },\n    [onBlur]\n  );\n\n  const onLocalChange = useCallback(\n    (evt: React.ChangeEvent<HTMLInputElement>) => {\n      if (readOnly) {\n        return;\n      }\n\n      onChange?.(evt, evt.target.checked, value);\n    },\n    [onChange, readOnly, value]\n  );\n\n  return (\n    <MuiSwitch\n      id={id}\n      name={name}\n      className={cx(\n        classes.root,\n        {\n          [classes.disabled]: disabled,\n          [classes.readOnly]: readOnly,\n          [classes.focusVisible]: focusVisible,\n        },\n        className\n      )}\n      color=\"default\"\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      disableRipple\n      onChange={onLocalChange}\n      value={value}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      classes={{\n        root: classes.switch,\n        switchBase: classes.switchBase,\n        checked: classes.checked,\n        track: classes.track,\n        thumb: classes.thumb,\n        disabled: classes.disabled,\n      }}\n      inputProps={inputProps}\n      onFocusVisible={onFocusVisibleCallback}\n      onBlur={onBlurCallback}\n      {...others}\n    />\n  );\n};\n"],"names":["HvBaseSwitch","props","classes","classesProp","className","id","name","value","required","readOnly","disabled","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","onLocalChange","target","MuiSwitch","root","switch","switchBase","track","thumb"],"mappings":";;;;;;;;;AAyFaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IAERC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IAEXC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IAEAC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IAEA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBjB,KAAK;AAEnC,QAAA;AAAA,IAAEC;AAAAA,IAASiB;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWjB,WAAW;AAE9C,QAAM,CAACkB,cAAcC,eAAe,IAAIC,eAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,kBAC7B,CAACC,QAAwC;AACvCJ,oBAAgB,IAAI;AACpBP,qDAAiBW;AAAAA,EAAG,GAEtB,CAACX,cAAc,CACjB;AAEMY,QAAAA,iBAAiBF,kBACrB,CAACC,QAAwC;AACvCJ,oBAAgB,KAAK;AACrBN,qCAASU;AAAAA,EAAG,GAEd,CAACV,MAAM,CACT;AAEMY,QAAAA,gBAAgBH,kBACpB,CAACC,QAA6C;AAC5C,QAAIjB,UAAU;AACZ;AAAA,IACF;AAEAI,yCAAWa,KAAKA,IAAIG,OAAOlB,SAASJ;AAAAA,EAEtC,GAAA,CAACM,UAAUJ,UAAUF,KAAK,CAC5B;AAEA,wCACGuB,mBACC,SAAA,EAAA,IACA,MACA,WAAWX,GACTjB,QAAQ6B,MACR;AAAA,IACE,CAAC7B,QAAQQ,QAAQ,GAAGA;AAAAA,IACpB,CAACR,QAAQO,QAAQ,GAAGA;AAAAA,IACpB,CAACP,QAAQmB,YAAY,GAAGA;AAAAA,EAAAA,GAE1BjB,SACF,GACA,OAAM,WACN,UACA,UACA,UACA,eAAa,MACb,UAAUwB,eACV,OACA,SACA,gBACA,SAAS;AAAA,IACPG,MAAM7B,QAAQ8B;AAAAA,IACdC,YAAY/B,QAAQ+B;AAAAA,IACpBtB,SAAST,QAAQS;AAAAA,IACjBuB,OAAOhC,QAAQgC;AAAAA,IACfC,OAAOjC,QAAQiC;AAAAA,IACfzB,UAAUR,QAAQQ;AAAAA,EAAAA,GAEpB,YACA,gBAAgBc,wBAChB,QAAQG,gBACR,GAAIV,OACJ,CAAA;AAEN;;;"}
+{"version":3,"file":"BaseSwitch.cjs","sources":["../../../../src/components/BaseSwitch/BaseSwitch.tsx"],"sourcesContent":["import React, { useState, useCallback, forwardRef } from \"react\";\n\nimport MuiSwitch, { SwitchProps as MuiSwitchProps } from \"@mui/material/Switch\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./BaseSwitch.styles\";\n\nexport { staticClasses as baseSwitchClasses };\n\nexport type HvBaseSwitchClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseSwitchProps\n  extends Omit<MuiSwitchProps, \"onChange\" | \"classes\">,\n    HvBaseProps<HTMLButtonElement, \"onChange\" | \"color\"> {\n  /**\n   * Class names to be applied.\n   */\n  className?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the switch.\n   */\n  classes?: HvBaseSwitchClasses;\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The input name.\n   */\n  name?: string;\n  /**\n   * The value of the input.\n   *\n   * Is up to the application's logic when to consider the submission of this value.\n   * Generally it should be used only when the switch is neither unchecked nor indeterminate.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * Indicates that user input is required.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the input is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the input is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * If `true` the switch is selected, if set to `false` the switch is not selected.\n   *\n   * When defined the switch state becomes controlled.\n   */\n  checked?: boolean;\n  /**\n   * When uncontrolled, defines the initial checked state.\n   */\n  defaultChecked?: boolean;\n  /**\n   * The callback fired when the switch is pressed.\n   */\n  onChange?: (event: React.ChangeEvent, checked: boolean, value: any) => void;\n  /**\n   * Properties passed on to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Callback fired when the component is focused with a keyboard.\n   * We trigger a `onFocus` callback too.\n   */\n  onFocusVisible?: (event: React.FocusEvent<any>) => void;\n  /**\n   * @ignore\n   */\n  onBlur?: (event: React.FocusEvent<any>) => void;\n}\n\n/**\n * A Switch is <b>binary</b> and work as a digital on/off button.\n *\n * The Base Switch is a building block of the Switch form element. Don't use unless\n * implementing a custom use case not covered by the Switch form element.\n */\nexport const HvBaseSwitch = forwardRef<HTMLButtonElement, HvBaseSwitchProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n      value = \"on\",\n\n      required = false,\n      readOnly = false,\n      disabled = false,\n\n      checked,\n      defaultChecked,\n\n      onChange,\n\n      inputProps,\n\n      onFocusVisible,\n      onBlur,\n\n      ...others\n    } = useDefaultProps(\"HvBaseSwitch\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const [focusVisible, setFocusVisible] = useState(false);\n\n    const onFocusVisibleCallback = useCallback(\n      (evt: React.FocusEvent<any, Element>) => {\n        setFocusVisible(true);\n        onFocusVisible?.(evt);\n      },\n      [onFocusVisible]\n    );\n\n    const onBlurCallback = useCallback(\n      (evt: React.FocusEvent<any, Element>) => {\n        setFocusVisible(false);\n        onBlur?.(evt);\n      },\n      [onBlur]\n    );\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>) => {\n        if (readOnly) {\n          return;\n        }\n\n        onChange?.(evt, evt.target.checked, value);\n      },\n      [onChange, readOnly, value]\n    );\n\n    return (\n      <MuiSwitch\n        ref={ref}\n        id={id}\n        name={name}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n            [classes.readOnly]: readOnly,\n            [classes.focusVisible]: focusVisible,\n          },\n          className\n        )}\n        color=\"default\"\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        disableRipple\n        onChange={onLocalChange}\n        value={value}\n        checked={checked}\n        defaultChecked={defaultChecked}\n        classes={{\n          root: classes.switch,\n          switchBase: classes.switchBase,\n          checked: classes.checked,\n          track: classes.track,\n          thumb: classes.thumb,\n          disabled: classes.disabled,\n        }}\n        inputProps={inputProps}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvBaseSwitch","forwardRef","props","ref","classes","classesProp","className","id","name","value","required","readOnly","disabled","checked","defaultChecked","onChange","inputProps","onFocusVisible","onBlur","others","useDefaultProps","cx","useClasses","focusVisible","setFocusVisible","useState","onFocusVisibleCallback","useCallback","evt","onBlurCallback","onLocalChange","target","jsx","MuiSwitch","root","switch","switchBase","track","thumb"],"mappings":";;;;;;;;;AAyFO,MAAMA,eAAeC,MAAAA,WAC1B,CAACC,OAAOC,QAAQ;AACR,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IACAC,QAAQ;AAAA,IAERC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IAEXC;AAAAA,IACAC;AAAAA,IAEAC;AAAAA,IAEAC;AAAAA,IAEAC;AAAAA,IACAC;AAAAA,IAEA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBlB,KAAK;AAEnC,QAAA;AAAA,IAAEE;AAAAA,IAASiB;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWjB,WAAW;AAE9C,QAAM,CAACkB,cAAcC,eAAe,IAAIC,eAAS,KAAK;AAEhDC,QAAAA,yBAAyBC,kBAC7B,CAACC,QAAwC;AACvCJ,oBAAgB,IAAI;AACpBP,qDAAiBW;AAAAA,EAAG,GAEtB,CAACX,cAAc,CACjB;AAEMY,QAAAA,iBAAiBF,kBACrB,CAACC,QAAwC;AACvCJ,oBAAgB,KAAK;AACrBN,qCAASU;AAAAA,EAAG,GAEd,CAACV,MAAM,CACT;AAEMY,QAAAA,gBAAgBH,kBACpB,CAACC,QAA6C;AAC5C,QAAIjB,UAAU;AACZ;AAAA,IACF;AAEAI,yCAAWa,KAAKA,IAAIG,OAAOlB,SAASJ;AAAAA,EAEtC,GAAA,CAACM,UAAUJ,UAAUF,KAAK,CAC5B;AAGE,SAAAuB,2BAAA,IAACC,8BACC,KACA,IACA,MACA,WAAWZ,GACTjB,QAAQ8B,MACR;AAAA,IACE,CAAC9B,QAAQQ,QAAQ,GAAGA;AAAAA,IACpB,CAACR,QAAQO,QAAQ,GAAGA;AAAAA,IACpB,CAACP,QAAQmB,YAAY,GAAGA;AAAAA,EAAAA,GAE1BjB,SACF,GACA,OAAM,WACN,UACA,UACA,UACA,eAAa,MACb,UAAUwB,eACV,OACA,SACA,gBACA,SAAS;AAAA,IACPI,MAAM9B,QAAQ+B;AAAAA,IACdC,YAAYhC,QAAQgC;AAAAA,IACpBvB,SAAST,QAAQS;AAAAA,IACjBwB,OAAOjC,QAAQiC;AAAAA,IACfC,OAAOlC,QAAQkC;AAAAA,IACf1B,UAAUR,QAAQQ;AAAAA,EAAAA,GAEpB,YACA,gBAAgBc,wBAChB,QAAQG,gBACR,GAAIV,OACJ,CAAA;AAEN,CACF;;;"}

package/dist/cjs/components/BreadCrumb/BreadCrumb.cjs

@@ -47,7 +47,7 @@ const HvBreadCrumb = (props) => {
     return /* @__PURE__ */ jsxRuntime.jsx(PathElement.HvPathElement, { classes: {
       centerContainer: classes.centerContainer,
       separatorContainer: classes.separatorContainer
-    }, last: isLast, children: React.isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.currentPage, variant: "body", children: utils.removeExtension(elem.label) }) || /* @__PURE__ */ jsxRuntime.jsx(Page.HvPage, { elem, classes: {
+    }, last: isLast, children: React.isValidElement(elem) && elem || isLast && /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: classes.currentPage, variant: "body", children: utils.removeExtension(elem.label) }) || /* @__PURE__ */ jsxRuntime.jsx(Page.HvBreadCrumbPage, { elem, classes: {
       a: classes.a,
       link: classes.link
     }, component, onClick }) }, key);

package/dist/cjs/components/BreadCrumb/BreadCrumb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BreadCrumb.cjs","sources":["../../../../src/components/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { isValidElement, MouseEvent } from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvDropDownMenuProps } from \"@core/components/DropDownMenu\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { HvPathElement } from \"./PathElement\";\nimport { HvPage } from \"./Page\";\nimport { staticClasses, useClasses } from \"./BreadCrumb.styles\";\nimport { pathWithSubMenu, removeExtension } from \"./utils\";\nimport { HvBreadCrumbPathElement } from \"./types\";\n\nexport { staticClasses as breadCrumbClasses };\n\nexport type HvBreadCrumbClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBreadCrumbProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** List of breadcrumb. */\n  listRoute?: HvBreadCrumbPathElement[];\n  /** URL to build the breadcrumb. */\n  url?: string;\n  /** Number of pages visible. */\n  maxVisible?: number;\n  /** The component used for the link node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Function passed to the component. If defined the component prop is used as the link node. */\n  onClick?: (event: MouseEvent<HTMLElement>, data: any) => void;\n  /** Props passed down to the DropDownMenu sub-menu component. */\n  dropDownMenuProps?: Partial<HvDropDownMenuProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBreadCrumbClasses;\n}\n\n/**\n * A breadcrumb is a graphical control element frequently used as a navigational aid.\n */\nexport const HvBreadCrumb = (props: HvBreadCrumbProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    listRoute = [],\n    maxVisible,\n    url,\n    onClick,\n    component,\n    dropDownMenuProps,\n    ...others\n  } = useDefaultProps(\"HvBreadCrumb\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;\n  let listPath = listRoute.slice();\n\n  // build the listPath object list\n  if (!isNil(url)) {\n    listPath = [];\n\n    // get the domain\n    const baseUrl = url.match(/^.*\\/\\/[^/]+/);\n\n    // get url without domain\n    const urlWithoutDomain = url.replace(/^.*\\/\\/[^/]+/, \"\");\n\n    const pathNames = urlWithoutDomain.split(\"/\").filter((x) => x);\n\n    pathNames.map((elem, index) =>\n      listPath.push({\n        label: decodeURI(elem),\n        path: `${baseUrl}/${pathNames.slice(0, index + 1).join(\"/\")}`,\n      })\n    );\n  }\n\n  const breadcrumbPath =\n    maxVisibleElem && listPath.length > maxVisibleElem\n      ? pathWithSubMenu(\n          id,\n          listPath,\n          maxVisibleElem,\n          onClick,\n          dropDownMenuProps\n        )\n      : listPath;\n\n  return (\n    <nav id={id} className={cx(classes.root, className)} {...others}>\n      <ol className={classes.orderedList}>\n        {listPath.map((elem, index) => {\n          const key = `key_${index}`;\n          const isLast = index === breadcrumbPath.length - 1;\n\n          return (\n            <HvPathElement\n              classes={{\n                centerContainer: classes.centerContainer,\n                separatorContainer: classes.separatorContainer,\n              }}\n              key={key}\n              last={isLast}\n            >\n              {(isValidElement(elem) && elem) ||\n                (isLast && (\n                  <HvTypography className={classes.currentPage} variant=\"body\">\n                    {removeExtension(elem.label)}\n                  </HvTypography>\n                )) || (\n                  <HvPage\n                    elem={elem}\n                    classes={{\n                      a: classes.a,\n                      link: classes.link,\n                    }}\n                    component={component}\n                    onClick={onClick}\n                  />\n                )}\n            </HvPathElement>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":["HvBreadCrumb","props","classes","classesProp","className","id","listRoute","maxVisible","url","onClick","component","dropDownMenuProps","others","useDefaultProps","cx","useClasses","maxVisibleElem","listPath","slice","isNil","baseUrl","match","urlWithoutDomain","replace","pathNames","split","filter","x","map","elem","index","push","label","decodeURI","path","join","breadcrumbPath","length","pathWithSubMenu","jsx","root","orderedList","key","isLast","HvPathElement","centerContainer","separatorContainer","isValidElement","HvTypography","currentPage","removeExtension","HvPage","a","link"],"mappings":";;;;;;;;;;;;;AAyCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,YAAY,CAAE;AAAA,IACdC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBZ,KAAK;AAEnC,QAAA;AAAA,IAAEC;AAAAA,IAASY;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWZ,WAAW;AAE9C,QAAMa,iBAAiBT,cAAcA,aAAa,IAAI,IAAIA;AACtDU,MAAAA,WAAWX,UAAUY;AAGrB,MAAA,CAACC,eAAAA,QAAMX,GAAG,GAAG;AACfS,eAAW,CAAA;AAGLG,UAAAA,UAAUZ,IAAIa,MAAM,cAAc;AAGxC,UAAMC,mBAAmBd,IAAIe,QAAQ,gBAAgB,EAAE;AAEvD,UAAMC,YAAYF,iBAAiBG,MAAM,GAAG,EAAEC,OAAQC,OAAMA,CAAC;AAE7DH,cAAUI,IAAI,CAACC,MAAMC,UACnBb,SAASc,KAAK;AAAA,MACZC,OAAOC,UAAUJ,IAAI;AAAA,MACrBK,MAAO,GAAEd,OAAQ,IAAGI,UAAUN,MAAM,GAAGY,QAAQ,CAAC,EAAEK,KAAK,GAAG,CAAE;AAAA,IAC7D,CAAA,CACH;AAAA,EACF;AAEMC,QAAAA,iBACJpB,kBAAkBC,SAASoB,SAASrB,iBAChCsB,MAAAA,gBACEjC,IACAY,UACAD,gBACAP,SACAE,iBACF,IACAM;AAGJ,SAAAsB,+BAAC,SAAI,IAAQ,WAAWzB,GAAGZ,QAAQsC,MAAMpC,SAAS,GAAOQ,GAAAA,QACvD,UAAC2B,2BAAAA,IAAA,MAAA,EAAG,WAAWrC,QAAQuC,aACpBxB,mBAASW,IAAI,CAACC,MAAMC,UAAU;AACvBY,UAAAA,MAAO,OAAMZ,KAAM;AACnBa,UAAAA,SAASb,UAAUM,eAAeC,SAAS;AAG/C,WAAAE,2BAAA,IAACK,6BACC,SAAS;AAAA,MACPC,iBAAiB3C,QAAQ2C;AAAAA,MACzBC,oBAAoB5C,QAAQ4C;AAAAA,IAC9B,GAEA,MAAMH,QAEJI,UAAAA,MAAAA,eAAelB,IAAI,KAAKA,QACvBc,UACCJ,2BAAA,IAACS,yBAAa,EAAA,WAAW9C,QAAQ+C,aAAa,SAAQ,QACnDC,UAAAA,MAAAA,gBAAgBrB,KAAKG,KAAK,EAC7B,CAAA,KAEAO,2BAAAA,IAACY,KAAAA,QACC,EAAA,MACA,SAAS;AAAA,MACPC,GAAGlD,QAAQkD;AAAAA,MACXC,MAAMnD,QAAQmD;AAAAA,IAEhB,GAAA,WACA,QAEH,CAAA,EAAA,GAlBEX,GAmBP;AAAA,EAAA,CAEH,GACH,EACF,CAAA;AAEJ;;;"}
+{"version":3,"file":"BreadCrumb.cjs","sources":["../../../../src/components/BreadCrumb/BreadCrumb.tsx"],"sourcesContent":["import { isValidElement, MouseEvent } from \"react\";\n\nimport isNil from \"lodash/isNil\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { HvDropDownMenuProps } from \"@core/components/DropDownMenu\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { HvTypography } from \"@core/components/Typography\";\n\nimport { HvPathElement } from \"./PathElement\";\nimport { HvBreadCrumbPage } from \"./Page\";\nimport { staticClasses, useClasses } from \"./BreadCrumb.styles\";\nimport { pathWithSubMenu, removeExtension } from \"./utils\";\nimport { HvBreadCrumbPathElement } from \"./types\";\n\nexport { staticClasses as breadCrumbClasses };\n\nexport type HvBreadCrumbClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBreadCrumbProps\n  extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  /** List of breadcrumb. */\n  listRoute?: HvBreadCrumbPathElement[];\n  /** URL to build the breadcrumb. */\n  url?: string;\n  /** Number of pages visible. */\n  maxVisible?: number;\n  /** The component used for the link node. Either a string to use a DOM element or a component. */\n  component?: React.ElementType;\n  /** Function passed to the component. If defined the component prop is used as the link node. */\n  onClick?: (event: MouseEvent<HTMLElement>, data: any) => void;\n  /** Props passed down to the DropDownMenu sub-menu component. */\n  dropDownMenuProps?: Partial<HvDropDownMenuProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvBreadCrumbClasses;\n}\n\n/**\n * A breadcrumb is a graphical control element frequently used as a navigational aid.\n */\nexport const HvBreadCrumb = (props: HvBreadCrumbProps) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    listRoute = [],\n    maxVisible,\n    url,\n    onClick,\n    component,\n    dropDownMenuProps,\n    ...others\n  } = useDefaultProps(\"HvBreadCrumb\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const maxVisibleElem = maxVisible && maxVisible < 2 ? 2 : maxVisible;\n  let listPath = listRoute.slice();\n\n  // build the listPath object list\n  if (!isNil(url)) {\n    listPath = [];\n\n    // get the domain\n    const baseUrl = url.match(/^.*\\/\\/[^/]+/);\n\n    // get url without domain\n    const urlWithoutDomain = url.replace(/^.*\\/\\/[^/]+/, \"\");\n\n    const pathNames = urlWithoutDomain.split(\"/\").filter((x) => x);\n\n    pathNames.map((elem, index) =>\n      listPath.push({\n        label: decodeURI(elem),\n        path: `${baseUrl}/${pathNames.slice(0, index + 1).join(\"/\")}`,\n      })\n    );\n  }\n\n  const breadcrumbPath =\n    maxVisibleElem && listPath.length > maxVisibleElem\n      ? pathWithSubMenu(\n          id,\n          listPath,\n          maxVisibleElem,\n          onClick,\n          dropDownMenuProps\n        )\n      : listPath;\n\n  return (\n    <nav id={id} className={cx(classes.root, className)} {...others}>\n      <ol className={classes.orderedList}>\n        {listPath.map((elem, index) => {\n          const key = `key_${index}`;\n          const isLast = index === breadcrumbPath.length - 1;\n\n          return (\n            <HvPathElement\n              classes={{\n                centerContainer: classes.centerContainer,\n                separatorContainer: classes.separatorContainer,\n              }}\n              key={key}\n              last={isLast}\n            >\n              {(isValidElement(elem) && elem) ||\n                (isLast && (\n                  <HvTypography className={classes.currentPage} variant=\"body\">\n                    {removeExtension(elem.label)}\n                  </HvTypography>\n                )) || (\n                  <HvBreadCrumbPage\n                    elem={elem}\n                    classes={{\n                      a: classes.a,\n                      link: classes.link,\n                    }}\n                    component={component}\n                    onClick={onClick}\n                  />\n                )}\n            </HvPathElement>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n};\n"],"names":["HvBreadCrumb","props","classes","classesProp","className","id","listRoute","maxVisible","url","onClick","component","dropDownMenuProps","others","useDefaultProps","cx","useClasses","maxVisibleElem","listPath","slice","isNil","baseUrl","match","urlWithoutDomain","replace","pathNames","split","filter","x","map","elem","index","push","label","decodeURI","path","join","breadcrumbPath","length","pathWithSubMenu","jsx","root","orderedList","key","isLast","HvPathElement","centerContainer","separatorContainer","isValidElement","HvTypography","currentPage","removeExtension","HvBreadCrumbPage","a","link"],"mappings":";;;;;;;;;;;;;AAyCaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC,YAAY,CAAE;AAAA,IACdC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,gBAAA,gBAAgBZ,KAAK;AAEnC,QAAA;AAAA,IAAEC;AAAAA,IAASY;AAAAA,EAAAA,IAAOC,kBAAAA,WAAWZ,WAAW;AAE9C,QAAMa,iBAAiBT,cAAcA,aAAa,IAAI,IAAIA;AACtDU,MAAAA,WAAWX,UAAUY;AAGrB,MAAA,CAACC,eAAAA,QAAMX,GAAG,GAAG;AACfS,eAAW,CAAA;AAGLG,UAAAA,UAAUZ,IAAIa,MAAM,cAAc;AAGxC,UAAMC,mBAAmBd,IAAIe,QAAQ,gBAAgB,EAAE;AAEvD,UAAMC,YAAYF,iBAAiBG,MAAM,GAAG,EAAEC,OAAQC,OAAMA,CAAC;AAE7DH,cAAUI,IAAI,CAACC,MAAMC,UACnBb,SAASc,KAAK;AAAA,MACZC,OAAOC,UAAUJ,IAAI;AAAA,MACrBK,MAAO,GAAEd,OAAQ,IAAGI,UAAUN,MAAM,GAAGY,QAAQ,CAAC,EAAEK,KAAK,GAAG,CAAE;AAAA,IAC7D,CAAA,CACH;AAAA,EACF;AAEMC,QAAAA,iBACJpB,kBAAkBC,SAASoB,SAASrB,iBAChCsB,MAAAA,gBACEjC,IACAY,UACAD,gBACAP,SACAE,iBACF,IACAM;AAGJ,SAAAsB,+BAAC,SAAI,IAAQ,WAAWzB,GAAGZ,QAAQsC,MAAMpC,SAAS,GAAOQ,GAAAA,QACvD,UAAC2B,2BAAAA,IAAA,MAAA,EAAG,WAAWrC,QAAQuC,aACpBxB,mBAASW,IAAI,CAACC,MAAMC,UAAU;AACvBY,UAAAA,MAAO,OAAMZ,KAAM;AACnBa,UAAAA,SAASb,UAAUM,eAAeC,SAAS;AAG/C,WAAAE,2BAAA,IAACK,6BACC,SAAS;AAAA,MACPC,iBAAiB3C,QAAQ2C;AAAAA,MACzBC,oBAAoB5C,QAAQ4C;AAAAA,IAC9B,GAEA,MAAMH,QAEJI,UAAAA,MAAAA,eAAelB,IAAI,KAAKA,QACvBc,UACCJ,2BAAA,IAACS,yBAAa,EAAA,WAAW9C,QAAQ+C,aAAa,SAAQ,QACnDC,UAAAA,MAAAA,gBAAgBrB,KAAKG,KAAK,EAC7B,CAAA,KAEAO,2BAAAA,IAACY,KAAAA,kBACC,EAAA,MACA,SAAS;AAAA,MACPC,GAAGlD,QAAQkD;AAAAA,MACXC,MAAMnD,QAAQmD;AAAAA,IAEhB,GAAA,WACA,QAEH,CAAA,EAAA,GAlBEX,GAmBP;AAAA,EAAA,CAEH,GACH,EACF,CAAA;AAEJ;;;"}

package/dist/cjs/components/BreadCrumb/Page/Page.cjs

@@ -3,13 +3,15 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Page_styles = require("./Page.styles.cjs");
 const OverflowTooltip = require("../../OverflowTooltip/OverflowTooltip.cjs");
+const useDefaultProps = require("../../../hooks/useDefaultProps.cjs");
 const Typography = require("../../Typography/Typography.cjs");
-const HvPage = ({
-  component,
-  onClick,
-  elem,
-  classes: classesProp
-}) => {
+const HvBreadCrumbPage = (props) => {
+  const {
+    component,
+    onClick,
+    elem,
+    classes: classesProp
+  } = useDefaultProps.useDefaultProps("HvBreadCrumbPage", props);
   const {
     classes,
     cx
@@ -25,6 +27,6 @@ const HvPage = ({
   };
   return /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { noWrap: true, variant: "label", component: component || "a", href: elem.path, onClick: onClick && handleClick, className: cx(classes.link, classes.label, classes.a), ...others, children: /* @__PURE__ */ jsxRuntime.jsx(OverflowTooltip.HvOverflowTooltip, { data: elem.label }) });
 };
-exports.pageClasses = Page_styles.staticClasses;
-exports.HvPage = HvPage;
+exports.breadCrumbPageClasses = Page_styles.staticClasses;
+exports.HvBreadCrumbPage = HvBreadCrumbPage;
 //# sourceMappingURL=Page.cjs.map

package/dist/cjs/components/BreadCrumb/Page/Page.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Page.cjs","sources":["../../../../../src/components/BreadCrumb/Page/Page.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvBreadCrumbPathElement } from \"../types\";\nimport { staticClasses, useClasses } from \"./Page.styles\";\n\nexport { staticClasses as pageClasses };\n\nexport type HvPageClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvPageProps {\n  component?: React.ElementType;\n  onClick?: (event: MouseEvent<HTMLElement>, data: any) => void;\n  elem: HvBreadCrumbPathElement;\n  classes?: HvPageClasses;\n}\n\nexport const HvPage = ({\n  component,\n  onClick,\n  elem,\n  classes: classesProp,\n}: HvPageProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const { label, path, ...others } = elem;\n  const handleClick = (event: MouseEvent<HTMLElement>) => {\n    event.preventDefault();\n    onClick?.(event, elem);\n  };\n\n  return (\n    <HvTypography\n      noWrap\n      variant=\"label\"\n      component={component || \"a\"}\n      href={elem.path}\n      onClick={onClick && handleClick}\n      className={cx(classes.link, classes.label, classes.a)}\n      {...others}\n    >\n      <HvOverflowTooltip data={elem.label} />\n    </HvTypography>\n  );\n};\n"],"names":["HvPage","component","onClick","elem","classes","classesProp","cx","useClasses","label","path","others","handleClick","event","preventDefault","jsx","HvTypography","link","a","HvOverflowTooltip"],"mappings":";;;;;;AAoBO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AACE,MAAM;AACX,QAAA;AAAA,IAAED;AAAAA,IAASE;AAAAA,EAAAA,IAAOC,YAAAA,WAAWF,WAAW;AACxC,QAAA;AAAA,IAAEG;AAAAA,IAAOC;AAAAA,IAAM,GAAGC;AAAAA,EAAWP,IAAAA;AAC7BQ,QAAAA,cAAcA,CAACC,UAAmC;AACtDA,UAAMC,eAAe;AACrBX,uCAAUU,OAAOT;AAAAA,EAAI;AAGvB,SACGW,2BAAAA,IAAAC,WAAAA,cAAA,EACC,QAAM,MACN,SAAQ,SACR,WAAWd,aAAa,KACxB,MAAME,KAAKM,MACX,SAASP,WAAWS,aACpB,WAAWL,GAAGF,QAAQY,MAAMZ,QAAQI,OAAOJ,QAAQa,CAAC,GAChDP,GAAAA,QAEJ,UAACI,2BAAA,IAAAI,gBAAA,mBAAA,EAAkB,MAAMf,KAAKK,OAAM,EACtC,CAAA;AAEJ;;;"}
+{"version":3,"file":"Page.cjs","sources":["../../../../../src/components/BreadCrumb/Page/Page.tsx"],"sourcesContent":["import { MouseEvent } from \"react\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvOverflowTooltip } from \"@core/components/OverflowTooltip\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { HvBreadCrumbPathElement } from \"../types\";\nimport { staticClasses, useClasses } from \"./Page.styles\";\n\nexport { staticClasses as breadCrumbPageClasses };\n\nexport type HvBreadCrumbPageClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBreadCrumbPageProps {\n  component?: React.ElementType;\n  onClick?: (event: MouseEvent<HTMLElement>, data: any) => void;\n  elem: HvBreadCrumbPathElement;\n  classes?: HvBreadCrumbPageClasses;\n}\n\nexport const HvBreadCrumbPage = (props: HvBreadCrumbPageProps) => {\n  const {\n    component,\n    onClick,\n    elem,\n    classes: classesProp,\n  } = useDefaultProps(\"HvBreadCrumbPage\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const { label, path, ...others } = elem;\n\n  const handleClick = (event: MouseEvent<HTMLElement>) => {\n    event.preventDefault();\n    onClick?.(event, elem);\n  };\n\n  return (\n    <HvTypography\n      noWrap\n      variant=\"label\"\n      component={component || \"a\"}\n      href={elem.path}\n      onClick={onClick && handleClick}\n      className={cx(classes.link, classes.label, classes.a)}\n      {...others}\n    >\n      <HvOverflowTooltip data={elem.label} />\n    </HvTypography>\n  );\n};\n"],"names":["HvBreadCrumbPage","props","component","onClick","elem","classes","classesProp","useDefaultProps","cx","useClasses","label","path","others","handleClick","event","preventDefault","jsx","HvTypography","link","a","HvOverflowTooltip"],"mappings":";;;;;;;AAqBaA,MAAAA,mBAAmBA,CAACC,UAAiC;AAC1D,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,gBAAA,oBAAoBN,KAAK;AAEvC,QAAA;AAAA,IAAEI;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,YAAAA,WAAWH,WAAW;AAExC,QAAA;AAAA,IAAEI;AAAAA,IAAOC;AAAAA,IAAM,GAAGC;AAAAA,EAAWR,IAAAA;AAE7BS,QAAAA,cAAcA,CAACC,UAAmC;AACtDA,UAAMC,eAAe;AACrBZ,uCAAUW,OAAOV;AAAAA,EAAI;AAGvB,SACGY,2BAAAA,IAAAC,WAAAA,cAAA,EACC,QAAM,MACN,SAAQ,SACR,WAAWf,aAAa,KACxB,MAAME,KAAKO,MACX,SAASR,WAAWU,aACpB,WAAWL,GAAGH,QAAQa,MAAMb,QAAQK,OAAOL,QAAQc,CAAC,GAChDP,GAAAA,QAEJ,UAACI,2BAAA,IAAAI,gBAAA,mBAAA,EAAkB,MAAMhB,KAAKM,OAAM,EACtC,CAAA;AAEJ;;;"}

package/dist/cjs/components/BreadCrumb/Page/Page.styles.cjs

@@ -6,7 +6,7 @@ const focusUtils = require("../../../utils/focusUtils.cjs");
 const {
   staticClasses,
   useClasses
-} = classes.createClasses("HvPage", {
+} = classes.createClasses("HvBreadCrumbPage", {
   link: {
     padding: `8px ${uikitStyles.theme.space.xs}`,
     borderRadius: uikitStyles.theme.radii.base,
@@ -14,10 +14,10 @@ const {
     textTransform: "capitalize",
     "&:hover": {
       cursor: "pointer",
-      backgroundColor: uikitStyles.theme.colors.atmo3
+      backgroundColor: uikitStyles.theme.colors.primary_20
     },
     "&:focus": {
-      backgroundColor: uikitStyles.theme.colors.atmo3
+      backgroundColor: uikitStyles.theme.colors.primary_20
     },
     "&:focus-visible": {
       ...focusUtils.outlineStyles

package/dist/cjs/components/BreadCrumb/Page/Page.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Page.styles.cjs","sources":["../../../../../src/components/BreadCrumb/Page/Page.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvPage\", {\n  link: {\n    padding: `8px ${theme.space.xs}`,\n    borderRadius: theme.radii.base,\n    maxWidth: 170 + 16,\n    textTransform: \"capitalize\",\n    \"&:hover\": {\n      cursor: \"pointer\",\n      backgroundColor: theme.colors.atmo3,\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.atmo3,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  label: {},\n  a: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","link","padding","theme","space","xs","borderRadius","radii","base","maxWidth","textTransform","cursor","backgroundColor","colors","atmo3","outlineStyles","label","a"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,UAAU;AAAA,EACnEC,MAAM;AAAA,IACJC,SAAU,OAAMC,YAAMC,MAAAA,MAAMC,EAAG;AAAA,IAC/BC,cAAcH,YAAAA,MAAMI,MAAMC;AAAAA,IAC1BC,UAAU,MAAM;AAAA,IAChBC,eAAe;AAAA,IACf,WAAW;AAAA,MACTC,QAAQ;AAAA,MACRC,iBAAiBT,YAAAA,MAAMU,OAAOC;AAAAA,IAChC;AAAA,IACA,WAAW;AAAA,MACTF,iBAAiBT,YAAAA,MAAMU,OAAOC;AAAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,OAAO,CAAC;AAAA,EACRC,GAAG,CAAC;AACN,CAAC;;;"}
+{"version":3,"file":"Page.styles.cjs","sources":["../../../../../src/components/BreadCrumb/Page/Page.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\nimport { outlineStyles } from \"@core/utils/focusUtils\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBreadCrumbPage\", {\n  link: {\n    padding: `8px ${theme.space.xs}`,\n    borderRadius: theme.radii.base,\n    maxWidth: 170 + 16,\n    textTransform: \"capitalize\",\n    \"&:hover\": {\n      cursor: \"pointer\",\n      backgroundColor: theme.colors.primary_20,\n    },\n    \"&:focus\": {\n      backgroundColor: theme.colors.primary_20,\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  label: {},\n  a: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","link","padding","theme","space","xs","borderRadius","radii","base","maxWidth","textTransform","cursor","backgroundColor","colors","primary_20","outlineStyles","label","a"],"mappings":";;;;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,oBAAoB;AAAA,EAC7EC,MAAM;AAAA,IACJC,SAAU,OAAMC,YAAMC,MAAAA,MAAMC,EAAG;AAAA,IAC/BC,cAAcH,YAAAA,MAAMI,MAAMC;AAAAA,IAC1BC,UAAU,MAAM;AAAA,IAChBC,eAAe;AAAA,IACf,WAAW;AAAA,MACTC,QAAQ;AAAA,MACRC,iBAAiBT,YAAAA,MAAMU,OAAOC;AAAAA,IAChC;AAAA,IACA,WAAW;AAAA,MACTF,iBAAiBT,YAAAA,MAAMU,OAAOC;AAAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC,WAAAA;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,OAAO,CAAC;AAAA,EACRC,GAAG,CAAC;AACN,CAAC;;;"}

package/dist/cjs/components/CheckBox/CheckBox.cjs

@@ -12,7 +12,7 @@ const BaseCheckBox = require("../BaseCheckBox/BaseCheckBox.cjs");
 const FormElement = require("../Forms/FormElement/FormElement.cjs");
 const Label = require("../Forms/Label/Label.cjs");
 const WarningText = require("../Forms/WarningText/WarningText.cjs");
-const HvCheckBox = (props) => {
+const HvCheckBox = React.forwardRef((props, ref) => {
   const {
     id,
     classes: classesProp,
@@ -77,7 +77,7 @@ const HvCheckBox = (props) => {
   if (isStateInvalid) {
     errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
   }
-  const checkbox = /* @__PURE__ */ jsxRuntime.jsx(BaseCheckBox.HvBaseCheckBox, { id: hasLabel ? setId.setId(elementId, "input") : setId.setId(id, "input"), name, className: cx(classes.checkbox, {
+  const checkbox = /* @__PURE__ */ jsxRuntime.jsx(BaseCheckBox.HvBaseCheckBox, { ref, id: hasLabel ? setId.setId(elementId, "input") : setId.setId(id, "input"), name, className: cx(classes.checkbox, {
     [classes.invalidCheckbox]: isStateInvalid
   }), disabled, readOnly, required, onChange: onChangeCallback, value, checked: isChecked, indeterminate: isIndeterminate, semantic, inputProps: {
     "aria-invalid": isStateInvalid ? true : void 0,
@@ -99,7 +99,7 @@ const HvCheckBox = (props) => {
     ] }) : checkbox,
     canShowError && /* @__PURE__ */ jsxRuntime.jsx(WarningText.HvWarningText, { id: setId.setId(elementId, "error"), disableAdornment: !hasLabel, hideText: !hasLabel, disableBorder: true, children: validationMessage })
   ] });
-};
+});
 exports.checkBoxClasses = CheckBox_styles.staticClasses;
 exports.HvCheckBox = HvCheckBox;
 //# sourceMappingURL=CheckBox.cjs.map