@hitachivantara/uikit-react-core 5.18.0 → 5.18.2

package/dist/cjs/components/FilterGroup/RightPanel/RightPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RightPanel.cjs","sources":["../../../../../src/components/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import {\n  HvCheckBox,\n  HvInput,\n  HvList,\n  HvPanel,\n  HvTypography,\n} from \"@core/components\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const activeGroupOptions = useMemo(\n    () => filterOptions[activeGroup]?.data.map((option) => option.id) || [],\n    [filterOptions, activeGroup]\n  );\n\n  const activeFilterValues = useMemo(\n    () =>\n      filterValues[activeGroup]?.filter((value) =>\n        activeGroupOptions.includes(value)\n      ) || [],\n    [filterValues, activeGroupOptions, activeGroup]\n  );\n\n  const listValues = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data.map((option) => ({\n        ...option,\n        label: option.name,\n        selected: filterValues[activeGroup]?.includes(option.id),\n        isHidden:\n          option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n      })) || [],\n    [filterOptions, filterValues, activeGroup, searchStr]\n  );\n\n  const updateSelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === activeGroupOptions.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  }, [activeFilterValues, activeGroupOptions]);\n\n  useEffect(() => {\n    updateSelectAll();\n  }, [activeFilterValues, updateSelectAll]);\n\n  useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n  const onChangeHandler = (values) => {\n    const newFilterValues = filterOptions.map((_, i) =>\n      activeGroup === i\n        ? values.filter((v) => v.selected).map((v) => v.id)\n        : [...(filterValues[i] || [])]\n    );\n    setFilterValues(newFilterValues);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = cloneDeep(filterValues);\n    newFilterValues[activeGroup] = anySelected ? [] : activeGroupOptions;\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    activeGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n  ]);\n\n  /**\n   * Create selectAll component.\n   *\n   * @returns {*}\n   */\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${activeGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${activeGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  }, [\n    activeFilterValues?.length,\n    activeGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n  ]);\n\n  return (\n    <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n      {listValues.length > 0 ? (\n        <>\n          <HvInput\n            id={setId(id, \"search\")}\n            classes={{\n              root: classes.search,\n            }}\n            type=\"search\"\n            placeholder={labels?.searchBoxPlaceholder}\n            value={searchStr}\n            onChange={(_, str) => setSearchStr(str)}\n          />\n          <SelectAll />\n          <HvList\n            key={activeGroup}\n            id={setId(id, \"list\")}\n            values={listValues}\n            className={classes.list}\n            multiSelect\n            useSelector\n            showSelectAll={false}\n            onChange={onChangeHandler}\n            selectable\n            condensed\n            hasTooltips\n          />\n        </>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":["HvFilterGroupRightPanel","id","className","labels","emptyElement","classes","classesProp","useClasses","searchStr","setSearchStr","useState","allSelected","setAllSelected","anySelected","setAnySelected","filterOptions","filterValues","setFilterValues","activeGroup","useContext","HvFilterGroupContext","activeGroupOptions","useMemo","data","map","option","activeFilterValues","filter","value","includes","listValues","label","name","selected","isHidden","toLowerCase","indexOf","updateSelectAll","useCallback","nbrSelected","length","hasSelection","allSelect","useEffect","onChangeHandler","values","newFilterValues","_","i","v","handleSelectAll","cloneDeep","SelectAll","defaultLabel","HvTypography","component","children","_jsxs","_Fragment","_jsx","multiSelectionConjunction","selectAll","selectAllContainer","HvCheckBox","setId","onChange","indeterminate","checked","HvPanel","HvInput","root","search","type","placeholder","searchBoxPlaceholder","str","HvList","list","multiSelect","useSelector","showSelectAll","selectable","condensed","hasTooltips"],"mappings":"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"}
+{"version":3,"file":"RightPanel.cjs","sources":["../../../../../src/components/FilterGroup/RightPanel/RightPanel.tsx"],"sourcesContent":["import {\n  HvCheckBox,\n  HvInput,\n  HvList,\n  HvPanel,\n  HvTypography,\n} from \"@core/components\";\nimport { ExtractNames, setId } from \"@core/utils\";\nimport { useCallback, useContext, useEffect, useMemo, useState } from \"react\";\nimport cloneDeep from \"lodash/cloneDeep\";\nimport { HvFilterGroupContext } from \"../FilterGroupContext\";\nimport { staticClasses, useClasses } from \"./RightPanel.styles\";\n\nexport { staticClasses as filterGroupRightPanelClasses };\n\nexport type HvFilterGroupRightPanelClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupRightPanelProps {\n  id?: string;\n  className?: string;\n  labels?: {\n    searchBoxPlaceholder?: string;\n    selectAll?: string;\n    multiSelectionConjunction?: string;\n  };\n  emptyElement?: React.ReactNode;\n  classes?: HvFilterGroupRightPanelClasses;\n}\n\nexport const HvFilterGroupRightPanel = ({\n  id,\n  className,\n  labels,\n  emptyElement,\n  classes: classesProp,\n}: HvFilterGroupRightPanelProps) => {\n  const { classes } = useClasses(classesProp);\n  const [searchStr, setSearchStr] = useState<string>(\"\");\n  const [allSelected, setAllSelected] = useState<boolean>(false);\n  const [anySelected, setAnySelected] = useState<boolean>(false);\n\n  const {\n    filterOptions,\n    filterValues = [],\n    setFilterValues,\n    activeGroup,\n  } = useContext(HvFilterGroupContext);\n\n  const activeGroupOptions = useMemo(\n    () => filterOptions[activeGroup]?.data.map((option) => option.id) || [],\n    [filterOptions, activeGroup]\n  );\n\n  const activeFilterValues = useMemo(\n    () =>\n      filterValues[activeGroup]?.filter((value) =>\n        activeGroupOptions.includes(value)\n      ) || [],\n    [filterValues, activeGroupOptions, activeGroup]\n  );\n\n  const listValues = useMemo(\n    () =>\n      filterOptions[activeGroup]?.data.map((option) => ({\n        ...option,\n        label: option.name,\n        selected: filterValues[activeGroup]?.includes(option.id),\n        isHidden:\n          option.name.toLowerCase().indexOf(searchStr.toLowerCase()) < 0,\n      })) || [],\n    [filterOptions, filterValues, activeGroup, searchStr]\n  );\n\n  const updateSelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n    const hasSelection = nbrSelected > 0;\n    const allSelect = nbrSelected === activeGroupOptions.length;\n\n    setAnySelected(hasSelection);\n    setAllSelected(hasSelection && allSelect);\n  }, [activeFilterValues, activeGroupOptions]);\n\n  useEffect(() => {\n    updateSelectAll();\n  }, [activeFilterValues, updateSelectAll]);\n\n  useEffect(() => setSearchStr(\"\"), [activeGroup]);\n\n  const onChangeHandler = (values) => {\n    const newFilterValues = filterOptions.map((_, i) =>\n      activeGroup === i\n        ? values.filter((v) => v.selected).map((v) => v.id)\n        : [...(filterValues[i] || [])]\n    );\n    setFilterValues(newFilterValues);\n  };\n\n  const handleSelectAll = useCallback(() => {\n    const newFilterValues = cloneDeep(filterValues);\n    newFilterValues[activeGroup] = anySelected ? [] : activeGroupOptions;\n\n    setFilterValues(newFilterValues);\n  }, [\n    activeGroup,\n    activeGroupOptions,\n    anySelected,\n    filterValues,\n    setFilterValues,\n  ]);\n\n  /**\n   * Create selectAll component.\n   *\n   * @returns {*}\n   */\n  const SelectAll = useCallback(() => {\n    const nbrSelected = activeFilterValues?.length;\n\n    const defaultLabel = (\n      <HvTypography component=\"span\">\n        {nbrSelected > 0 ? (\n          <>\n            <b>{nbrSelected}</b>\n            {` ${labels?.multiSelectionConjunction} ${activeGroupOptions.length}`}\n          </>\n        ) : (\n          <>\n            <b>{labels?.selectAll}</b>\n            {` (${activeGroupOptions.length})`}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <div className={classes.selectAllContainer}>\n        <HvCheckBox\n          id={setId(id, \"select-all\")}\n          label={defaultLabel}\n          onChange={() => handleSelectAll()}\n          className={classes.selectAll}\n          indeterminate={anySelected && !allSelected}\n          checked={allSelected}\n        />\n      </div>\n    );\n  }, [\n    activeFilterValues?.length,\n    activeGroupOptions.length,\n    allSelected,\n    anySelected,\n    handleSelectAll,\n    id,\n    labels,\n    classes?.selectAllContainer,\n    classes?.selectAll,\n  ]);\n\n  return (\n    <HvPanel id={setId(id, \"rightPanel\")} className={className}>\n      {listValues.length > 0 ? (\n        <>\n          <HvInput\n            id={setId(id, \"search\")}\n            classes={{\n              root: classes.search,\n            }}\n            type=\"search\"\n            placeholder={labels?.searchBoxPlaceholder}\n            value={searchStr}\n            onChange={(_, str) => setSearchStr(str)}\n          />\n          <SelectAll />\n          <HvList\n            key={activeGroup}\n            id={setId(id, \"list\")}\n            values={listValues}\n            className={classes.list}\n            multiSelect\n            useSelector\n            showSelectAll={false}\n            onChange={onChangeHandler}\n            selectable\n            condensed\n            hasTooltips\n          />\n        </>\n      ) : (\n        emptyElement\n      )}\n    </HvPanel>\n  );\n};\n"],"names":["HvFilterGroupRightPanel","id","className","labels","emptyElement","classes","classesProp","useClasses","searchStr","setSearchStr","useState","allSelected","setAllSelected","anySelected","setAnySelected","filterOptions","filterValues","setFilterValues","activeGroup","useContext","HvFilterGroupContext","activeGroupOptions","useMemo","data","map","option","activeFilterValues","filter","value","includes","listValues","label","name","selected","isHidden","toLowerCase","indexOf","updateSelectAll","useCallback","nbrSelected","length","hasSelection","allSelect","useEffect","onChangeHandler","values","newFilterValues","_","i","v","handleSelectAll","cloneDeep","SelectAll","defaultLabel","HvTypography","component","children","_jsxs","_Fragment","_jsx","multiSelectionConjunction","selectAll","selectAllContainer","HvCheckBox","setId","onChange","indeterminate","checked","HvPanel","HvInput","root","search","type","placeholder","searchBoxPlaceholder","str","HvList","list","multiSelect","useSelector","showSelectAll","selectable","condensed","hasTooltips"],"mappings":"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"}

package/dist/cjs/components/Forms/Suggestions/Suggestions.cjs

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const clsx = require("clsx");
 const React = require("react");
+const material = require("@mui/material");
 const Suggestions_styles = require("./Suggestions.styles.cjs");
 const suggestionsClasses = require("./suggestionsClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
@@ -9,22 +10,24 @@ const useClickOutside = require("../../../hooks/useClickOutside.cjs");
 const ListItem = require("../../ListContainer/ListItem/ListItem.cjs");
 const FormElementContext = require("../FormElement/context/FormElementContext.cjs");
 const setId = require("../../../utils/setId.cjs");
-const HvSuggestions = ({
-  id,
-  className,
-  classes,
-  expanded = false,
-  anchorEl,
-  suggestionValues = [],
-  onClose,
-  onSuggestionSelected,
-  ...others
-}) => {
+const HvSuggestions = React.forwardRef((props, extRef) => {
+  const {
+    id,
+    className,
+    classes,
+    expanded = false,
+    anchorEl,
+    suggestionValues = [],
+    onClose,
+    onSuggestionSelected,
+    ...others
+  } = props;
   const {
     elementId
   } = React.useContext(FormElementContext.HvFormElementContext);
   const localId = id ?? setId.setId(elementId, "suggestions");
   const ref = React.useRef(null);
+  const forkedRef = material.useForkRef(ref, extRef);
   const [isOpen, setIsOpen] = React.useState(expanded);
   useClickOutside.useClickOutside(ref, (event) => {
     setIsOpen(false);
@@ -35,7 +38,7 @@ const HvSuggestions = ({
   }, [expanded]);
   return /* @__PURE__ */ jsxRuntime.jsx(Suggestions_styles.StyledRoot, {
     id: localId,
-    ref,
+    ref: forkedRef,
     className: clsx.clsx(className, suggestionsClasses.default.root, classes == null ? void 0 : classes.root),
     ...others,
     children: /* @__PURE__ */ jsxRuntime.jsx(Suggestions_styles.StyledPopper, {
@@ -58,6 +61,6 @@ const HvSuggestions = ({
       })
     })
   });
-};
+});
 exports.HvSuggestions = HvSuggestions;
 //# sourceMappingURL=Suggestions.cjs.map

package/dist/cjs/components/Forms/Suggestions/Suggestions.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Suggestions.cjs","sources":["../../../../../src/components/Forms/Suggestions/Suggestions.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { useContext, useEffect, useRef, useState } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { setId } from \"@core/utils\";\nimport {\n  StyledRoot,\n  StyledSelectionList,\n  StyledPopper,\n} from \"./Suggestions.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\nimport { HvListItem } from \"../../ListContainer/ListItem\";\nimport { HvClickOutsideEvent, useClickOutside } from \"../../../hooks\";\nimport suggestionsClasses, { HvSuggestionsClasses } from \"./suggestionsClasses\";\n\nexport interface HvSuggestion {\n  id?: string;\n  label: React.ReactNode;\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n  /** Whether suggestions is visible. */\n  expanded?: boolean;\n  /** The HTML element Suggestions attaches to. */\n  anchorEl?: HTMLElement | null;\n  /** Array of { id, label, ...others } values to display in the suggestion list */\n  suggestionValues?: HvSuggestion[] | null;\n  /** Function called when a suggestion is selected */\n  onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n  /** Function called when suggestion list is closed */\n  onClose?: (event: HvClickOutsideEvent) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSuggestionsClasses;\n}\n\nexport const HvSuggestions = ({\n  id,\n  className,\n  classes,\n  expanded = false,\n  anchorEl,\n  suggestionValues = [],\n  onClose,\n  onSuggestionSelected,\n  ...others\n}: HvSuggestionsProps) => {\n  const { elementId } = useContext(HvFormElementContext);\n  const localId = id ?? setId(elementId, \"suggestions\");\n\n  const ref = useRef<HTMLDivElement>(null);\n  const [isOpen, setIsOpen] = useState<boolean>(expanded);\n\n  useClickOutside(ref, (event: HvClickOutsideEvent) => {\n    setIsOpen(false);\n    onClose?.(event);\n  });\n\n  useEffect(() => {\n    setIsOpen(expanded);\n  }, [expanded]);\n\n  return (\n    <StyledRoot\n      id={localId}\n      ref={ref}\n      className={clsx(className, suggestionsClasses.root, classes?.root)}\n      {...others}\n    >\n      <StyledPopper\n        open={isOpen}\n        disablePortal\n        anchorEl={anchorEl}\n        className={clsx(suggestionsClasses.popper, classes?.popper)}\n      >\n        <StyledSelectionList\n          className={clsx(suggestionsClasses.list, classes?.list)}\n          id={setId(localId, \"list\")}\n          onChange={onSuggestionSelected}\n        >\n          {suggestionValues?.map((item, i) => {\n            const itemKey = item.id || setId(\"item\", i);\n\n            return (\n              <HvListItem\n                key={itemKey}\n                value={item}\n                disabled={item.disabled || undefined}\n              >\n                {item.label}\n              </HvListItem>\n            );\n          })}\n        </StyledSelectionList>\n      </StyledPopper>\n    </StyledRoot>\n  );\n};\n"],"names":["HvSuggestions","id","className","classes","expanded","anchorEl","suggestionValues","onClose","onSuggestionSelected","others","elementId","useContext","HvFormElementContext","localId","setId","ref","useRef","isOpen","setIsOpen","useState","event","useEffect","StyledRoot","clsx","suggestionsClasses","root","children","StyledPopper","open","disablePortal","popper","StyledSelectionList","list","onChange","map","item","i","itemKey","HvListItem","value","disabled","undefined","label"],"mappings":";;;;;;;;;;;AAoCO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,WAAW;AAAA,EACXC;AAAAA,EACAC,mBAAmB,CAAE;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAcC,MAAAA,WAAWC,mBAAAA,oBAAoB;AACrD,QAAMC,UAAUZ,MAAMa,MAAMJ,MAAAA,WAAW,aAAa;AAE9CK,QAAAA,MAAMC,aAAuB,IAAI;AACvC,QAAM,CAACC,QAAQC,SAAS,IAAIC,eAAkBf,QAAQ;AAEtCW,kCAAAA,KAAK,CAACK,UAA+B;AACnDF,cAAU,KAAK;AACfX,uCAAUa;AAAAA,EAAK,CAChB;AAEDC,QAAAA,UAAU,MAAM;AACdH,cAAUd,QAAQ;AAAA,EAAA,GACjB,CAACA,QAAQ,CAAC;AAEb,wCACGkB,mBAAAA,YAAU;AAAA,IACTrB,IAAIY;AAAAA,IACJE;AAAAA,IACAb,WAAWqB,KAAKrB,KAAAA,WAAWsB,mBAAmBC,QAAAA,MAAMtB,mCAASsB,IAAI;AAAA,IAAE,GAC/DhB;AAAAA,IAAMiB,yCAETC,iCAAY;AAAA,MACXC,MAAMX;AAAAA,MACNY,eAAa;AAAA,MACbxB;AAAAA,MACAH,WAAWqB,KAAAA,KAAKC,mBAAAA,QAAmBM,QAAQ3B,mCAAS2B,MAAM;AAAA,MAAEJ,yCAE3DK,wCAAmB;AAAA,QAClB7B,WAAWqB,KAAAA,KAAKC,mBAAAA,QAAmBQ,MAAM7B,mCAAS6B,IAAI;AAAA,QACtD/B,IAAIa,MAAAA,MAAMD,SAAS,MAAM;AAAA,QACzBoB,UAAUzB;AAAAA,QAAqBkB,UAE9BpB,qDAAkB4B,IAAI,CAACC,MAAMC,MAAM;AAClC,gBAAMC,UAAUF,KAAKlC,MAAMa,MAAAA,MAAM,QAAQsB,CAAC;AAE1C,gDACGE,SAAAA,YAAU;AAAA,YAETC,OAAOJ;AAAAA,YACPK,UAAUL,KAAKK,YAAYC;AAAAA,YAAUf,UAEpCS,KAAKO;AAAAA,aAJDL,OAKK;AAAA,QAAA;AAAA,MAEf,CACkB;AAAA,IAAA,CACT;AAAA,EAAA,CACJ;AAEhB;;"}
+{"version":3,"file":"Suggestions.cjs","sources":["../../../../../src/components/Forms/Suggestions/Suggestions.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n  forwardRef,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { useForkRef } from \"@mui/material\";\nimport { HvBaseProps } from \"@core/types\";\nimport { setId } from \"@core/utils\";\nimport {\n  StyledRoot,\n  StyledSelectionList,\n  StyledPopper,\n} from \"./Suggestions.styles\";\nimport { HvFormElementContext } from \"../FormElement\";\nimport { HvListItem } from \"../../ListContainer/ListItem\";\nimport { HvClickOutsideEvent, useClickOutside } from \"../../../hooks\";\nimport suggestionsClasses, { HvSuggestionsClasses } from \"./suggestionsClasses\";\n\nexport interface HvSuggestion {\n  id?: string;\n  label: React.ReactNode;\n  value?: string;\n  disabled?: boolean;\n}\n\nexport interface HvSuggestionsProps extends HvBaseProps {\n  /** Whether suggestions is visible. */\n  expanded?: boolean;\n  /** The HTML element Suggestions attaches to. */\n  anchorEl?: HTMLElement | null;\n  /** Array of { id, label, ...others } values to display in the suggestion list */\n  suggestionValues?: HvSuggestion[] | null;\n  /** Function called when a suggestion is selected */\n  onSuggestionSelected?: (event: React.MouseEvent, value: HvSuggestion) => void;\n  /** Function called when suggestion list is closed */\n  onClose?: (event: HvClickOutsideEvent) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvSuggestionsClasses;\n}\n\nexport const HvSuggestions = forwardRef((props: HvSuggestionsProps, extRef) => {\n  const {\n    id,\n    className,\n    classes,\n    expanded = false,\n    anchorEl,\n    suggestionValues = [],\n    onClose,\n    onSuggestionSelected,\n    ...others\n  } = props;\n  const { elementId } = useContext(HvFormElementContext);\n  const localId = id ?? setId(elementId, \"suggestions\");\n\n  const ref = useRef<HTMLDivElement>(null);\n  const forkedRef = useForkRef(ref, extRef);\n\n  const [isOpen, setIsOpen] = useState(expanded);\n\n  useClickOutside(ref, (event) => {\n    setIsOpen(false);\n    onClose?.(event);\n  });\n\n  useEffect(() => {\n    setIsOpen(expanded);\n  }, [expanded]);\n\n  return (\n    <StyledRoot\n      id={localId}\n      ref={forkedRef}\n      className={clsx(className, suggestionsClasses.root, classes?.root)}\n      {...others}\n    >\n      <StyledPopper\n        open={isOpen}\n        disablePortal\n        anchorEl={anchorEl}\n        className={clsx(suggestionsClasses.popper, classes?.popper)}\n      >\n        <StyledSelectionList\n          className={clsx(suggestionsClasses.list, classes?.list)}\n          id={setId(localId, \"list\")}\n          onChange={onSuggestionSelected}\n        >\n          {suggestionValues?.map((item, i) => {\n            const itemKey = item.id || setId(\"item\", i);\n\n            return (\n              <HvListItem\n                key={itemKey}\n                value={item}\n                disabled={item.disabled || undefined}\n              >\n                {item.label}\n              </HvListItem>\n            );\n          })}\n        </StyledSelectionList>\n      </StyledPopper>\n    </StyledRoot>\n  );\n});\n"],"names":["HvSuggestions","forwardRef","props","extRef","id","className","classes","expanded","anchorEl","suggestionValues","onClose","onSuggestionSelected","others","elementId","useContext","HvFormElementContext","localId","setId","ref","useRef","forkedRef","useForkRef","isOpen","setIsOpen","useState","useClickOutside","event","useEffect","StyledRoot","clsx","suggestionsClasses","root","children","StyledPopper","open","disablePortal","popper","StyledSelectionList","list","onChange","map","item","i","itemKey","HvListItem","value","disabled","undefined","label"],"mappings":";;;;;;;;;;;;AA2CO,MAAMA,gBAAgBC,MAAAA,WAAW,CAACC,OAA2BC,WAAW;AACvE,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,WAAW;AAAA,IACXC;AAAAA,IACAC,mBAAmB,CAAE;AAAA,IACrBC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EACDV,IAAAA;AACE,QAAA;AAAA,IAAEW;AAAAA,EAAAA,IAAcC,MAAAA,WAAWC,mBAAAA,oBAAoB;AACrD,QAAMC,UAAUZ,MAAMa,MAAMJ,MAAAA,WAAW,aAAa;AAE9CK,QAAAA,MAAMC,aAAuB,IAAI;AACjCC,QAAAA,YAAYC,SAAAA,WAAWH,KAAKf,MAAM;AAExC,QAAM,CAACmB,QAAQC,SAAS,IAAIC,eAASjB,QAAQ;AAE7CkB,kCAAgBP,KAAMQ,CAAU,UAAA;AAC9BH,cAAU,KAAK;AACfb,uCAAUgB;AAAAA,EAAK,CAChB;AAEDC,QAAAA,UAAU,MAAM;AACdJ,cAAUhB,QAAQ;AAAA,EAAA,GACjB,CAACA,QAAQ,CAAC;AAEb,wCACGqB,mBAAAA,YAAU;AAAA,IACTxB,IAAIY;AAAAA,IACJE,KAAKE;AAAAA,IACLf,WAAWwB,KAAKxB,KAAAA,WAAWyB,mBAAmBC,QAAAA,MAAMzB,mCAASyB,IAAI;AAAA,IAAE,GAC/DnB;AAAAA,IAAMoB,yCAETC,iCAAY;AAAA,MACXC,MAAMZ;AAAAA,MACNa,eAAa;AAAA,MACb3B;AAAAA,MACAH,WAAWwB,KAAAA,KAAKC,mBAAAA,QAAmBM,QAAQ9B,mCAAS8B,MAAM;AAAA,MAAEJ,yCAE3DK,wCAAmB;AAAA,QAClBhC,WAAWwB,KAAAA,KAAKC,mBAAAA,QAAmBQ,MAAMhC,mCAASgC,IAAI;AAAA,QACtDlC,IAAIa,MAAAA,MAAMD,SAAS,MAAM;AAAA,QACzBuB,UAAU5B;AAAAA,QAAqBqB,UAE9BvB,qDAAkB+B,IAAI,CAACC,MAAMC,MAAM;AAClC,gBAAMC,UAAUF,KAAKrC,MAAMa,MAAAA,MAAM,QAAQyB,CAAC;AAE1C,gDACGE,SAAAA,YAAU;AAAA,YAETC,OAAOJ;AAAAA,YACPK,UAAUL,KAAKK,YAAYC;AAAAA,YAAUf,UAEpCS,KAAKO;AAAAA,aAJDL,OAKK;AAAA,QAAA;AAAA,MAEf,CACkB;AAAA,IAAA,CACT;AAAA,EAAA,CACJ;AAEhB,CAAC;;"}

package/dist/cjs/components/Header/Navigation/MenuItem/MenuItem.cjs

@@ -9,6 +9,25 @@ const MenuBar = require("../MenuBar/MenuBar.cjs");
 const Typography = require("../../../Typography/Typography.cjs");
 const keyCheck = require("../../../../utils/keyboardUtils/keyCheck.cjs");
 const keyboardCodes = require("../../../../utils/keyboardUtils/keyboardCodes.cjs");
+const traverseItem = (node) => {
+  var _a;
+  let href;
+  let target;
+  if (node == null ? void 0 : node.href) {
+    href = node == null ? void 0 : node.href;
+    target = node == null ? void 0 : node.target;
+  } else if ((node == null ? void 0 : node.data) != null && ((_a = node == null ? void 0 : node.data) == null ? void 0 : _a.length) > 0) {
+    let i = 0;
+    while (href == null && i < node.data.length) {
+      traverseItem(node == null ? void 0 : node.data[i]);
+      i += 1;
+    }
+  }
+  return {
+    href,
+    target
+  };
+};
 const HvMenuItem = ({
   id,
   item,
@@ -53,21 +72,13 @@ const HvMenuItem = ({
   });
   let itemHref = item == null ? void 0 : item.href;
   let itemTarget = item == null ? void 0 : item.target;
-  if (itemHref == null) {
-    let traversePreOrder = function(node) {
-      var _a;
-      if (node == null ? void 0 : node.href) {
-        itemHref = node == null ? void 0 : node.href;
-        itemTarget = node == null ? void 0 : node.target;
-      } else if ((node == null ? void 0 : node.data) != null && ((_a = node == null ? void 0 : node.data) == null ? void 0 : _a.length) > 0) {
-        let i = 0;
-        while (itemHref == null && i < node.data.length) {
-          traversePreOrder(node == null ? void 0 : node.data[i]);
-          i += 1;
-        }
-      }
-    };
-    traversePreOrder(item);
+  if ((item == null ? void 0 : item.href) == null) {
+    const {
+      href,
+      target
+    } = traverseItem(item);
+    itemHref = href;
+    itemTarget = target;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(MenuItem_styles.MenuItemLi, {
     id,

package/dist/cjs/components/Header/Navigation/MenuItem/MenuItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { HvHeaderNavigationItemProp, HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { isKeypress, keyboardCodes } from \"@core/utils\";\nimport { HvMenuBar } from \"../MenuBar\";\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { MenuItemLabel, MenuItemLi, MenuItemLink } from \"./MenuItem.styles\";\n\nexport interface MenuItemProps extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  item: HvHeaderNavigationItemProp;\n  type?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n}\n\nexport const HvMenuItem = ({ id, item, type, onClick }: MenuItemProps) => {\n  const selectionPath = useContext(SelectionContext);\n  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n  const hasSubLevel = data && data.length;\n  const isMenu = type === \"menu\";\n  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n  const isCurrent = isSelected\n    ? selectionPath?.length > (isMenu ? 2 : 1)\n      ? true\n      : \"page\"\n    : undefined;\n\n  const actionHandler = (event) => {\n    if (\n      event.type === \"click\" ||\n      isKeypress(event, keyboardCodes.Enter) ||\n      isKeypress(event, keyboardCodes.SpaceBar)\n    ) {\n      if (event.type === \"click\") {\n        event.currentTarget.blur();\n      }\n      onClick?.(event, item);\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent) => {\n    dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n  };\n\n  const itemProps = {\n    onClick: actionHandler,\n    onKeyDown: actionHandler,\n    onFocus: handleFocus,\n  };\n\n  const label = (\n    <HvTypography\n      component=\"span\"\n      variant={isSelected ? \"label\" : \"body\"}\n      data-text={item.label}\n    >\n      {item.label}\n    </HvTypography>\n  );\n\n  let itemHref = item?.href;\n  let itemTarget = item?.target;\n  if (itemHref == null) {\n    // apps should configure the href even on parent items without content\n    // so the fallback logic is theirs, but if not we'll do our best to find a link\n    // eslint-disable-next-line no-inner-declarations\n    function traversePreOrder(node: HvHeaderNavigationItemProp) {\n      if (node?.href) {\n        itemHref = node?.href;\n        itemTarget = node?.target;\n      } else if (node?.data != null && node?.data?.length > 0) {\n        let i = 0;\n        while (itemHref == null && i < node.data.length) {\n          traversePreOrder(node?.data[i]);\n          i += 1;\n        }\n      }\n    }\n\n    traversePreOrder(item);\n  }\n\n  return (\n    <MenuItemLi\n      id={id}\n      key={item.label}\n      $selected={!!isSelected}\n      $isMenu={isMenu}\n    >\n      {itemHref ? (\n        <MenuItemLink\n          href={itemHref}\n          target={itemTarget}\n          {...itemProps}\n          $isSelected={isSelected}\n          $isMenu={isMenu}\n          aria-current={isCurrent}\n        >\n          {label}\n        </MenuItemLink>\n      ) : (\n        // keeping this code path for backwards compatibility, but\n        // shouldn't really be used as it's not accessible\n        <MenuItemLabel\n          role=\"button\"\n          {...itemProps}\n          tabIndex={0}\n          $isSelected={isSelected}\n          $isMenu={isMenu}\n          aria-current={isCurrent}\n        >\n          {label}\n        </MenuItemLabel>\n      )}\n      {hasSubLevel && <HvMenuBar data={data} onClick={onClick} type=\"menu\" />}\n    </MenuItemLi>\n  );\n};\n"],"names":["HvMenuItem","id","item","type","onClick","selectionPath","useContext","SelectionContext","dispatch","FocusContext","data","hasSubLevel","length","isMenu","isSelected","isCurrent","undefined","actionHandler","event","isKeypress","keyboardCodes","Enter","SpaceBar","currentTarget","blur","handleFocus","itemFocused","itemProps","onKeyDown","onFocus","label","HvTypography","component","variant","children","itemHref","href","itemTarget","target","traversePreOrder","node","i","MenuItemLi","$selected","$isMenu","_jsx","MenuItemLink","$isSelected","MenuItemLabel","role","tabIndex","HvMenuBar"],"mappings":";;;;;;;;;;;AAeO,MAAMA,aAAaA,CAAC;AAAA,EAAEC;AAAAA,EAAIC;AAAAA,EAAMC;AAAAA,EAAMC;AAAuB,MAAM;AAClEC,QAAAA,gBAAgBC,iBAAWC,iBAAAA,gBAAgB;AAC3C,QAAA;AAAA,IAAEC;AAAAA,EAAAA,IAAaF,MAAAA,WAAWG,aAAAA,YAAY;AAEtC,QAAA;AAAA,IAAEC;AAAAA,EAASR,IAAAA;AACXS,QAAAA,cAAcD,QAAQA,KAAKE;AACjC,QAAMC,SAASV,SAAS;AACxB,QAAMW,cAAaT,+CAAgBQ,SAAS,IAAI,QAAOX,KAAKD;AACtDc,QAAAA,YAAYD,cACdT,+CAAeO,WAAUC,SAAS,IAAI,KACpC,OACA,SACFG;AAEJ,QAAMC,gBAAiBC,CAAU,UAAA;AAC/B,QACEA,MAAMf,SAAS,WACfgB,SAAAA,WAAWD,OAAOE,cAAAA,cAAcC,KAAK,KACrCF,SAAAA,WAAWD,OAAOE,cAAcE,cAAAA,QAAQ,GACxC;AACIJ,UAAAA,MAAMf,SAAS,SAAS;AAC1Be,cAAMK,cAAcC;MACtB;AACApB,yCAAUc,OAAOhB;AAAAA,IACnB;AAAA,EAAA;AAGIuB,QAAAA,cAAcA,CAACP,UAA4B;AACpC,yCAAA;AAAA,MAAEf,MAAM;AAAA,MAAkBuB,aAAaR,MAAMK;AAAAA,IAAAA;AAAAA,EAAe;AAGzE,QAAMI,YAAY;AAAA,IAChBvB,SAASa;AAAAA,IACTW,WAAWX;AAAAA,IACXY,SAASJ;AAAAA,EAAAA;AAGLK,QAAAA,uCACHC,yBAAY;AAAA,IACXC,WAAU;AAAA,IACVC,SAASnB,aAAa,UAAU;AAAA,IAChC,aAAWZ,KAAK4B;AAAAA,IAAMI,UAErBhC,KAAK4B;AAAAA,EAAAA,CACM;AAGhB,MAAIK,WAAWjC,6BAAMkC;AACrB,MAAIC,aAAanC,6BAAMoC;AACvB,MAAIH,YAAY,MAAM;AAIXI,QAAAA,mBAAT,SAA0BC,MAAkC;;AAC1D,UAAIA,6BAAMJ,MAAM;AACdD,mBAAWK,6BAAMJ;AACjBC,qBAAaG,6BAAMF;AAAAA,MAAAA,YACVE,6BAAM9B,SAAQ,UAAQ8B,kCAAM9B,SAAN8B,mBAAY5B,UAAS,GAAG;AACvD,YAAI6B,IAAI;AACR,eAAON,YAAY,QAAQM,IAAID,KAAK9B,KAAKE,QAAQ;AAC9B4B,2BAAAA,6BAAM9B,KAAK+B,EAAE;AACzB,eAAA;AAAA,QACP;AAAA,MACF;AAAA,IAAA;AAGFF,qBAAiBrC,IAAI;AAAA,EACvB;AAEA,yCACGwC,gBAAAA,YAAU;AAAA,IACTzC;AAAAA,IAEA0C,WAAW,CAAC,CAAC7B;AAAAA,IACb8B,SAAS/B;AAAAA,IAAOqB,UAEfC,CAAAA,WACCU,2BAAAA,IAACC,8BAAY;AAAA,MACXV,MAAMD;AAAAA,MACNG,QAAQD;AAAAA,MAAW,GACfV;AAAAA,MACJoB,aAAajC;AAAAA,MACb8B,SAAS/B;AAAAA,MACT,gBAAcE;AAAAA,MAAUmB,UAEvBJ;AAAAA,IAAAA,CACW;AAAA;AAAA;AAAA,qCAIbkB,gBAAAA,eAAa;AAAA,QACZC,MAAK;AAAA,QAAQ,GACTtB;AAAAA,QACJuB,UAAU;AAAA,QACVH,aAAajC;AAAAA,QACb8B,SAAS/B;AAAAA,QACT,gBAAcE;AAAAA,QAAUmB,UAEvBJ;AAAAA,MAAAA,CACY;AAAA,OAEhBnB,8CAAgBwC,mBAAS;AAAA,MAACzC;AAAAA,MAAYN;AAAAA,MAAkBD,MAAK;AAAA,IAAA,CAAQ,CAAC;AAAA,EAAA,GA7BlED,KAAK4B,KA8BA;AAEhB;;"}
+{"version":3,"file":"MenuItem.cjs","sources":["../../../../../../src/components/Header/Navigation/MenuItem/MenuItem.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\nimport { HvHeaderNavigationItemProp, HvTypography } from \"@core/components\";\nimport { HvBaseProps } from \"@core/types\";\nimport { isKeypress, keyboardCodes } from \"@core/utils\";\nimport { HvMenuBar } from \"../MenuBar\";\nimport { FocusContext } from \"../utils/FocusContext\";\nimport { SelectionContext } from \"../utils/SelectionContext\";\nimport { MenuItemLabel, MenuItemLi, MenuItemLink } from \"./MenuItem.styles\";\n\nexport interface MenuItemProps extends HvBaseProps<HTMLDivElement, \"onClick\"> {\n  item: HvHeaderNavigationItemProp;\n  type?: string;\n  onClick?: (event: MouseEvent, selection: HvHeaderNavigationItemProp) => void;\n}\n\n// Traverse the tree of items and return the first href it finds\nconst traverseItem = (node: HvHeaderNavigationItemProp) => {\n  let href;\n  let target;\n\n  if (node?.href) {\n    href = node?.href;\n    target = node?.target;\n  } else if (node?.data != null && node?.data?.length > 0) {\n    let i = 0;\n    while (href == null && i < node.data.length) {\n      traverseItem(node?.data[i]);\n      i += 1;\n    }\n  }\n\n  return { href, target };\n};\n\nexport const HvMenuItem = ({ id, item, type, onClick }: MenuItemProps) => {\n  const selectionPath = useContext(SelectionContext);\n  const { dispatch } = useContext(FocusContext);\n\n  const { data } = item;\n  const hasSubLevel = data && data.length;\n  const isMenu = type === \"menu\";\n  const isSelected = selectionPath?.[isMenu ? 1 : 0] === item.id;\n  const isCurrent = isSelected\n    ? selectionPath?.length > (isMenu ? 2 : 1)\n      ? true\n      : \"page\"\n    : undefined;\n\n  const actionHandler = (event) => {\n    if (\n      event.type === \"click\" ||\n      isKeypress(event, keyboardCodes.Enter) ||\n      isKeypress(event, keyboardCodes.SpaceBar)\n    ) {\n      if (event.type === \"click\") {\n        event.currentTarget.blur();\n      }\n      onClick?.(event, item);\n    }\n  };\n\n  const handleFocus = (event: React.FocusEvent) => {\n    dispatch?.({ type: \"setItemFocused\", itemFocused: event.currentTarget });\n  };\n\n  const itemProps = {\n    onClick: actionHandler,\n    onKeyDown: actionHandler,\n    onFocus: handleFocus,\n  };\n\n  const label = (\n    <HvTypography\n      component=\"span\"\n      variant={isSelected ? \"label\" : \"body\"}\n      data-text={item.label}\n    >\n      {item.label}\n    </HvTypography>\n  );\n\n  let itemHref = item?.href;\n  let itemTarget = item?.target;\n\n  // apps should configure the href even on parent items without content\n  // so the fallback logic is theirs, but if not we'll do our best to find a link\n  if (item?.href == null) {\n    const { href, target } = traverseItem(item);\n    itemHref = href;\n    itemTarget = target;\n  }\n\n  return (\n    <MenuItemLi\n      id={id}\n      key={item.label}\n      $selected={!!isSelected}\n      $isMenu={isMenu}\n    >\n      {itemHref ? (\n        <MenuItemLink\n          href={itemHref}\n          target={itemTarget}\n          {...itemProps}\n          $isSelected={isSelected}\n          $isMenu={isMenu}\n          aria-current={isCurrent}\n        >\n          {label}\n        </MenuItemLink>\n      ) : (\n        // keeping this code path for backwards compatibility, but\n        // shouldn't really be used as it's not accessible\n        <MenuItemLabel\n          role=\"button\"\n          {...itemProps}\n          tabIndex={0}\n          $isSelected={isSelected}\n          $isMenu={isMenu}\n          aria-current={isCurrent}\n        >\n          {label}\n        </MenuItemLabel>\n      )}\n      {hasSubLevel && <HvMenuBar data={data} onClick={onClick} type=\"menu\" />}\n    </MenuItemLi>\n  );\n};\n"],"names":["traverseItem","node","href","target","data","length","i","HvMenuItem","id","item","type","onClick","selectionPath","useContext","SelectionContext","dispatch","FocusContext","hasSubLevel","isMenu","isSelected","isCurrent","undefined","actionHandler","event","isKeypress","keyboardCodes","Enter","SpaceBar","currentTarget","blur","handleFocus","itemFocused","itemProps","onKeyDown","onFocus","label","HvTypography","component","variant","children","itemHref","itemTarget","MenuItemLi","$selected","$isMenu","_jsx","MenuItemLink","$isSelected","MenuItemLabel","role","tabIndex","HvMenuBar"],"mappings":"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"}

package/dist/cjs/components/Input/Input.cjs

@@ -1,6 +1,8 @@
 "use strict";
+var _a;
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const material = require("@mui/material");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const Input_styles = require("./Input.styles.cjs");
 const validationStates = require("../Forms/FormElement/validationStates.cjs");
@@ -36,65 +38,80 @@ const getFocusedElement = (event) => browser.default("ie") ? document.activeElem
 function eventTargetIsInsideContainer(container, event) {
   return container != null && container.contains(getFocusedElement(event));
 }
-const HvInput = ({
-  classes: classesProp,
-  className,
-  id,
-  name,
-  value: valueProp,
-  defaultValue = "",
-  required = false,
-  readOnly = false,
-  disabled = false,
-  label,
-  "aria-label": ariaLabel,
-  "aria-labelledby": ariaLabelledBy,
-  description,
-  "aria-describedby": ariaDescribedBy,
-  onChange,
-  onEnter,
-  status,
-  statusMessage,
-  "aria-errormessage": ariaErrorMessage,
-  type = "text",
-  placeholder,
-  autoFocus = false,
-  labels: labelsProp,
-  validationMessages,
-  disableClear = false,
-  disableRevealPassword = false,
-  disableSearchButton = false,
-  endAdornment,
-  maxCharQuantity,
-  minCharQuantity,
-  validation,
-  showValidationIcon = false,
-  suggestionListCallback,
-  inputRef: inputRefProp,
-  onBlur,
-  onFocus,
-  onKeyDown,
-  inputProps = {},
-  ...others
-}) => {
-  var _a;
+const setInputValue = (_a = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")) == null ? void 0 : _a.set;
+const changeInputValue = (input, value = "") => {
+  const event = new Event("input", {
+    bubbles: true
+  });
+  setInputValue == null ? void 0 : setInputValue.call(input, value);
+  input == null ? void 0 : input.dispatchEvent(event);
+};
+const HvInput = React.forwardRef((props, ref) => {
+  var _a2;
+  const {
+    classes: classesProp,
+    className,
+    id,
+    name,
+    value: valueProp,
+    defaultValue = "",
+    required = false,
+    readOnly = false,
+    disabled = false,
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    description,
+    "aria-describedby": ariaDescribedBy,
+    onChange,
+    onEnter,
+    status,
+    statusMessage,
+    "aria-errormessage": ariaErrorMessage,
+    type = "text",
+    placeholder,
+    autoFocus = false,
+    labels: labelsProp,
+    validationMessages,
+    disableClear = false,
+    disableRevealPassword = false,
+    disableSearchButton = false,
+    endAdornment,
+    maxCharQuantity,
+    minCharQuantity,
+    validation,
+    showValidationIcon = false,
+    suggestionListCallback,
+    inputRef: inputRefProp,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    inputProps = {},
+    ...others
+  } = props;
   const {
     classes,
     cx
   } = Input_styles.useClasses(classesProp);
   const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
   const elementId = useUniqueId.default(id, "hvinput");
-  const inputRef = React.useRef(inputRefProp || null);
+  const inputRef = React.useRef(null);
+  const forkedRef = material.useForkRef(ref, inputRef, inputRefProp);
+  const suggestionsRef = React.useRef(null);
   const [focused, setFocused] = React.useState(false);
   const isDirty = React.useRef(false);
   const [value, setValue] = useControlled.useControlled(valueProp, defaultValue);
   const isEmptyValue = value == null || value === "";
   const [validationState, setValidationState] = useControlled.useControlled(status, validationStates.default.standBy);
   const [validationMessage, setValidationMessage] = useControlled.useControlled(statusMessage, "");
-  const errorMessages = React.useMemo(() => ({
-    ...validations.DEFAULT_ERROR_MESSAGES,
-    ...validationMessages
-  }), [validationMessages == null ? void 0 : validationMessages.error, validationMessages == null ? void 0 : validationMessages.requiredError, validationMessages == null ? void 0 : validationMessages.minCharError, validationMessages == null ? void 0 : validationMessages.maxCharError, validationMessages == null ? void 0 : validationMessages.typeMismatchError]);
+  const errorMessages = React.useMemo(
+    () => ({
+      ...validations.DEFAULT_ERROR_MESSAGES,
+      ...validationMessages
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [validationMessages == null ? void 0 : validationMessages.error, validationMessages == null ? void 0 : validationMessages.requiredError, validationMessages == null ? void 0 : validationMessages.minCharError, validationMessages == null ? void 0 : validationMessages.maxCharError, validationMessages == null ? void 0 : validationMessages.typeMismatchError]
+  );
   const validationType = React.useMemo(() => validations.computeValidationType(type), [type]);
   const performValidation = React.useCallback(() => {
     const inputValidity = validations.validateInput(inputRef.current, value, required, minCharQuantity, maxCharQuantity, validationType, validation);
@@ -117,16 +134,11 @@ const HvInput = ({
   const [suggestionValues, setSuggestionValues] = React.useState(null);
   const canShowSuggestions = suggestionListCallback != null;
   const hasSuggestions = !!suggestionValues;
-  const materialInputRef = React.useRef(null);
-  const suggestionRef = React.useRef(null);
-  React.useEffect(() => {
-    suggestionRef.current = document.getElementById(setId.setId(elementId, "suggestions") || "");
-  }, [elementId]);
   const hasLabel = label != null;
   const hasDescription = description != null;
   const focusInput = () => {
-    var _a2;
-    (_a2 = materialInputRef.current) == null ? void 0 : _a2.focus();
+    var _a3;
+    (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
   };
   const isMounted = useIsMounted.default();
   const suggestionClearHandler = () => {
@@ -135,9 +147,9 @@ const HvInput = ({
     }
   };
   const suggestionHandler = (val) => {
-    var _a2;
+    var _a3;
     const suggestionsArray = suggestionListCallback == null ? void 0 : suggestionListCallback(val);
-    if ((_a2 = suggestionsArray == null ? void 0 : suggestionsArray[0]) == null ? void 0 : _a2.label) {
+    if ((_a3 = suggestionsArray == null ? void 0 : suggestionsArray[0]) == null ? void 0 : _a3.label) {
       setSuggestionValues(suggestionsArray);
     } else {
       suggestionClearHandler();
@@ -145,8 +157,7 @@ const HvInput = ({
   };
   const suggestionSelectedHandler = (event, item) => {
     const newValue = item.value || item.label;
-    setValue(newValue);
-    onChange == null ? void 0 : onChange(event, newValue);
+    changeInputValue(inputRef.current, newValue);
     focusInput();
     suggestionClearHandler();
     if (type === "search") {
@@ -162,7 +173,7 @@ const HvInput = ({
     }
   };
   const onInputBlurHandler = (event) => {
-    if (eventTargetIsInsideContainer(suggestionRef == null ? void 0 : suggestionRef.current, event))
+    if (eventTargetIsInsideContainer(suggestionsRef.current, event))
       return;
     setFocused(false);
     const inputValidity = performValidation();
@@ -174,9 +185,9 @@ const HvInput = ({
     onFocus == null ? void 0 : onFocus(event, value);
   };
   const getSuggestions = (li) => {
-    var _a2;
+    var _a3;
     const listEl = document.getElementById(setId.setId(elementId, "suggestions-list") || "");
-    return li != null ? (_a2 = listEl == null ? void 0 : listEl.getElementsByTagName("li")) == null ? void 0 : _a2[li] : listEl;
+    return li != null ? (_a3 = listEl == null ? void 0 : listEl.getElementsByTagName("li")) == null ? void 0 : _a3[li] : listEl;
   };
   const onSuggestionKeyDown = (event) => {
     if (keyCheck.isKeypress(event, keyboardCodes.keyboardCodes.Esc)) {
@@ -208,12 +219,11 @@ const HvInput = ({
   const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!hasOnEnter || type !== "search" || disableSearchButton || validationState !== validationStates.default.standBy);
   const showSearchIcon = type === "search" && !disableSearchButton;
   const showRevealPasswordButton = type === "password" && !disableRevealPassword;
-  const handleClear = React.useCallback((event) => {
+  const handleClear = React.useCallback(() => {
     setValidationState(validationStates.default.standBy);
-    setValue("");
-    onChange == null ? void 0 : onChange(event, "");
+    changeInputValue(inputRef.current, "");
     setTimeout(focusInput);
-  }, [onChange, setValidationState, setValue]);
+  }, [setValidationState]);
   const clearButton = React.useMemo(() => {
     if (!showClear) {
       return null;
@@ -230,7 +240,7 @@ const HvInput = ({
         icon: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.CloseXS, {})
       }
     );
-  }, [showClear, classes.adornmentButton, classes.iconClear, showSearchIcon, handleClear, labels == null ? void 0 : labels.clearButtonLabel, elementId]);
+  }, [showClear, classes.adornmentButton, classes.iconClear, showSearchIcon, handleClear, labels == null ? void 0 : labels.clearButtonLabel, elementId, cx]);
   const handleSearch = React.useCallback((event) => {
     onEnter == null ? void 0 : onEnter(event, value);
   }, [onEnter, value]);
@@ -282,7 +292,7 @@ const HvInput = ({
   }, [showValidationIcon, validationState, classes.icon]);
   const customIconEl = React.useMemo(() => React.isValidElement(endAdornment) && React__default.default.cloneElement(endAdornment, {
     className: cx(endAdornment.props.className, classes.icon)
-  }), [classes.icon, endAdornment]);
+  }), [classes.icon, endAdornment, cx]);
   const adornments = React.useMemo(() => {
     if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !customIconEl)
       return null;
@@ -298,10 +308,7 @@ const HvInput = ({
     }
     performValidation();
   }, [focused, isEmptyValue, performValidation]);
-  let errorMessageId;
-  if (isStateInvalid) {
-    errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
-  }
+  const errorMessageId = isStateInvalid ? canShowError ? setId.setId(elementId, "error") : ariaErrorMessage : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(FormElement.HvFormElement, {
     id,
     name,
@@ -355,12 +362,12 @@ const HvInput = ({
         "aria-errormessage": errorMessageId,
         "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description ? setId.setId(elementId, "description") : void 0,
         "aria-controls": canShowSuggestions ? setId.setId(elementId, "suggestions") : void 0,
-        ref: materialInputRef,
+        ref: inputRef,
         // prevent browsers auto-fill/suggestions when we have our own
         autoComplete: canShowSuggestions ? "off" : void 0,
         ...inputProps
       },
-      inputRef: inputRefProp || inputRef,
+      inputRef: forkedRef,
       endAdornment: adornments,
       ...others
     }), canShowSuggestions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -368,13 +375,14 @@ const HvInput = ({
         role: "presentation",
         className: classes.inputExtension
       }), /* @__PURE__ */ jsxRuntime.jsx(Suggestions.HvSuggestions, {
+        ref: suggestionsRef,
         id: setId.setId(elementId, "suggestions"),
         classes: {
           root: classes.suggestionsContainer,
           list: classes.suggestionList
         },
         expanded: hasSuggestions,
-        anchorEl: (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.parentElement,
+        anchorEl: (_a2 = inputRef.current) == null ? void 0 : _a2.parentElement,
         onClose: suggestionClearHandler,
         onKeyDown: onSuggestionKeyDown,
         onSuggestionSelected: suggestionSelectedHandler,
@@ -387,7 +395,7 @@ const HvInput = ({
       children: validationMessage
     })]
   });
-};
+});
 exports.inputClasses = Input_styles.staticClasses;
 exports.HvInput = HvInput;
 //# sourceMappingURL=Input.cjs.map