@hitachivantara/uikit-react-core 5.58.1 → 5.58.2

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { setId } from \"../utils/setId\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvListValue } from \"../List\";\nimport {\n  isInvalid,\n  HvInfoMessage,\n  HvWarningText,\n  HvFormElement,\n  HvLabel,\n  HvFormElementProps,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvTypography } from \"../Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDropdownStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvDropdownProps\n  extends Omit<HvFormElementProps, \"value\" | \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"placement\"\n      | \"popperProps\"\n      | \"disablePortal\"\n      | \"variableWidth\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n    > {\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDropdownStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: HvListValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: boolean;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabels;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n  /**\n   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: Partial<HvDropdownListProps>;\n}\n\nconst DEFAULT_LABELS = {\n  /** Label for overwrite the default header behavior. */\n  select: undefined as string | undefined,\n  /** Label used for the All checkbox action. */\n  selectAll: \"All\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** The label used in the middle of the multiSelection count. */\n  searchPlaceholder: \"Search\",\n  /** The label used in search. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvDropdownLabels = Partial<typeof DEFAULT_LABELS>;\n/** @deprecated use `HvDropdownLabels` instead */\nexport type HvDropdownLabelsProps = HvDropdownLabels;\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = forwardRef<HTMLDivElement, HvDropdownProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n\n      required = false,\n      disabled = false,\n      readOnly = false,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n\n      placeholder = \"Select...\",\n\n      onChange,\n\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      onCancel,\n      onToggle,\n      onClickOutside,\n\n      onFocus,\n      onBlur,\n\n      values,\n      multiSelect = false,\n      showSearch = false,\n      expanded,\n      defaultExpanded = false,\n      notifyChangesOnFirstRender = false,\n      labels: labelsProp,\n      hasTooltips = false,\n      disablePortal = false,\n      singleSelectionToggle = true,\n      placement,\n      variableWidth = false,\n      popperProps = {},\n      height,\n      maxHeight,\n      virtualized = false,\n      baseDropdownProps = {},\n      listProps = {},\n      ...others\n    } = useDefaultProps(\"HvDropdown\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const elementId = useUniqueId(id, \"hvdropdown\");\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n    const [selectionLabel, setSelectionLabel] = useState(\n      getSelectionLabel(labels, placeholder, multiSelect, values)\n    );\n\n    const [internalValues, setInternalValues] = useState(values);\n\n    // Hack - Keeping track of internal values for validation purposes since useState is async\n    const internalValuesRef = useRef(values);\n\n    useEffect(() => {\n      setInternalValues(values);\n      internalValuesRef.current = values;\n    }, [values]);\n\n    useEffect(() => {\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, values)\n      );\n    }, [labels, multiSelect, placeholder, values]);\n\n    if (import.meta.env.DEV && virtualized && !height) {\n      // eslint-disable-next-line no-console\n      console.error(\n        \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n      );\n    }\n\n    const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n    const {\n      ref: refProp,\n      dropdownHeaderRef: dropdownHeaderRefProp,\n      ...otherBaseDropdownProps\n    } = baseDropdownProps;\n    const headerForkedRef = useForkRef(\n      dropdownHeaderRefProp,\n      dropdownHeaderRef\n    );\n\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n      onToggle?.(event, open);\n\n      setIsOpen(open);\n\n      if (!open) {\n        // also run built-in validation when closing without changes\n        // as the user \"touched\" the input\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required) {\n            const hasSelection =\n              getSelected(internalValuesRef.current).length > 0;\n\n            if (!hasSelection) {\n              return \"invalid\";\n            }\n          }\n\n          return \"valid\";\n        });\n      }\n    };\n\n    /** Applies the selected values to the state */\n    const handleSelection: HvDropdownListProps[\"onChange\"] = (\n      listValues,\n      commitChanges,\n      toggle,\n      notifyChanges = true\n    ) => {\n      const selected = getSelected(listValues);\n\n      if (commitChanges) {\n        setInternalValues(listValues);\n        internalValuesRef.current = listValues;\n\n        setSelectionLabel(\n          getSelectionLabel(labels, placeholder, multiSelect, listValues)\n        );\n\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required && selected.length === 0) {\n            return \"invalid\";\n          }\n\n          return \"valid\";\n        });\n      }\n      if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n      if (toggle) {\n        handleToggle(undefined as any, false);\n\n        // focus-ring won't be visible even if using the keyboard:\n        // https://github.com/WICG/focus-visible/issues/88\n        dropdownHeaderRef.current?.focus({ preventScroll: true });\n      }\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n      onCancel?.(evt as any);\n\n      handleToggle(evt as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    };\n\n    const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n      onClickOutside?.(evt);\n      onCancel?.(evt);\n    };\n\n    const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n      containerRef\n    ) => {\n      const inputs = containerRef?.getElementsByTagName(\"input\");\n      if (inputs && inputs.length > 0) {\n        inputs[0].focus();\n        return;\n      }\n      const listItems =\n        containerRef != null\n          ? [...containerRef.getElementsByTagName(\"li\")]\n          : [];\n      listItems.every((listItem) => {\n        if (listItem.tabIndex >= 0) {\n          listItem.focus();\n          return false;\n        }\n        return true;\n      });\n    };\n\n    const buildHeaderLabel = () => {\n      const hasSelection = getSelected(internalValues).length > 0;\n      return labels?.select || !multiSelect ? (\n        <HvTypography\n          component=\"div\"\n          variant=\"body\"\n          className={cx(classes.placeholder, {\n            [classes.selectionDisabled]: disabled,\n            [classes.placeholderClosed]: !(isOpen || hasSelection),\n          })}\n        >\n          {selectionLabel.selected}\n        </HvTypography>\n      ) : (\n        <HvTypography\n          component=\"div\"\n          className={cx(classes.placeholder, {\n            [classes.selectionDisabled]: disabled,\n          })}\n          variant=\"body\"\n        >\n          <b>{selectionLabel.selected}</b>\n          {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n        </HvTypography>\n      );\n    };\n\n    const hasLabel = label != null;\n    const hasDescription = description != null;\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          id={setId(id, \"dropdown\")}\n          classes={{\n            root: cx(classes.dropdown, {\n              [classes.readOnly]: readOnly,\n            }),\n            arrow: classes.arrow,\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          expanded={isOpen}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          disablePortal={disablePortal}\n          placement={placement}\n          popperProps={popperProps}\n          placeholder={buildHeaderLabel()}\n          onToggle={handleToggle}\n          onClickOutside={handleClickOutside}\n          onContainerCreation={setFocusToContent}\n          role=\"combobox\"\n          variableWidth={variableWidth}\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          onFocus={onFocus}\n          onBlur={onBlur}\n          dropdownHeaderRef={headerForkedRef}\n          {...otherBaseDropdownProps}\n        >\n          <HvDropdownList\n            id={setId(elementId, \"values\")}\n            classes={{\n              rootList: classes.rootList,\n              dropdownListContainer: classes.dropdownListContainer,\n            }}\n            values={internalValues}\n            multiSelect={multiSelect}\n            showSearch={showSearch}\n            onChange={handleSelection}\n            onCancel={handleCancel}\n            labels={labels}\n            notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n            hasTooltips={hasTooltips}\n            singleSelectionToggle={singleSelectionToggle}\n            aria-label={ariaLabel}\n            aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n            height={height}\n            maxHeight={maxHeight}\n            virtualized={virtualized}\n            {...listProps}\n          />\n        </HvBaseDropdown>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"Dropdown.js","sources":["../../../src/Dropdown/Dropdown.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { setId } from \"../utils/setId\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvListValue } from \"../List\";\nimport {\n  isInvalid,\n  HvInfoMessage,\n  HvWarningText,\n  HvFormElement,\n  HvLabel,\n  HvFormElementProps,\n} from \"../Forms\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvTypography } from \"../Typography\";\n\nimport { getSelected, getSelectionLabel } from \"./utils\";\nimport { HvDropdownList, HvDropdownListProps } from \"./List\";\nimport { staticClasses, useClasses } from \"./Dropdown.styles\";\n\nexport { staticClasses as dropdownClasses };\n\nexport type HvDropdownClasses = ExtractNames<typeof useClasses>;\n\nexport type HvDropdownStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvDropdownProps\n  extends Omit<HvFormElementProps, \"value\" | \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"placement\"\n      | \"popperProps\"\n      | \"disablePortal\"\n      | \"variableWidth\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n    > {\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDropdownClasses;\n  /**\n   * The placeholder value when nothing is selected.\n   */\n  placeholder?: string;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvDropdownStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: any;\n  /**\n   * Identifies the element that provides an error message for the dropdown.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (selected: HvListValue | HvListValue[] | undefined) => void;\n  /**\n   * The list to be rendered by the dropdown.\n   */\n  values?: HvListValue[];\n  /**\n   * If `true` the dropdown is multiSelect, if `false` the dropdown is single select.\n   */\n  multiSelect?: boolean;\n  /**\n   * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.\n   */\n  showSearch?: boolean;\n  /**\n   * If 'true' the dropdown will notify on the first render.\n   */\n  notifyChangesOnFirstRender?: boolean;\n  /**\n   * An object containing all the labels for the dropdown.\n   */\n  labels?: HvDropdownLabels;\n  /**\n   * If `true` the dropdown will show tooltips when user mouseenter text in list\n   */\n  hasTooltips?: boolean;\n  /**\n   * If `true`, selection can be toggled when single selection.\n   */\n  singleSelectionToggle?: boolean;\n  /**\n   * Callback called when the user cancels the changes.\n   *\n   * Called when the cancel button is used and when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onCancel?: (event: Event) => void;\n  /**\n   * Callback called when dropdown changes the expanded state.\n   *\n   * @param {object} event The event source of the callback.\n   * @param {boolean} open If the dropdown new state is open (`true`) or closed (`false`).\n   */\n  onToggle?: (event: Event, open: boolean) => void;\n  /**\n   * Callback called when the user clicks outside the open container.\n   *\n   * @param {object} event The event source of the callback.\n   */\n  onClickOutside?: (event: Event) => void;\n  /**\n   * @ignore\n   */\n  onFocus?: React.FocusEventHandler<any>;\n  /**\n   * @ignore\n   */\n  onBlur?: React.FocusEventHandler<any>;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  height?: number;\n  /**\n   * Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used\n   */\n  maxHeight?: number;\n  /**\n   * Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options.\n   */\n  virtualized?: boolean;\n  /**\n   * Extra props passed to the dropdown.\n   */\n  baseDropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Extra props passed to the list.\n   */\n  listProps?: Partial<HvDropdownListProps>;\n}\n\nconst DEFAULT_LABELS = {\n  /** Label for overwrite the default header behavior. */\n  select: undefined as string | undefined,\n  /** Label used for the All checkbox action. */\n  selectAll: \"All\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** The label used in the middle of the multiSelection count. */\n  searchPlaceholder: \"Search\",\n  /** The label used in search. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvDropdownLabels = Partial<typeof DEFAULT_LABELS>;\n/** @deprecated use `HvDropdownLabels` instead */\nexport type HvDropdownLabelsProps = HvDropdownLabels;\n\n/**\n * A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.\n */\nexport const HvDropdown = forwardRef<HTMLDivElement, HvDropdownProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n\n      required = false,\n      disabled = false,\n      readOnly = false,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n\n      placeholder = \"Select...\",\n\n      onChange,\n\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      onCancel,\n      onToggle,\n      onClickOutside,\n\n      onFocus,\n      onBlur,\n\n      values,\n      multiSelect = false,\n      showSearch = false,\n      expanded,\n      defaultExpanded = false,\n      notifyChangesOnFirstRender = false,\n      labels: labelsProp,\n      hasTooltips = false,\n      disablePortal = false,\n      singleSelectionToggle = true,\n      placement,\n      variableWidth = false,\n      popperProps = {},\n      height,\n      maxHeight,\n      virtualized = false,\n      baseDropdownProps = {},\n      listProps = {},\n      ...others\n    } = useDefaultProps(\"HvDropdown\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const elementId = useUniqueId(id);\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n    const [selectionLabel, setSelectionLabel] = useState(\n      getSelectionLabel(labels, placeholder, multiSelect, values)\n    );\n\n    const [internalValues, setInternalValues] = useState(values);\n\n    // Hack - Keeping track of internal values for validation purposes since useState is async\n    const internalValuesRef = useRef(values);\n\n    useEffect(() => {\n      setInternalValues(values);\n      internalValuesRef.current = values;\n    }, [values]);\n\n    useEffect(() => {\n      setSelectionLabel(\n        getSelectionLabel(labels, placeholder, multiSelect, values)\n      );\n    }, [labels, multiSelect, placeholder, values]);\n\n    if (import.meta.env.DEV && virtualized && !height) {\n      // eslint-disable-next-line no-console\n      console.error(\n        \"Dropdown/List in virtualized mode requires a height. Please define it.\"\n      );\n    }\n\n    const dropdownHeaderRef = useRef<HTMLDivElement>();\n\n    const {\n      ref: refProp,\n      dropdownHeaderRef: dropdownHeaderRefProp,\n      ...otherBaseDropdownProps\n    } = baseDropdownProps;\n    const headerForkedRef = useForkRef(\n      dropdownHeaderRefProp,\n      dropdownHeaderRef\n    );\n\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (event, open) => {\n      onToggle?.(event, open);\n\n      setIsOpen(open);\n\n      if (!open) {\n        // also run built-in validation when closing without changes\n        // as the user \"touched\" the input\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required) {\n            const hasSelection =\n              getSelected(internalValuesRef.current).length > 0;\n\n            if (!hasSelection) {\n              return \"invalid\";\n            }\n          }\n\n          return \"valid\";\n        });\n      }\n    };\n\n    /** Applies the selected values to the state */\n    const handleSelection: HvDropdownListProps[\"onChange\"] = (\n      listValues,\n      commitChanges,\n      toggle,\n      notifyChanges = true\n    ) => {\n      const selected = getSelected(listValues);\n\n      if (commitChanges) {\n        setInternalValues(listValues);\n        internalValuesRef.current = listValues;\n\n        setSelectionLabel(\n          getSelectionLabel(labels, placeholder, multiSelect, listValues)\n        );\n\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required && selected.length === 0) {\n            return \"invalid\";\n          }\n\n          return \"valid\";\n        });\n      }\n      if (notifyChanges) onChange?.(multiSelect ? selected : selected[0]);\n      if (toggle) {\n        handleToggle(undefined as any, false);\n\n        // focus-ring won't be visible even if using the keyboard:\n        // https://github.com/WICG/focus-visible/issues/88\n        dropdownHeaderRef.current?.focus({ preventScroll: true });\n      }\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleCancel: HvDropdownListProps[\"onCancel\"] = (evt) => {\n      onCancel?.(evt as any);\n\n      handleToggle(evt as any, false);\n\n      // focus-ring won't be visible even if using the keyboard:\n      // https://github.com/WICG/focus-visible/issues/88\n      dropdownHeaderRef.current?.focus({ preventScroll: true });\n    };\n\n    const handleClickOutside: HvBaseDropdownProps[\"onClickOutside\"] = (evt) => {\n      onClickOutside?.(evt);\n      onCancel?.(evt);\n    };\n\n    const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n      containerRef\n    ) => {\n      const inputs = containerRef?.getElementsByTagName(\"input\");\n      if (inputs && inputs.length > 0) {\n        inputs[0].focus();\n        return;\n      }\n      const listItems =\n        containerRef != null\n          ? [...containerRef.getElementsByTagName(\"li\")]\n          : [];\n      listItems.every((listItem) => {\n        if (listItem.tabIndex >= 0) {\n          listItem.focus();\n          return false;\n        }\n        return true;\n      });\n    };\n\n    const buildHeaderLabel = () => {\n      const hasSelection = getSelected(internalValues).length > 0;\n      return labels?.select || !multiSelect ? (\n        <HvTypography\n          component=\"div\"\n          variant=\"body\"\n          className={cx(classes.placeholder, {\n            [classes.selectionDisabled]: disabled,\n            [classes.placeholderClosed]: !(isOpen || hasSelection),\n          })}\n        >\n          {selectionLabel.selected}\n        </HvTypography>\n      ) : (\n        <HvTypography\n          component=\"div\"\n          className={cx(classes.placeholder, {\n            [classes.selectionDisabled]: disabled,\n          })}\n          variant=\"body\"\n        >\n          <b>{selectionLabel.selected}</b>\n          {` ${labels?.multiSelectionConjunction} ${selectionLabel.total}`}\n        </HvTypography>\n      );\n    };\n\n    const hasLabel = label != null;\n    const hasDescription = description != null;\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled OR\n    //   - status is uncontrolled and required is true\n    const canShowError =\n      ariaErrorMessage == null &&\n      ((status !== undefined && statusMessage !== undefined) ||\n        (status === undefined && required));\n\n    const isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        readOnly={readOnly}\n        required={required}\n        className={cx(\n          classes.root,\n          {\n            [classes.disabled]: disabled,\n          },\n          className\n        )}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={dropdownForkedRef}\n          id={setId(id, \"dropdown\")}\n          classes={{\n            root: cx(classes.dropdown, {\n              [classes.readOnly]: readOnly,\n            }),\n            arrow: classes.arrow,\n            header: cx(classes.dropdownHeader, {\n              [classes.dropdownHeaderInvalid]: isStateInvalid,\n            }),\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          expanded={isOpen}\n          disabled={disabled}\n          readOnly={readOnly}\n          required={required}\n          disablePortal={disablePortal}\n          placement={placement}\n          popperProps={popperProps}\n          placeholder={buildHeaderLabel()}\n          onToggle={handleToggle}\n          onClickOutside={handleClickOutside}\n          onContainerCreation={setFocusToContent}\n          role=\"combobox\"\n          variableWidth={variableWidth}\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          onFocus={onFocus}\n          onBlur={onBlur}\n          dropdownHeaderRef={headerForkedRef}\n          {...otherBaseDropdownProps}\n        >\n          <HvDropdownList\n            id={setId(elementId, \"values\")}\n            classes={{\n              rootList: classes.rootList,\n              dropdownListContainer: classes.dropdownListContainer,\n            }}\n            values={internalValues}\n            multiSelect={multiSelect}\n            showSearch={showSearch}\n            onChange={handleSelection}\n            onCancel={handleCancel}\n            labels={labels}\n            notifyChangesOnFirstRender={notifyChangesOnFirstRender}\n            hasTooltips={hasTooltips}\n            singleSelectionToggle={singleSelectionToggle}\n            aria-label={ariaLabel}\n            aria-labelledby={hasLabel ? setId(elementId, \"label\") : undefined}\n            height={height}\n            maxHeight={maxHeight}\n            virtualized={virtualized}\n            {...listProps}\n          />\n        </HvBaseDropdown>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/FileUploader/DropZone/DropZone.js

@@ -42,7 +42,7 @@ const HvDropZone = (props) => {
     disabled = false,
     onFilesAdded
   } = useDefaultProps("HvDropZone", props);
-  const id = useUniqueId(idProp, "dropzone");
+  const id = useUniqueId(idProp);
   const { classes, cx } = useClasses(classesProp);
   const [dragState, setDragState] = useState(false);
   const inputRef = useRef(null);

package/dist/esm/FileUploader/DropZone/DropZone.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropZone.js","sources":["../../../../src/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"../../utils/setId\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { uniqueId } from \"../../utils/helpers\";\nimport { HvTypography } from \"../../Typography\";\nimport { HvInfoMessage, HvLabel } from \"../../Forms\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { convertUnits } from \"../utils\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\n\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropZoneLabels {\n  /**\n   * Extensions of the accepted file types\n   */\n  acceptedFiles?: string;\n  /**\n   * Dropzone area label.\n   */\n  dropzone?: string;\n  /**\n   * Size file warning label.\n   */\n  sizeWarning?: string;\n  /**\n   * Size file warning label.\n   */\n  drag?: string;\n  /**\n   * Size file warning label.\n   */\n  selectFiles?: string;\n  /**\n   * Theming sheet used to style components\n   * */\n  dropFiles?: string;\n  /**\n   * Message to display when file size is greater than allowed\n   * */\n  fileSizeError?: string;\n  /**\n   * Message to display when file type is greater than allowed\n   * */\n  fileTypeError?: string;\n}\n\nexport interface HvDropZoneProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Labels to present in FileUploader.\n   */\n  labels?: HvDropZoneLabels;\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Files extensions accepted for upload.\n   */\n  accept?: React.InputHTMLAttributes<HTMLInputElement>[\"accept\"];\n  /**\n   * Max upload size\n   * */\n  maxFileSize: number;\n  /**\n   * Function responsible for processing files added to the drop zone.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvDropZoneClasses;\n}\n\n// TODO: remove/review in `v6`: delegate to HTML `accept` and/or add custom validation\nfunction validateAccept(file?: File, acceptAttr?: string) {\n  if (!file || !acceptAttr) return true;\n\n  const acceptEntries = acceptAttr.split(\",\");\n  const fileName = file.name || \"\";\n  const mimeType = (file.type || \"\").toLowerCase();\n  const baseMimeType = mimeType.replace(/\\/.*$/, \"\");\n\n  return acceptEntries.some((type) => {\n    const validType = type.trim().toLowerCase();\n    if (validType.charAt(0) === \".\") {\n      return fileName.toLowerCase().endsWith(validType);\n    }\n    // This is something like a image/* mime type\n    if (validType.endsWith(\"/*\")) {\n      return baseMimeType === validType.replace(/\\/.*$/, \"\");\n    }\n    return mimeType === validType;\n  });\n}\n\nexport const HvDropZone = (props: HvDropZoneProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    labels,\n    accept,\n    maxFileSize,\n    inputProps,\n    hideLabels,\n    multiple = true,\n    disabled = false,\n    onFilesAdded,\n  } = useDefaultProps(\"HvDropZone\", props);\n  const id = useUniqueId(idProp, \"dropzone\");\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [dragState, setDragState] = useState(false);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const handleDragLeave = () => {\n    setDragState(false);\n  };\n\n  const handleDragEnter: React.DragEventHandler = (event) => {\n    if (disabled) return;\n    event.stopPropagation();\n    event.preventDefault();\n    setDragState(true);\n  };\n\n  const onChangeHandler = (filesList: FileList) => {\n    const filesToProcess = Object.values(filesList);\n\n    const newFiles = filesToProcess.map((file) => {\n      const newFile: HvFileData = new File([file], file.name, {\n        type: file.type,\n        lastModified: file.lastModified,\n      });\n      newFile.id = uniqueId(\"uploaded-file-data-\");\n\n      const isSizeAllowed = file.size <= maxFileSize;\n      const isFileAccepted =\n        !accept ||\n        accept.includes(file.type?.split(\"/\")[1]) || // TODO: remove in v6\n        validateAccept(file, accept);\n\n      if (!isFileAccepted) {\n        newFile.errorMessage = labels?.fileTypeError;\n        newFile.status = \"fail\";\n      } else if (!isSizeAllowed) {\n        newFile.errorMessage = labels?.fileSizeError;\n        newFile.status = \"fail\";\n      }\n\n      return newFile;\n    });\n\n    onFilesAdded?.(newFiles);\n  };\n\n  return (\n    <>\n      {!hideLabels && (\n        <div id={id} className={classes.dropZoneLabelsGroup}>\n          <HvLabel\n            id={setId(id, \"input-file-label\")}\n            htmlFor={setId(id, \"input-file\")}\n            label={labels?.dropzone}\n            className={classes.dropZoneLabel}\n          />\n          <HvInfoMessage id={setId(id, \"description\")}>\n            {Number.isInteger(maxFileSize) &&\n              `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n            {labels?.acceptedFiles\n              ? labels.acceptedFiles\n              : accept && `\\u00A0(${accept?.replaceAll(\",\", \", \")})`}\n          </HvInfoMessage>\n        </div>\n      )}\n      <div\n        id={setId(id, \"input-file-container\")}\n        className={cx(classes.dropZoneContainer, {\n          [classes.dragAction]: dragState,\n          [classes.dropZoneContainerDisabled]: disabled,\n        })}\n      >\n        <input\n          id={setId(id, \"input-file\")}\n          className={classes.inputArea}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n          onClick={() => {\n            if (inputRef.current) {\n              inputRef.current.value = \"\";\n            }\n          }}\n          onChange={() => {\n            if (!disabled && inputRef.current?.files) {\n              onChangeHandler(inputRef.current.files);\n            }\n          }}\n          onDragEnter={handleDragEnter}\n          onDragOver={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDropCapture={handleDragLeave}\n          onDrop={(event) => {\n            if (disabled) return;\n\n            const { files } = event.dataTransfer;\n            if (multiple === true || files.length === 1) {\n              event.stopPropagation();\n              event.preventDefault();\n              onChangeHandler(files);\n            }\n          }}\n          ref={inputRef}\n          accept={accept}\n          {...inputProps}\n        />\n        <div className={classes?.dropArea}>\n          {dragState ? (\n            <div className={classes.dropZoneAreaLabels}>\n              <HvTypography className={classes.dragText}>\n                {labels?.dropFiles}\n              </HvTypography>\n            </div>\n          ) : (\n            <>\n              <Doc\n                iconSize=\"M\"\n                className={classes.dropZoneAreaIcon}\n                color={disabled ? \"secondary_60\" : \"secondary\"}\n              />\n              <div className={classes.dropZoneAreaLabels}>\n                <HvTypography className={classes.dragText}>\n                  {labels?.drag}\n                  <span\n                    className={classes.selectFilesText}\n                  >{`\\xa0${labels?.selectFiles}`}</span>\n                </HvTypography>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropZone.js","sources":["../../../../src/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"../../utils/setId\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { uniqueId } from \"../../utils/helpers\";\nimport { HvTypography } from \"../../Typography\";\nimport { HvInfoMessage, HvLabel } from \"../../Forms\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { convertUnits } from \"../utils\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\n\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropZoneLabels {\n  /**\n   * Extensions of the accepted file types\n   */\n  acceptedFiles?: string;\n  /**\n   * Dropzone area label.\n   */\n  dropzone?: string;\n  /**\n   * Size file warning label.\n   */\n  sizeWarning?: string;\n  /**\n   * Size file warning label.\n   */\n  drag?: string;\n  /**\n   * Size file warning label.\n   */\n  selectFiles?: string;\n  /**\n   * Theming sheet used to style components\n   * */\n  dropFiles?: string;\n  /**\n   * Message to display when file size is greater than allowed\n   * */\n  fileSizeError?: string;\n  /**\n   * Message to display when file type is greater than allowed\n   * */\n  fileTypeError?: string;\n}\n\nexport interface HvDropZoneProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Labels to present in FileUploader.\n   */\n  labels?: HvDropZoneLabels;\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Files extensions accepted for upload.\n   */\n  accept?: React.InputHTMLAttributes<HTMLInputElement>[\"accept\"];\n  /**\n   * Max upload size\n   * */\n  maxFileSize: number;\n  /**\n   * Function responsible for processing files added to the drop zone.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvDropZoneClasses;\n}\n\n// TODO: remove/review in `v6`: delegate to HTML `accept` and/or add custom validation\nfunction validateAccept(file?: File, acceptAttr?: string) {\n  if (!file || !acceptAttr) return true;\n\n  const acceptEntries = acceptAttr.split(\",\");\n  const fileName = file.name || \"\";\n  const mimeType = (file.type || \"\").toLowerCase();\n  const baseMimeType = mimeType.replace(/\\/.*$/, \"\");\n\n  return acceptEntries.some((type) => {\n    const validType = type.trim().toLowerCase();\n    if (validType.charAt(0) === \".\") {\n      return fileName.toLowerCase().endsWith(validType);\n    }\n    // This is something like a image/* mime type\n    if (validType.endsWith(\"/*\")) {\n      return baseMimeType === validType.replace(/\\/.*$/, \"\");\n    }\n    return mimeType === validType;\n  });\n}\n\nexport const HvDropZone = (props: HvDropZoneProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    labels,\n    accept,\n    maxFileSize,\n    inputProps,\n    hideLabels,\n    multiple = true,\n    disabled = false,\n    onFilesAdded,\n  } = useDefaultProps(\"HvDropZone\", props);\n  const id = useUniqueId(idProp);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [dragState, setDragState] = useState(false);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const handleDragLeave = () => {\n    setDragState(false);\n  };\n\n  const handleDragEnter: React.DragEventHandler = (event) => {\n    if (disabled) return;\n    event.stopPropagation();\n    event.preventDefault();\n    setDragState(true);\n  };\n\n  const onChangeHandler = (filesList: FileList) => {\n    const filesToProcess = Object.values(filesList);\n\n    const newFiles = filesToProcess.map((file) => {\n      const newFile: HvFileData = new File([file], file.name, {\n        type: file.type,\n        lastModified: file.lastModified,\n      });\n      newFile.id = uniqueId(\"uploaded-file-data-\");\n\n      const isSizeAllowed = file.size <= maxFileSize;\n      const isFileAccepted =\n        !accept ||\n        accept.includes(file.type?.split(\"/\")[1]) || // TODO: remove in v6\n        validateAccept(file, accept);\n\n      if (!isFileAccepted) {\n        newFile.errorMessage = labels?.fileTypeError;\n        newFile.status = \"fail\";\n      } else if (!isSizeAllowed) {\n        newFile.errorMessage = labels?.fileSizeError;\n        newFile.status = \"fail\";\n      }\n\n      return newFile;\n    });\n\n    onFilesAdded?.(newFiles);\n  };\n\n  return (\n    <>\n      {!hideLabels && (\n        <div id={id} className={classes.dropZoneLabelsGroup}>\n          <HvLabel\n            id={setId(id, \"input-file-label\")}\n            htmlFor={setId(id, \"input-file\")}\n            label={labels?.dropzone}\n            className={classes.dropZoneLabel}\n          />\n          <HvInfoMessage id={setId(id, \"description\")}>\n            {Number.isInteger(maxFileSize) &&\n              `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n            {labels?.acceptedFiles\n              ? labels.acceptedFiles\n              : accept && `\\u00A0(${accept?.replaceAll(\",\", \", \")})`}\n          </HvInfoMessage>\n        </div>\n      )}\n      <div\n        id={setId(id, \"input-file-container\")}\n        className={cx(classes.dropZoneContainer, {\n          [classes.dragAction]: dragState,\n          [classes.dropZoneContainerDisabled]: disabled,\n        })}\n      >\n        <input\n          id={setId(id, \"input-file\")}\n          className={classes.inputArea}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n          onClick={() => {\n            if (inputRef.current) {\n              inputRef.current.value = \"\";\n            }\n          }}\n          onChange={() => {\n            if (!disabled && inputRef.current?.files) {\n              onChangeHandler(inputRef.current.files);\n            }\n          }}\n          onDragEnter={handleDragEnter}\n          onDragOver={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDropCapture={handleDragLeave}\n          onDrop={(event) => {\n            if (disabled) return;\n\n            const { files } = event.dataTransfer;\n            if (multiple === true || files.length === 1) {\n              event.stopPropagation();\n              event.preventDefault();\n              onChangeHandler(files);\n            }\n          }}\n          ref={inputRef}\n          accept={accept}\n          {...inputProps}\n        />\n        <div className={classes?.dropArea}>\n          {dragState ? (\n            <div className={classes.dropZoneAreaLabels}>\n              <HvTypography className={classes.dragText}>\n                {labels?.dropFiles}\n              </HvTypography>\n            </div>\n          ) : (\n            <>\n              <Doc\n                iconSize=\"M\"\n                className={classes.dropZoneAreaIcon}\n                color={disabled ? \"secondary_60\" : \"secondary\"}\n              />\n              <div className={classes.dropZoneAreaLabels}>\n                <HvTypography className={classes.dragText}>\n                  {labels?.drag}\n                  <span\n                    className={classes.selectFilesText}\n                  >{`\\xa0${labels?.selectFiles}`}</span>\n                </HvTypography>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/FileUploader/FileList/FileList.js

@@ -14,7 +14,7 @@ const HvFileList = (props) => {
     onFileRemoved
   } = useDefaultProps("HvFileList", props);
   const { classes } = useClasses(classesProp);
-  const elementId = useUniqueId(id, "hvfilelist");
+  const elementId = useUniqueId(id);
   const hasFiles = list.length > 0;
   if (!hasFiles)
     return null;

package/dist/esm/FileUploader/FileList/FileList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileList.js","sources":["../../../../src/FileUploader/FileList/FileList.tsx"],"sourcesContent":["import { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { setId } from \"../../utils/setId\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { HvFile, HvFileData, HvFileRemovedEvent } from \"../File\";\nimport { staticClasses, useClasses } from \"./FileList.styles\";\n\nexport { staticClasses as fileListClasses };\n\nexport type HvFileListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The files to upload.\n   */\n  list?: HvFileData[];\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in FileList\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileListClasses;\n}\n\nexport const HvFileList = (props: HvFileListProps) => {\n  const {\n    id,\n    classes: classesProp,\n    list = [],\n    removeFileButtonLabel,\n    onFileRemoved,\n  } = useDefaultProps(\"HvFileList\", props);\n  const { classes } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvfilelist\");\n\n  const hasFiles = list.length > 0;\n  if (!hasFiles) return null;\n\n  return (\n    <ul id={setId(id, \"list\")} className={classes.list}>\n      {list.map((data) => (\n        <HvFile\n          key={data.id}\n          classes={{ root: classes?.listItem }}\n          id={setId(elementId, \"values\")}\n          data={data}\n          onFileRemoved={onFileRemoved}\n          removeFileButtonLabel={removeFileButtonLabel}\n        />\n      ))}\n    </ul>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAoCa,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,OAAO,CAAC;AAAA,IACR;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,YAAY,YAAY,IAAI,YAAY;AAExC,QAAA,WAAW,KAAK,SAAS;AAC/B,MAAI,CAAC;AAAiB,WAAA;AAEtB,SACG,oBAAA,MAAA,EAAG,IAAI,MAAM,IAAI,MAAM,GAAG,WAAW,QAAQ,MAC3C,UAAK,KAAA,IAAI,CAAC,SACT;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,SAAS,EAAE,MAAM,SAAS,SAAS;AAAA,MACnC,IAAI,MAAM,WAAW,QAAQ;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IALK,KAAK;AAAA,EAOb,CAAA,EACH,CAAA;AAEJ;"}
+{"version":3,"file":"FileList.js","sources":["../../../../src/FileUploader/FileList/FileList.tsx"],"sourcesContent":["import { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { setId } from \"../../utils/setId\";\n\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { HvFile, HvFileData, HvFileRemovedEvent } from \"../File\";\nimport { staticClasses, useClasses } from \"./FileList.styles\";\n\nexport { staticClasses as fileListClasses };\n\nexport type HvFileListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFileListProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * The files to upload.\n   */\n  list?: HvFileData[];\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Value of aria-label to apply to remove file button in FileList\n   * */\n  removeFileButtonLabel?: string;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvFileListClasses;\n}\n\nexport const HvFileList = (props: HvFileListProps) => {\n  const {\n    id,\n    classes: classesProp,\n    list = [],\n    removeFileButtonLabel,\n    onFileRemoved,\n  } = useDefaultProps(\"HvFileList\", props);\n  const { classes } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const hasFiles = list.length > 0;\n  if (!hasFiles) return null;\n\n  return (\n    <ul id={setId(id, \"list\")} className={classes.list}>\n      {list.map((data) => (\n        <HvFile\n          key={data.id}\n          classes={{ root: classes?.listItem }}\n          id={setId(elementId, \"values\")}\n          data={data}\n          onFileRemoved={onFileRemoved}\n          removeFileButtonLabel={removeFileButtonLabel}\n        />\n      ))}\n    </ul>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAoCa,MAAA,aAAa,CAAC,UAA2B;AAC9C,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT,OAAO,CAAC;AAAA,IACR;AAAA,IACA;AAAA,EAAA,IACE,gBAAgB,cAAc,KAAK;AACvC,QAAM,EAAE,QAAA,IAAY,WAAW,WAAW;AAEpC,QAAA,YAAY,YAAY,EAAE;AAE1B,QAAA,WAAW,KAAK,SAAS;AAC/B,MAAI,CAAC;AAAiB,WAAA;AAEtB,SACG,oBAAA,MAAA,EAAG,IAAI,MAAM,IAAI,MAAM,GAAG,WAAW,QAAQ,MAC3C,UAAK,KAAA,IAAI,CAAC,SACT;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,SAAS,EAAE,MAAM,SAAS,SAAS;AAAA,MACnC,IAAI,MAAM,WAAW,QAAQ;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IALK,KAAK;AAAA,EAOb,CAAA,EACH,CAAA;AAEJ;"}

package/dist/esm/FilterGroup/FilterGroup.js

@@ -61,7 +61,7 @@ const HvFilterGroup = forwardRef(
     } = useDefaultProps("HvFilterGroup", props);
     const { classes, cx } = useClasses(classesProp);
     const [validationMessage] = useControlled(statusMessage, "Required");
-    const elementId = useUniqueId(id, "hvfiltergroup");
+    const elementId = useUniqueId(id);
     const labels = useLabels(DEFAULT_LABELS, labelsProp);
     const hasLabel = label != null;
     const hasDescription = description != null;

package/dist/esm/FilterGroup/FilterGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterGroup.js","sources":["../../../src/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { staticClasses, useClasses } from \"./FilterGroup.styles\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport {\n  HvFilterGroupFilters,\n  HvFilterGroupHorizontalPlacement,\n  HvFilterGroupValue,\n} from \"./types\";\n\nexport { staticClasses as filterGroupClasses };\n\nexport type HvFilterGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**  Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS = {\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Clear button label. */\n  clearLabel: \"Clear Filters\",\n  /** Placeholder label. */\n  placeholder: \"Filters\",\n  /** SearchBox placeholder label. */\n  searchBoxPlaceholder: \"Search\",\n  /** Select All placeholder label. */\n  selectAll: \"All\",\n  /** Multi selection conjunction placeholder label. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvFilterGroupLabels = Partial<typeof DEFAULT_LABELS>;\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = forwardRef<HTMLDivElement, HvFilterGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      id,\n      name,\n      required = false,\n      disabled = false,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      labels: labelsProp,\n      defaultValue,\n      value,\n      filters,\n      horizontalPlacement = \"right\",\n      disablePortal = true,\n      escapeWithReference = true,\n      height = 350,\n      filterContentProps,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvFilterGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id, \"hvfiltergroup\");\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const hasLabel = label != null;\n\n    const hasDescription = description != null;\n\n    // Error message area will only be needed if the status is being controlled\n    // or if required is true\n    const canShowError = status !== undefined || required;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={value}\n        status={status}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvFilterGroupProvider\n          defaultValue={defaultValue}\n          value={value}\n          filters={filters}\n        >\n          <HvFilterGroupContent\n            ref={ref}\n            id={elementId}\n            disabled={disabled}\n            disablePortal={disablePortal}\n            variableWidth\n            placement={horizontalPlacement}\n            escapeWithReference={escapeWithReference}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            status={status}\n            onChange={onChange}\n            onCancel={onCancel}\n            onClear={onClear}\n            labels={labels}\n            height={height}\n            {...filterContentProps}\n          />\n          {canShowError && (\n            <HvWarningText\n              id={setId(elementId, \"error\")}\n              disableBorder\n              className={classes.error}\n            >\n              {validationMessage}\n            </HvWarningText>\n          )}\n        </HvFilterGroupProvider>\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAgGA,MAAM,iBAAiB;AAAA;AAAA,EAErB,YAAY;AAAA;AAAA,EAEZ,aAAa;AAAA;AAAA,EAEb,YAAY;AAAA;AAAA,EAEZ,aAAa;AAAA;AAAA,EAEb,sBAAsB;AAAA;AAAA,EAEtB,WAAW;AAAA;AAAA,EAEX,2BAA2B;AAC7B;AASO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB;AAAA,MACA,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,MACtB,SAAS;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAC9C,UAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AAE7D,UAAA,YAAY,YAAY,IAAI,eAAe;AAE3C,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,UAAM,WAAW,SAAS;AAE1B,UAAM,iBAAiB,eAAe;AAIhC,UAAA,eAAe,WAAW,UAAa;AAG3C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,QAEF,UAAA;AAAA,WAAA,YAAY,mBACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA;AAAA,YACC,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,WAAW,OAAO;AAAA,gBAC5B,SAAS,MAAM,WAAW,OAAO;AAAA,gBACjC;AAAA,gBACA,WAAW,QAAQ;AAAA,cAAA;AAAA,YACrB;AAAA,YAGD,kBACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,WAAW,aAAa;AAAA,gBAClC,WAAW,QAAQ;AAAA,gBAElB,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA,GAEJ;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC;AAAA,oBACA,IAAI;AAAA,oBACJ;AAAA,oBACA;AAAA,oBACA,eAAa;AAAA,oBACb,WAAW;AAAA,oBACX;AAAA,oBACA,cAAY;AAAA,oBACZ,mBAAiB;AAAA,oBACjB;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACC,GAAG;AAAA,kBAAA;AAAA,gBACN;AAAA,gBACC,gBACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,MAAM,WAAW,OAAO;AAAA,oBAC5B,eAAa;AAAA,oBACb,WAAW,QAAQ;AAAA,oBAElB,UAAA;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}
+{"version":3,"file":"FilterGroup.js","sources":["../../../src/FilterGroup/FilterGroup.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport {\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"../Forms\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport {\n  HvFilterGroupContent,\n  HvFilterGroupContentProps,\n} from \"./FilterContent\";\nimport { staticClasses, useClasses } from \"./FilterGroup.styles\";\nimport { HvFilterGroupProvider } from \"./FilterGroupContext\";\nimport {\n  HvFilterGroupFilters,\n  HvFilterGroupHorizontalPlacement,\n  HvFilterGroupValue,\n} from \"./types\";\n\nexport { staticClasses as filterGroupClasses };\n\nexport type HvFilterGroupClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvFilterGroupProps\n  extends Omit<\n    HvFormElementProps,\n    \"classes\" | \"onChange\" | \"defaultValue\" | \"statusMessage\"\n  > {\n  /** The initial value of the input when in single calendar mode. */\n  filters: HvFilterGroupFilters;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**  Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**  The error message to show when `status` is \"invalid\". Defaults to \"Required\". */\n  statusMessage?: React.ReactNode;\n  /** The callback fired when the cancel button is clicked. */\n  onCancel?: (event: React.MouseEvent<HTMLButtonElement> | Event) => void;\n  /** The callback fired when the clear filters button is clicked. */\n  onClear?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n  /** The callback fired when the value changes. */\n  onChange?: (\n    event: React.MouseEvent<HTMLButtonElement>,\n    value?: HvFilterGroupValue\n  ) => void;\n  /** An Object containing the various text associated with the input. */\n  labels?: HvFilterGroupLabels;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** The default value of the filter group. If defined the clear action will reset to it. */\n  defaultValue?: HvFilterGroupValue;\n  /** The value of the filter group. */\n  value?: HvFilterGroupValue;\n  /** The placement where the filter group should be placed according to the input. Options are `left` or `right`. */\n  horizontalPlacement?: HvFilterGroupHorizontalPlacement;\n  /** Disable the portal behavior. The children stay within it's parent DOM hierarchy. */\n  disablePortal?: boolean;\n  /** Sets if the filter container should be out of the screen or stay visible. */\n  escapeWithReference?: boolean;\n  /** The height of the filter panel, between 295 and 425. Defaults to 350 */\n  height?: number | string;\n  /** The filter content props */\n  filterContentProps?: Partial<HvFilterGroupContentProps>;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFilterGroupClasses;\n}\n\nconst DEFAULT_LABELS = {\n  /** Apply button label. */\n  applyLabel: \"Apply\",\n  /** Cancel button label. */\n  cancelLabel: \"Cancel\",\n  /** Clear button label. */\n  clearLabel: \"Clear Filters\",\n  /** Placeholder label. */\n  placeholder: \"Filters\",\n  /** SearchBox placeholder label. */\n  searchBoxPlaceholder: \"Search\",\n  /** Select All placeholder label. */\n  selectAll: \"All\",\n  /** Multi selection conjunction placeholder label. */\n  multiSelectionConjunction: \"/\",\n};\n\nexport type HvFilterGroupLabels = Partial<typeof DEFAULT_LABELS>;\n\n/**\n * This component implements one potential use-case of the Filter Group pattern Design System Specifies.\n * Due to the enormous variety of capabilities required for this, we strongly recommend checking the code of the component and extend it yourself,\n * while we do not provide a better approach for building this component with smaller and more composable parts.\n */\nexport const HvFilterGroup = forwardRef<HTMLDivElement, HvFilterGroupProps>(\n  (props, ref) => {\n    const {\n      className,\n      id,\n      name,\n      required = false,\n      disabled = false,\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      labels: labelsProp,\n      defaultValue,\n      value,\n      filters,\n      horizontalPlacement = \"right\",\n      disablePortal = true,\n      escapeWithReference = true,\n      height = 350,\n      filterContentProps,\n      classes: classesProp,\n      ...others\n    } = useDefaultProps(\"HvFilterGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const elementId = useUniqueId(id);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const hasLabel = label != null;\n\n    const hasDescription = description != null;\n\n    // Error message area will only be needed if the status is being controlled\n    // or if required is true\n    const canShowError = status !== undefined || required;\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={value}\n        status={status}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        {...others}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                htmlFor={setId(elementId, \"input\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvFilterGroupProvider\n          defaultValue={defaultValue}\n          value={value}\n          filters={filters}\n        >\n          <HvFilterGroupContent\n            ref={ref}\n            id={elementId}\n            disabled={disabled}\n            disablePortal={disablePortal}\n            variableWidth\n            placement={horizontalPlacement}\n            escapeWithReference={escapeWithReference}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledBy}\n            status={status}\n            onChange={onChange}\n            onCancel={onCancel}\n            onClear={onClear}\n            labels={labels}\n            height={height}\n            {...filterContentProps}\n          />\n          {canShowError && (\n            <HvWarningText\n              id={setId(elementId, \"error\")}\n              disableBorder\n              className={classes.error}\n            >\n              {validationMessage}\n            </HvWarningText>\n          )}\n        </HvFilterGroupProvider>\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAgGA,MAAM,iBAAiB;AAAA;AAAA,EAErB,YAAY;AAAA;AAAA,EAEZ,aAAa;AAAA;AAAA,EAEb,YAAY;AAAA;AAAA,EAEZ,aAAa;AAAA;AAAA,EAEb,sBAAsB;AAAA;AAAA,EAEtB,WAAW;AAAA;AAAA,EAEX,2BAA2B;AAC7B;AASO,MAAM,gBAAgB;AAAA,EAC3B,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB;AAAA,MACA,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,sBAAsB;AAAA,MACtB,gBAAgB;AAAA,MAChB,sBAAsB;AAAA,MACtB,SAAS;AAAA,MACT;AAAA,MACA,SAAS;AAAA,MACT,GAAG;AAAA,IAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAC9C,UAAM,CAAC,iBAAiB,IAAI,cAAc,eAAe,UAAU;AAE7D,UAAA,YAAY,YAAY,EAAE;AAE1B,UAAA,SAAS,UAAU,gBAAgB,UAAU;AAEnD,UAAM,WAAW,SAAS;AAE1B,UAAM,iBAAiB,eAAe;AAIhC,UAAA,eAAe,WAAW,UAAa;AAG3C,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QACpC,GAAG;AAAA,QAEF,UAAA;AAAA,WAAA,YAAY,mBACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA;AAAA,YACC,YAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,WAAW,OAAO;AAAA,gBAC5B,SAAS,MAAM,WAAW,OAAO;AAAA,gBACjC;AAAA,gBACA,WAAW,QAAQ;AAAA,cAAA;AAAA,YACrB;AAAA,YAGD,kBACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAI,MAAM,WAAW,aAAa;AAAA,gBAClC,WAAW,QAAQ;AAAA,gBAElB,UAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA,GAEJ;AAAA,UAEF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cAEA,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC;AAAA,oBACA,IAAI;AAAA,oBACJ;AAAA,oBACA;AAAA,oBACA,eAAa;AAAA,oBACb,WAAW;AAAA,oBACX;AAAA,oBACA,cAAY;AAAA,oBACZ,mBAAiB;AAAA,oBACjB;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACA;AAAA,oBACC,GAAG;AAAA,kBAAA;AAAA,gBACN;AAAA,gBACC,gBACC;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,MAAM,WAAW,OAAO;AAAA,oBAC5B,eAAa;AAAA,oBACb,WAAW,QAAQ;AAAA,oBAElB,UAAA;AAAA,kBAAA;AAAA,gBACH;AAAA,cAAA;AAAA,YAAA;AAAA,UAEJ;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;"}

package/dist/esm/Forms/FormElement/FormElement.js

@@ -23,7 +23,7 @@ const HvFormElement = (props) => {
     ...others
   } = useDefaultProps("HvFormElement", props);
   const { classes, cx } = useClasses(classesProp);
-  const elementId = useUniqueId(id, "hvformelement");
+  const elementId = useUniqueId(id);
   const contextValue = useMemo(
     () => ({
       elementId,

package/dist/esm/Forms/FormElement/FormElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElement.js","sources":["../../../../src/Forms/FormElement/FormElement.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { findDescriptors } from \"./utils/FormUtils\";\nimport { HvFormElementContextProvider } from \"./context/FormElementContext\";\nimport { HvFormElementValueContextProvider } from \"./context/FormElementValueContext\";\nimport { HvFormElementDescriptorsContextProvider } from \"./context/FormElementDescriptorsContext\";\nimport { staticClasses, useClasses } from \"./FormElement.styles\";\n\nexport { staticClasses as formElementClasses };\n\nexport type HvFormElementClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFormStatus = \"standBy\" | \"valid\" | \"invalid\" | \"empty\";\n\nexport interface HvFormElementProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Name of the form element.\n   *\n   * Part of a name/value pair, should be the name property of the underling native input.\n   */\n  name?: string;\n  /**\n   * Current value of the form element.\n   *\n   * Part of a name/value pair, should be the value property of the underling native input.\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Whether the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.FormEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFormElementClasses;\n}\n\nexport const HvFormElement = (props: HvFormElementProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    id,\n    name,\n    value,\n    disabled = false,\n    required = false,\n    readOnly = false,\n    status = \"standBy\",\n    ...others\n  } = useDefaultProps(\"HvFormElement\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id, \"hvformelement\");\n\n  const contextValue = useMemo(\n    () => ({\n      elementId,\n      elementName: name,\n      elementStatus: status,\n      elementDisabled: disabled,\n      elementRequired: required,\n      elementReadOnly: readOnly,\n    }),\n    [disabled, elementId, name, readOnly, required, status]\n  );\n\n  const descriptors = useMemo(() => findDescriptors(children), [children]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <HvFormElementContextProvider value={contextValue}>\n        <HvFormElementValueContextProvider value={value}>\n          <HvFormElementDescriptorsContextProvider value={descriptors}>\n            {children}\n          </HvFormElementDescriptorsContextProvider>\n        </HvFormElementValueContextProvider>\n      </HvFormElementContextProvider>\n    </div>\n  );\n};\n\nHvFormElement.formElementType = \"formelement\";\n"],"names":[],"mappings":";;;;;;;;;;AAiEa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,YAAY,YAAY,IAAI,eAAe;AAEjD,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,CAAC,UAAU,WAAW,MAAM,UAAU,UAAU,MAAM;AAAA,EAAA;AAGlD,QAAA,cAAc,QAAQ,MAAM,gBAAgB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAGrE,SAAA,oBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACvD,UAAA,oBAAC,gCAA6B,OAAO,cACnC,UAAC,oBAAA,mCAAA,EAAkC,OACjC,UAAA,oBAAC,yCAAwC,EAAA,OAAO,aAC7C,SAAA,CACH,EACF,CAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEA,cAAc,kBAAkB;"}
+{"version":3,"file":"FormElement.js","sources":["../../../../src/Forms/FormElement/FormElement.tsx"],"sourcesContent":["import { useMemo } from \"react\";\n\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../../types/generic\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\nimport { ExtractNames } from \"../../utils/classes\";\n\nimport { findDescriptors } from \"./utils/FormUtils\";\nimport { HvFormElementContextProvider } from \"./context/FormElementContext\";\nimport { HvFormElementValueContextProvider } from \"./context/FormElementValueContext\";\nimport { HvFormElementDescriptorsContextProvider } from \"./context/FormElementDescriptorsContext\";\nimport { staticClasses, useClasses } from \"./FormElement.styles\";\n\nexport { staticClasses as formElementClasses };\n\nexport type HvFormElementClasses = ExtractNames<typeof useClasses>;\n\nexport type HvFormStatus = \"standBy\" | \"valid\" | \"invalid\" | \"empty\";\n\nexport interface HvFormElementProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * Name of the form element.\n   *\n   * Part of a name/value pair, should be the name property of the underling native input.\n   */\n  name?: string;\n  /**\n   * Current value of the form element.\n   *\n   * Part of a name/value pair, should be the value property of the underling native input.\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Whether the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /** The callback fired when the value changes. */\n  onChange?: (event: React.FormEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvFormElementClasses;\n}\n\nexport const HvFormElement = (props: HvFormElementProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    id,\n    name,\n    value,\n    disabled = false,\n    required = false,\n    readOnly = false,\n    status = \"standBy\",\n    ...others\n  } = useDefaultProps(\"HvFormElement\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const elementId = useUniqueId(id);\n\n  const contextValue = useMemo(\n    () => ({\n      elementId,\n      elementName: name,\n      elementStatus: status,\n      elementDisabled: disabled,\n      elementRequired: required,\n      elementReadOnly: readOnly,\n    }),\n    [disabled, elementId, name, readOnly, required, status]\n  );\n\n  const descriptors = useMemo(() => findDescriptors(children), [children]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      <HvFormElementContextProvider value={contextValue}>\n        <HvFormElementValueContextProvider value={value}>\n          <HvFormElementDescriptorsContextProvider value={descriptors}>\n            {children}\n          </HvFormElementDescriptorsContextProvider>\n        </HvFormElementValueContextProvider>\n      </HvFormElementContextProvider>\n    </div>\n  );\n};\n\nHvFormElement.formElementType = \"formelement\";\n"],"names":[],"mappings":";;;;;;;;;;AAiEa,MAAA,gBAAgB,CAAC,UAA8B;AACpD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,GAAG;AAAA,EAAA,IACD,gBAAgB,iBAAiB,KAAK;AAE1C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,YAAY,YAAY,EAAE;AAEhC,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL;AAAA,MACA,aAAa;AAAA,MACb,eAAe;AAAA,MACf,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IAAA;AAAA,IAEnB,CAAC,UAAU,WAAW,MAAM,UAAU,UAAU,MAAM;AAAA,EAAA;AAGlD,QAAA,cAAc,QAAQ,MAAM,gBAAgB,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAGrE,SAAA,oBAAC,OAAI,EAAA,IAAQ,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QACvD,UAAA,oBAAC,gCAA6B,OAAO,cACnC,UAAC,oBAAA,mCAAA,EAAkC,OACjC,UAAA,oBAAC,yCAAwC,EAAA,OAAO,aAC7C,SAAA,CACH,EACF,CAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEA,cAAc,kBAAkB;"}

package/dist/esm/Input/Input.js

@@ -91,7 +91,7 @@ const HvInput = forwardRef((props, ref) => {
   } = useDefaultProps("HvInput", props);
   const { classes, cx } = useClasses(classesProp);
   const labels = useLabels(DEFAULT_LABELS, labelsProp);
-  const elementId = useUniqueId(id, "hvinput");
+  const elementId = useUniqueId(id);
   const inputRef = useRef(null);
   const forkedRef = useForkRef(ref, inputRef, inputRefProp);
   const suggestionsRef = useRef(null);

package/dist/esm/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/Input/Input.tsx"],"sourcesContent":["import React, {\n  FocusEvent,\n  HTMLInputTypeAttribute,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport {\n  CloseXS,\n  PreviewOff,\n  Preview,\n  Search,\n  Success,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { isBrowser } from \"../utils/browser\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { HvInputSuggestion, HvValidationMessages } from \"../types/forms\";\nimport { HvBaseProps } from \"../types/generic\";\nimport {\n  HvAdornment,\n  HvAdornmentProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestion,\n  HvSuggestions,\n  HvSuggestionsProps,\n  HvWarningText,\n  isValid,\n  isInvalid,\n} from \"../Forms\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n  DEFAULT_ERROR_MESSAGES,\n  computeValidationType,\n  hasBuiltInValidations,\n  validateInput,\n  computeValidationState,\n  computeValidationMessage,\n  HvInputValidity,\n} from \"../BaseInput/validations\";\nimport { HvTooltip } from \"../Tooltip\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useLabels } from \"../hooks/useLabels\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./Input.styles\";\n\nexport { staticClasses as inputClasses };\n\nexport type HvInputClasses = ExtractNames<typeof useClasses>;\n\ntype InputElement = HTMLInputElement | HTMLTextAreaElement;\n\nexport interface HvInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\"\n  > {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: string;\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n   */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /**\n   * The function that will be executed onChange, allows modification of the input,\n   * it receives the value. If a new value should be presented it must returned it.\n   */\n  onChange?: HvBaseInputProps[\"onChange\"];\n  /**\n   * Callback called when the user submits the value by pressing Enter/Return.\n   *\n   * Also called when the search button is clicked (when type is \"search\").\n   */\n  onEnter?: (\n    event: React.KeyboardEvent<InputElement> | React.MouseEvent,\n    value: string\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the validation state,\n   * it receives the value and the validation state.\n   */\n  onBlur?: (\n    event: React.FocusEvent<InputElement>,\n    value: string,\n    validationState: HvInputValidity\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the value state,\n   * it receives the value.\n   */\n  onFocus?: (event: React.FocusEvent<InputElement>, value: string) => void;\n  /**\n   * The function that will be executed onKeyDown, allows checking the value state,\n   * it receives the event and value.\n   */\n  onKeyDown?: (\n    event: React.KeyboardEvent<InputElement> | React.MouseEvent,\n    value: string\n  ) => void;\n  /** The input type. */\n  type?: HTMLInputTypeAttribute;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** Internal labels?. */\n  labels?: HvInputLabels & Record<string, any>;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /**\n   * Allows passing a ref to the underlying input\n   * @deprecated Use `ref` directly instead\n   * */\n  inputRef?: HvBaseInputProps[\"inputRef\"];\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */\n  suggestionListCallback?: (value: string) => HvInputSuggestion[] | null;\n  /**\n   * The custom validation function, it receives the value and must return\n   * either `true` for valid or `false` for invalid, default validations would only\n   * occur if this function is null or undefined\n   */\n  validation?: (value: string) => boolean;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the clear button is disabled. */\n  disableClear?: boolean;\n  /** If `true` the reveal password button is disabled. Valid only when type is \"password\". */\n  disableRevealPassword?: boolean;\n  /** If `true` the search button is disabled. Valid only when type is \"search\". */\n  disableSearchButton?: boolean;\n  /**\n   * If `true` the validation icon adornment is visible. Defaults to `false`.\n   *\n   * Currently, DS specifications define only a positive feedback icon;\n   * errors are signaled through the border style and by displaying the error message.\n   */\n  showValidationIcon?: boolean;\n  /** A custom icon to be added into the input. */\n  endAdornment?: React.ReactNode;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxCharQuantity?: number;\n  /** The minimum allowed length of the characters, if this value is null no check will be perform. */\n  minCharQuantity?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvInputClasses;\n}\n\nconst DEFAULT_LABELS = {\n  /** The label of the clear button. */\n  clearButtonLabel: \"Clear the text\",\n  /** The label of the reveal password button. */\n  revealPasswordButtonLabel: \"Reveal password\",\n  /** The tooltip of the reveal password button when the password is hidden. */\n  revealPasswordButtonClickToShowTooltip: \"Click to show password.\",\n  /** The tooltip of the reveal password button when the password is revealed. */\n  revealPasswordButtonClickToHideTooltip: \"Click to hide password.\",\n  /** The label of the search button. */\n  searchButtonLabel: \"Search\",\n};\n\nexport type HvInputLabels = Partial<typeof DEFAULT_LABELS>;\n\n/**\n * Find the focused element onBlur.\n */\nconst getFocusedElement = (event: FocusEvent) =>\n  isBrowser(\"ie\") ? document.activeElement : event.relatedTarget;\n\nfunction eventTargetIsInsideContainer(\n  container: HTMLElement | null,\n  event: FocusEvent<any>\n) {\n  return container != null && container.contains(getFocusedElement(event));\n}\n\n/** Changes a given `input`'s `value`, triggering its `onChange` */\nconst changeInputValue = (input: HTMLInputElement | null, value = \"\") => {\n  const event = new Event(\"input\", { bubbles: true });\n\n  /** Original `input.value` setter (React overrides it). */\n  const setInputValue = Object.getOwnPropertyDescriptor(\n    window.HTMLInputElement.prototype,\n    \"value\"\n  )?.set;\n\n  setInputValue?.call(input, value);\n  input?.dispatchEvent(event);\n};\n\n/**\n * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.\n */\nexport const HvInput = forwardRef<InputElement, HvInputProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value: valueProp,\n    defaultValue = \"\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onEnter,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    type = \"text\",\n    placeholder,\n    autoFocus = false,\n    labels: labelsProp,\n    validationMessages,\n    disableClear = false,\n    disableRevealPassword = false,\n    disableSearchButton = false,\n    endAdornment,\n    maxCharQuantity,\n    minCharQuantity,\n    validation,\n    showValidationIcon = false,\n    suggestionListCallback,\n    inputRef: inputRefProp,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    inputProps = {},\n    ...others\n  } = useDefaultProps(\"HvInput\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const elementId = useUniqueId(id, \"hvinput\");\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const forkedRef = useForkRef(ref, inputRef, inputRefProp);\n  const suggestionsRef = useRef<HTMLElement>(null);\n\n  const [focused, setFocused] = useState(false);\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  // Value related state\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const isEmptyValue = value == null || value === \"\";\n\n  // Validation related state\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  // validationMessages reference tends to change, as users will not memoize/useState for it;\n  // dependencies must be more explicit so we set\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      validationMessages?.error,\n      validationMessages?.requiredError,\n      validationMessages?.minCharError,\n      validationMessages?.maxCharError,\n      validationMessages?.typeMismatchError,\n    ]\n  );\n\n  const validationType = useMemo(() => computeValidationType(type), [type]);\n\n  // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n  // and returns the validity state of the input.\n  const performValidation = useCallback(() => {\n    const inputValidity = validateInput(\n      inputRef.current,\n      value,\n      required,\n      minCharQuantity,\n      maxCharQuantity,\n      validationType,\n      validation\n    );\n\n    // This will only run if status is uncontrolled\n    setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n    // This will only run if statusMessage is uncontrolled\n    setValidationMessage(\n      computeValidationMessage(inputValidity, errorMessages)\n    );\n\n    return inputValidity;\n  }, [\n    errorMessages,\n    isEmptyValue,\n    maxCharQuantity,\n    minCharQuantity,\n    required,\n    setValidationMessage,\n    setValidationState,\n    validation,\n    validationType,\n    value,\n  ]);\n\n  // The error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and any of the built-in validations are active\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined &&\n        hasBuiltInValidations(\n          required,\n          validationType,\n          minCharQuantity,\n          maxCharQuantity,\n          validation,\n          inputProps\n        )));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  // Input type related state\n  const [revealPassword, setRevealPassword] = useState(false);\n\n  const realType = useMemo(() => {\n    if (type === \"password\") {\n      return revealPassword ? \"text\" : \"password\";\n    }\n\n    if (type === \"search\") {\n      return \"search\";\n    }\n\n    return \"text\";\n  }, [revealPassword, type]);\n\n  // Suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState<\n    HvSuggestion[] | null\n  >(null);\n\n  const canShowSuggestions = suggestionListCallback != null;\n  const hasSuggestions = !!suggestionValues;\n\n  // Miscellaneous state\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  /**\n   * Looks for the node that represent the input inside the material tree and focus it.\n   */\n  const focusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  const isMounted = useIsMounted();\n\n  /**\n   * Clears the suggestion array.\n   */\n  const suggestionClearHandler = () => {\n    if (isMounted.current) {\n      setSuggestionValues(null);\n    }\n  };\n\n  /**\n   * Fills of the suggestion array.\n   */\n  const suggestionHandler = (val: string) => {\n    const suggestionsArray = suggestionListCallback?.(val);\n    if (suggestionsArray?.[0]?.label) {\n      setSuggestionValues(suggestionsArray);\n    } else {\n      suggestionClearHandler();\n    }\n  };\n\n  /**\n   * Executes the user callback adds the selection to the state and clears the suggestions.\n   */\n  const suggestionSelectedHandler: HvSuggestionsProps[\"onSuggestionSelected\"] =\n    (event, item) => {\n      const newValue = item.value || (item.label as any);\n\n      changeInputValue(inputRef.current, newValue);\n\n      focusInput();\n      suggestionClearHandler();\n\n      if (type === \"search\") {\n        // trigger the onEnter callback when the user selects an option in a search box\n        onEnter?.(event, newValue);\n      }\n    };\n\n  const onChangeHandler: HvBaseInputProps[\"onChange\"] = (event, newValue) => {\n    isDirty.current = true;\n\n    // set the input value (only when value is uncontrolled)\n    setValue(newValue);\n\n    onChange?.(event, newValue);\n\n    if (canShowSuggestions) {\n      // an edge case might be a controlled input whose onChange callback\n      // doesn't change the value (or sets another): the suggestionListCallback\n      // callback will still receive the original rejected value.\n      // a refactor is needed so the suggestionListCallback might be called only\n      // when the input is uncontrolled, providing a way to externally control\n      // the suggestion values.\n      suggestionHandler(newValue);\n    }\n  };\n\n  /**\n   * Validates the input updating the state and modifying the info text, also executes\n   * the user provided onBlur passing the current validation status and value.\n   */\n  const onInputBlurHandler: HvBaseInputProps[\"onBlur\"] = (event) => {\n    // If the blur is executed when choosing an suggestion it should be ignored.\n    if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;\n\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event, value, inputValidity);\n  };\n\n  /**\n   * Updates the state putting again the value from the state because the input value is\n   * not automatically manage, it also executes the onFocus function from the user passing the value\n   */\n  const onFocusHandler: HvBaseInputProps[\"onFocus\"] = (event) => {\n    setFocused(true);\n\n    // reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event, value);\n  };\n\n  const getSuggestions = (li: number | null) => {\n    // TODO Replace with ref\n    const listEl = document.getElementById(\n      setId(elementId, \"suggestions-list\") || \"\"\n    );\n    return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n  };\n\n  const onSuggestionKeyDown: HvSuggestionsProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKey(event, \"Tab\")) {\n      suggestionClearHandler();\n    }\n  };\n\n  /** Focus the suggestion list when the arrow down is pressed. */\n  const onKeyDownHandler: HvBaseInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"ArrowDown\") && hasSuggestions) {\n      const li = getSuggestions(0);\n      li?.focus();\n    } else if (isKey(event, \"Enter\")) {\n      onEnter?.(event, value);\n    }\n\n    onKeyDown?.(event, value);\n  };\n\n  /** Clears the suggestion list on blur. */\n  const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n    if (event.relatedTarget) {\n      setTimeout(() => {\n        const list = getSuggestions(null);\n        if (!list?.contains(document.activeElement)) suggestionClearHandler();\n      }, 10);\n    }\n  };\n\n  const hasOnEnter = onEnter != null;\n\n  // show the clear button only if the input is enabled, not read-only, disableClear is false and the input is not empty\n  // also, don't show it when the input type is \"search\" and the input is active (standBy)\n  const showClear =\n    !disabled &&\n    !readOnly &&\n    !disableClear &&\n    !isEmptyValue &&\n    (!hasOnEnter ||\n      type !== \"search\" ||\n      disableSearchButton ||\n      validationState !== validationStates.standBy);\n\n  const showSearchIcon = type === \"search\" && !disableSearchButton;\n\n  const showRevealPasswordButton =\n    type === \"password\" && !disableRevealPassword;\n\n  /**\n   * Clears the input value from the state and refocus the input.\n   */\n  const handleClear = useCallback(() => {\n    // reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    changeInputValue(inputRef.current, \"\");\n\n    // we want to focus the input when clicked and not active\n    setTimeout(focusInput);\n  }, [setValidationState]);\n\n  const clearButton = useMemo(() => {\n    if (!showClear) {\n      return null;\n    }\n\n    return (\n      <HvAdornment\n        // Don't control visibility when the search icon is enabled\n        className={cx(classes.adornmentButton, {\n          [classes.iconClear]: !showSearchIcon,\n        })}\n        onClick={handleClear}\n        aria-label={labels?.clearButtonLabel}\n        aria-controls={setId(elementId, \"input\")}\n        icon={<CloseXS />}\n      />\n    );\n  }, [\n    showClear,\n    classes.adornmentButton,\n    classes.iconClear,\n    showSearchIcon,\n    handleClear,\n    labels?.clearButtonLabel,\n    elementId,\n    cx,\n  ]);\n\n  /**\n   * Calls the onEnter callback and refocus the input.\n   */\n  const handleSearch = useCallback<NonNullable<HvAdornmentProps[\"onClick\"]>>(\n    (event) => {\n      onEnter?.(event, value);\n    },\n    [onEnter, value]\n  );\n\n  const searchButton = useMemo(() => {\n    // If the search icon is not actionable, only show it when the input is empty or active\n    const reallyShowIt =\n      showSearchIcon &&\n      (isEmptyValue ||\n        (hasOnEnter && validationState === validationStates.standBy));\n\n    if (!reallyShowIt) {\n      return null;\n    }\n\n    return (\n      <HvAdornment\n        className={classes.adornmentButton}\n        onClick={hasOnEnter ? handleSearch : undefined}\n        aria-label={labels?.searchButtonLabel}\n        icon={<Search />}\n      />\n    );\n  }, [\n    showSearchIcon,\n    isEmptyValue,\n    hasOnEnter,\n    validationState,\n    classes.adornmentButton,\n    handleSearch,\n    labels?.searchButtonLabel,\n  ]);\n\n  /**\n   * Changes input type and refocus the input.\n   */\n  const handleRevealPassword = useCallback(() => {\n    setRevealPassword(!revealPassword);\n  }, [revealPassword]);\n\n  const revealPasswordButton = useMemo(() => {\n    if (!showRevealPasswordButton) {\n      return null;\n    }\n\n    return (\n      <HvTooltip\n        disableFocusListener\n        disableTouchListener\n        title={\n          revealPassword\n            ? labels?.revealPasswordButtonClickToHideTooltip\n            : labels?.revealPasswordButtonClickToShowTooltip\n        }\n      >\n        <HvAdornment\n          className={classes.adornmentButton}\n          onClick={handleRevealPassword}\n          aria-label={labels?.revealPasswordButtonLabel}\n          aria-controls={setId(elementId, \"input\")}\n          icon={revealPassword ? <PreviewOff /> : <Preview />}\n        />\n      </HvTooltip>\n    );\n  }, [\n    showRevealPasswordButton,\n    revealPassword,\n    labels?.revealPasswordButtonClickToHideTooltip,\n    labels?.revealPasswordButtonClickToShowTooltip,\n    labels?.revealPasswordButtonLabel,\n    classes.adornmentButton,\n    handleRevealPassword,\n    elementId,\n  ]);\n\n  const validationIcon = useMemo(() => {\n    if (!showValidationIcon) {\n      return null;\n    }\n\n    if (!isValid(validationState)) {\n      return null;\n    }\n\n    return <Success color=\"positive\" className={classes.icon} />;\n  }, [showValidationIcon, validationState, classes.icon]);\n\n  // useMemo to avoid repetitive cloning of the custom icon\n  const customIconEl = useMemo(\n    () =>\n      isValidElement(endAdornment) &&\n      React.cloneElement(endAdornment as React.ReactElement, {\n        className: cx(endAdornment.props.className, classes.icon),\n      }),\n    [classes.icon, endAdornment, cx]\n  );\n\n  const adornments = useMemo(() => {\n    if (\n      !clearButton &&\n      !revealPasswordButton &&\n      !searchButton &&\n      !validationIcon &&\n      !customIconEl\n    )\n      return null;\n\n    // note: specification implies that the custom icon should be hidden when\n    // a validation feedback icon is being shown.\n    return (\n      <div className={classes.adornmentsBox} aria-hidden=\"true\">\n        {clearButton}\n        {revealPasswordButton}\n        {searchButton}\n        {validationIcon || customIconEl}\n      </div>\n    );\n  }, [\n    classes.adornmentsBox,\n    clearButton,\n    customIconEl,\n    revealPasswordButton,\n    searchButton,\n    validationIcon,\n  ]);\n\n  // run initial validation after first render\n  // and also when any validation condition changes\n  useEffect(() => {\n    if (focused || (!isDirty.current && isEmptyValue)) {\n      // skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [focused, isEmptyValue, performValidation]);\n\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.hasSuggestions]: hasSuggestions,\n        },\n        className\n      )}\n      onBlur={onContainerBlurHandler}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              className={classes.label}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseInput\n        id={\n          hasLabel || showClear || showRevealPasswordButton\n            ? setId(elementId, \"input\")\n            : setId(id, \"input\")\n        }\n        name={name}\n        value={value}\n        required={required}\n        readOnly={readOnly}\n        disabled={disabled}\n        onChange={onChangeHandler}\n        autoFocus={autoFocus}\n        onKeyDown={onKeyDownHandler}\n        onBlur={onInputBlurHandler}\n        onFocus={onFocusHandler}\n        placeholder={placeholder}\n        type={realType}\n        classes={{\n          input: classes.input,\n          inputRoot: classes.inputRoot,\n          inputRootFocused: classes.inputRootFocused,\n          inputRootDisabled: classes.inputRootDisabled,\n          inputRootMultiline: classes.inputRootMultiline,\n          inputBorderContainer: classes.inputBorderContainer,\n        }}\n        invalid={isStateInvalid}\n        inputProps={{\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-describedby\":\n            ariaDescribedBy != null\n              ? ariaDescribedBy\n              : description\n              ? setId(elementId, \"description\")\n              : undefined,\n          \"aria-controls\": canShowSuggestions\n            ? setId(elementId, \"suggestions\")\n            : undefined,\n\n          ref: inputRef,\n\n          // prevent browsers auto-fill/suggestions when we have our own\n          autoComplete: canShowSuggestions ? \"off\" : undefined,\n\n          ...inputProps,\n        }}\n        inputRef={forkedRef}\n        endAdornment={adornments}\n        {...others}\n      />\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div role=\"presentation\" className={classes.inputExtension} />\n          )}\n          <HvSuggestions\n            ref={suggestionsRef}\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: classes.suggestionsContainer,\n              list: classes.suggestionList,\n            }}\n            expanded={hasSuggestions}\n            anchorEl={inputRef.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n          />\n        </>\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["validationState","validationStates","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgMA,MAAM,iBAAiB;AAAA;AAAA,EAErB,kBAAkB;AAAA;AAAA,EAElB,2BAA2B;AAAA;AAAA,EAE3B,wCAAwC;AAAA;AAAA,EAExC,wCAAwC;AAAA;AAAA,EAExC,mBAAmB;AACrB;AAOA,MAAM,oBAAoB,CAAC,UACzB,UAAU,IAAI,IAAI,SAAS,gBAAgB,MAAM;AAEnD,SAAS,6BACP,WACA,OACA;AACA,SAAO,aAAa,QAAQ,UAAU,SAAS,kBAAkB,KAAK,CAAC;AACzE;AAGA,MAAM,mBAAmB,CAAC,OAAgC,QAAQ,OAAO;AACvE,QAAM,QAAQ,IAAI,MAAM,SAAS,EAAE,SAAS,MAAM;AAGlD,QAAM,gBAAgB,OAAO;AAAA,IAC3B,OAAO,iBAAiB;AAAA,IACxB;AAAA,EACC,GAAA;AAEY,iBAAA,KAAK,OAAO,KAAK;AAChC,SAAO,cAAc,KAAK;AAC5B;AAKO,MAAM,UAAU,WAAuC,CAAC,OAAO,QAAQ;AACtE,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,eAAe;AAAA,IACf,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB;AAAA,IACA,oBAAoB;AAAA,IACpB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB,OAAO;AAAA,IACP;AAAA,IACA,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA,eAAe;AAAA,IACf,wBAAwB;AAAA,IACxB,sBAAsB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,qBAAqB;AAAA,IACrB;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,aAAa,CAAC;AAAA,IACd,GAAG;AAAA,EAAA,IACD,gBAAgB,WAAW,KAAK;AACpC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AACxC,QAAA,SAAS,UAAU,gBAAgB,UAAU;AAC7C,QAAA,YAAY,YAAY,IAAI,SAAS;AAErC,QAAA,WAAW,OAAyB,IAAI;AAC9C,QAAM,YAAY,WAAW,KAAK,UAAU,YAAY;AAClD,QAAA,iBAAiB,OAAoB,IAAI;AAE/C,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAGtC,QAAA,UAAU,OAAO,KAAK;AAG5B,QAAM,CAAC,OAAO,QAAQ,IAAI,cAAc,WAAW,YAAY;AAEzD,QAAA,eAAe,SAAS,QAAQ,UAAU;AAG1C,QAAA,CAACA,mBAAiB,kBAAkB,IAAI;AAAA,IAC5C;AAAA,IACAC,gBAAiB;AAAA,EAAA;AAGb,QAAA,CAAC,mBAAmB,oBAAoB,IAAI;AAAA,IAChD;AAAA,IACA;AAAA,EAAA;AAKF,QAAM,gBAAgB;AAAA,IACpB,OAAO,EAAE,GAAG,wBAAwB,GAAG;;IAEvC;AAAA,MACE,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,IACtB;AAAA,EAAA;AAGI,QAAA,iBAAiB,QAAQ,MAAM,sBAAsB,IAAI,GAAG,CAAC,IAAI,CAAC;AAIlE,QAAA,oBAAoB,YAAY,MAAM;AAC1C,UAAM,gBAAgB;AAAA,MACpB,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAIiB,uBAAA,uBAAuB,eAAe,YAAY,CAAC;AAGtE;AAAA,MACE,yBAAyB,eAAe,aAAa;AAAA,IAAA;AAGhD,WAAA;AAAA,EAAA,GACN;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAMK,QAAA,eACJ,oBAAoB,SAClB,WAAW,UAAa,kBAAkB,UACzC,WAAW,UACV;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,QAAA,iBAAiB,UAAUD,iBAAe;AAGhD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAAS,KAAK;AAEpD,QAAA,WAAW,QAAQ,MAAM;AAC7B,QAAI,SAAS,YAAY;AACvB,aAAO,iBAAiB,SAAS;AAAA,IACnC;AAEA,QAAI,SAAS,UAAU;AACd,aAAA;AAAA,IACT;AAEO,WAAA;AAAA,EAAA,GACN,CAAC,gBAAgB,IAAI,CAAC;AAGzB,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAE9C,IAAI;AAEN,QAAM,qBAAqB,0BAA0B;AAC/C,QAAA,iBAAiB,CAAC,CAAC;AAGzB,QAAM,WAAW,SAAS;AAC1B,QAAM,iBAAiB,eAAe;AAKtC,QAAM,aAAa,MAAM;AACvB,aAAS,SAAS;EAAM;AAG1B,QAAM,YAAY;AAKlB,QAAM,yBAAyB,MAAM;AACnC,QAAI,UAAU,SAAS;AACrB,0BAAoB,IAAI;AAAA,IAC1B;AAAA,EAAA;AAMI,QAAA,oBAAoB,CAAC,QAAgB;AACnC,UAAA,mBAAmB,yBAAyB,GAAG;AACjD,QAAA,mBAAmB,CAAC,GAAG,OAAO;AAChC,0BAAoB,gBAAgB;AAAA,IAAA,OAC/B;AACkB;IACzB;AAAA,EAAA;AAMI,QAAA,4BACJ,CAAC,OAAO,SAAS;AACT,UAAA,WAAW,KAAK,SAAU,KAAK;AAEpB,qBAAA,SAAS,SAAS,QAAQ;AAEhC;AACY;AAEvB,QAAI,SAAS,UAAU;AAErB,gBAAU,OAAO,QAAQ;AAAA,IAC3B;AAAA,EAAA;AAGE,QAAA,kBAAgD,CAAC,OAAO,aAAa;AACzE,YAAQ,UAAU;AAGlB,aAAS,QAAQ;AAEjB,eAAW,OAAO,QAAQ;AAE1B,QAAI,oBAAoB;AAOtB,wBAAkB,QAAQ;AAAA,IAC5B;AAAA,EAAA;AAOI,QAAA,qBAAiD,CAAC,UAAU;AAE5D,QAAA,6BAA6B,eAAe,SAAS,KAAK;AAAG;AAEjE,eAAW,KAAK;AAEhB,UAAM,gBAAgB;AAEb,aAAA,OAAO,OAAO,aAAa;AAAA,EAAA;AAOhC,QAAA,iBAA8C,CAAC,UAAU;AAC7D,eAAW,IAAI;AAGf,uBAAmBC,gBAAiB,OAAO;AAE3C,cAAU,OAAO,KAAK;AAAA,EAAA;AAGlB,QAAA,iBAAiB,CAAC,OAAsB;AAE5C,UAAM,SAAS,SAAS;AAAA,MACtB,MAAM,WAAW,kBAAkB,KAAK;AAAA,IAAA;AAE1C,WAAO,MAAM,OAAO,QAAQ,qBAAqB,IAAI,IAAI,EAAE,IAAI;AAAA,EAAA;AAG3D,QAAA,sBAAuD,CAAC,UAAU;AAClE,QAAA,MAAM,OAAO,KAAK,GAAG;AACA;AACZ;IACF,WAAA,MAAM,OAAO,KAAK,GAAG;AACP;IACzB;AAAA,EAAA;AAII,QAAA,mBAAkD,CAAC,UAAU;AACjE,QAAI,MAAM,OAAO,WAAW,KAAK,gBAAgB;AACzC,YAAA,KAAK,eAAe,CAAC;AAC3B,UAAI,MAAM;AAAA,IACD,WAAA,MAAM,OAAO,OAAO,GAAG;AAChC,gBAAU,OAAO,KAAK;AAAA,IACxB;AAEA,gBAAY,OAAO,KAAK;AAAA,EAAA;AAIpB,QAAA,yBAAuD,CAAC,UAAU;AACtE,QAAI,MAAM,eAAe;AACvB,iBAAW,MAAM;AACT,cAAA,OAAO,eAAe,IAAI;AAChC,YAAI,CAAC,MAAM,SAAS,SAAS,aAAa;AAA0B;SACnE,EAAE;AAAA,IACP;AAAA,EAAA;AAGF,QAAM,aAAa,WAAW;AAI9B,QAAM,YACJ,CAAC,YACD,CAAC,YACD,CAAC,gBACD,CAAC,iBACA,CAAC,cACA,SAAS,YACT,uBACAD,sBAAoBC,gBAAiB;AAEnC,QAAA,iBAAiB,SAAS,YAAY,CAAC;AAEvC,QAAA,2BACJ,SAAS,cAAc,CAAC;AAKpB,QAAA,cAAc,YAAY,MAAM;AAEpC,uBAAmBA,gBAAiB,OAAO;AAE1B,qBAAA,SAAS,SAAS,EAAE;AAGrC,eAAW,UAAU;AAAA,EAAA,GACpB,CAAC,kBAAkB,CAAC;AAEjB,QAAA,cAAc,QAAQ,MAAM;AAChC,QAAI,CAAC,WAAW;AACP,aAAA;AAAA,IACT;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAW,GAAG,QAAQ,iBAAiB;AAAA,UACrC,CAAC,QAAQ,SAAS,GAAG,CAAC;AAAA,QAAA,CACvB;AAAA,QACD,SAAS;AAAA,QACT,cAAY,QAAQ;AAAA,QACpB,iBAAe,MAAM,WAAW,OAAO;AAAA,QACvC,0BAAO,SAAQ,EAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACjB,GAED;AAAA,IACD;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EAAA,CACD;AAKD,QAAM,eAAe;AAAA,IACnB,CAAC,UAAU;AACT,gBAAU,OAAO,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,SAAS,KAAK;AAAA,EAAA;AAGX,QAAA,eAAe,QAAQ,MAAM;AAEjC,UAAM,eACJ,mBACC,gBACE,cAAcD,sBAAoBC,gBAAiB;AAExD,QAAI,CAAC,cAAc;AACV,aAAA;AAAA,IACT;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,QAAQ;AAAA,QACnB,SAAS,aAAa,eAAe;AAAA,QACrC,cAAY,QAAQ;AAAA,QACpB,0BAAO,QAAO,EAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAChB,GAED;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACAD;AAAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,QAAQ;AAAA,EAAA,CACT;AAKK,QAAA,uBAAuB,YAAY,MAAM;AAC7C,sBAAkB,CAAC,cAAc;AAAA,EAAA,GAChC,CAAC,cAAc,CAAC;AAEb,QAAA,uBAAuB,QAAQ,MAAM;AACzC,QAAI,CAAC,0BAA0B;AACtB,aAAA;AAAA,IACT;AAGE,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,sBAAoB;AAAA,QACpB,sBAAoB;AAAA,QACpB,OACE,iBACI,QAAQ,yCACR,QAAQ;AAAA,QAGd,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,QAAQ;AAAA,YACnB,SAAS;AAAA,YACT,cAAY,QAAQ;AAAA,YACpB,iBAAe,MAAM,WAAW,OAAO;AAAA,YACvC,MAAM,iBAAiB,oBAAC,YAAW,CAAA,CAAA,wBAAM,SAAQ,EAAA;AAAA,UAAA;AAAA,QACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GAED;AAAA,IACD;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,EAAA,CACD;AAEK,QAAA,iBAAiB,QAAQ,MAAM;AACnC,QAAI,CAAC,oBAAoB;AAChB,aAAA;AAAA,IACT;AAEI,QAAA,CAAC,QAAQA,iBAAe,GAAG;AACtB,aAAA;AAAA,IACT;AAEA,+BAAQ,SAAQ,EAAA,OAAM,YAAW,WAAW,QAAQ,KAAM,CAAA;AAAA,KACzD,CAAC,oBAAoBA,mBAAiB,QAAQ,IAAI,CAAC;AAGtD,QAAM,eAAe;AAAA,IACnB,MACE,eAAe,YAAY,KAC3BE,eAAM,aAAa,cAAoC;AAAA,MACrD,WAAW,GAAG,aAAa,MAAM,WAAW,QAAQ,IAAI;AAAA,IAAA,CACzD;AAAA,IACH,CAAC,QAAQ,MAAM,cAAc,EAAE;AAAA,EAAA;AAG3B,QAAA,aAAa,QAAQ,MAAM;AAE7B,QAAA,CAAC,eACD,CAAC,wBACD,CAAC,gBACD,CAAC,kBACD,CAAC;AAEM,aAAA;AAIT,gCACG,OAAI,EAAA,WAAW,QAAQ,eAAe,eAAY,QAChD,UAAA;AAAA,MAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,IACrB,EAAA,CAAA;AAAA,EAAA,GAED;AAAA,IACD,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACD;AAID,YAAU,MAAM;AACd,QAAI,WAAY,CAAC,QAAQ,WAAW,cAAe;AAGjD;AAAA,IACF;AAEkB;EACjB,GAAA,CAAC,SAAS,cAAc,iBAAiB,CAAC;AAE7C,QAAM,iBAAiB,iBACnB,eACE,MAAM,WAAW,OAAO,IACxB,mBACF;AAGF,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,QAAQF;AAAAA,MACR;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,cAAc,GAAG;AAAA,QAC5B;AAAA,QACA;AAAA,MACF;AAAA,MACA,QAAQ;AAAA,MAEN,UAAA;AAAA,SAAA,YAAY,mBACZ,qBAAC,OAAI,EAAA,WAAW,QAAQ,gBACrB,UAAA;AAAA,UACC,YAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,OAAO;AAAA,cAC5B,WAAW,QAAQ;AAAA,cACnB,SAAS,MAAM,WAAW,OAAO;AAAA,cACjC;AAAA,YAAA;AAAA,UACF;AAAA,UAGD,kBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAI,MAAM,WAAW,aAAa;AAAA,cAClC,WAAW,QAAQ;AAAA,cAElB,UAAA;AAAA,YAAA;AAAA,UACH;AAAA,QAAA,GAEJ;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IACE,YAAY,aAAa,2BACrB,MAAM,WAAW,OAAO,IACxB,MAAM,IAAI,OAAO;AAAA,YAEvB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA,WAAW;AAAA,YACX,QAAQ;AAAA,YACR,SAAS;AAAA,YACT;AAAA,YACA,MAAM;AAAA,YACN,SAAS;AAAA,cACP,OAAO,QAAQ;AAAA,cACf,WAAW,QAAQ;AAAA,cACnB,kBAAkB,QAAQ;AAAA,cAC1B,mBAAmB,QAAQ;AAAA,cAC3B,oBAAoB,QAAQ;AAAA,cAC5B,sBAAsB,QAAQ;AAAA,YAChC;AAAA,YACA,SAAS;AAAA,YACT,YAAY;AAAA,cACV,cAAc;AAAA,cACd,mBAAmB;AAAA,cACnB,gBAAgB,iBAAiB,OAAO;AAAA,cACxC,qBAAqB;AAAA,cACrB,oBACE,mBAAmB,OACf,kBACA,cACA,MAAM,WAAW,aAAa,IAC9B;AAAA,cACN,iBAAiB,qBACb,MAAM,WAAW,aAAa,IAC9B;AAAA,cAEJ,KAAK;AAAA;AAAA,cAGL,cAAc,qBAAqB,QAAQ;AAAA,cAE3C,GAAG;AAAA,YACL;AAAA,YACA,UAAU;AAAA,YACV,cAAc;AAAA,YACb,GAAG;AAAA,UAAA;AAAA,QACN;AAAA,QACC,sBAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,UAAA,sCACE,OAAI,EAAA,MAAK,gBAAe,WAAW,QAAQ,gBAAgB;AAAA,UAE9D;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,IAAI,MAAM,WAAW,aAAa;AAAA,cAClC,SAAS;AAAA,gBACP,MAAM,QAAQ;AAAA,gBACd,MAAM,QAAQ;AAAA,cAChB;AAAA,cACA,UAAU;AAAA,cACV,UAAU,SAAS,SAAS;AAAA,cAC5B,SAAS;AAAA,cACT,WAAW;AAAA,cACX,sBAAsB;AAAA,cACtB;AAAA,YAAA;AAAA,UACF;AAAA,QAAA,GACF;AAAA,QAED,gBACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI,MAAM,WAAW,OAAO;AAAA,YAC5B,eAAa;AAAA,YACb,WAAW,QAAQ;AAAA,YAElB,UAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;"}
+{"version":3,"file":"Input.js","sources":["../../../src/Input/Input.tsx"],"sourcesContent":["import React, {\n  FocusEvent,\n  HTMLInputTypeAttribute,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport {\n  CloseXS,\n  PreviewOff,\n  Preview,\n  Search,\n  Success,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { isBrowser } from \"../utils/browser\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport { HvInputSuggestion, HvValidationMessages } from \"../types/forms\";\nimport { HvBaseProps } from \"../types/generic\";\nimport {\n  HvAdornment,\n  HvAdornmentProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestion,\n  HvSuggestions,\n  HvSuggestionsProps,\n  HvWarningText,\n  isValid,\n  isInvalid,\n} from \"../Forms\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n  DEFAULT_ERROR_MESSAGES,\n  computeValidationType,\n  hasBuiltInValidations,\n  validateInput,\n  computeValidationState,\n  computeValidationMessage,\n  HvInputValidity,\n} from \"../BaseInput/validations\";\nimport { HvTooltip } from \"../Tooltip\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useLabels } from \"../hooks/useLabels\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./Input.styles\";\n\nexport { staticClasses as inputClasses };\n\nexport type HvInputClasses = ExtractNames<typeof useClasses>;\n\ntype InputElement = HTMLInputElement | HTMLTextAreaElement;\n\nexport interface HvInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\"\n  > {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: string;\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n   */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /**\n   * The function that will be executed onChange, allows modification of the input,\n   * it receives the value. If a new value should be presented it must returned it.\n   */\n  onChange?: HvBaseInputProps[\"onChange\"];\n  /**\n   * Callback called when the user submits the value by pressing Enter/Return.\n   *\n   * Also called when the search button is clicked (when type is \"search\").\n   */\n  onEnter?: (\n    event: React.KeyboardEvent<InputElement> | React.MouseEvent,\n    value: string\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the validation state,\n   * it receives the value and the validation state.\n   */\n  onBlur?: (\n    event: React.FocusEvent<InputElement>,\n    value: string,\n    validationState: HvInputValidity\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the value state,\n   * it receives the value.\n   */\n  onFocus?: (event: React.FocusEvent<InputElement>, value: string) => void;\n  /**\n   * The function that will be executed onKeyDown, allows checking the value state,\n   * it receives the event and value.\n   */\n  onKeyDown?: (\n    event: React.KeyboardEvent<InputElement> | React.MouseEvent,\n    value: string\n  ) => void;\n  /** The input type. */\n  type?: HTMLInputTypeAttribute;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** Internal labels?. */\n  labels?: HvInputLabels & Record<string, any>;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /**\n   * Allows passing a ref to the underlying input\n   * @deprecated Use `ref` directly instead\n   * */\n  inputRef?: HvBaseInputProps[\"inputRef\"];\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */\n  suggestionListCallback?: (value: string) => HvInputSuggestion[] | null;\n  /**\n   * The custom validation function, it receives the value and must return\n   * either `true` for valid or `false` for invalid, default validations would only\n   * occur if this function is null or undefined\n   */\n  validation?: (value: string) => boolean;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the clear button is disabled. */\n  disableClear?: boolean;\n  /** If `true` the reveal password button is disabled. Valid only when type is \"password\". */\n  disableRevealPassword?: boolean;\n  /** If `true` the search button is disabled. Valid only when type is \"search\". */\n  disableSearchButton?: boolean;\n  /**\n   * If `true` the validation icon adornment is visible. Defaults to `false`.\n   *\n   * Currently, DS specifications define only a positive feedback icon;\n   * errors are signaled through the border style and by displaying the error message.\n   */\n  showValidationIcon?: boolean;\n  /** A custom icon to be added into the input. */\n  endAdornment?: React.ReactNode;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxCharQuantity?: number;\n  /** The minimum allowed length of the characters, if this value is null no check will be perform. */\n  minCharQuantity?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvInputClasses;\n}\n\nconst DEFAULT_LABELS = {\n  /** The label of the clear button. */\n  clearButtonLabel: \"Clear the text\",\n  /** The label of the reveal password button. */\n  revealPasswordButtonLabel: \"Reveal password\",\n  /** The tooltip of the reveal password button when the password is hidden. */\n  revealPasswordButtonClickToShowTooltip: \"Click to show password.\",\n  /** The tooltip of the reveal password button when the password is revealed. */\n  revealPasswordButtonClickToHideTooltip: \"Click to hide password.\",\n  /** The label of the search button. */\n  searchButtonLabel: \"Search\",\n};\n\nexport type HvInputLabels = Partial<typeof DEFAULT_LABELS>;\n\n/**\n * Find the focused element onBlur.\n */\nconst getFocusedElement = (event: FocusEvent) =>\n  isBrowser(\"ie\") ? document.activeElement : event.relatedTarget;\n\nfunction eventTargetIsInsideContainer(\n  container: HTMLElement | null,\n  event: FocusEvent<any>\n) {\n  return container != null && container.contains(getFocusedElement(event));\n}\n\n/** Changes a given `input`'s `value`, triggering its `onChange` */\nconst changeInputValue = (input: HTMLInputElement | null, value = \"\") => {\n  const event = new Event(\"input\", { bubbles: true });\n\n  /** Original `input.value` setter (React overrides it). */\n  const setInputValue = Object.getOwnPropertyDescriptor(\n    window.HTMLInputElement.prototype,\n    \"value\"\n  )?.set;\n\n  setInputValue?.call(input, value);\n  input?.dispatchEvent(event);\n};\n\n/**\n * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.\n */\nexport const HvInput = forwardRef<InputElement, HvInputProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value: valueProp,\n    defaultValue = \"\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onEnter,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    type = \"text\",\n    placeholder,\n    autoFocus = false,\n    labels: labelsProp,\n    validationMessages,\n    disableClear = false,\n    disableRevealPassword = false,\n    disableSearchButton = false,\n    endAdornment,\n    maxCharQuantity,\n    minCharQuantity,\n    validation,\n    showValidationIcon = false,\n    suggestionListCallback,\n    inputRef: inputRefProp,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    inputProps = {},\n    ...others\n  } = useDefaultProps(\"HvInput\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const elementId = useUniqueId(id);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const forkedRef = useForkRef(ref, inputRef, inputRefProp);\n  const suggestionsRef = useRef<HTMLElement>(null);\n\n  const [focused, setFocused] = useState(false);\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  // Value related state\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const isEmptyValue = value == null || value === \"\";\n\n  // Validation related state\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  // validationMessages reference tends to change, as users will not memoize/useState for it;\n  // dependencies must be more explicit so we set\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      validationMessages?.error,\n      validationMessages?.requiredError,\n      validationMessages?.minCharError,\n      validationMessages?.maxCharError,\n      validationMessages?.typeMismatchError,\n    ]\n  );\n\n  const validationType = useMemo(() => computeValidationType(type), [type]);\n\n  // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n  // and returns the validity state of the input.\n  const performValidation = useCallback(() => {\n    const inputValidity = validateInput(\n      inputRef.current,\n      value,\n      required,\n      minCharQuantity,\n      maxCharQuantity,\n      validationType,\n      validation\n    );\n\n    // This will only run if status is uncontrolled\n    setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n    // This will only run if statusMessage is uncontrolled\n    setValidationMessage(\n      computeValidationMessage(inputValidity, errorMessages)\n    );\n\n    return inputValidity;\n  }, [\n    errorMessages,\n    isEmptyValue,\n    maxCharQuantity,\n    minCharQuantity,\n    required,\n    setValidationMessage,\n    setValidationState,\n    validation,\n    validationType,\n    value,\n  ]);\n\n  // The error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and any of the built-in validations are active\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined &&\n        hasBuiltInValidations(\n          required,\n          validationType,\n          minCharQuantity,\n          maxCharQuantity,\n          validation,\n          inputProps\n        )));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  // Input type related state\n  const [revealPassword, setRevealPassword] = useState(false);\n\n  const realType = useMemo(() => {\n    if (type === \"password\") {\n      return revealPassword ? \"text\" : \"password\";\n    }\n\n    if (type === \"search\") {\n      return \"search\";\n    }\n\n    return \"text\";\n  }, [revealPassword, type]);\n\n  // Suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState<\n    HvSuggestion[] | null\n  >(null);\n\n  const canShowSuggestions = suggestionListCallback != null;\n  const hasSuggestions = !!suggestionValues;\n\n  // Miscellaneous state\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  /**\n   * Looks for the node that represent the input inside the material tree and focus it.\n   */\n  const focusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  const isMounted = useIsMounted();\n\n  /**\n   * Clears the suggestion array.\n   */\n  const suggestionClearHandler = () => {\n    if (isMounted.current) {\n      setSuggestionValues(null);\n    }\n  };\n\n  /**\n   * Fills of the suggestion array.\n   */\n  const suggestionHandler = (val: string) => {\n    const suggestionsArray = suggestionListCallback?.(val);\n    if (suggestionsArray?.[0]?.label) {\n      setSuggestionValues(suggestionsArray);\n    } else {\n      suggestionClearHandler();\n    }\n  };\n\n  /**\n   * Executes the user callback adds the selection to the state and clears the suggestions.\n   */\n  const suggestionSelectedHandler: HvSuggestionsProps[\"onSuggestionSelected\"] =\n    (event, item) => {\n      const newValue = item.value || (item.label as any);\n\n      changeInputValue(inputRef.current, newValue);\n\n      focusInput();\n      suggestionClearHandler();\n\n      if (type === \"search\") {\n        // trigger the onEnter callback when the user selects an option in a search box\n        onEnter?.(event, newValue);\n      }\n    };\n\n  const onChangeHandler: HvBaseInputProps[\"onChange\"] = (event, newValue) => {\n    isDirty.current = true;\n\n    // set the input value (only when value is uncontrolled)\n    setValue(newValue);\n\n    onChange?.(event, newValue);\n\n    if (canShowSuggestions) {\n      // an edge case might be a controlled input whose onChange callback\n      // doesn't change the value (or sets another): the suggestionListCallback\n      // callback will still receive the original rejected value.\n      // a refactor is needed so the suggestionListCallback might be called only\n      // when the input is uncontrolled, providing a way to externally control\n      // the suggestion values.\n      suggestionHandler(newValue);\n    }\n  };\n\n  /**\n   * Validates the input updating the state and modifying the info text, also executes\n   * the user provided onBlur passing the current validation status and value.\n   */\n  const onInputBlurHandler: HvBaseInputProps[\"onBlur\"] = (event) => {\n    // If the blur is executed when choosing an suggestion it should be ignored.\n    if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;\n\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event, value, inputValidity);\n  };\n\n  /**\n   * Updates the state putting again the value from the state because the input value is\n   * not automatically manage, it also executes the onFocus function from the user passing the value\n   */\n  const onFocusHandler: HvBaseInputProps[\"onFocus\"] = (event) => {\n    setFocused(true);\n\n    // reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event, value);\n  };\n\n  const getSuggestions = (li: number | null) => {\n    // TODO Replace with ref\n    const listEl = document.getElementById(\n      setId(elementId, \"suggestions-list\") || \"\"\n    );\n    return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n  };\n\n  const onSuggestionKeyDown: HvSuggestionsProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKey(event, \"Tab\")) {\n      suggestionClearHandler();\n    }\n  };\n\n  /** Focus the suggestion list when the arrow down is pressed. */\n  const onKeyDownHandler: HvBaseInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"ArrowDown\") && hasSuggestions) {\n      const li = getSuggestions(0);\n      li?.focus();\n    } else if (isKey(event, \"Enter\")) {\n      onEnter?.(event, value);\n    }\n\n    onKeyDown?.(event, value);\n  };\n\n  /** Clears the suggestion list on blur. */\n  const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n    if (event.relatedTarget) {\n      setTimeout(() => {\n        const list = getSuggestions(null);\n        if (!list?.contains(document.activeElement)) suggestionClearHandler();\n      }, 10);\n    }\n  };\n\n  const hasOnEnter = onEnter != null;\n\n  // show the clear button only if the input is enabled, not read-only, disableClear is false and the input is not empty\n  // also, don't show it when the input type is \"search\" and the input is active (standBy)\n  const showClear =\n    !disabled &&\n    !readOnly &&\n    !disableClear &&\n    !isEmptyValue &&\n    (!hasOnEnter ||\n      type !== \"search\" ||\n      disableSearchButton ||\n      validationState !== validationStates.standBy);\n\n  const showSearchIcon = type === \"search\" && !disableSearchButton;\n\n  const showRevealPasswordButton =\n    type === \"password\" && !disableRevealPassword;\n\n  /**\n   * Clears the input value from the state and refocus the input.\n   */\n  const handleClear = useCallback(() => {\n    // reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    changeInputValue(inputRef.current, \"\");\n\n    // we want to focus the input when clicked and not active\n    setTimeout(focusInput);\n  }, [setValidationState]);\n\n  const clearButton = useMemo(() => {\n    if (!showClear) {\n      return null;\n    }\n\n    return (\n      <HvAdornment\n        // Don't control visibility when the search icon is enabled\n        className={cx(classes.adornmentButton, {\n          [classes.iconClear]: !showSearchIcon,\n        })}\n        onClick={handleClear}\n        aria-label={labels?.clearButtonLabel}\n        aria-controls={setId(elementId, \"input\")}\n        icon={<CloseXS />}\n      />\n    );\n  }, [\n    showClear,\n    classes.adornmentButton,\n    classes.iconClear,\n    showSearchIcon,\n    handleClear,\n    labels?.clearButtonLabel,\n    elementId,\n    cx,\n  ]);\n\n  /**\n   * Calls the onEnter callback and refocus the input.\n   */\n  const handleSearch = useCallback<NonNullable<HvAdornmentProps[\"onClick\"]>>(\n    (event) => {\n      onEnter?.(event, value);\n    },\n    [onEnter, value]\n  );\n\n  const searchButton = useMemo(() => {\n    // If the search icon is not actionable, only show it when the input is empty or active\n    const reallyShowIt =\n      showSearchIcon &&\n      (isEmptyValue ||\n        (hasOnEnter && validationState === validationStates.standBy));\n\n    if (!reallyShowIt) {\n      return null;\n    }\n\n    return (\n      <HvAdornment\n        className={classes.adornmentButton}\n        onClick={hasOnEnter ? handleSearch : undefined}\n        aria-label={labels?.searchButtonLabel}\n        icon={<Search />}\n      />\n    );\n  }, [\n    showSearchIcon,\n    isEmptyValue,\n    hasOnEnter,\n    validationState,\n    classes.adornmentButton,\n    handleSearch,\n    labels?.searchButtonLabel,\n  ]);\n\n  /**\n   * Changes input type and refocus the input.\n   */\n  const handleRevealPassword = useCallback(() => {\n    setRevealPassword(!revealPassword);\n  }, [revealPassword]);\n\n  const revealPasswordButton = useMemo(() => {\n    if (!showRevealPasswordButton) {\n      return null;\n    }\n\n    return (\n      <HvTooltip\n        disableFocusListener\n        disableTouchListener\n        title={\n          revealPassword\n            ? labels?.revealPasswordButtonClickToHideTooltip\n            : labels?.revealPasswordButtonClickToShowTooltip\n        }\n      >\n        <HvAdornment\n          className={classes.adornmentButton}\n          onClick={handleRevealPassword}\n          aria-label={labels?.revealPasswordButtonLabel}\n          aria-controls={setId(elementId, \"input\")}\n          icon={revealPassword ? <PreviewOff /> : <Preview />}\n        />\n      </HvTooltip>\n    );\n  }, [\n    showRevealPasswordButton,\n    revealPassword,\n    labels?.revealPasswordButtonClickToHideTooltip,\n    labels?.revealPasswordButtonClickToShowTooltip,\n    labels?.revealPasswordButtonLabel,\n    classes.adornmentButton,\n    handleRevealPassword,\n    elementId,\n  ]);\n\n  const validationIcon = useMemo(() => {\n    if (!showValidationIcon) {\n      return null;\n    }\n\n    if (!isValid(validationState)) {\n      return null;\n    }\n\n    return <Success color=\"positive\" className={classes.icon} />;\n  }, [showValidationIcon, validationState, classes.icon]);\n\n  // useMemo to avoid repetitive cloning of the custom icon\n  const customIconEl = useMemo(\n    () =>\n      isValidElement(endAdornment) &&\n      React.cloneElement(endAdornment as React.ReactElement, {\n        className: cx(endAdornment.props.className, classes.icon),\n      }),\n    [classes.icon, endAdornment, cx]\n  );\n\n  const adornments = useMemo(() => {\n    if (\n      !clearButton &&\n      !revealPasswordButton &&\n      !searchButton &&\n      !validationIcon &&\n      !customIconEl\n    )\n      return null;\n\n    // note: specification implies that the custom icon should be hidden when\n    // a validation feedback icon is being shown.\n    return (\n      <div className={classes.adornmentsBox} aria-hidden=\"true\">\n        {clearButton}\n        {revealPasswordButton}\n        {searchButton}\n        {validationIcon || customIconEl}\n      </div>\n    );\n  }, [\n    classes.adornmentsBox,\n    clearButton,\n    customIconEl,\n    revealPasswordButton,\n    searchButton,\n    validationIcon,\n  ]);\n\n  // run initial validation after first render\n  // and also when any validation condition changes\n  useEffect(() => {\n    if (focused || (!isDirty.current && isEmptyValue)) {\n      // skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [focused, isEmptyValue, performValidation]);\n\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.hasSuggestions]: hasSuggestions,\n        },\n        className\n      )}\n      onBlur={onContainerBlurHandler}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              className={classes.label}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseInput\n        id={\n          hasLabel || showClear || showRevealPasswordButton\n            ? setId(elementId, \"input\")\n            : setId(id, \"input\")\n        }\n        name={name}\n        value={value}\n        required={required}\n        readOnly={readOnly}\n        disabled={disabled}\n        onChange={onChangeHandler}\n        autoFocus={autoFocus}\n        onKeyDown={onKeyDownHandler}\n        onBlur={onInputBlurHandler}\n        onFocus={onFocusHandler}\n        placeholder={placeholder}\n        type={realType}\n        classes={{\n          input: classes.input,\n          inputRoot: classes.inputRoot,\n          inputRootFocused: classes.inputRootFocused,\n          inputRootDisabled: classes.inputRootDisabled,\n          inputRootMultiline: classes.inputRootMultiline,\n          inputBorderContainer: classes.inputBorderContainer,\n        }}\n        invalid={isStateInvalid}\n        inputProps={{\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-describedby\":\n            ariaDescribedBy != null\n              ? ariaDescribedBy\n              : description\n              ? setId(elementId, \"description\")\n              : undefined,\n          \"aria-controls\": canShowSuggestions\n            ? setId(elementId, \"suggestions\")\n            : undefined,\n\n          ref: inputRef,\n\n          // prevent browsers auto-fill/suggestions when we have our own\n          autoComplete: canShowSuggestions ? \"off\" : undefined,\n\n          ...inputProps,\n        }}\n        inputRef={forkedRef}\n        endAdornment={adornments}\n        {...others}\n      />\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div role=\"presentation\" className={classes.inputExtension} />\n          )}\n          <HvSuggestions\n            ref={suggestionsRef}\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: classes.suggestionsContainer,\n              list: classes.suggestionList,\n            }}\n            expanded={hasSuggestions}\n            anchorEl={inputRef.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n          />\n        </>\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["validationState","validationStates","React"],"mappings":"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"}

package/dist/esm/Radio/Radio.js

@@ -40,7 +40,7 @@ const HvRadio = forwardRef(
       ...others
     } = useDefaultProps("HvRadio", props);
     const { classes, cx } = useClasses(classesProp);
-    const elementId = useUniqueId(id, "hvradio");
+    const elementId = useUniqueId(id);
     const [focusVisible, setFocusVisible] = useState(false);
     const onFocusVisibleCallback = useCallback(
       (evt) => {

package/dist/esm/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../src/Radio/Radio.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\n\nimport { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseRadio } from \"../BaseRadio\";\nimport {\n  HvWarningText,\n  HvLabelProps,\n  isInvalid,\n  HvFormElement,\n  HvLabel,\n} from \"../Forms\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Radio.styles\";\n\nexport { staticClasses as radioClasses };\n\nexport type HvRadioClasses = ExtractNames<typeof useClasses>;\n\nexport type HvRadioStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\"> {\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvRadioClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that user input is required on the form element.\n   *\n   * If a single radio button in a group has the required attribute, a radio button in\n   * that group must be check, though it doesn't have to be the one with the attribute is applied.\n   *\n   * For that reason, the component doesn't make any uncontrolled changes to its validation status.\n   * That should ideally be managed in the context of a radio button group.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the form element 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 status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   */\n  status?: HvRadioStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the radio button.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\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  /** @ignore */\n  ref?: MuiRadioProps[\"ref\"];\n  /** @ignore */\n  component?: MuiRadioProps[\"component\"];\n}\n\n/**\n * A Radio Button is a mechanism that allows user to select just an option from a group of options.\n *\n * It should used in a Radio Button Group to present the user with a range of options from\n * which the user <b>may select just one option</b> to complete their task.\n *\n * Individual use of radio buttons, at least uncontrolled, is unadvised as React state management doesn't\n * respond to the browser's native management of radio inputs checked state.\n */\nexport const HvRadio = forwardRef<HTMLButtonElement, HvRadioProps>(\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      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      labelProps,\n      checked,\n      defaultChecked = false,\n      onChange,\n      status = \"standBy\",\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n      semantic = false,\n      inputProps,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvRadio\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id, \"hvradio\");\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 [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked)\n    );\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n        setIsChecked(newChecked);\n\n        onChange?.(evt, newChecked, value);\n      },\n      [onChange, setIsChecked, value]\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled\n    const canShowError =\n      ariaErrorMessage == null &&\n      status !== undefined &&\n      statusMessage !== undefined;\n\n    const hasLabel = label != null;\n\n    const isStateInvalid = isInvalid(status);\n\n    let errorMessageId: string | undefined;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    const radio = (\n      <HvBaseRadio\n        ref={ref}\n        id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        className={cx(classes.radio, {\n          [classes.invalidRadio]: isStateInvalid,\n        })}\n        disabled={disabled}\n        readOnly={readOnly}\n        onChange={onLocalChange}\n        value={value}\n        checked={isChecked}\n        semantic={semantic}\n        inputProps={{\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-describedby\": ariaDescribedBy,\n          ...inputProps,\n        }}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={status || \"standBy\"}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {hasLabel ? (\n          <div\n            className={cx(classes.container, {\n              [classes.disabled]: disabled,\n              [classes.focusVisible]: !!(focusVisible && label),\n              [classes.invalidContainer]: isStateInvalid,\n            })}\n          >\n            {radio}\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n              {...labelProps}\n            />\n          </div>\n        ) : (\n          radio\n        )}\n        {canShowError && (\n          <HvWarningText id={setId(elementId, \"error\")} disableBorder>\n            {statusMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":";;;;;;;;;;;;;AAqIO,MAAM,UAAU;AAAA,EACrB,CAAC,OAAO,QAAQ;AACR,UAAA;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,WAAW;AAAA,MACX,WAAW;AAAA,MACX;AAAA,MACA,cAAc;AAAA,MACd,mBAAmB;AAAA,MACnB,oBAAoB;AAAA,MACpB;AAAA,MACA;AAAA,MACA,iBAAiB;AAAA,MACjB;AAAA,MACA,SAAS;AAAA,MACT;AAAA,MACA,qBAAqB;AAAA,MACrB,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IAAA,IACD,gBAAgB,WAAW,KAAK;AAEpC,UAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,UAAA,YAAY,YAAY,IAAI,SAAS;AAE3C,UAAM,CAAC,cAAc,eAAe,IAAI,SAAS,KAAK;AAEtD,UAAM,yBAAyB;AAAA,MAC7B,CAAC,QAA+B;AAC9B,wBAAgB,IAAI;AACpB,yBAAiB,GAAG;AAAA,MACtB;AAAA,MACA,CAAC,cAAc;AAAA,IAAA;AAGjB,UAAM,iBAAiB;AAAA,MACrB,CAAC,QAA+B;AAC9B,wBAAgB,KAAK;AACrB,iBAAS,GAAG;AAAA,MACd;AAAA,MACA,CAAC,MAAM;AAAA,IAAA;AAGH,UAAA,CAAC,WAAW,YAAY,IAAI;AAAA,MAChC;AAAA,MACA,QAAQ,cAAc;AAAA,IAAA;AAGxB,UAAM,gBAAgB;AAAA,MACpB,CAAC,KAA0C,eAAwB;AACjE,qBAAa,UAAU;AAEZ,mBAAA,KAAK,YAAY,KAAK;AAAA,MACnC;AAAA,MACA,CAAC,UAAU,cAAc,KAAK;AAAA,IAAA;AAMhC,UAAM,eACJ,oBAAoB,QACpB,WAAW,UACX,kBAAkB;AAEpB,UAAM,WAAW,SAAS;AAEpB,UAAA,iBAAiB,UAAU,MAAM;AAEnC,QAAA;AACJ,QAAI,gBAAgB;AAClB,uBAAiB,eACb,MAAM,WAAW,OAAO,IACxB;AAAA,IACN;AAEA,UAAM,QACJ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI,QAAQ,MAAM,WAAW,OAAO,IAAI,MAAM,IAAI,OAAO;AAAA,QACzD;AAAA,QACA,WAAW,GAAG,QAAQ,OAAO;AAAA,UAC3B,CAAC,QAAQ,YAAY,GAAG;AAAA,QAAA,CACzB;AAAA,QACD;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV;AAAA,QACA,SAAS;AAAA,QACT;AAAA,QACA,YAAY;AAAA,UACV,gBAAgB,iBAAiB,OAAO;AAAA,UACxC,qBAAqB;AAAA,UACrB,cAAc;AAAA,UACd,mBAAmB;AAAA,UACnB,oBAAoB;AAAA,UACpB,GAAG;AAAA,QACL;AAAA,QACA,gBAAgB;AAAA,QAChB,QAAQ;AAAA,QACP,GAAG;AAAA,MAAA;AAAA,IAAA;AAKN,WAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,QAAQ,UAAU;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,GAAG,QAAQ,MAAM,SAAS;AAAA,QAEpC,UAAA;AAAA,UACC,WAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAW,GAAG,QAAQ,WAAW;AAAA,gBAC/B,CAAC,QAAQ,QAAQ,GAAG;AAAA,gBACpB,CAAC,QAAQ,YAAY,GAAG,CAAC,EAAE,gBAAgB;AAAA,gBAC3C,CAAC,QAAQ,gBAAgB,GAAG;AAAA,cAAA,CAC7B;AAAA,cAEA,UAAA;AAAA,gBAAA;AAAA,gBACD;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,IAAI,MAAM,WAAW,OAAO;AAAA,oBAC5B,SAAS,MAAM,WAAW,OAAO;AAAA,oBACjC;AAAA,oBACA,WAAW,QAAQ;AAAA,oBAClB,GAAG;AAAA,kBAAA;AAAA,gBACN;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,IAGF;AAAA,UAED,gBACE,oBAAA,eAAA,EAAc,IAAI,MAAM,WAAW,OAAO,GAAG,eAAa,MACxD,UACH,cAAA,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;"}
+{"version":3,"file":"Radio.js","sources":["../../../src/Radio/Radio.tsx"],"sourcesContent":["import React, { forwardRef, useCallback, useState } from \"react\";\n\nimport { RadioProps as MuiRadioProps } from \"@mui/material/Radio\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseRadio } from \"../BaseRadio\";\nimport {\n  HvWarningText,\n  HvLabelProps,\n  isInvalid,\n  HvFormElement,\n  HvLabel,\n} from \"../Forms\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { setId } from \"../utils/setId\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Radio.styles\";\n\nexport { staticClasses as radioClasses };\n\nexport type HvRadioClasses = ExtractNames<typeof useClasses>;\n\nexport type HvRadioStatus = \"standBy\" | \"valid\" | \"invalid\";\n\nexport interface HvRadioProps\n  extends Omit<MuiRadioProps, \"onChange\" | \"classes\"> {\n  /**\n   * A Jss Object used to override or extend the styles applied to the radio button.\n   */\n  classes?: HvRadioClasses;\n  /**\n   * The form element name.\n   */\n  name?: string;\n  /**\n   * The value of the form element.\n   *\n   * The default value is \"on\".\n   */\n  value?: any;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided.\n   */\n  label?: React.ReactNode;\n  /**\n   * Properties passed on to the label element.\n   */\n  labelProps?: HvLabelProps;\n  /**\n   * Indicates that user input is required on the form element.\n   *\n   * If a single radio button in a group has the required attribute, a radio button in\n   * that group must be check, though it doesn't have to be the one with the attribute is applied.\n   *\n   * For that reason, the component doesn't make any uncontrolled changes to its validation status.\n   * That should ideally be managed in the context of a radio button group.\n   */\n  required?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that the form element 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 status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   */\n  status?: HvRadioStatus;\n  /**\n   * The error message to show when `status` is \"invalid\".\n   */\n  statusMessage?: string;\n  /**\n   * Identifies the element that provides an error message for the radio button.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\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  /** @ignore */\n  ref?: MuiRadioProps[\"ref\"];\n  /** @ignore */\n  component?: MuiRadioProps[\"component\"];\n}\n\n/**\n * A Radio Button is a mechanism that allows user to select just an option from a group of options.\n *\n * It should used in a Radio Button Group to present the user with a range of options from\n * which the user <b>may select just one option</b> to complete their task.\n *\n * Individual use of radio buttons, at least uncontrolled, is unadvised as React state management doesn't\n * respond to the browser's native management of radio inputs checked state.\n */\nexport const HvRadio = forwardRef<HTMLButtonElement, HvRadioProps>(\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      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      \"aria-describedby\": ariaDescribedBy,\n      labelProps,\n      checked,\n      defaultChecked = false,\n      onChange,\n      status = \"standBy\",\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n      semantic = false,\n      inputProps,\n      onFocusVisible,\n      onBlur,\n      ...others\n    } = useDefaultProps(\"HvRadio\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\n    const elementId = useUniqueId(id);\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 [isChecked, setIsChecked] = useControlled(\n      checked,\n      Boolean(defaultChecked)\n    );\n\n    const onLocalChange = useCallback(\n      (evt: React.ChangeEvent<HTMLInputElement>, newChecked: boolean) => {\n        setIsChecked(newChecked);\n\n        onChange?.(evt, newChecked, value);\n      },\n      [onChange, setIsChecked, value]\n    );\n\n    // the error message area will only be created if:\n    // - an external element that provides an error message isn't identified via aria-errormessage AND\n    //   - both status and statusMessage properties are being controlled\n    const canShowError =\n      ariaErrorMessage == null &&\n      status !== undefined &&\n      statusMessage !== undefined;\n\n    const hasLabel = label != null;\n\n    const isStateInvalid = isInvalid(status);\n\n    let errorMessageId: string | undefined;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    const radio = (\n      <HvBaseRadio\n        ref={ref}\n        id={label ? setId(elementId, \"input\") : setId(id, \"input\")}\n        name={name}\n        className={cx(classes.radio, {\n          [classes.invalidRadio]: isStateInvalid,\n        })}\n        disabled={disabled}\n        readOnly={readOnly}\n        onChange={onLocalChange}\n        value={value}\n        checked={isChecked}\n        semantic={semantic}\n        inputProps={{\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-describedby\": ariaDescribedBy,\n          ...inputProps,\n        }}\n        onFocusVisible={onFocusVisibleCallback}\n        onBlur={onBlurCallback}\n        {...others}\n      />\n    );\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        status={status || \"standBy\"}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {hasLabel ? (\n          <div\n            className={cx(classes.container, {\n              [classes.disabled]: disabled,\n              [classes.focusVisible]: !!(focusVisible && label),\n              [classes.invalidContainer]: isStateInvalid,\n            })}\n          >\n            {radio}\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n              className={classes.label}\n              {...labelProps}\n            />\n          </div>\n        ) : (\n          radio\n        )}\n        {canShowError && (\n          <HvWarningText id={setId(elementId, \"error\")} disableBorder>\n            {statusMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}

package/dist/esm/RadioGroup/RadioGroup.js

@@ -49,7 +49,7 @@ const HvRadioGroup = forwardRef(
       ...others
     } = useDefaultProps("HvRadioGroup", props);
     const { classes, cx } = useClasses(classesProp);
-    const elementId = useUniqueId(id, "hvradiogroup");
+    const elementId = useUniqueId(id);
     const [value, setValue] = useControlled(
       valueProp,
       defaultValue !== void 0 ? defaultValue : (