@hitachivantara/uikit-react-core 5.30.0 → 5.31.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

@@ -4,7 +4,6 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const reactDom = require("react-dom");
 const material = require("@mui/material");
-const uikitStyles = require("@hitachivantara/uikit-styles");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const reactPopper = require("react-popper");
 const core = require("@popperjs/core");
@@ -21,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,
@@ -86,8 +85,7 @@ const HvBaseDropdown = (props) => {
     ...otherPopperProps
   } = popperProps;
   const onFirstUpdate = React.useCallback(() => {
-    if (onContainerCreation)
-      onContainerCreation(popperElement);
+    onContainerCreation == null ? void 0 : onContainerCreation(popperElement);
   }, [onContainerCreation, popperElement]);
   const widthCalculator = React.useCallback(({
     state
@@ -176,53 +174,48 @@ const HvBaseDropdown = (props) => {
     if (disabled || notControlKey || ignoredCombinations)
       return;
     const newOpen = !isOpen;
-    const focusHeader = () => {
+    setIsOpen(() => {
       if (!newOpen) {
         referenceElement == null ? void 0 : referenceElement.focus({
           preventScroll: true
         });
       }
       return newOpen;
-    };
-    setIsOpen(focusHeader());
+    });
     onToggle == null ? void 0 : onToggle(event, newOpen);
   }, [isOpen, disabled, setIsOpen, onToggle, referenceElement]);
-  const headerComponent = (() => {
-    if (component) {
-      return React__default.default.cloneElement(component, {
-        ref: handleDropdownHeaderRef,
-        ...headerControlArias
-      });
+  const ExpanderComponent = isOpen ? uikitReactIcons.DropUpXS : uikitReactIcons.DropDownXS;
+  const defaultHeaderElement = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      id: setId.setId(id, "header"),
+      className: cx(classes.header, {
+        [classes.headerDisabled]: disabled,
+        [classes.headerReadOnly]: readOnly,
+        [classes.headerOpen]: isOpen,
+        [classes.headerOpenUp]: isOpen && popperPlacement.includes("top"),
+        [classes.headerOpenDown]: isOpen && popperPlacement.includes("bottom")
+      }),
+      role: ariaRole === "combobox" ? "textbox" : void 0,
+      ...headerAriaLabels,
+      style: disabled || readOnly ? {
+        pointerEvents: "none"
+      } : void 0,
+      tabIndex: disabled ? -1 : 0,
+      ref: handleDropdownHeaderRef,
+      ...dropdownHeaderProps,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.selection, children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: cx(classes.placeholder, {
+          [classes.selectionDisabled]: disabled
+        }), variant: "body", children: placeholder }) : placeholder }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsxRuntime.jsx(ExpanderComponent, { iconSize: "XS", color: disabled ? "secondary_60" : void 0, className: classes.arrow }) })
+      ]
     }
-    const ExpanderComponent = isOpen ? uikitReactIcons.DropUpXS : uikitReactIcons.DropDownXS;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        id: setId.setId(id, "header"),
-        className: cx(classes.header, {
-          [classes.headerDisabled]: disabled,
-          [classes.headerReadOnly]: readOnly,
-          [classes.headerOpen]: isOpen,
-          [classes.headerOpenUp]: isOpen && popperPlacement.includes("top"),
-          [classes.headerOpenDown]: isOpen && popperPlacement.includes("bottom")
-        }),
-        role: ariaRole === "combobox" ? "textbox" : void 0,
-        ...headerAriaLabels,
-        style: disabled || readOnly ? {
-          pointerEvents: "none"
-        } : void 0,
-        tabIndex: disabled ? -1 : 0,
-        ref: handleDropdownHeaderRef,
-        ...dropdownHeaderProps,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.selection, children: placeholder && typeof placeholder === "string" ? /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { className: cx(classes.placeholder, {
-            [classes.selectionDisabled]: disabled
-          }), variant: "body", children: placeholder }) : placeholder }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.arrowContainer, children: adornment || /* @__PURE__ */ jsxRuntime.jsx(ExpanderComponent, { iconSize: "XS", color: disabled ? uikitStyles.theme.colors.secondary_60 : void 0, className: classes.arrow }) })
-        ]
-      }
-    );
-  })();
+  );
+  const headerElement = component && React__default.default.isValidElement(component) ? React__default.default.cloneElement(component, {
+    ref: handleDropdownHeaderRef,
+    ...headerControlArias
+  }) : defaultHeaderElement;
   const containerComponent = (() => {
     const handleContainerKeyDown = (event) => {
       var _a2;
@@ -270,6 +263,7 @@ const HvBaseDropdown = (props) => {
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
+        ref,
         id,
         className: cx(classes.anchor, {
           [classes.rootDisabled]: disabled
@@ -285,12 +279,12 @@ const HvBaseDropdown = (props) => {
         },
         tabIndex: -1,
         ...others,
-        children: headerComponent
+        children: headerElement
       }
     ),
     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 { theme } from \"@hitachivantara/uikit-styles\";\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?: string | 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    if (onContainerCreation) 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: PopperProps[\"modifiers\"] = useMemo(\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      const focusHeader = () => {\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      setIsOpen(focusHeader());\n\n      onToggle?.(event, newOpen);\n    },\n    [isOpen, disabled, setIsOpen, onToggle, referenceElement]\n  );\n\n  const headerComponent = (() => {\n    if (component) {\n      return React.cloneElement(component as React.ReactElement, {\n        ref: handleDropdownHeaderRef,\n        ...headerControlArias,\n      });\n    }\n\n    const ExpanderComponent = isOpen ? DropUpXS : DropDownXS;\n\n    return (\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 ? theme.colors.secondary_60 : undefined}\n              className={classes.arrow}\n            />\n          )}\n        </div>\n      </div>\n    );\n  })();\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        {headerComponent}\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","focusHeader","focus","preventScroll","headerComponent","React","cloneElement","ExpanderComponent","DropUpXS","DropDownXS","jsxs","header","headerDisabled","headerReadOnly","headerOpen","headerOpenUp","includes","headerOpenDown","pointerEvents","jsx","selection","HvTypography","selectionDisabled","arrowContainer","theme","colors","secondary_60","arrow","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":";;;;;;;;;;;;;;;;;;;;;;;AAmIaA,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;AAClCpC,QAAAA;AAAqBA,0BAAoBc,aAAa;AAAA,EAAA,GACzD,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,YAAsCmC,MAC1C,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;AAGjB,UAAMgF,cAAcA,MAAM;AACxB,UAAI,CAACD,SAAS;AAGZ3E,6DAAkB6E,MAAM;AAAA,UAAEC,eAAe;AAAA,QAAA;AAAA,MAC3C;AAEOH,aAAAA;AAAAA,IAAAA;AAET9E,cAAU+E,aAAa;AAEvBzF,yCAAWiF,OAAOO;AAAAA,EAAO,GAE3B,CAAC/E,QAAQtB,UAAUuB,WAAWV,UAAUa,gBAAgB,CAC1D;AAEA,QAAM+E,mBAAmB,MAAM;AAC7B,QAAI9G,WAAW;AACN+G,aAAAA,eAAAA,QAAMC,aAAahH,WAAiC;AAAA,QACzDwC,KAAKC;AAAAA,QACL,GAAGO;AAAAA,MAAAA,CACJ;AAAA,IACH;AAEMiE,UAAAA,oBAAoBtF,SAASuF,gBAAWC,WAAAA;AAG5C,WAAAC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,IAAIrE,MAAAA,MAAMvD,IAAI,QAAQ;AAAA,QACtB,WAAW+B,GAAG5B,QAAQ0H,QAAQ;AAAA,UAC5B,CAAC1H,QAAQ2H,cAAc,GAAGjH;AAAAA,UAC1B,CAACV,QAAQ4H,cAAc,GAAGjH;AAAAA,UAC1B,CAACX,QAAQ6H,UAAU,GAAG7F;AAAAA,UACtB,CAAChC,QAAQ8H,YAAY,GAAG9F,UAAUsE,gBAAgByB,SAAS,KAAK;AAAA,UAChE,CAAC/H,QAAQgI,cAAc,GACrBhG,UAAUsE,gBAAgByB,SAAS,QAAQ;AAAA,QAAA,CAC9C;AAAA,QAED,MAAMhF,aAAa,aAAa,YAAYC;AAAAA,QACxCM,GAAAA;AAAAA,QACJ,OAAO5C,YAAYC,WAAW;AAAA,UAAEsH,eAAe;AAAA,QAAWjF,IAAAA;AAAAA,QAE1D,UAAUtC,WAAW,KAAK;AAAA,QAC1B,KAAKoC;AAAAA,QACL,GAAItC;AAAAA,QAEJ,UAAA;AAAA,UAAA0H,2BAAA,IAAC,OAAI,EAAA,WAAWlI,QAAQmI,WACrB/H,UAAe,eAAA,OAAOA,gBAAgB,WACpC8H,2BAAA,IAAAE,yBAAA,EACC,WAAWxG,GAAG5B,QAAQI,aAAa;AAAA,YACjC,CAACJ,QAAQqI,iBAAiB,GAAG3H;AAAAA,UAAAA,CAC9B,GACD,SAAQ,QAEPN,UAAAA,YACH,CAAA,IAEAA,aAEJ;AAAA,yCACC,OAAI,EAAA,WAAWJ,QAAQsI,gBACrBhI,UAAAA,4CACE,mBACC,EAAA,UAAS,MACT,OAAOI,WAAW6H,kBAAMC,OAAOC,eAAezF,QAC9C,WAAWhD,QAAQ0I,OAEtB,EACH,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACF;AAIJ,QAAMC,sBAAsB,MAAM;AAIhC,UAAMC,yBAAgDpC,CAAU,UAAA;;AAC1DC,UAAAA,cAAAA,MAAMD,OAAO,KAAK,GAAG;AACvBD,qBAAaC,KAAK;AAAA,MACpB;AACA,UAAIC,cAAAA,MAAMD,OAAO,KAAK,KAAK,CAACA,MAAMqC,UAAU;AACpCC,cAAAA,YAAYC,4CAAqBxG,aAAa;AAChDyG,YAAAA,SAASC,mBAAkBH,uCAAWI,OAAM;AAC9C1C,gBAAME,eAAe;AACrBoC,WAAAA,MAAAA,uCAAWK,UAAXL,gBAAAA,IAAkB7B;AAAAA,QACpB;AAAA,MACF;AAAA,IAAA;AAGF,UAAMmC,gBAAwD5C,CAAU,UAAA;AACtE,YAAM6C,gBAAgBjH,qDAAkBkH,SAAS9C,MAAM+C;AACvD,UAAI,CAACF,eAAe;AAClB7H,yDAAiBgF;AACjBvE,kBAAU,KAAK;AACfV,6CAAWiF,OAAO;AAAA,MACpB;AAAA,IAAA;AAGIgD,UAAAA,2CACH,OACC,EAAA,KAAKhH,kBACL,WAAWxC,QAAQwJ,WACnB,OAAOrD,aAAalC,QACpB,GAAImC,WAAWnC,QAEf,UAACiE,2BAAA,IAAAuB,4BAAA,EAAkB,aAAaL,eAE9B,UAAA3B,2BAAAA,KAAC,OAAI,EAAA,WAAWmB,wBACbtC,UAAAA;AAAAA,MAAAA,gBAAgByB,SAAS,QAAQ,KAChCG,2BAAAA,IAAC,SACC,OAAO;AAAA,QAAEhE,OAAOX;AAAAA,MAChB,GAAA,WAAW3B,GAAG5B,QAAQ0J,oBAAoB;AAAA,QACxC,CAAC1J,QAAQ2J,0BAA0B,GACjCrD,gBAAgByB,SAAS,KAAK;AAAA,MACjC,CAAA,GAEJ;AAAA,MACAG,2BAAA,IAAA0B,oBAAA,QAAoB,UAApB,EAA6B,OAAOnH,eACnC,UAACyF,2BAAAA,IAAA,OAAA,EACC,IAAI/E,aACJ,WAAWvB,GAAG5B,QAAQ6J,OAAO;AAAA,QAC3B,CAAC7J,QAAQ8J,aAAa,GAAGxD,gBAAgByB,SAAS,KAAK;AAAA,QACvD,CAAC/H,QAAQ+J,eAAe,GAAGzD,gBAAgByB,SAAS,QAAQ;AAAA,MAAA,CAC7D,GAEA7H,SACH,CAAA,GACF;AAAA,MACCoG,gBAAgByB,SAAS,KAAK,KAC7BG,2BAAAA,IAAC,SACC,OAAO;AAAA,QAAEhE,OAAOX;AAAAA,MAAAA,GAChB,WAAW3B,GACT5B,QAAQ0J,oBACR1J,QAAQgK,0BACR;AAAA,QACE,CAAChK,QAAQiK,wBAAwB,GAC/B3D,gBAAgByB,SAAS,KAAK;AAAA,QAChC,CAAC/H,QAAQkK,uBAAuB,GAC9B5D,gBAAgByB,SAAS,OAAO;AAAA,MAEtC,CAAA,GAEH;AAAA,IAAA,GACH,GACF,EACF,CAAA;AAGElH,QAAAA;AAAsB2I,aAAAA;AAEnBW,WAAAA,SAAAA,aACLX,WACAR,SAASoB,eAAetI,UAAU,EAAE,KAAKkH,SAASqB,IACpD;AAAA,EAAA;AAGF,SACG5C,2BAAAA,KAAA,OAAA,EAAI,WAAWzH,QAAQsK,MACtB,UAAA;AAAA,IAAApC,2BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWtG,GACT5B,QAAQuK,QACR;AAAA,UAAE,CAACvK,QAAQwK,YAAY,GAAG9J;AAAAA,WAC1BX,SACF;AAAA,QACK,GAAA,CAACY,YAAY;AAAA,UAChB8J,WAAWlE;AAAAA,UACXmE,SAASnE;AAAAA,QACX;AAAA,QACKxD,GAAAA,YAAY;AAAA,UACf5C,MAAM4C;AAAAA,UACN,GAAGO;AAAAA,UACH,GAAGD;AAAAA,QACL;AAAA,QAEA,UAAU;AAAA,QACV,GAAI3B;AAAAA,QAEHyF,UAAAA;AAAAA,MAAAA;AAAAA,IACH;AAAA,IACCnF,UAAU2G;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/Calendar/Calendar.styles.cjs

@@ -18,7 +18,7 @@ const {
       "& ~ $singleCalendar": {
         // target the next calendar when the former is hovered
         "& > div": {
-          "& > div:nth-child(3)": {
+          "& > div:nth-of-type(3)": {
             "& > div": {
               "& > div[data-calendar-cell='calendarCell']": {
                 backgroundColor: uikitStyles.theme.colors.atmo1

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

@@ -1 +1 @@
-{"version":3,"file":"Calendar.styles.cjs","sources":["../../../../src/components/Calendar/Calendar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendar\", {\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n  rangeCalendarContainer: {\n    display: \"flex\",\n  },\n  singleCalendar: {\n    \"&:hover\": {\n      \"& ~ $singleCalendar\": {\n        // target the next calendar when the former is hovered\n        \"& > div\": {\n          \"& > div:nth-child(3)\": {\n            \"& > div\": {\n              \"& > div[data-calendar-cell='calendarCell']\": {\n                backgroundColor: theme.colors.atmo1,\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n  focusSelection: {},\n  calendarMonthlyCell: {},\n  calendarMonthlyCellSelected: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","justifyContent","rangeCalendarContainer","singleCalendar","backgroundColor","theme","colors","atmo1","focusSelection","calendarMonthlyCell","calendarMonthlyCellSelected"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AAAA,EACAC,wBAAwB;AAAA,IACtBF,SAAS;AAAA,EACX;AAAA,EACAG,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,uBAAuB;AAAA;AAAA,QAErB,WAAW;AAAA,UACT,wBAAwB;AAAA,YACtB,WAAW;AAAA,cACT,8CAA8C;AAAA,gBAC5CC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,cAChC;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAC,gBAAgB,CAAC;AAAA,EACjBC,qBAAqB,CAAC;AAAA,EACtBC,6BAA6B,CAAC;AAChC,CAAC;;;"}
+{"version":3,"file":"Calendar.styles.cjs","sources":["../../../../src/components/Calendar/Calendar.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils/classes\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvCalendar\", {\n  root: {\n    display: \"flex\",\n    justifyContent: \"center\",\n  },\n  rangeCalendarContainer: {\n    display: \"flex\",\n  },\n  singleCalendar: {\n    \"&:hover\": {\n      \"& ~ $singleCalendar\": {\n        // target the next calendar when the former is hovered\n        \"& > div\": {\n          \"& > div:nth-of-type(3)\": {\n            \"& > div\": {\n              \"& > div[data-calendar-cell='calendarCell']\": {\n                backgroundColor: theme.colors.atmo1,\n              },\n            },\n          },\n        },\n      },\n    },\n  },\n  focusSelection: {},\n  calendarMonthlyCell: {},\n  calendarMonthlyCellSelected: {},\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","justifyContent","rangeCalendarContainer","singleCalendar","backgroundColor","theme","colors","atmo1","focusSelection","calendarMonthlyCell","calendarMonthlyCellSelected"],"mappings":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,QAAAA,cAAc,cAAc;AAAA,EACvEC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,gBAAgB;AAAA,EAClB;AAAA,EACAC,wBAAwB;AAAA,IACtBF,SAAS;AAAA,EACX;AAAA,EACAG,gBAAgB;AAAA,IACd,WAAW;AAAA,MACT,uBAAuB;AAAA;AAAA,QAErB,WAAW;AAAA,UACT,0BAA0B;AAAA,YACxB,WAAW;AAAA,cACT,8CAA8C;AAAA,gBAC5CC,iBAAiBC,YAAAA,MAAMC,OAAOC;AAAAA,cAChC;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACAC,gBAAgB,CAAC;AAAA,EACjBC,qBAAqB,CAAC;AAAA,EACtBC,6BAA6B,CAAC;AAChC,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